/**
 * Marketing › Process Steps — scoped, token-driven styles.
 * Step numbers come from a CSS counter so they always match document order.
 */

.foundry-process-steps {
	background: var(--wp--preset--color--surface, #f7f7f5);
	color: var(--wp--preset--color--contrast, #1a1a1a);
	padding-block: var(--wp--preset--spacing--2xl, clamp(3rem, 8vw, 6rem));
	padding-inline: var(--wp--preset--spacing--lg, clamp(1.5rem, 4vw, 3rem));
}

.foundry-process-steps__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* ---- Section head ---- */
.foundry-process-steps__head {
	max-width: 720px;
	margin: 0 auto var(--wp--preset--spacing--xl, 3rem);
	text-align: center;
}
.foundry-process-steps__eyebrow {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--sm, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #2563eb);
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
}
.foundry-process-steps__title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--h-2, clamp(2rem, 4vw, 3rem));
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast, #111);
	margin: 0 0 var(--wp--preset--spacing--sm, 1rem);
}
.foundry-process-steps__intro {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1.55;
	color: var(--wp--preset--color--muted, #555);
	margin: 0;
}

/* ---- Steps ---- */
.foundry-process-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: foundry-step;
	display: grid;
	gap: var(--wp--preset--spacing--lg, 2rem);
	grid-template-columns: 1fr;
}
@media (min-width: 700px) {
	.foundry-process-steps__list { grid-template-columns: repeat(2, 1fr); }
	.foundry-process-steps--cols-1 .foundry-process-steps__list { grid-template-columns: 1fr; }
}
/* Desktop columns track the visible step count (emitted as --cols-N from
 * render.php) so the grid never leaves a dead trailing column — 3 steps get 3
 * columns, not 3-of-4. Counts above 4 clamp to 4 and wrap. */
@media (min-width: 1000px) {
	.foundry-process-steps--cols-1 .foundry-process-steps__list { grid-template-columns: 1fr; }
	.foundry-process-steps--cols-2 .foundry-process-steps__list { grid-template-columns: repeat(2, 1fr); }
	.foundry-process-steps--cols-3 .foundry-process-steps__list { grid-template-columns: repeat(3, 1fr); }
	.foundry-process-steps--cols-4 .foundry-process-steps__list { grid-template-columns: repeat(4, 1fr); }
}

.foundry-process-steps__step {
	counter-increment: foundry-step;
}

/* Row layout: normal block flow (not a flex column) so the inline-flex number
 * circle and the body share ONE alignment source — the step's text-align. A
 * theme that centers a step (text-align:center) now centers the number too, with
 * no align-items override needed downstream. The number's bottom margin replaces
 * the old flex gap between it and the body. Timeline/rail set their own display
 * and are unaffected. */
.foundry-process-steps--row .foundry-process-steps__num {
	margin-bottom: var(--wp--preset--spacing--sm, 1rem);
}

.foundry-process-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #2563eb);
	color: var(--wp--preset--color--on-primary, #fff);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	font-weight: 800;
	line-height: 1;
}
.foundry-process-steps__num::before {
	content: counter(foundry-step);
}
/* Icon node: drop the numeral, show the icon in its place. */
.foundry-process-steps__num--icon::before { content: none; }
.foundry-process-steps__num--icon img {
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}

.foundry-process-steps__step-title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast, #111);
	margin: 0 0 var(--wp--preset--spacing--2xs, 0.375rem);
}
.foundry-process-steps__step-text {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--base, 1rem);
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #555);
	margin: 0;
}

/* ---- Per-step meta (optional colored eyebrow above the step title) ---- */
.foundry-process-steps__step-meta {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #2563eb);
	margin: 0 0 var(--wp--preset--spacing--2xs, 0.35rem);
}

/* ===========================================================================
 * Timeline layout (layout = "timeline") — a connected, zig-zag vertical path.
 * Mobile: a single left rail. Desktop (≥760px): steps alternate left/right of
 * a centre line, numbered nodes sitting on it. Row layout above is untouched.
 *
 * The step body is CARDED and the node is vertically centred on the card via a
 * fixed per-step padding var (--foundry-step-pad-b), so the zig-zag renders
 * correctly out of the box — children no longer have to re-card / re-centre it.
 * ======================================================================== */

.foundry-process-steps--timeline .foundry-process-steps__list {
	display: block;
	position: relative;
	max-width: 880px;
	margin-inline: auto;
	padding: 0;
}

/* The connecting line. Mobile: left rail (centred under the 3rem node). */
.foundry-process-steps--timeline .foundry-process-steps__list::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 1.5rem;
	width: 2px;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--wp--preset--color--border, #e2e2e2) 8%,
		var(--wp--preset--color--border, #e2e2e2) 92%,
		transparent
	);
}

.foundry-process-steps--timeline .foundry-process-steps__step {
	/* Fixed (non-clamp) bottom pad so the node-centre calc below is exact. */
	--foundry-step-pad-b: var(--wp--preset--spacing--lg, 2rem);
	display: block;
	position: relative;
	padding-left: 4.25rem;      /* clear the 3rem node + gap on the rail */
	padding-bottom: var(--foundry-step-pad-b);
}
.foundry-process-steps--timeline .foundry-process-steps__step:last-child {
	--foundry-step-pad-b: 0rem;
}

/* Card the step body from tokens — solid surface, hairline border, soft shadow. */
.foundry-process-steps--timeline .foundry-process-steps__step-body {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e2e2e2);
	border-radius: var(--wp--custom--border-radius--lg, 1rem);
	padding: var(--wp--preset--spacing--md, 1.5rem) var(--wp--preset--spacing--lg, 1.75rem);
	box-shadow: var(--wp--custom--shadow--md, 0 14px 34px rgba(0, 0, 0, 0.06));
}

/* Node sits on the rail, vertically centred on the card (accounting for the
 * fixed padding-bottom that sits BELOW the card within the step box). */
.foundry-process-steps--timeline .foundry-process-steps__num {
	position: absolute;
	top: calc(50% - (var(--foundry-step-pad-b, 2rem) / 2));
	left: 0;
	transform: translateY(-50%);
	box-shadow: 0 0 0 6px var(--wp--preset--color--surface, #f7f7f5); /* punch through the line */
}

/* Desktop: centre line + alternating sides. */
@media (min-width: 760px) {
	.foundry-process-steps--timeline .foundry-process-steps__list::before {
		left: 50%;
		transform: translateX(-50%);
	}

	.foundry-process-steps--timeline .foundry-process-steps__step {
		--foundry-step-pad-b: var(--wp--preset--spacing--xl, 3rem);
		width: 50%;
	}

	/* Odd steps → left column, content right-aligned toward the line. */
	.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(odd) {
		left: 0;
		padding-left: 0;
		padding-right: 3.25rem;
		text-align: right;
	}
	.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(odd) .foundry-process-steps__num {
		left: auto;
		right: -1.5rem; /* half the 3rem node spills onto the centre line */
	}

	/* Even steps → right column, content left-aligned. */
	.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(even) {
		left: 50%;
		padding-left: 3.25rem;
		padding-right: 0;
		text-align: left;
	}
	.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(even) .foundry-process-steps__num {
		left: -1.5rem;
	}

	/* Uniform interleave → constant card-to-card cadence. Every step after the
	 * first rises by the same amount (the old mixed +2.5 / -2.5 step-2 special
	 * case produced uneven centre-to-centre gaps). */
	.foundry-process-steps--timeline .foundry-process-steps__step:nth-child(n+2) {
		margin-top: -3rem;
	}
}

/* ===========================================================================
 * Rail layout (layout = "rail") — a SINGLE left vertical rail with all step
 * cards stacked to its right, numbered node dots on the rail, and the per-step
 * meta shown as a colored eyebrow above the title. Token-driven, brand-neutral.
 * (Mirrors the prod .wo-steps / .wo-step design.)
 * ======================================================================== */

.foundry-process-steps--rail .foundry-process-steps__list {
	display: block;
	position: relative;
	max-width: 820px;
	margin-inline: auto;
	padding: 0;
	gap: 0;
}

/* Single left rail down the centre of the node column. */
.foundry-process-steps--rail .foundry-process-steps__list::before {
	content: "";
	position: absolute;
	top: 1.75rem;
	bottom: 1.75rem;
	left: 1.5rem;
	width: 2px;
	background: var(--wp--preset--color--border, #e2e2e2);
	transform: translateX(-50%);
}

.foundry-process-steps--rail .foundry-process-steps__step {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: var(--wp--preset--spacing--md, 1.25rem);
	align-items: center;   /* node centres vertically on its card */
	position: relative;
	padding-block: var(--wp--preset--spacing--sm, 0.85rem);
}

/* Numbered node dot on the rail, halo punches through the line. */
.foundry-process-steps--rail .foundry-process-steps__num {
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 6px var(--wp--preset--color--surface, #f7f7f5);
}

/* Card the body to the right of the rail. */
.foundry-process-steps--rail .foundry-process-steps__step-body {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e2e2e2);
	border-radius: var(--wp--custom--border-radius--lg, 1rem);
	padding: var(--wp--preset--spacing--md, 1.2rem) var(--wp--preset--spacing--lg, 1.5rem);
	box-shadow: var(--wp--custom--shadow--sm, 0 8px 24px rgba(0, 0, 0, 0.05));
}

/* Tighter title in the rail card (the base xl is oversized inside a card). */
.foundry-process-steps--rail .foundry-process-steps__step-title {
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	margin-bottom: var(--wp--preset--spacing--2xs, 0.35rem);
}