/* Process pattern
---------------------------------------------------------------------------- */

.cn-process {
	background: transparent;
	color: var(--cn-text);
}

.cn-process__header {
	align-items: end;
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin-block-end: clamp(2rem, 5vw, 4rem);
}

.cn-process__header > *,
.cn-process__heading > *,
.cn-process__steps > *,
.cn-process-step > * {
	margin: 0 !important;
	max-width: none !important;
}

.cn-process__eyebrow {
	color: var(--cn-accent);
	font-family: var(--cn-font-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.cn-process__title {
	font-size: clamp(2.25rem, 5vw, 4rem);
	letter-spacing: 0;
	line-height: 0.98;
	margin: 0;
	max-width: 11ch;
}

.cn-process__intro {
	align-self: end;
	color: var(--cn-text-muted);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.6;
	margin: 0;
	max-width: 42rem;
}

.cn-process__steps {
	align-items: start;
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cn-process-step {
	align-items: flex-start;
	align-self: start;
	background: transparent;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
	inline-size: 100%;
	margin: 0 !important;
	min-height: 0;
	padding: 0 !important;
	text-align: left;
}

.cn-process-step__number {
	color: var(--cn-accent);
	font-family: var(--cn-font-mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

.cn-process-step__title {
	font-size: clamp(1.55rem, 2.5vw, 2.2rem);
	letter-spacing: 0;
	line-height: 1.05;
	margin: 0;
	text-align: left;
}

.cn-process-step__lead {
	color: var(--cn-text);
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 600;
	line-height: 1.45;
	margin: 0;
	text-align: left;
}

.cn-process-step__body {
	color: var(--cn-text-muted);
	line-height: 1.65;
	margin: 0;
	text-align: left;
}

@media (max-width: 900px) {
	.cn-process__header,
	.cn-process__steps {
		grid-template-columns: 1fr;
	}

	.cn-process__header {
		align-items: start;
	}

	.cn-process__title {
		max-width: 14ch;
	}

	.cn-process-step {
		min-height: 0;
	}
}