/**
 * PP Stat Highlights.
 *
 * Reuses the .row-col grid shell from build/main.css for layout (the .flex-wrapper row and
 * 1/3-width .block columns are inherited). Overrides are scoped with the block's own class
 * added — `section.row-col.pp-stat-highlights ...` — so each one matches/exceeds the
 * specificity of the source `section.row-col ...` rule it overrides (assets/scss/site/_sections.scss)
 * and reliably wins the cascade. Scoping to .pp-stat-highlights also means NO other
 * .row-col section on the site is affected.
 *
 *   - neutral light surface instead of .row-col's solid green ($primary #678849);
 *   - dark, legible heading + copy (row-col defaults both to white);
 *   - normal-weight, non-italic, dark labels with no yellow underline
 *     (row-col styles the label h3 as italic EB Garamond in yellow with an underline).
 * New element: .pp-stat__value — a large number sized off the heading scale, coloured via .t-green.
 */

/* Neutral light surface. Overrides `section.row-col { background:#678849 }` (_sections.scss:296-297). */
section.row-col.pp-stat-highlights {
	background: #f3f2f2; /* $dg-8 */
	background-image: none;
}

/* Dark, legible heading. Overrides `section.row-col h2.section-title { color:#fff }` (_sections.scss:333-336). */
section.row-col.pp-stat-highlights h2.section-title {
	color: #172402;
}

/* Dark body copy. Overrides `section.row-col div.flex-wrapper div.block { color:#fff }` (_sections.scss:355-358). */
section.row-col.pp-stat-highlights div.flex-wrapper div.block {
	color: #615d59; /* $dark-gray */
	padding: 1rem;
}

/* Labels: keep the live "Why Peacock?" homepage treatment — italic EB Garamond serif with
   a gold underline (from `section.row-col div.flex-wrapper div.block h3` / :after,
   _sections.scss:367-386). font-family and font-style are intentionally NOT overridden here
   so that base rule's `"EB Garamond", serif; italic` shows through. We override ONLY the
   colour: the homepage uses $yellow #DAC858, which fails contrast on this light-gray surface
   (1.52:1), so recolour to a legible dark gold #8B6914 (4.55:1, WCAG AA) — same gold family,
   just darkened for the light background. */
section.row-col.pp-stat-highlights div.flex-wrapper div.block h3 {
	color: #8B6914;
	margin: 0.25rem 0 0.75rem;
}

/* Recolour the underline flourish to match the legible gold (base sets it to #DAC858). */
section.row-col.pp-stat-highlights div.flex-wrapper div.block h3:after {
	border-bottom-color: #8B6914;
}

/* New element: the stat value. Colour comes from .t-green (#678849) on the span. */
.pp-stat__value {
	display: block;
	margin-bottom: 0.25rem;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
}