/* ==========================================================================
   Blok — Kerncijfers op een rij
   Groot, licht getal (zoals de kerncijfers in de home-hero) met een zacht
   label. Elk cijfer hangt aan een dunne indexlijn, net als de USP's.
   Blauw op lichte banden (groot genoeg voor 3:1), roze op navy.
   - Mobiel: onder elkaar.
   - Vanaf 640px: twee kolommen.
   - Vanaf 1024px: 3 of 4 op een rij (5+ in rijen van 3).
   Hoe minder cijfers, hoe groter het getal.
   ========================================================================== */
.b-cijfers {
  --b-cijfers-kolom: clamp(1.75rem, 1rem + 2vw, 3rem);
  --b-cijfers-kleur: var(--blauw);
  --b-cijfers-grootte: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --b-cijfers-accent: var(--roze);
}
.b-cijfers.band--navy { --b-cijfers-kleur: var(--roze); }
.b-cijfers.band--roze { --b-cijfers-accent: var(--navy); }

/* --- Kop ------------------------------------------------------------- */
.b-cijfers__kop { margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); }
.b-cijfers__titel { max-width: 20ch; }
.b-cijfers__lead { margin-top: 1.1rem; }

/* --- Rij cijfers ----------------------------------------------------- */
.b-cijfers__lijst {
  /* Container voor de getalgrootte (zie .b-cijfers__getal). Niet op de li:
     containment schakelt subgrid daar uit. */
  container-type: inline-size;
  --b-cijfers-kolbreedte: 100cqi;
  display: grid;
  gap: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem) var(--b-cijfers-kolom);
}
.b-cijfers__lijst--2 { --b-cijfers-grootte: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem); }
.b-cijfers__lijst--4 { --b-cijfers-grootte: clamp(2.75rem, 2.1rem + 2.2vw, 3.75rem); }

@media (min-width: 640px) {
  .b-cijfers__lijst:not(.b-cijfers__lijst--1) {
    --b-cijfers-kolbreedte: calc((100cqi - var(--b-cijfers-kolom)) / 2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .b-cijfers .b-cijfers__lijst--3 {
    --b-cijfers-kolbreedte: calc((100cqi - 2 * var(--b-cijfers-kolom)) / 3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .b-cijfers .b-cijfers__lijst--4 {
    --b-cijfers-kolbreedte: calc((100cqi - 3 * var(--b-cijfers-kolom)) / 4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Indexlijn boven elk cijfer, met een kort accent aan het begin */
.b-cijfers__item {
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.25rem, 1rem + .8vw, 1.75rem);
  background:
    linear-gradient(var(--b-cijfers-accent), var(--b-cijfers-accent)) 0 0 / 1.75rem 2px no-repeat,
    linear-gradient(var(--lijn), var(--lijn)) 0 0 / 100% 1px no-repeat;
}

/* Labels per rij op één hoogte, ook als een getal over twee regels loopt */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    .b-cijfers__item {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

/* Het getal schaalt mee met de kolombreedte, zodat ook een lang getal als
   "17–20 TWh" in smalle kolommen op één regel past. Alle kolommen zijn even
   breed, dus de getallen in een blok blijven even groot. Afbreken op een
   spatie blijft mogelijk als laatste redmiddel.
   De schaal staat in @supports: een declaratie met var() valt in een browser
   zonder container-eenheden niet terug op de regel ervoor, maar wordt
   "unset" (dan zou het getal op tekstgrootte staan). */
.b-cijfers .b-cijfers__getal {
  color: var(--b-cijfers-kleur);
  font-size: var(--b-cijfers-grootte);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  text-wrap: balance;
}
@supports (width: 1cqi) {
  .b-cijfers .b-cijfers__getal { font-size: min(var(--b-cijfers-grootte), var(--b-cijfers-kolbreedte) * .19); }
}

.b-cijfers .b-cijfers__label {
  max-width: 30ch;
  margin-top: .85rem;
  font-size: clamp(var(--fs-small), .9rem + .2vw, var(--fs-body));
  line-height: 1.5;
}

.b-cijfers__bron {
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  color: var(--tekst-zacht);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
@media (forced-colors: active) {
  .b-cijfers__item { border-top: 1px solid CanvasText; background: none; }
}