/* ============================================================
   STAT CARDS IN THE BODY

   The campaign results (#pv-ch5) and the results chapter
   (#pv-results-evidence) were paragraphs of numbers. Nobody reads
   a paragraph of numbers; they read the numbers. These put the
   figures in the same voice as the hero's .pv-results — sans 600,
   tabular, a sentence-case label — so the page says
   "this is a result" in one style from top to bottom.

   .pv-chapter is a multi-column container, so the group leaves the
   column flow with column-span, the same way figures and quotes do.
   .is-two for the campaigns, .is-three for the results.
   ============================================================ */

.cs-body .pv-chapter .cs-stats {
  column-span: all;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px clamp(24px, 4vw, 56px);
  margin: 8px 0 48px;
  text-align: center;
}

.cs-body .pv-chapter .cs-stats.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Centred, no rules: the space between cards does the separating.
   Each card spans three rows of the parent grid and shares them through
   subgrid, so a label that wraps to two lines pushes every number in the
   row down together and the figures stay on one line across. */
.cs-stats .cs-stat {
  min-width: 0;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  justify-items: center;
}

/* .cs-body .pv-chapter p sets text-align: left, which beats the
   inherited centre; restate it on the card's own paragraphs. */
.cs-body .pv-chapter .cs-stat p { text-align: center; }

/* Sentence case, on request: no uppercase titles. */
.cs-body .pv-chapter .cs-stat-label {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0;
}

.cs-body .pv-chapter .cs-stat-value {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-wrap: balance;
  margin: 10px 0 8px;
}

.cs-body .pv-chapter .cs-stat-line {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 24ch;
  text-wrap: balance;
  margin: 0;
}

/* the one sentence the cards need, centred under them */
.cs-body .pv-chapter .cs-stats-note {
  grid-column: 1 / -1;
  text-align: center;
  text-wrap: balance;
  max-width: 52ch;
  margin: 16px auto 0;
}

/* the note can also follow the cards as its own paragraph */
.cs-body .pv-chapter .cs-stats + .cs-stats-note {
  column-span: all;
  display: block;
  margin: 0 auto;
}

/* three across stacks on a phone; two across still fits */
@media (max-width: 620px) {
  .cs-body .pv-chapter .cs-stats.is-three { grid-template-columns: 1fr; gap: 28px; }
  .cs-body .pv-chapter .cs-stats { margin: 0 0 36px; column-gap: 18px; }
}