/**
 * upcomer/numbered-step-grid
 *
 * Ordered sequence of bordered step cards numbered 1..N. Sibling of
 * upcomer/icon-card-grid; both render bordered cards with side accent + heading
 * + body, but this block has ordering semantics (uses <ol>) and a number badge
 * in place of an icon.
 *
 * Self-adjusting grid (no `columns_desktop` field) — render.php derives a
 * balanced desktop column count from the step count and passes it in via the
 * `--step-grid-columns` custom property. Three across reads best, so that is
 * the cap: 4 → 2×2; 5 → 3+2; 6 → 3+3; 8 → 3+3+2. Counts that would still leave
 * a single card (7, 10, 13 …) get the `step-grid--center-last` modifier, which
 * centers that trailing card instead of orphaning it.
 *
 * No-new-colors compliance (CLAUDE.md → Design conventions):
 *  - Card surface, border, and muted body text all derive from `currentColor`
 *    via `color-mix`. The numeric badge ink is `currentColor` at full strength,
 *    its background is the same low-opacity tint as the card.
 *
 * Outer vertical rhythm comes from --upcomer-block-rhythm in
 * assets/css/blocks-canvas.css. Don't add `margin-block` or `padding-block`
 * here — the canvas rule handles symmetric spacing across all blocks.
 */

.upcomer-block--numbered-step-grid {
	/* Surfaces */
	--step-card-bg: color-mix(in srgb, currentColor 3%, transparent);
	--step-card-border: color-mix(in srgb, currentColor 14%, transparent);
	--step-card-border-hover: color-mix(in srgb, currentColor 28%, transparent);
	--step-badge-bg: color-mix(in srgb, currentColor 8%, transparent);

	/* Foreground */
	--step-fg: inherit;
	--step-fg-muted: color-mix(in srgb, currentColor 72%, transparent);

	/* Geometry */
	--step-card-padding: clamp(1.25rem, 2vw, 1.75rem);
	--step-card-gap: clamp(1rem, 2vw, 1.5rem);
	--step-badge-size: clamp(2rem, 3.5vw, 2.5rem);
	--step-badge-gap: clamp(0.875rem, 1.5vw, 1.125rem);

	/* Shared content column with the rest of the site (matches gamurs footer). */
	--page-hero-content-max: calc(1px * var(--wp--custom--bottom-nav--container--desktop--max-width, 1200));

	color: var(--step-fg);
	box-sizing: border-box;
}

.upcomer-block--numbered-step-grid *,
.upcomer-block--numbered-step-grid *::before,
.upcomer-block--numbered-step-grid *::after {
	box-sizing: border-box;
}

/* ---- Content column --------------------------------------------------- */

.upcomer-block--numbered-step-grid .upcomer-block__inner {
	max-width: var(--page-hero-content-max);
	margin-inline: auto;
}

@media (min-width: 992px) and (max-width: 1248px) {
	.upcomer-block--numbered-step-grid .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--latpop--max-width, 1200));
	}
}

@media (max-width: 991px) {
	.upcomer-block--numbered-step-grid .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--mobile--max-width, 720));
		/* Match the gamurs site-wide mobile gutter (theme.css uses 15px). */
		padding-inline: 15px;
	}
}

/* ---- Eyebrow ---------------------------------------------------------- */

.upcomer-block--numbered-step-grid .upcomer-block__eyebrow {
	max-width: 36rem;
	margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
}

.upcomer-block--numbered-step-grid .upcomer-block__kicker {
	margin: 0 0 0.5rem;
	font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--step-fg-muted);
}

.upcomer-block--numbered-step-grid .upcomer-block__heading {
	margin: 0;
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: clamp(1.75rem, 3.75vw, 2.75rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* ---- Grid (balanced, self-adjusting) ---------------------------------- */

/*
 * Column count comes from render.php via `--step-grid-columns` (chosen so the
 * last row balances, capped at 3). Falls back to 3 if the property is missing.
 */
.upcomer-block--numbered-step-grid .step-grid {
	display: grid;
	grid-template-columns: repeat(var(--step-grid-columns, 3), minmax(0, 1fr));
	gap: var(--step-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none; /* numbering comes from PHP, not CSS counter */
}

/*
 * Desktop: a few counts (7, 10, 13 …) can't balance at three columns and leave
 * a single card on the last row. render.php flags those with
 * `step-grid--center-last`; center that card at one-column width so it reads as
 * intentional rather than orphaned.
 */
@media (min-width: 992px) {
	.upcomer-block--numbered-step-grid .step-grid--center-last > .step:last-child {
		grid-column: 1 / -1;
		max-width: calc((100% - (var(--step-grid-columns) - 1) * var(--step-card-gap)) / var(--step-grid-columns));
		margin-inline: auto;
	}
}

/*
 * Tablet: collapse to two columns. An odd number of steps would leave a lone
 * card on the last row, so center it — an orphan that reads as intentional.
 */
@media (min-width: 600px) and (max-width: 991px) {
	.upcomer-block--numbered-step-grid .step-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.upcomer-block--numbered-step-grid .step-grid > .step:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: calc((100% - var(--step-card-gap)) / 2);
		margin-inline: auto;
	}
}

/* Mobile: single column — a simple ordered list, never orphaned. */
@media (max-width: 599px) {
	.upcomer-block--numbered-step-grid .step-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Step card -------------------------------------------------------- */

.upcomer-block--numbered-step-grid .step {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--step-badge-gap);
	align-items: start;
	margin: 0;
	padding: var(--step-card-padding);
	background: var(--step-card-bg);
	border: 1px solid var(--step-card-border);
	border-radius: 2px;
	transition: border-color 200ms ease;
}

.upcomer-block--numbered-step-grid .step:hover {
	border-color: var(--step-card-border-hover);
}

/* ---- Number badge ----------------------------------------------------- */

.upcomer-block--numbered-step-grid .step__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--step-badge-size);
	height: var(--step-badge-size);
	flex-shrink: 0;
	margin-block-start: 0.0625rem; /* optical alignment with heading cap-height */
	background: var(--step-badge-bg);
	border-radius: 999px;
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	color: var(--step-fg);
	font-variant-numeric: tabular-nums;
}

/* ---- Content column --------------------------------------------------- */

.upcomer-block--numbered-step-grid .step__content {
	min-width: 0;
}

.upcomer-block--numbered-step-grid .step__heading {
	margin: 0 0 0.5rem;
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--step-fg);
}

.upcomer-block--numbered-step-grid .step__body {
	margin: 0;
	font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--step-fg-muted);
	text-wrap: pretty;
}

.upcomer-block--numbered-step-grid .step__body em {
	font-style: italic;
	color: inherit;
}

.upcomer-block--numbered-step-grid .step__body strong {
	font-weight: 700;
	color: currentColor;
}

/* ---- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.upcomer-block--numbered-step-grid .step {
		transition: none;
	}
}