/* ==========================================================================
   Blok — Doelgroep-kiezer: compacte rij routes als klikbare tegels
   Mobiel en tablet onder elkaar; vanaf 960px naast elkaar (2–4 tegels).
   ========================================================================== */
.b-doelgroep-kiezer {
  --b-dk-schaduw: var(--shadow-sm);
  --b-dk-schaduw-hover: var(--shadow-card);
  --b-dk-tegel: var(--wit);
  --b-dk-actief: var(--navy);  /* rand van de huidige route */
}

/* --- Kop -------------------------------------------------------------------- */
.b-doelgroep-kiezer__kop {
  display: grid;
  gap: .5rem;
  margin-bottom: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
}
.b-doelgroep-kiezer__titel {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.25;
}
.b-doelgroep-kiezer__tekst {
  max-width: 60ch;
  color: var(--tekst-zacht);
}

/* --- Rooster ---------------------------------------------------------------- */
.b-doelgroep-kiezer__lijst {
  display: grid;
  gap: clamp(.75rem, .5rem + .8vw, 1.25rem);
  margin: 0;
}
@media (min-width: 720px) {
  .b-doelgroep-kiezer__lijst--2,
  .b-doelgroep-kiezer__lijst--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .b-doelgroep-kiezer__lijst--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .b-doelgroep-kiezer__lijst--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Eén losse route: geen tegel over de volle breedte */
.b-doelgroep-kiezer__lijst--1 { max-width: 36rem; }
/* Het li-element is de container: een smalle tegel laat de miniatuur weg (zie onder) */
.b-doelgroep-kiezer__item {
  display: flex;
  container: b-dk-tegel / inline-size;
}

/* --- Tegel ------------------------------------------------------------------ */
.b-doelgroep-kiezer__tegel {
  flex: 1;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  min-height: 5.75rem;
  padding: 1.1rem 1.1rem 1.1rem clamp(1.25rem, 1rem + .6vw, 1.6rem);
  background: var(--b-dk-tegel);
  box-shadow: var(--b-dk-schaduw);
}
.b-doelgroep-kiezer__tegel:hover { box-shadow: var(--b-dk-schaduw-hover); }
/* Met miniatuur: foto ingezet met concentrische hoeken (r-lg buiten, r-md
   binnen). Alleen in een brede tegel; een smalle tegel laat de foto weg. */
@container b-dk-tegel (width > 21.5rem) {
  .b-doelgroep-kiezer__tegel--foto { padding: .625rem 1.1rem .625rem .625rem; }
}

.b-doelgroep-kiezer__foto {
  flex: none;
  width: clamp(4.25rem, 3.6rem + 1.6vw, 5.25rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--grijs);
  isolation: isolate;
}
.b-doelgroep-kiezer__foto picture { width: 100%; height: 100%; }
.b-doelgroep-kiezer__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.b-doelgroep-kiezer__tegel:hover .b-doelgroep-kiezer__foto img { transform: scale(1.06); }

/* Smalle tegel (drie of vier naast elkaar tot ca. 1150px, twee op een klein
   tablet, of een smalle telefoon): geen miniatuur. Anders breken naam en
   omschrijving af in een kolom van amper 120px. De foto is decoratief (lege
   alt), er valt dus geen inhoud weg. */
@container b-dk-tegel (width <= 21.5rem) {
  .b-doelgroep-kiezer__foto { display: none; }
}

.b-doelgroep-kiezer__body {
  display: grid;
  flex: 1;
  gap: .2rem;
  min-width: 0;
}
.b-doelgroep-kiezer__naam { line-height: 1.25; }
.b-doelgroep-kiezer__omschrijving {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--tekst-zacht);
}

/* Pijl-cirkel: .pijl-cirkel uit components.css (zoals cases, kennis en kaarten) */

/* --- Huidige route: navy rand, label in plaats van pijl, geen lift ------- */
.b-doelgroep-kiezer__tegel.is-actief,
.b-doelgroep-kiezer__tegel.is-actief:hover {
  transform: none;
  box-shadow: inset 0 0 0 2px var(--b-dk-actief);
}
/* Focusring blijft zichtbaar naast de actief-rand */
.b-doelgroep-kiezer__tegel.is-actief:has(a:focus-visible) { box-shadow: var(--focus), inset 0 0 0 2px var(--b-dk-actief); }
/* "Je bent hier" staat boven de naam: neemt geen breedte van de tekst */
.b-doelgroep-kiezer__hier {
  justify-self: start;
  margin-bottom: .3rem;
  padding: .22rem .65rem .26rem;
  border-radius: var(--r-pill);
  background: var(--roze);
  color: var(--navy);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  white-space: nowrap;
}

/* --- Banden ----------------------------------------------------------------- */
/* Wit: grijze tegels zonder schaduw; bij hover worden ze wit en komen ze los */
.b-doelgroep-kiezer.band--wit {
  --b-dk-tegel: var(--grijs-licht);
  --b-dk-schaduw: none;
}
.b-doelgroep-kiezer.band--wit .b-doelgroep-kiezer__tegel:hover { background: var(--wit); }

/* Navy: de donkere tegel met fijne rand komt uit components.css
   (.band--navy .kaart); hier de rand van de huidige route en het fotovlak */
.b-doelgroep-kiezer.band--navy { --b-dk-actief: var(--roze); }
.b-doelgroep-kiezer.band--navy .b-doelgroep-kiezer__foto { background: var(--navy-80); }


@media (forced-colors: active) {
  .b-doelgroep-kiezer__tegel { border: 1px solid CanvasText; }
  .b-doelgroep-kiezer__tegel.is-actief { border-width: 3px; }
}