/* ==========================================================================
   Blok — Tekst-beeld: tekst en foto naast elkaar (50/50 vanaf 960px)
   ========================================================================== */
.b-tekst-beeld {
  /* Kleur van vet en punten: navy, op de navy band wit */
  --b-tekst-beeld-sterk: var(--tekst);
}
.b-tekst-beeld.band--navy { --b-tekst-beeld-sterk: var(--wit); }

.b-tekst-beeld__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  align-items: center;
}

/* --- Beeld ------------------------------------------------------------- */
/* Mobiel en tablet staat de foto boven de tekst (in de HTML erna: de kop
   komt voor schermlezers eerst). */
.b-tekst-beeld__beeld { order: -1; }
.b-tekst-beeld__foto {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) {
  .b-tekst-beeld__foto { border-radius: var(--r-xl); }
}
.band--navy .b-tekst-beeld__foto { box-shadow: none; }

/* --- Tekst ------------------------------------------------------------- */
.b-tekst-beeld__tekst { max-width: 38rem; }
.b-tekst-beeld__titel { max-width: 15ch; }

/* Inhoud (tekst, punten, knop) onder de kop */
.b-tekst-beeld__kop + .b-tekst-beeld__inhoud { margin-top: clamp(1.25rem, 1rem + .8vw, 1.6rem); }
.b-tekst-beeld__inhoud > :first-child { margin-top: 0; }

.b-tekst-beeld__body {
  color: var(--tekst-zacht);
  font-size: clamp(var(--fs-body), 1rem + .15vw, 1.125rem);
  line-height: 1.7;
}
.b-tekst-beeld__body strong { color: var(--b-tekst-beeld-sterk); }

/* Lijsten in de tekst: dezelfde taal als prose en tekst-intro. Blauwe stip
   (ul), cijfer in een rondje met blauwe rand (ol) */
.b-tekst-beeld__body ul,
.b-tekst-beeld__body ol { padding-left: 0; list-style: none; }
.b-tekst-beeld__body li { position: relative; padding-left: 1.6em; }
.b-tekst-beeld__body li + li { margin-top: .45em; }
.b-tekst-beeld__body 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-beeld__body ol { counter-reset: b-tekst-beeld; }
.b-tekst-beeld__body ol > li { padding-left: 2.5em; counter-increment: b-tekst-beeld; }
.b-tekst-beeld__body ol > li::before {
  content: counter(b-tekst-beeld);
  position: absolute;
  left: 0;
  /* Midden op de eerste regel (regelhoogte 1.7, 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-beeld-sterk);
  font-size: .82em;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.band--navy .b-tekst-beeld__body ul > li::before { background: var(--blauw-licht); }
.band--navy .b-tekst-beeld__body ol > li::before { border-color: var(--blauw-licht); }

/* Punten: de vinklijst, iets steviger dan de lopende tekst */
.b-tekst-beeld__punten {
  gap: .6rem;
  margin-top: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  color: var(--b-tekst-beeld-sterk);
  font-weight: var(--fw-medium);
  line-height: 1.45;
}

.b-tekst-beeld__knoppen { margin-top: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }

/* --- Zonder beeld: één leesbare kolom; desktop kop links, inhoud rechts
   (zelfde verhouding als tekst-intro, zodat de blokken op één raster staan) */
.b-tekst-beeld--zonder-beeld .b-tekst-beeld__tekst { max-width: 46rem; }
.b-tekst-beeld--zonder-beeld .b-tekst-beeld__titel { max-width: 20ch; }
/* Zonder beeld is de eerste alinea de lead, net als in tekst-intro (dat blok
   heeft zonder foto de voorkeur; zie de spec) */
.b-tekst-beeld--zonder-beeld .b-tekst-beeld__body > p:first-child {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--b-tekst-beeld-sterk);
}
.b-tekst-beeld--zonder-beeld .b-tekst-beeld__body > p:first-child + * { margin-top: 1.35em; }

/* --- Desktop: twee gelijke kolommen ------------------------------------- */
@media (min-width: 960px) {
  .b-tekst-beeld__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-lg);
  }
  .b-tekst-beeld--zonder-beeld .b-tekst-beeld__grid { grid-template-columns: minmax(0, 1fr); }
  .b-tekst-beeld__beeld { order: 0; }
  .b-tekst-beeld--omgekeerd .b-tekst-beeld__beeld { order: -1; }
  .b-tekst-beeld__foto { aspect-ratio: 5 / 4; }
}

@media (min-width: 1024px) {
  /* Kicker op een eigen rij (de kop van de wrapper doet niet mee in het
     raster: display: contents), zodat kop en inhoud op dezelfde hoogte
     beginnen; zoals tekst-intro */
  .b-tekst-beeld--zonder-beeld .b-tekst-beeld__tekst {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "kicker ."
      "titel  inhoud";
    column-gap: var(--gap-lg);
    align-items: start;
    max-width: none;
  }
  .b-tekst-beeld--zonder-beeld .b-tekst-beeld__kop { display: contents; }
  .b-tekst-beeld--zonder-beeld .b-tekst-beeld__kop > .kicker { grid-area: kicker; justify-self: start; }
  .b-tekst-beeld--zonder-beeld .b-tekst-beeld__titel { grid-area: titel; max-width: 14ch; }
  .b-tekst-beeld--zonder-beeld .b-tekst-beeld__inhoud { grid-area: inhoud; max-width: 42rem; margin-top: 0; }
}

/* --- Tabbladen: onderdelen naast elkaar te kiezen (bijv. bedrijven /
   overheden), zodat een lang verhaal kort oogt. Zonder JS staan de panelen
   onder elkaar met hun eigen titel. ------------------------------------- */
.b-tekst-beeld__tabs { margin-top: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.b-tekst-beeld__tablijst { display: none; }
.b-tekst-beeld__paneel + .b-tekst-beeld__paneel { margin-top: 1.6rem; }
.b-tekst-beeld__paneel-titel {
  margin-bottom: .5rem;
  font-size: var(--fs-h4);
  color: var(--b-tekst-beeld-sterk);
}
.b-tekst-beeld__links { margin: 1rem 0 0; padding: 0; list-style: none; }
.b-tekst-beeld__links .tag { color: var(--blauw-link); text-decoration: none; transition: border-color .2s var(--ease), color .2s var(--ease); }
.b-tekst-beeld__links .tag:is(:hover, :focus-visible) { border-color: var(--blauw-link); color: var(--tekst); }
.band--navy .b-tekst-beeld__links .tag { color: var(--blauw-licht); border-color: var(--navy-80); }

.js .b-tekst-beeld__tablijst {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .25rem;
  padding: .3rem;
  margin-bottom: 1.25rem;
  border-radius: var(--r-pill);
  background: var(--grijs);
}
.b-tekst-beeld__tab {
  padding: .55rem 1.4rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tekst-zacht);
  font: inherit;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.b-tekst-beeld__tab:hover { color: var(--tekst); }
.b-tekst-beeld__tab:focus-visible { outline: none; box-shadow: var(--focus); }
.b-tekst-beeld__tab[aria-selected="true"] { background: var(--navy); color: var(--wit); }
/* Panelen op elkaar in één cel: het blok is zo hoog als het langste paneel,
   dus de foto verspringt niet bij het wisselen */
.js .b-tekst-beeld__panelen { display: grid; }
.js .b-tekst-beeld__paneel { grid-area: 1 / 1; }
.js .b-tekst-beeld__paneel:not(.is-actief) { visibility: hidden; }
.js .b-tekst-beeld__paneel + .b-tekst-beeld__paneel { margin-top: 0; }
.js .b-tekst-beeld__paneel-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.js .b-tekst-beeld__paneel.is-actief { animation: b-tekst-beeld-in .35s var(--ease) both; }
@keyframes b-tekst-beeld-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .js .b-tekst-beeld__paneel.is-actief { animation: none; }
}
.js .band--grijs .b-tekst-beeld__tablijst { background: var(--wit); }
.js .band--navy .b-tekst-beeld__tablijst { background: var(--navy-90); }
.band--navy .b-tekst-beeld__tab[aria-selected="true"] { background: var(--wit); color: var(--navy); }