/* ==========================================================================
   Blok — Kaarten: overzichtskaarten in de stijl van home-routes
   Mobiel één kolom; tablet twee; desktop 2, 3 of 4 (--2/--3/--4). Een
   losse laatste kaart in een tweekoloms rij wordt een liggende kaart over
   de volle breedte (foto links, tekst rechts), zoals bij home-routes.
   ========================================================================== */
.b-kaarten {
  /* Horizontale binnenruimte van de kaart (body én voetregel) */
  --b-kaarten-px: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  --b-kaarten-inzet: .625rem;            /* foto ingezet in de kaart */
}

/* --- Kop: met actie (link rechts) of kop links, lead rechts ------------- */
.b-kaarten__kop--naast .b-kaarten__lead { margin-top: 0; }
@media (min-width: 1024px) {
  .b-kaarten__kop--naast {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
  .b-kaarten__kop--naast .b-kaarten__lead { max-width: 50ch; justify-self: end; }
}
.b-kaarten__actie { justify-self: start; }
/* Zonder kop staat de link onder de kaarten */
.b-kaarten__meer { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }

/* --- Rooster --------------------------------------------------------------- */
.b-kaarten__lijst {
  display: grid;
  gap: var(--gap);
  margin: 0;
}
@media (min-width: 720px) {
  .b-kaarten__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Drie of vier kolommen op een dubbel zo fijn raster (elke kaart twee
   sporen breed), zodat een onvolledige laatste rij in het midden staat
   in plaats van een gat rechts te laten. */
@media (min-width: 1024px) {
  .b-kaarten__lijst--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .b-kaarten__lijst--3 > .b-kaarten__item { grid-column: span 2; }
  .b-kaarten__lijst--3 > .b-kaarten__item:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .b-kaarten__lijst--3 > .b-kaarten__item:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
@media (min-width: 1100px) {
  .b-kaarten__lijst--4 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .b-kaarten__lijst--4 > .b-kaarten__item { grid-column: span 2; }
  .b-kaarten__lijst--4 > .b-kaarten__item:nth-child(4n+1):nth-last-child(3) { grid-column: 2 / span 2; }
  .b-kaarten__lijst--4 > .b-kaarten__item:nth-child(4n+1):nth-last-child(2) { grid-column: 3 / span 2; }
  .b-kaarten__lijst--4 > .b-kaarten__item:nth-child(4n+1):last-child { grid-column: 4 / span 2; }
}

/* Losse laatste kaart in een tweekoloms rij: over de volle breedte */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .b-kaarten__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) and (max-width: 1099.98px) {
  .b-kaarten__lijst--4 > .b-kaarten__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .b-kaarten__lijst--2 > .b-kaarten__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Het li-element draagt de reveal; de kaart vult de cel (gelijke hoogte).
   De li is ook de container: een brede kaart gaat liggen (zie onder). */
.b-kaarten__item {
  display: flex;
  container: b-kaart / inline-size;
}

/* --- Kaart ----------------------------------------------------------------
   Vlak, schaduw, lift en focusring komen uit .kaart (components.css). */
.b-kaarten__kaart { flex: 1; }

/* Niet klikbaar: geen lift, geen zoom en (ook op navy) geen oplichtende rand */
.b-kaarten .b-kaarten__kaart--statisch:hover { transform: none; box-shadow: var(--shadow-card); }
.b-kaarten.band--navy .b-kaarten__kaart--statisch:hover { box-shadow: inset 0 0 0 1px var(--navy-80); }
.b-kaarten__kaart--statisch:hover .kaart__media img { transform: none; }

/* Foto ingezet in de kaart: concentrische hoeken (r-lg buiten, r-md binnen) */
.b-kaarten__media {
  aspect-ratio: 4 / 3;
  margin: var(--b-kaarten-inzet) var(--b-kaarten-inzet) 0;
  border-radius: var(--r-md);
  isolation: isolate;
}
.b-kaarten__lijst--2 .b-kaarten__media { aspect-ratio: 16 / 10; }

/* Geen foto in een rij met foto's: rustig vlak met het routepictogram */
.b-kaarten__media--leeg {
  display: grid;
  place-items: center;
  background: var(--roze-licht);
  color: var(--blauw);
}
.b-kaarten__media--leeg .icoon { width: clamp(2.75rem, 2rem + 2vw, 4rem); height: auto; aspect-ratio: 1; }

.b-kaarten__body {
  gap: 0;
  padding: clamp(1.375rem, 1.1rem + 1vw, 1.875rem) var(--b-kaarten-px) 1.5rem;
}

.b-kaarten__label { align-self: start; margin-bottom: 1rem; }

.b-kaarten__titel {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-head);
  letter-spacing: -.005em;
}
/* Vier smalle kaarten naast elkaar: compactere kop en tekst. Alleen als er
   echt vier kolommen zijn; daaronder (twee kolommen of gestapeld) is de
   kaart even breed als in de andere varianten en houdt hij dezelfde letter. */
@media (min-width: 1100px) {
  .b-kaarten__lijst--4 .b-kaarten__titel {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: 0;
  }
  .b-kaarten__lijst--4 .b-kaarten__tekst { font-size: var(--fs-small); }
}

/* 15px waar de kaarten smal zijn, oplopend naar 17px (gelijk aan home-routes) */
.b-kaarten__tekst {
  max-width: 60ch;
  margin-top: .75rem;
  font-size: clamp(var(--fs-small), .47rem + .725vw, var(--fs-body));
  line-height: 1.6;
  color: var(--tekst-zacht);
}
.b-kaarten__lijst--4 .b-kaarten__tekst { font-size: var(--fs-small); }

/* --- Voetregel: linktekst met pijl (zoals home-routes) of een pijl-cirkel.
   Hover/focus op de kaart (onderstreping, pijl schuift mee, cirkel vult
   zich) komt uit de gedeelde .kaart-, .link-pijl- en .pijl-cirkel-regels. -- */
.b-kaarten__voet {
  margin: 0 var(--b-kaarten-px);
  padding: 1.25rem 0 clamp(1.375rem, 1.1rem + .8vw, 1.75rem);
  border-top: 1px solid var(--lijn);
  line-height: 1.45;
}
.b-kaarten__voet--pijl {
  display: flex;
  justify-content: flex-end;
  padding-block: 0 clamp(1.125rem, .9rem + .6vw, 1.5rem);
  border-top: 0;
}

/* --- Mobiel: foto minder hoog (korter scrollen) ---------------------------- */
@media (max-width: 559.98px) {
  .b-kaarten__media { aspect-ratio: 16 / 10; }
}
@media (min-width: 560px) and (max-width: 719.98px) {
  .b-kaarten__media,
  .b-kaarten__lijst--2 .b-kaarten__media { aspect-ratio: 16 / 9; }
}
/* Tablet (twee kolommen): iets lagere foto's, anders worden brede kaarten erg hoog */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .b-kaarten__media { aspect-ratio: 16 / 10; }
}
@media (min-width: 1024px) and (max-width: 1099.98px) {
  .b-kaarten__lijst--4 .b-kaarten__media { aspect-ratio: 16 / 10; }
}
/* Mobiel zonder foto: een smalle band in plaats van een groot leeg vlak */
@media (max-width: 719.98px) {
  .b-kaarten__media--leeg,
  .b-kaarten__lijst--2 .b-kaarten__media--leeg { aspect-ratio: auto; height: 5.5rem; }
  .b-kaarten__media--leeg .icoon { width: 2.25rem; }
}

/* --- Liggende kaart: een kaart met beeld die breder is dan 40rem (de losse
   laatste kaart, of één kaart). Foto links over de volle hoogte; de
   tekstkolom valt precies onder de rechterkolom erboven. ----------------- */
@container b-kaart (min-width: 40rem) {
  .b-kaarten__kaart--met-beeld {
    display: grid;
    grid-template-columns: calc(50% - var(--gap) / 2) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  .b-kaarten__kaart--met-beeld .b-kaarten__media {
    grid-row: 1 / -1;
    aspect-ratio: auto;
    min-height: 15rem;
    margin: var(--b-kaarten-inzet);
  }
  /* Absoluut, zodat de natuurlijke hoogte van het beeld de kaart niet oprekt
     (themafoto's zitten in een picture, attachments zijn een losse img) */
  .b-kaarten__kaart--met-beeld .b-kaarten__media > :is(picture, img) { position: absolute; inset: 0; }
  .b-kaarten__kaart--met-beeld .b-kaarten__body {
    grid-column: 2;
    justify-content: center;
    margin-left: var(--gap);
    padding-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  }
  .b-kaarten__kaart--met-beeld .b-kaarten__voet {
    grid-column: 2;
    margin-left: calc(var(--gap) + var(--b-kaarten-px));
  }
}

/* --- Navy band ---------------------------------------------------------------
   Donkere kaart met fijne rand, beeldvlak en pijl-cirkel komen uit
   components.css (.band--navy .kaart). Hier alleen het icoon van het lege
   beeldvlak (roze, zoals cases en kennis); de rand van een niet-klikbare
   kaart staat hierboven bij "Niet klikbaar". */
.b-kaarten.band--navy .b-kaarten__media--leeg { color: var(--roze); }

/* Windows-contrastmodus: kaartgrenzen zichtbaar houden */
@media (forced-colors: active) {
  .b-kaarten__kaart { border: 1px solid CanvasText; }
}