/* ==========================================================================
   OUR IMPACT — assets/css/pages/impact.css
   Loaded on templates/page-impact.php.

   Hero, prose, panel, quick-link tiles and the CTA come from components.css.
   New here: the stats band, the four strands, and the income breakdown.
   ========================================================================== */

/* --- Stats band --------------------------------------------------------- */
/* The figures anchor the page, so they lead rather than sitting low down.
   Serif for the numerals — this is one of the prestige moments the type
   system reserves it for. */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stat { border-left: 1px solid var(--rule-cream); padding-left: 22px; }

.stat__figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 52px);
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 12px;
}

.stat__label {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 20ch;
}

/* --- The four strands --------------------------------------------------- */

.strands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 56px;
}

.strand__eyebrow { margin-bottom: 10px; }

.strand__title {
  font-size: 22px;
  color: var(--navy);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
}

.strand__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.strand__list li {
  position: relative;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-body);
  padding: 0 0 12px 20px;
}
.strand__list li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--gold);
}
.strand__list li:last-child { padding-bottom: 0; }

/* --- Income ------------------------------------------------------------- */

.income {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}

.income__body h2 { margin-bottom: var(--sp-3); }

.income__title { font-size: 17px; margin: 0 0 20px; }

.income__list { list-style: none; margin: 0; padding: 0; }

/* Two rows of text with a bar beneath — the source drew these as pie charts,
   which read badly at three slices and worse on a phone. */
.income__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding-bottom: 18px;
}
.income__row:last-child { padding-bottom: 0; }

.income__label { font-size: 14px; color: var(--ink); }
.income__share { font-size: 14px; font-weight: 700; color: var(--navy); }

.income__bar {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  background: var(--rule-cream);
}
.income__fill { display: block; height: 100%; background: var(--gold); }

/* --- Two onward tiles --------------------------------------------------- */

.quick-links--two { grid-template-columns: repeat(2, 1fr); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 26px 30px; }
  .strands { grid-template-columns: 1fr; gap: 34px; }
  .income { grid-template-columns: 1fr; gap: 32px; }
  .quick-links--two { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr; gap: 22px; }
  .stat__label { max-width: none; }
}