/**
 * Pattern: Values Row — Icon Card Row (patterns/values-row.php)
 *
 * One pattern, three consumer variants via modifier classes on `.blg-values-row`:
 *   - `.blg-values-row--3up` (default, this file's base composition) — Home "What We Do",
 *     Figma 9:384. 3 columns, Cloud-surface (#F2F8FB) cards, centered content.
 *   - `.blg-values-row--4up` — Join "What membership does for you", Figma 6:70. 4 columns,
 *     white cards + neutral-300 hairline border (needed for definition on a white page bg).
 *   - `.blg-values-row--4up.blg-values-row--plain` — About "What We Believe", Figma 6:511.
 *     Same 4 columns, but no per-item card box (transparent bg/border) and left-aligned
 *     content — matches the Figma node exactly when the whole pattern sits on a full-bleed
 *     Cloud/surface section.
 *
 * Card widths are DERIVED from the shared --blg-composition var (same source as the
 * 3-card grid / split measure), not asserted, so a 3-up and 4-up row can never drift from
 * the site's one content column.
 *
 * Figma type spec (Figma-analysis token table, 2026-08-20) diverges from theme.json's
 * blanket `h2 { font-weight: 900 }` / `h3 { font-weight: 900 }` element styles — Figma's
 * variable collection binds H2 to Raleway ExtraBold (800) and H3 to Raleway Bold (700), not
 * Black (900). Overridden locally here (own scoped classes, not a theme.json edit) for
 * pixel-match; flagged in the build-tracker handoff as a shared-file discrepancy other
 * pattern builders may want to weigh in on.
 */

/* ── Section header (eyebrow + H2) ────────────────────────────────────────────
   NOT the shared blg/section-header component — that component caps its measure
   at 36rem, but these H2s run ~800–900px wide in Figma. Own measure + spacing. */

.blg-values-row__header {
	text-align: center;
	max-width: var(
		--blg-measure-grid
	); /* 1224px cap — matches the card row below */
	margin: 0 auto var(--blg-gap-section); /* 40px — section header → content */
}

/* Eyebrow — morning-r6: unified to the split pattern's exact spec (Alain:
   "I like the Why B Local weight") — Raleway/heading-font Black (900), not
   Figma's literal "Inter Semi Bold" callout. Was font-family:body/600, which
   read visibly lighter than .kd-split__eyebrow's Raleway 900 site-wide;
   restyled here (not inherited) since bare .kd-eyebrow carries no rules
   outside a scoped consumer. */
.blg-values-row__header .kd-eyebrow {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-eyebrow); /* 14px */
	line-height: 1.43;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.5rem;
}

.blg-values-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 ──────────────────────────────────────────────────────────────── */

.blg-values-row {
	display: grid;
	gap: var(--blg-space-md); /* 24px */
	margin: 0 auto;
}

/* .blg-values-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-values-row > * {
	margin-block: 0 !important;
}

.blg-values-row--3up {
	grid-template-columns: repeat(3, minmax(0, var(--blg-card-w)));
	justify-content: center;
}

.blg-values-row--4up {
	/* 4 columns derived from the same content-column composition as the 3-up
	   row: (1224 − 3 gaps) / 4. Keeps the two variants sharing one source of truth. */
	grid-template-columns: repeat(
		4,
		minmax(0, calc((var(--blg-composition) - 3 * var(--blg-space-md)) / 4))
	);
	justify-content: center;
}

/* ── Card ──────────────────────────────────────────────────────────────────
   Default (3-up + 4-up white-card variants): Cloud-surface bg, no border. The
   4-up white-card variant overrides bg to white + adds the hairline below. */
.blg-values-row__card {
	background-color: var(--wp--preset--color--surface); /* Cloud #F2F8FB */
	border-radius: var(
		--blg-radius-card
	); /* Figma token spec: card radius = 16 */
	padding: 2rem; /* ~32px — Figma-measured card inset */
	text-align: center;
	align-items: center;
}

/* 4-up white-card (Join, 6:70): white bg + neutral-300 hairline — needed for
   definition since the card no longer contrasts against a white page bg. */
.blg-values-row--4up:not(.blg-values-row--plain) .blg-values-row__card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--neutral-300);
}

/* Full-bleed band housing ANY values-row variant (3-up Home "What We Do",
   4-up Join "Why Join", 4-up --plain About "What We Believe"):
   `.kd-section { padding-block: 0 }` (global.css) resets ALL sections to zero
   vertical padding by design — "banded sections set their own padding-block in
   their pattern partials" (global.css comment) — but nothing here ever did, so
   the band butted flush against the section/hero above with no breathing room
   (morning-r6: Home's "What We Do" was flush against the hero — Home's
   front-page hero-clearance rule deliberately excludes alignfull first
   children, and this band is alignfull, so it got zero top clearance from
   anywhere; About's --plain variant was the only one with its own padding).
   Figma get_design_context on 6:511 (About) gives the band's own inset as
   `py-[96px]` = 6rem = theme.json spacing step 70 — generalized to every
   variant per the morning-r6 brief (one consistent band rhythm, not
   independently re-measured per Figma node for the 3-up/4up-white variants).
   Was scoped to `:has(.blg-values-row--plain)` only; widened to the bare
   `.blg-values-row-section` class so Home/Join get the same treatment.
   NOTE: Join is an interior-hero page where this band is the page's FIRST
   section — global.css's hero-clearance owl rule now excludes
   `.blg-values-row-section` from its own external margin-top specifically so
   this internal padding is the ONLY top clearance there (not additive) — see
   the `:not(.blg-values-row-section)` exclusion in global.css. */
.kd-section.blg-values-row-section {
	padding-block: var(
		--wp--preset--spacing--70
	); /* 96px — pixel-verified vs 6:511, generalized */
}

/* 4-up plain/band (About, 6:511): no card box at all, left-aligned content —
   matches the Figma node when the row sits on a full-bleed Cloud section. */
.blg-values-row--plain .blg-values-row__card {
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	text-align: left;
	align-items: flex-start;
}

.blg-values-row--plain .blg-values-row__card .blg-icon {
	margin-left: 0;
}

/* Icon — 56px Sky Cyan circle. Real FA glyphs landed morning-r1 (2026-08-21,
   kit 9a923de0b7) — was display:block with an empty span; now flex-centers the
   `<i>` glyph inside. */
.blg-values-row__card .blg-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent); /* Sky Cyan */
	margin: 0 auto 1.25rem;
}

/* Shared FA glyph rule — deliberately UNSCOPED (not `.blg-values-row__card
   .blg-icon i`) so every `.blg-icon` circle theme-wide picks it up for free,
   incl. blg/local-help's cards (assets/css/patterns/local-help.css owns that
   pattern's own circle box, not the glyph) — one source of truth per the
   morning-r1 brief ("one shared-icon rule"), values-row.css is the file that
   already owns `.blg-icon`'s circle so it owns this too. White glyph on the
   Sky Cyan bg, ~28px per morning-r3 bump (was 24px, read small in the 56px
   circle) — decorative only (card titles carry the meaning), aria-hidden in
   the markup.

   morning-r3: the FA kit swaps `<i>` for `<svg class="svg-inline--fa">` at
   runtime (Font Awesome JS/SVG mode), so `.blg-icon i` never matched the
   real rendered DOM — glyphs inherited dark body-copy color and stayed
   small. Confirmed via computed-style read on the live site that the
   rendered node is `svg.svg-inline--fa`; FA's svg sizes itself via
   height/width em units (not font-size) and colors via `fill`/currentColor,
   not `color` alone — target both `i` (no-JS fallback) and `svg` (real
   runtime node). */
.blg-icon i,
.blg-icon svg {
	color: var(--wp--preset--color--base); /* white */
	fill: var(
		--wp--preset--color--base
	); /* FA svg glyph fill (currentColor path) */
	font-size: 1.75rem; /* 28px — i fallback */
	line-height: 1;
}

.blg-icon svg {
	height: 1.75rem; /* 28px — FA svg sizes via height/width em units, not font-size */
	width: auto;
}

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

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

/* ── Tablet (≤1024px) — 2 columns for both variants ─────────────────────────── */

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

	/* Tighten the band inset at tablet — same 96→64px step cta-band.css uses
	   for its own tablet tightening (spacing 70→60), no Figma mobile frame to
	   pixel-match against so this is judgment-call, not measured. Generalized
	   to every variant (morning-r6), was --plain-only. */
	.kd-section.blg-values-row-section {
		padding-block: var(--wp--preset--spacing--60);
	}
}

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

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

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

	.blg-values-row--plain .blg-values-row__card {
		padding: 0;
	}
}