/* ==========================================================================
   Blok — Tekst-intro: titel links, tekst rechts, optionele aside als kaart
   ========================================================================== */
.b-tekst-intro {
  /* Leesmaat van de tekstkolom (lead én lopende tekst) */
  --b-tekst-intro-maat: 42rem;
  /* Kleur van de lead en vet: navy, op de navy band wit */
  --b-tekst-intro-sterk: var(--tekst);
}
.b-tekst-intro.band--navy { --b-tekst-intro-sterk: var(--wit); }

.b-tekst-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Grid-items rekken standaard uit; de kicker blijft een pill */
.b-tekst-intro__kicker { justify-self: start; }
.b-tekst-intro__titel { max-width: 14ch; }

/* --- Tekst ---------------------------------------------------------------
   De eerste alinea is de lead (groter, navy); de rest is lopende tekst in de
   zachte tekstkleur, met vet en links in navy/linkblauw. */
.b-tekst-intro__tekst {
  max-width: var(--b-tekst-intro-maat);
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--tekst-zacht);
  font-size: clamp(var(--fs-body), 1rem + .15vw, 1.125rem);
  line-height: 1.7;
}
.b-tekst-intro__tekst > p:first-child {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--b-tekst-intro-sterk);
}
.b-tekst-intro__tekst > p:first-child + * { margin-top: 1.35em; }
.b-tekst-intro__tekst strong { color: var(--b-tekst-intro-sterk); }

/* Lijsten in de tekst: dezelfde taal als het prose-blok. Blauwe stip (ul),
   cijfer in een rondje met blauwe rand (ol, zoals de route op de homepage) */
.b-tekst-intro__tekst ul,
.b-tekst-intro__tekst ol { padding-left: 0; list-style: none; }
.b-tekst-intro__tekst li { position: relative; padding-left: 1.6em; }
.b-tekst-intro__tekst li + li { margin-top: .45em; }
.b-tekst-intro__tekst ul > li::before {
  content: "";
  position: absolute;
  left: .35em;
  top: calc((1lh - .44em) / 2);
  width: .44em;
  height: .44em;
  border-radius: 50%;
  background: var(--blauw);
}
.b-tekst-intro__tekst ol { counter-reset: b-tekst-intro; }
.b-tekst-intro__tekst ol > li { padding-left: 2.5em; counter-increment: b-tekst-intro; }
.b-tekst-intro__tekst ol > li::before {
  content: counter(b-tekst-intro);
  position: absolute;
  left: 0;
  /* Midden op de eerste regel: regelhoogte van de li (1.7 × li-letter) min
     het rondje, in de eenheid van dit kleinere label (.82 × li-letter) */
  top: calc((1.7em / .82 - 1.75em) / 2);
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border: 1.5px solid var(--blauw);
  border-radius: 50%;
  color: var(--b-tekst-intro-sterk);
  font-size: .82em;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Op navy: lichtblauw */
.band--navy .b-tekst-intro__tekst ul > li::before { background: var(--blauw-licht); }
.band--navy .b-tekst-intro__tekst ol > li::before { border-color: var(--blauw-licht); }

/* --- Aside: kaart onder de tekst ---------------------------------------- */
.b-tekst-intro__aside {
  max-width: var(--b-tekst-intro-maat);
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  padding: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--grijs-licht);
}
/* Op een gekleurde band een witte kaart */
.band--grijs .b-tekst-intro__aside,
.band--roze .b-tekst-intro__aside { background: var(--wit); box-shadow: var(--shadow-card); }
.band--navy .b-tekst-intro__aside { background: var(--navy-90); border: 1px solid var(--navy-80); }

/* Lijst: kop en vinkjes. Een lijst tot 5 punten krijgt een kaart zo breed
   als de inhoud (ook op tablet geen half leeg vlak); vanaf 6 punten vult de
   kaart de leesmaat en staan de punten in twee kolommen (als ze passen). */
.b-tekst-intro__aside--lijst:not(:has(li:nth-child(6))) { width: fit-content; min-width: min(100%, 24rem); }
.b-tekst-intro__aside-titel {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: 0;
}
.b-tekst-intro__lijst {
  gap: .7rem 1.75rem;
  font-weight: var(--fw-medium);
  line-height: 1.45;
}
.b-tekst-intro__lijst:has(> li:nth-child(6)) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.b-tekst-intro__aside-titel + .b-tekst-intro__lijst { margin-top: 1.1rem; }

/* Quote: icoon, citaat en bron (zoals de quotes op de homepage) */
.b-tekst-intro__icoon {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  /* Het teken vult de viewBox niet: optisch op de tekstrand en dicht bij de quote */
  margin: -.5rem 0 .6rem -.25rem;
  color: var(--blauw);
}
.band--navy .b-tekst-intro__icoon { color: var(--blauw-licht); }
.b-tekst-intro__quote p {
  font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.b-tekst-intro__bron {
  display: grid;
  gap: .1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lijn);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.b-tekst-intro__naam { font-weight: var(--fw-bold); }
.b-tekst-intro__functie { color: var(--tekst-zacht); }

/* --- Desktop: titel links (blijft staan), tekst en aside rechts ----------
   De kicker heeft een eigen rij, zodat de kop en de eerste tekstregel op
   dezelfde hoogte beginnen. */
@media (min-width: 1024px) {
  .b-tekst-intro__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "kicker ."
      "titel  tekst"
      "titel  aside";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--gap-lg);
  }
  .b-tekst-intro__kicker { grid-area: kicker; }
  .b-tekst-intro__titel {
    grid-area: titel;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
  .b-tekst-intro__tekst { grid-area: tekst; margin-top: 0; }
  .b-tekst-intro__aside { grid-area: aside; align-self: start; justify-self: start; width: 100%; }
  /* Alleen een aside (geen tekst): direct naast de kop */
  .b-tekst-intro__titel + .b-tekst-intro__aside { grid-row: 2; margin-top: 0; }

  /* Zonder titel, met aside: de tekst houdt zijn plek in de rechterkolom */
  .b-tekst-intro--zonder-titel .b-tekst-intro__grid { grid-template-areas: ". tekst" ". aside"; grid-template-rows: auto 1fr; }
  /* Zonder titel en zonder aside (bijv. de intro van een sectorpagina, zoals
     op de oude site): één leeskolom links, geen lege kolom ernaast */
  .b-tekst-intro--zonder-titel:not(.b-tekst-intro--met-aside) .b-tekst-intro__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tekst";
    grid-template-rows: auto;
  }
}

/* --- Met domeinvisual (arg 'visual') --------------------------------------
   Mobiel en tablet: de visual kleiner boven de tekst. Vanaf 1024px zonder
   titel twee kolommen: links de visual (blijft staan tijdens het scrollen,
   net als de titel), rechts de tekst en de aside. Met titel staat de visual
   onder de titel en blijven ze samen staan. */
.b-tekst-intro__visual {
  width: min(88%, 26rem);
  margin-bottom: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
}
.b-tekst-intro__kop .b-tekst-intro__visual { margin: clamp(1.5rem, 1.2rem + 1vw, 2rem) 0 0; }

@media (min-width: 1024px) {
  .b-tekst-intro.b-tekst-intro--met-visual.b-tekst-intro--zonder-titel .b-tekst-intro__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "visual tekst"
      "visual aside";
    grid-template-rows: auto 1fr;
  }
  .b-tekst-intro--met-visual .b-tekst-intro__visual {
    grid-area: visual;
    align-self: start;
    width: 100%;
    margin: 0;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
  /* Alleen een aside (geen tekst): naast de visual bovenaan */
  .b-tekst-intro--zonder-titel .b-tekst-intro__visual + .b-tekst-intro__aside { grid-row: 1; margin-top: 0; }

  /* Met titel: titel en visual samen in de linkerkolom */
  .b-tekst-intro__kop {
    grid-area: titel;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
  .b-tekst-intro__kop .b-tekst-intro__titel { position: static; }
  .b-tekst-intro__kop .b-tekst-intro__visual { position: static; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
  .b-tekst-intro__kop + .b-tekst-intro__aside { grid-row: 2; margin-top: 0; }
}