/* ==========================================================================
   Million Dots — Process
   Dark band over a faded photo. A dashed road lane runs behind the markers:
   vertical on small screens, horizontal once the steps sit in a row.
   ========================================================================== */

.mdc-process {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.mdc-process__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.16;
}

.mdc-process__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mdc-process__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--scrim--process);
}

.mdc-process__head {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* --- Steps ---------------------------------------------------------------- */
.mdc-process__steps {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--70) var(--wp--custom--layout--grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	--mdc-lane-angle: 180deg;
}

.mdc-process__steps::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 26px;
	bottom: 26px;
	left: 25px;
	width: var(--wp--custom--lane--thickness);
	background-image: repeating-linear-gradient(
		var(--mdc-lane-angle, 90deg),
		var(--wp--custom--lane--color) 0 var(--wp--custom--lane--dash),
		transparent var(--wp--custom--lane--dash) calc(var(--wp--custom--lane--dash) + var(--wp--custom--lane--gap))
	);
	opacity: 0.55;
}

.mdc-process__step {
	position: relative;
	z-index: var(--wp--custom--z-index--base);
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--50);
	align-items: start;
	margin: 0;
}

.mdc-process__marker {
	display: grid;
	place-items: center;
	grid-row: 1 / span 2;
	width: 52px;
	height: 52px;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--weight--bold);
	color: var(--wp--preset--color--base);
	box-shadow: 0 0 0 8px var(--wp--preset--color--contrast);
}

.mdc-process__step h3 {
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--heading-four);
}

.mdc-process__step p {
	margin: 0;
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--ink-invert-muted);
}

/* --- Call to action ------------------------------------------------------- */
.mdc-process__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--custom--color--border-dark);
}

.mdc-process__cta p {
	flex: 1 1 260px;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--ink-invert-muted);
}

/* --- Responsive ----------------------------------------------------------- */
@media (min-width: 860px) {
	.mdc-process__steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		--mdc-lane-angle: 90deg;
	}

	.mdc-process__steps::before {
		top: 25px;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: var(--wp--custom--lane--thickness);
	}

	.mdc-process__step {
		display: block;
	}

	.mdc-process__marker {
		margin-bottom: var(--wp--preset--spacing--50);
	}

	.mdc-process__step h3 {
		margin-top: 0;
	}
}