/* =========================================================================
   Contact en route — enkel wat styles.css nog niet heeft:
   drie contactkaarten met een groot nummer, de lijst "Andere nummers"
   en kleine afstemmingen in de route.
   ========================================================================= */

/* ---------- Drie contactkaarten ----------
   gsm: 1 kolom · tablet en kleine laptop: 2 kolommen, "Dringend" over de volle breedte · vanaf 1280px: 3 kolommen */
.contact-cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-cards > li:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-cards > li:last-child { grid-column: auto; }
}

.contact-card { gap: 0; }
/* container-type staat op de binnenkant: op de kaart zelf zou het subgrid (hieronder) uitschakelen */
.contact-card__body { container-type: inline-size; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding-bottom: 1.5rem; }
.contact-card .phone-xl { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); }
@supports (font-size: 1cqi) {
  /* Het nummer past altijd op één regel, ook met de grootste tekstgrootte in een smalle kaart. */
  .contact-card .phone-xl { font-size: min(3.25rem, 14.5cqi); }
}
.card .contact-card__status { color: var(--ink); }
.contact-card__address { font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.contact-card__strong { color: var(--ink); font-weight: 600; }
.contact-card .profile__meta { margin-top: .25rem; }

/* Onderaan elke kaart: een fijne lijn en dan de acties */
.contact-card__foot {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: .75rem;
  width: 100%;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.card--urgent .contact-card__foot { border-color: var(--red-100); }
.contact-card__foot p { color: var(--ink); }

/* Naast elkaar: de lijnen boven de acties op dezelfde hoogte in alle kaarten */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 720px) {
    .contact-cards > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .contact-cards > li > .contact-card { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; }
    .contact-card__foot { margin-top: 0; }
  }
}

.card .contact-card__112 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: var(--ink);
}
.contact-card__112 .icon { width: 1.6em; height: 1.6em; color: var(--red-text); }
.contact-card__112 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 44px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--red-text);
}

/* Tablet: de brede kaart "Dringend" in twee kolommen, zodat ze niet leeg oogt */
@media (min-width: 720px) and (max-width: 1279.98px) {
  .contact-cards > li:last-child { display: flex; grid-row: auto; }
  .contact-cards > li:last-child > .contact-card {
    display: grid;
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
  }
  .contact-cards > li:last-child .contact-card__body { padding: 0 clamp(28px, 3.5vw, 48px) 0 0; }
  .contact-cards > li:last-child .contact-card__foot {
    align-self: stretch;
    align-content: center;
    padding: 0 0 0 clamp(28px, 3.5vw, 48px);
    border-top: 0;
    border-left: 1px solid var(--red-100);
  }
}

/* ---------- Andere nummers en contacten ---------- */
.contact-more > div { padding-right: 32px; }
.contact-more dd > a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-more .icon--inline { margin-left: .2em; }

/* ---------- Pijl-links op een eigen regel; bij afbreken loopt de pijl mee met het laatste woord ---------- */
.contact-facts .link-arrow--inline,
.contact-card__foot .link-arrow--inline { display: block; width: fit-content; margin-top: .2rem; padding-block: .45rem; }

/* ---------- Route ---------- */
.route-steps { margin-top: 0; }
.route-photos > .photo + .photo { margin-top: clamp(16px, 1.6vw, 24px); }
@media (min-width: 600px) and (max-width: 1023.98px) {
  /* Tablet: de twee foto's naast elkaar in plaats van twee grote beelden onder elkaar */
  .route-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .route-photos > .photo + .photo { margin-top: 0; }
  .route-photos .photo img { aspect-ratio: 4 / 3; }
  .route-photos .photo:first-child img { object-position: 0 50%; }
}
.notice strong { color: var(--ink); }
/* Groot scherm: de mededeling over cardiologie links onder de stappen (korte, leesbare regels),
   de foto's blijven er rechts naast staan. Op gsm en tablet blijft de volgorde: stappen, foto's, cardiologie. */
@media (min-width: 1024px) {
  .route-split { row-gap: clamp(1.5rem, .5rem + 1.5vw, 2.25rem); }
  .route-split > .route-photos { grid-column: 2; grid-row: 1 / span 2; }
  .route-split > .route-cardio { grid-column: 1; grid-row: 2; }
}
@media (max-width: 519.98px) {
  /* Labels op foto's: iets kleiner en netjes afgerond als de tekst afbreekt */
  .photo__tag { left: 12px; bottom: 12px; right: 12px; }
  .photo__tag .tag--glass { font-size: 1rem; border-radius: 14px; }
  /* Grote tekst op een gsm: pictogram boven de tekst, zodat de tekst de volle breedte krijgt */
  html[data-textsize] .contact-facts li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}