/* ==========================================================================
   Home — Routes: de doelgroepen als kaarten (vier: 2×2)
   ========================================================================== */
.s-routes {
  /* Horizontale binnenruimte van de kaart (body én voetregel) */
  --s-routes-px: clamp(1.25rem, 1rem + 1vw, 1.875rem);
}

/* --- Sectiekop: desktop kop links, lead rechts op de onderlijn ---------- */
.s-routes__kop .lead { margin-top: 0; }
@media (min-width: 1024px) {
  .s-routes__kop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
  .s-routes__lead { max-width: 50ch; justify-self: end; }
}

/* --- Kaarten ------------------------------------------------------------ */
.s-routes__item { display: flex; }
.s-routes__kaart { flex: 1; }

/* Foto ingezet in de kaart: concentrische hoeken (r-lg buiten, r-md binnen) */
.s-routes__media {
  aspect-ratio: 4 / 3;
  margin: .625rem .625rem 0;
  border-radius: var(--r-md);
  isolation: isolate;
}

/* De body groeit mee; extra hoogte valt onder de vinklijst, boven de voetlijn */
.s-routes__body {
  position: relative;
  gap: 0;
  padding: clamp(1.375rem, 1.1rem + 1vw, 1.875rem) var(--s-routes-px) 1.625rem;
}

.s-routes__label { align-self: start; }
/* Tab-label staat op de bovenrand van het tekstvlak; de kop houdt zijn plek */
.s-routes__titel:first-of-type { margin-top: 0; }

.s-routes__titel {
  margin-top: 1rem;
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-head);
  letter-spacing: -.005em;
}

/* Tekst en punten: 15px waar de kaarten smal zijn (t/m ca. 1024px), oplopend
   naar 17px vanaf ca. 1300px, gelijk aan diensten, impact en statement */
.s-routes__tekst,
.s-routes__punten { font-size: clamp(var(--fs-small), .47rem + .725vw, var(--fs-body)); }

.s-routes__tekst {
  margin-top: .75rem;
  line-height: 1.6;
  color: var(--tekst-zacht);
}

.s-routes__punten {
  gap: .5rem;
  margin-top: 1.375rem;
  font-weight: var(--fw-medium);
  line-height: 1.45;
}

.s-routes__voet {
  margin: 0 var(--s-routes-px);
  padding: 1.25rem 0 clamp(1.375rem, 1.1rem + .8vw, 1.75rem);
  border-top: 1px solid var(--lijn);
  line-height: 1.45;
}
/* Pijl achter het laatste woord en de hover/focus op de kaart (onderstreping,
   pijl schuift mee) komen uit de gedeelde .link-pijl- en .kaart-regels. */

/* --- Mobiel: één kolom, foto minder hoog (korter scrollen) -------------- */
@media (max-width: 559.98px) {
  .s-routes__media { aspect-ratio: 16 / 10; }
}
@media (min-width: 560px) and (max-width: 719.98px) {
  .s-routes__media { aspect-ratio: 16 / 9; }
}

/* --- Tablet: twee naast elkaar, de derde liggend over de volle breedte.
   Foto en tekst van de liggende kaart vallen precies in de twee kolommen
   erboven, zodat foto's en tekstkolommen op één lijn staan. ------------ */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .s-routes__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .s-routes__item:last-child:nth-child(odd) .s-routes__kaart {
    display: grid;
    grid-template-columns: calc(50% - var(--gap) / 2) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  .s-routes__item:last-child:nth-child(odd) .s-routes__media {
    grid-row: 1 / -1;
    aspect-ratio: auto;
    margin: .625rem;
  }
  .s-routes__item:last-child:nth-child(odd) .s-routes__media picture { position: absolute; inset: 0; }
  .s-routes__item:last-child:nth-child(odd) .s-routes__body { margin-left: var(--gap); }
  .s-routes__item:last-child:nth-child(odd) .s-routes__voet { margin-left: calc(var(--gap) + var(--s-routes-px)); }
}

/* --- Desktop: foto, inhoud en voetregel als drie gedeelde rijen (subgrid).
   De inhoud loopt vrij door (geen gaten onder korte koppen); voetlijnen en
   pijl-links staan op één lijn, ook als één linktekst afbreekt. --------- */
@media (min-width: 1024px) {
  @supports (grid-template-rows: subgrid) {
    .s-routes__lijst { row-gap: 0; }
    /* 2×2: ruimte tussen de rijen kaarten (row-gap is 0 voor de subgrid-rijen) */
    .s-routes__lijst.grid--2 .s-routes__item:nth-child(n+3) { margin-top: var(--gap); }
    .s-routes__item,
    .s-routes__kaart {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}