/**
 * Pattern: Stats / Impact Row  (patterns/stats-row.php)
 *
 * Figma Home frame 258:2538 — "Our Impact" section. Centered section heading +
 * a 3-up row of stat blocks: brand-colour big number, bold black title, body para.
 * Node refs: heading 258:2620, stats 258:2585–258:2593.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 */

/* ── Section band ──────────────────────────────────────────────────────────── */
.kd-stats-section {
	text-align: center;
	background-color: var(--kd-color-base);
	padding-block: var(--kd-band-pad-y); /* band-internal breathing room */
}

/* ── Section heading — "Our Impact" ────────────────────────────────────────── */
.kd-stats-section__heading {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	/* Figma: 50px. Clamp from 30px (mobile) → 50px (desktop).
	   Single class (0,1,0) ties the theme.json h2 default and wins on order. */
	font-size: clamp(1.875rem, 4vw, 3.125rem);
	color: var(--kd-color-primary) !important; /* Figma exact */
	line-height: 1.1;
	text-transform: capitalize;
	margin: 0 0 var(--kd-space-lg); /* 40px heading → grid */
}

/* ── 3-column stat grid ─────────────────────────────────────────────────────
   layout:default on the group = is-layout-flow, but we override to grid.
   WP's :where(.is-layout-flow) > * adds margin-block-start to non-first
   children — zeroed on .kd-stats-grid > * below.
   Columns: cap each at 20rem (320px, matching the Figma 320px para width)
   and centre the trio. */
.kd-stats-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 20rem));
	justify-content: center;
	gap: var(--kd-space-xl) var(--kd-space-lg) !important; /* 64px row / 40px col */
	margin: 0 auto !important;
	width: 100% !important;
}

/* Zero WP's is-layout-flow child margin so the grid gap drives spacing. */
.kd-stats-grid > * {
	margin-block: 0 !important;
}

/* ── Individual stat item — vertical flex stack ────────────────────────────── */
.kd-stat-item {
	align-items: center !important;
}

/* WP flex layout zeroes child margins — use gap or explicit margins with
   !important to restore spacing between number / title / para. */
.kd-stat-item.wp-block-group {
	gap: 0 !important; /* spacing via explicit element margins below */
}

/* ── Big Number ─────────────────────────────────────────────────────────────
   Figma: Montserrat Black 40px, brand blue, line-height 50px (1.25).
   Clamp from 28px (mobile) → 40px (desktop). */
.kd-stat-item__number {
	font-family: var(--kd-font-heading) !important;
	font-weight: var(--kd-fw-heading) !important;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important; /* 28→40px */
	line-height: 1.25 !important; /* 50/40 — Figma */
	color: var(
		--wp--preset--color--primary
	) !important; /* #0974bc — Figma exact */
	margin: 0 0 var(--kd-gap-tight) !important; /* 8px number → title */
}

/* ── Stat Title ─────────────────────────────────────────────────────────────
   Figma: Montserrat Black 22px, #000000, tracking 1px, line-height 34px (1.545). */
.kd-stat-item__title {
	font-family: var(--kd-font-heading) !important;
	font-weight: var(--kd-fw-heading) !important;
	font-size: 1.375rem !important; /* 22px — Figma exact */
	line-height: 1.545 !important; /* 34/22 — Figma */
	letter-spacing: 1px; /* Figma tracking */
	color: var(--kd-color-neutral-900) !important; /* #18181B ≈ Figma #000 */
	margin: 0 0 var(--kd-gap-normal) !important; /* 12px title → para */
}

/* ── Stat Paragraph ─────────────────────────────────────────────────────────
   Figma: Inter Medium 16px, #000000, line-height 26px (1.625), width 320px. */
.kd-stat-item__desc {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body); /* 16px */
	font-weight: 500; /* Inter Medium — Figma */
	line-height: 1.625; /* 26/16 — Figma */
	color: var(--kd-color-neutral-900); /* #18181B ≈ Figma #000 */
	max-width: 20rem; /* 320px — Figma para width */
	margin: 0 auto !important; /* centres within the column */
}

/* ── Tablet (≤1024px) — tighten column gap ──────────────────────────────── */
@media (max-width: 1024px) {
	.kd-stats-grid {
		gap: var(--kd-space-lg) var(--kd-space-md) !important; /* 40px / 24px */
	}

	.kd-stats-section__heading {
		font-size: clamp(1.625rem, 4vw, 2.5rem) !important;
	}
}

/* ── Mobile (≤768px) — single column ───────────────────────────────────────
   Stats stack 1-up; each block centred; max-width matches Figma para width. */
@media (max-width: 768px) {
	.kd-stats-grid {
		grid-template-columns: 1fr !important;
		max-width: 20rem; /* 320px — each card no wider than its para */
		gap: var(--kd-space-xl) 0 !important; /* 64px between stacked stats */
	}

	.kd-stats-section__heading {
		font-size: clamp(1.5rem, 6vw, 1.875rem) !important;
	}

	.kd-stat-item__number {
		font-size: clamp(1.5rem, 6vw, 2rem) !important;
	}
}