/**
 * Pattern: Steps Row — Numbered Step Cards (patterns/steps-row.php)
 *
 * Figma source: node 6:71 (Join "Three steps to certified"). Full-bleed Cloud/surface
 * band, centered eyebrow + H2, 3 equal-height white cards (radius 16). Card 1 carries a
 * primary pill CTA + small caption; cards 2/3 have no CTA and simply stretch to match
 * card 1's height (CSS Grid's default row-stretch behavior) — the equal-height fix noted
 * in the build-tracker as an explicit design decision, not incidental.
 *
 * Same H2/H3 weight override as values-row.css: Figma's type spec binds H2 to Raleway
 * ExtraBold (800) and H3 to Raleway Bold (700), not theme.json's blanket 900 — overridden
 * locally for pixel-match, flagged in the tracker handoff as a shared-file discrepancy.
 */

.blg-steps-row-section {
	padding-block: var(
		--blg-band-pad-y
	); /* 56 → 88px internal breathing room */
}

/* ── Section header (eyebrow + H2) — same treatment as values-row.css ───────── */

.blg-steps-row__header {
	text-align: center;
	max-width: var(--blg-measure-grid);
	margin: 0 auto var(--blg-gap-section); /* 40px — section header → content */
}

/* morning-r6: font-family/weight unified to .kd-split__eyebrow's exact spec
   site-wide (Raleway 900 — Alain's picked "Why B Local" weight). Was
   Inter/600. */
.blg-steps-row__header .kd-eyebrow {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-eyebrow);
	line-height: 1.43;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.5rem;
}

.blg-steps-row__heading {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-h2-section) !important; /* shared section scale */
	line-height: var(--blg-lh-h2-section);
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

/* ── Row grid — equal-height cards ────────────────────────────────────────────
   Grid rows auto-size to the tallest cell and stretch every item to fill it
   (default align-items:stretch) — that IS the equal-height mechanism. No
   min-height hack needed, and no fragile JS. Card 1's extra CTA/caption content
   makes it the tallest; cards 2/3 stretch to match with blank space below,
   matching the Figma node exactly. */
.blg-steps-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, var(--blg-card-w)));
	gap: var(--blg-space-md);
	justify-content: center;
	align-items: stretch;
}

/* .blg-steps-row is is-layout-flow (a type:default group) rendered AS a grid. WP's
   flow rule — :where(.is-layout-flow) > * — adds margin-block-start (= the block-gap)
   to every NON-first child, offsetting cards 2+ downward. The grid `gap` owns all
   spacing → zero the flow margins on grid items (same fix as card-grid.css). */
.blg-steps-row > * {
	margin-block: 0 !important;
}

.blg-steps-row__card {
	background-color: var(--wp--preset--color--base);
	border-radius: var(
		--blg-radius-card
	); /* Figma token spec: card radius = 16 */
	padding: 2rem;
	height: 100%;
	box-sizing: border-box;
}

.blg-steps-row__card .blg-steps-row__numeral {
	font-family: var(--blg-font-heading);
	font-weight: 900; /* Raleway Black — Figma-specified explicitly for the numeral only */
	font-size: 3.375rem; /* 54px */
	line-height: 1;
	color: var(--wp--preset--color--primary); /* Georgia Blue */
	margin: 0 0 var(--blg-space-xs);
}

.blg-steps-row__card .blg-steps-row__title {
	font-family: var(--blg-font-heading);
	font-weight: 700; /* Raleway Bold — Figma Heading/H3 */
	font-size: 1.5rem; /* 24px */
	line-height: 1.33;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 var(--blg-gap-tight);
}

.blg-steps-row__card .blg-steps-row__text {
	font-family: var(--blg-font-body);
	font-weight: 400;
	font-size: var(--blg-size-body);
	line-height: 1.6;
	color: var(--blg-color-body);
	margin: 0;
}

.blg-steps-row__card .blg-steps-row__cta {
	margin-top: var(--blg-space-md);
}

.blg-steps-row__card .blg-steps-row__caption {
	margin-top: var(--blg-gap-tight);
	font-size: var(--blg-size-xs); /* 14px */
	color: var(--blg-color-neutral-500);
}

/* ── Tablet (≤1024px) — 2 columns; card 3 wraps to its own row ──────────────── */

@media (max-width: 1024px) {
	.blg-steps-row {
		grid-template-columns: repeat(2, minmax(0, 18rem)) !important;
	}
}

/* ── Mobile (≤767.98px) — 1 column ───────────────────────────────────────────── */

@media (max-width: 767.98px) {
	.blg-steps-row {
		grid-template-columns: minmax(0, 22rem) !important;
		justify-content: center;
	}

	.blg-steps-row__card {
		padding: 1.5rem;
	}

	.blg-steps-row__card .blg-steps-row__numeral {
		font-size: 2.75rem;
	}
}