/* Vaccinatie — kleine aanvullingen op het ontwerpsysteem (enkel voor vaccinatie.html) */

/* Datumkaart in de paginakop: fijne lijn boven de verwijzing naar het griepvaccin */
.vacc-dates .dates { align-self: stretch; }
.vacc-dates__note {
  align-self: stretch;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / .16);
}
/* 1024–1359px: de kop is tweekoloms en de kaart te smal voor twee data naast elkaar
   (anders valt "uur" alleen op een regel), dus de data onder elkaar. Bij normale tekst staat
   de dag (met de maand eronder) naast de tekst: zo blijft de kaart kort en staan de
   afspraakknoppen links hoger op het scherm. */
@media (min-width: 1024px) and (max-width: 1359.98px) {
  .vacc-dates .dates { grid-template-columns: minmax(0, 1fr); }
  html:not([data-textsize="2"]):not([data-textsize="3"]) .vacc-dates .date {
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: center;
    column-gap: 18px;
    padding: 16px 20px;
  }
  html:not([data-textsize="2"]):not([data-textsize="3"]) .vacc-dates .date__when { flex-direction: column; align-items: flex-start; gap: 6px; }
  html:not([data-textsize="2"]):not([data-textsize="3"]) .vacc-dates .date__month { margin-top: 0; }
}

/* Eén datum in een kaart ("zonder afspraak"): over de volle breedte, datum naast de tekst */
.vacc-single {
  align-self: stretch;
  grid-template-columns: minmax(0, 1fr);
  margin: .5rem 0 1rem;
}
@media (min-width: 440px) {
  html:not([data-textsize="2"]):not([data-textsize="3"]) .vacc-single .date { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
}
@media (min-width: 560px) {
  .vacc-single .date { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
}
/* Adres onderaan de kaart, op gelijke hoogte met de knoppen in de kaart ernaast */
.vacc-where { align-self: stretch; margin-top: auto; }

/* Tabel "Heeft u een voorschrift nodig?" */
.vacc-rx td p { margin-top: .5rem; }
@media (min-width: 640px) {
  .vacc-rx tbody th { width: 36%; }
}
/* Pijl blijft bij het laatste woord; toch een aanraakvlak van 44px hoog */
.vacc-rx .link-arrow--inline { padding-block: .45rem; }

/* Praktische tips: luchtige rijen met fijne lijnen */
.vacc-checks { gap: 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.vacc-checks li { padding: 1.15rem 0 1.15rem 40px; border-bottom: 1px solid var(--line); }
.vacc-checks li::before { top: calc(1.15rem + .28em); }
.vacc-checks strong { color: var(--ink); font-weight: 600; }

/* Cindy naast de tips. 600–1023px: de kaart is dan even breed als de pagina, dus de foto
   naast de tekst (anders wordt de portretfoto schermvullend). Vanaf 1024px: vierkante
   uitsnede, zodat de kaart ongeveer even hoog is als de lijst ernaast. */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .vacc-nurse { flex-direction: row; }
  .vacc-nurse .profile__photo { flex: none; width: 40%; aspect-ratio: auto; min-height: 20rem; }
  .vacc-nurse .profile__body { padding: clamp(26px, 1.5rem + 1vw, 40px); }
  .vacc-nurse .profile__actions { display: flex; }
  .vacc-nurse .profile__actions .btn { width: auto; }
}
@media (min-width: 1024px) {
  .vacc-nurse .profile__photo { aspect-ratio: 1; }
}

/* Subnavigatie bij grotere tekst (tekstgrootte 2 en 3): het telefoonnummer staat al in de
   servicebalk en in de paginakop; zonder dat nummer passen de vijf knoppen op één regel */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  html[data-textsize="2"] .subnav .subnav__phone { display: none; }
}
@media (min-width: 1200px) and (max-width: 1439.98px) {
  html[data-textsize="3"] .subnav .subnav__phone { display: none; }
}
/* Tekstgrootte 3, 900–999px: de knop "Online afspraak" staat al rechts; iets smallere
   knoppen, zodat "Andere vaccins" niet op twee regels breekt (knoppen blijven 52px hoog) */
@media (min-width: 900px) and (max-width: 999.98px) {
  html[data-textsize="3"] .subnav__list a { padding-inline: .6rem; }
}

/* Tekstgrootte 3 op een heel smal scherm (320px, bv. iPhone met "ingezoomde weergave"):
   iets minder binnenruimte in de kaarten, zodat de knop "Bel 089 29 00 05" in de kaart past */
@media (max-width: 359.98px) {
  html[data-textsize="3"] .cards .card { padding-inline: 18px; }
}

/* Grote tekst op een smalle gsm: een lang woord (praktijkverpleegkundige) maakt de kaart
   niet breder dan de kolom */
.cards > li > .card { min-width: 0; }