/* ==========================================================================
   Blok — USP's: genummerde punten (01, 02, …)
   Familie van home-statement: indexregel met nummer en dunne lijn, compacte
   kop en zachte tekst. Kop en lijst delen dezelfde kolomafstand, zodat de
   toelichting rechts uitlijnt met een kolom van de lijst.
   - Bij 3 kolommen staat de toelichting vanaf de tweede kolom (zie __kop--3).
   - Navy (standaard): roze nummer, lijn rgba(255, 255, 255, .16).
   - Lichte banden: navy nummer, de lijn begint met een kort, iets dikker
     roze stuk (roze tekst op licht is te zwak); op roze-licht navy.
   ========================================================================== */
.b-usps {
  --b-usps-kolom: clamp(1.75rem, 1rem + 2vw, 3rem);
  --b-usps-nummer: var(--navy);
  --b-usps-accent: var(--roze);       /* kort, iets dikker begin van de lijn */
  --b-usps-kop: var(--navy);
}
.b-usps.band--navy {
  --b-usps-nummer: var(--roze);
  --b-usps-accent: transparent;       /* navy: zoals home-statement, alleen de dunne lijn */
  --b-usps-kop: var(--wit);
}
/* Op roze-licht valt roze weg: daar navy als accent */
.b-usps.band--roze { --b-usps-accent: var(--navy); }

/* --- Kop: titel links, toelichting rechts (op de onderlijn) ---------- */
.b-usps__kop {
  display: grid;
  gap: 1.25rem var(--b-usps-kolom);
  margin-bottom: clamp(2.75rem, 1.75rem + 3.5vw, 5rem);
}
.b-usps__titel { max-width: 18ch; color: var(--b-usps-kop); }
.b-usps__tekst { max-width: 46ch; text-wrap: pretty; }

@media (min-width: 960px) {
  .b-usps__kop--met-tekst {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
  /* Drie kolommen: titel boven de eerste, toelichting vanaf de tweede kolom.
     De titelkolom groeit mee als een lang woord ("laadinfrastructuur") er
     anders niet in past; dan schuift de toelichting iets op. */
  .b-usps__kop--3 { grid-template-columns: minmax(min-content, 1fr) repeat(2, minmax(0, 1fr)); }
  .b-usps__kop--3 .b-usps__tekst { grid-column: 2 / -1; }
}

/* --- Lijst ------------------------------------------------------------ */
.b-usps__lijst {
  display: grid;
  gap: clamp(2.25rem, 1.75rem + 1.5vw, 3rem) var(--b-usps-kolom);
}
@media (min-width: 720px) {
  .b-usps__lijst--2,
  .b-usps__lijst--3,
  .b-usps__lijst--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .b-usps__lijst--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Vier kolommen pas vanaf 1100px (zoals home-statement) */
@media (min-width: 1100px) {
  .b-usps__lijst--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Nummer, kop en tekst lopen per rij gelijk, ook als een kop korter is */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 720px) {
    .b-usps__item {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0;
    }
  }
}

/* Indexregel: nummer met een dunne lijn die de kolom vult */
.b-usps__nummer {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--b-usps-nummer);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  line-height: 1;
}
.b-usps__nummer::after {
  content: "";
  flex: 1;
  height: 6px;
  background: var(--stippel-x); /* brandbook-stippellijn */
}

.b-usps__item-titel {
  max-width: 26ch;
  margin-top: 1.15rem;
  color: var(--b-usps-kop);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0;
}

.b-usps__item-tekst {
  max-width: 40ch;
  margin-top: .75rem;
  color: var(--tekst-zacht);
  line-height: 1.6;
}

/* Tablet met rijen van 3 (3, 5 of 6 punten): geen losse wees in 2 kolommen,
   maar volle rijen met de kop links en de tekst rechts */
@media (min-width: 720px) and (max-width: 959.98px) {
  .b-usps .b-usps__lijst--3 { grid-template-columns: minmax(0, 1fr); }
  .b-usps .b-usps__lijst--3 .b-usps__item {
    grid-row: auto;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto;
    column-gap: var(--b-usps-kolom);
    align-items: baseline;
  }
  .b-usps .b-usps__lijst--3 .b-usps__nummer { grid-column: 1 / -1; align-self: center; }
  .b-usps .b-usps__lijst--3 .b-usps__item-tekst { margin-top: 1.15rem; }
}

@media (forced-colors: active) {
  .b-usps__nummer::after { background: CanvasText; }
}