/**
 * Pattern: Values 3-column  (P9)  —  patterns/values-row.php
 *
 * "Working together" section on the About page. Full NHC re-skin: the old file
 * (pink band, 560px min-height, clamp() sizes, Montserrat, purple blobs, ~10
 * !important) is stripped entirely. This is the Gracie comp.
 *
 * Design source (file g3BMymX7x188yz0AGwEMkL, About frame 2:823):
 *   Section heading  2:989  "Working together"   Public Sans Medium 30/46 #900000
 *   Col 1 heading    2:990  "Embrace change"      Public Sans Medium 22/46 #900000
 *   Col 2 heading    2:991  "Be ready to evolve"       "        "     22/46 #900000
 *   Col 3 heading    2:992  "Govern with confidence"   "        "     22/46 #900000
 *   Col bodies       2:982/983/984                Inter Regular 16/24 #000
 *
 * BAND vs CREAM: this row sits on the PAGE background (#fffefa) — there is no
 * band rectangle behind it in the comp. Headings therefore stay MAROON (#900000)
 * and body stays black. Nothing is scoped white; the global h2 is NOT touched.
 *
 * Geometry (1440 canvas): 3 equal columns inside the 1216 content column at
 * x = 112 / 528 / 936 → repeat(3,1fr). Column left-edges 416px/408px apart ⇒
 * ~24px gaps between ~390px columns = `repeat(3,minmax(0,1fr))` + 24px gap.
 *
 * Type mapping: the section heading is a real <h2> (30px = --kd-size-h2, exact) and
 * inherits theme.json's H2 (Public Sans Medium 30/46 maroon) untouched. The column
 * headings are 22px in the comp — OFF the flat Gracie scale (15/16/17/20/30/36) —
 * mapped to the nearest token (20px --kd-size-h3), same call made for P4's 22px
 * heading. See handoff flags.
 *
 * Every value references a --kd-* token; section rhythm defers to .kd-section
 * (owl / --kd-section-gap). No !important. Namespace: .kd-values* (distinct from
 * P3 .kd-mediasplit*, P4 .kd-logo-strip*, P7 .kd-ctaband*). SQUARE design — no
 * radius/rounded element exists in this row.
 */

/* ── Section heading → columns rhythm ────────────────────────────────────────
   .kd-values__title is a real <h2> (inherits Public Sans Medium 30/46 maroon
   from theme.json — no font override). Only the gap down to the column row is
   set here: --kd-gap-section (40px, "section header → content"). */
.kd-values__title {
	margin-bottom: var(--kd-gap-section); /* 40px — heading → columns */
}

/* ── 3-column grid ───────────────────────────────────────────────────────────
   The wp:group is layout:default (is-layout-flow). We render it as an explicit
   grid. `3` is a genuine structural literal (the comp's fixed column count), not
   a design value. minmax(0,1fr) keeps a long word from blowing the track past
   the container (guards against h-scroll). Gap = --kd-space-md (24px). */
.kd-values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* structural: 3 fixed columns */
	gap: var(--kd-space-md); /* 24px column gap (comp ~23–24px) */
}

/* Neutralise WP flow block-gap margins on the grid items (0-specificity :where
   rule loses to this 0,1,0 selector — no !important needed). */
.kd-values__grid > * {
	margin-block: 0;
}

/* ── Single column: heading + body stack ─────────────────────────────────── */
.kd-values__col {
	display: flex;
	flex-direction: column;
}

.kd-values__col > * {
	margin-block: 0;
}

/* ── Column heading (<h3>) ───────────────────────────────────────────────────
   Comp: Public Sans Medium 22px maroon. theme.json h3 default is SemiBold-600
   BLACK 20px, so this locally re-points weight + colour (size 20px already
   matches the mapped token). LOCAL scope only — the global h3 is untouched.
   font-weight:500 mirrors theme.json's own inline heading weight for h1/h2
   (no --kd-fw-medium token exists — flagged as a token candidate). */
.kd-values__col-heading {
	font-size: var(--kd-size-h3); /* 20px — comp 22px mapped to nearest token (see flags) */
	font-weight: var(--kd-fw-medium); /* Public Sans Medium — matches h1/h2; overrides h3's 600 */
	line-height: var(--kd-lh-mid); /* 1.3 — h3/h4 line-height token */
	color: var(--kd-color-secondary); /* maroon #900000 — overrides h3's black */
	margin-bottom: var(--kd-gap-tight); /* 8px — heading → body */
}

/* ── Column body (<p>) ───────────────────────────────────────────────────────
   Inter Regular 16/24 black = the root default (theme.json styles.typography +
   body-ink). Set explicitly so the column reads correctly regardless of any
   inherited context; all three values are tokens. */
.kd-values__col-body {
	font-size: var(--kd-size-body); /* 16px */
	line-height: var(--kd-lh-body); /* 1.5 → 24px */
	color: var(--kd-color-body); /* black */
}

/* ── Mobile (<768) — stack to 1 column ───────────────────────────────────────
   No mobile frame exists for this row (derived per D1: stack). 3-up holds down
   to 768 (short text columns); below 768 the columns stack full-width with a
   comfortable vertical gap. 20px gutter + h2→24px come from tokens.css globally.
   Overrides only this file's own base rule (same specificity, later source
   order) — no !important. */
@media (max-width: 767.98px) {
	.kd-values__grid {
		grid-template-columns: 1fr;
		gap: var(--kd-space-lg); /* 40px between stacked value items */
	}
}