/* =========================================================================
   Afspraak maken — enkel wat het ontwerpsysteem nog niet heeft:
   de twee manieren in de kop en de afsprakenlijst (rijen met fijne lijnen).
   ========================================================================= */

/* ---------- Kop: online of telefonisch ---------- */
.way {
  max-width: 36rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.way__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.way__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mint-100);
  color: var(--green-800);
}
.way__title .tag { font-size: 1rem; letter-spacing: 0; }
.way__text { margin-top: .85rem; color: var(--ink-2); }
.way .checks { margin-top: 1.1rem; }
.way .page-hero__actions { margin-top: 1.75rem; }
/* Eén kolom (gsm, tablet): de hoofdknop meteen onder de uitleg, zodat hij bij het openen al in beeld staat;
   de drie voordelen volgen erna. De knoppen blijven in dezelfde tabvolgorde. */
@media (max-width: 1023.98px) {
  .way { display: flex; flex-direction: column; margin-top: 1.75rem; padding-top: 1.5rem; }
  .way > .page-hero__actions { order: 1; margin-top: 1.5rem; }
  .way > .checks { order: 2; margin-top: 1.75rem; }
}

.call { gap: 0; padding: clamp(24px, 1.1rem + 1.4vw, 40px); }
.call__intro { margin-top: 1.1rem; color: var(--ink-2); }
.call .status { margin-top: .35rem; }
.call .hours { margin-top: 1.25rem; font-size: 1.0625rem; }
.call .hours th { width: 44%; padding-left: 12px; }
.call .hours td { padding-right: 12px; }
.call .hours td:not(.closed) { white-space: nowrap; }
/* "Vandaag" op een eigen regel, gelijk met de dag (niet ingesprongen) */
.call .hours .badge { display: block; width: fit-content; margin: 6px 0 0; }
/* de tabel sluit al af met een lijn: geen tweede lijn erboven */
.call .info-card__foot { display: grid; gap: .6rem; margin-top: 1.25rem; padding-top: 0; border-top: 0; }
/* smalle gsm met grote tekst: kaart en tabel mogen niet breder worden dan het scherm */
@media (max-width: 479.98px) {
  .call { padding: 22px 18px 24px; }
  .call .hours th { padding: 14px 8px 14px 10px; }
  .call .hours td { padding: 14px 10px 14px 8px; }
}
.tip { display: flex; align-items: flex-start; gap: 10px; font-size: 1.0625rem; line-height: 1.5; }
.tip .icon { margin-top: .15em; color: var(--green-800); }
.tip[hidden] { display: none; }

/* ---------- Afsprakenlijst ----------
   Rij: [portret] naam + functie [knop]; extra info eronder.
   Smalle rij (< 37.5rem, genoeg voor "Dr. Guido Vangertruyden" naast de knop): de knop komt onder de tekst.
   In rem, zodat de rij ook bij grotere tekst op tijd omschakelt. */
.appts { display: grid; list-style: none; border-top: 1px solid var(--line); }
.appts > li { border-bottom: 1px solid var(--line); container-type: inline-size; }
.appt {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  align-content: start;
  height: 100%;
  padding: 22px 4px;
}
.appt__photo,
.appt__icon {
  grid-column: 1;
  grid-row: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mint-100);
}
.appt__photo { object-fit: cover; object-position: 50% 18%; }
.appt__icon { display: grid; place-items: center; color: var(--green-800); }
.appt__icon .icon { width: 26px; height: 26px; }
.appt__body { grid-column: 2; display: grid; gap: 2px; align-self: center; }
.appt__name { font-size: clamp(1.25rem, 1.15rem + .35vw, 1.4375rem); font-weight: 400; letter-spacing: -.012em; line-height: 1.25; color: var(--ink); }
.appt__role { font-size: 1.0625rem; font-weight: 500; line-height: 1.4; color: var(--green-800); }
.appt__more { grid-column: 2; display: grid; gap: .2rem; margin-top: .5rem; max-width: 34rem; }
.appt__meta { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.appt__btn, .appt__actions { grid-column: 2; margin-top: 16px; }
.appt__btn { justify-self: start; }
@container (min-width: 37.5rem) {
  .appt:not(.appt--stack) { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 24px 12px; }
  .appt:not(.appt--stack) > * { grid-row: 1; align-self: center; }
  .appt:not(.appt--stack) > .appt__btn { grid-column: 3; margin: 0 0 0 8px; }
  .appt:not(.appt--stack) > .appt__more { grid-row: 2; grid-column: 2 / -1; align-self: start; }
  .appt--stack { padding: 24px 12px; }
}
@media (max-width: 379.98px) {
  .appt { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
  .appt__photo, .appt__icon { width: 48px; height: 48px; }
  .appt__btn, .appt__actions { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .appts:not(.appts--single) { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

/* Specialisten per vakgebied: twee kolommen */
.jump--block { margin: 0 0 clamp(2.75rem, 2rem + 2.5vw, 4.5rem); }
/* html heeft al scroll-padding voor de plakkende subnavigatie: hier enkel wat lucht */
.disc { scroll-margin-top: 1rem; }
.disc + .disc { margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); }
.disc__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  font-size: clamp(1.375rem, 1.25rem + .45vw, 1.6875rem);
}
.disc__title .way__icon { width: 44px; height: 44px; }
.disc__title small { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
@media (min-width: 1280px) {
  .discs { columns: 2; column-gap: 48px; margin-bottom: calc(-1 * clamp(2.5rem, 2rem + 1.5vw, 3.25rem)); }
  .disc { break-inside: avoid; }
  .disc + .disc { margin-top: 0; }
  .disc { padding-bottom: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); }
}

/* ---------- Goed om te weten ---------- */
@media (min-width: 900px) {
  .facts-list--2 { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}
.facts-list .link-arrow { margin-top: .15rem; }

.kiosk { display: grid; gap: clamp(28px, 4vw, 64px); padding: clamp(20px, 1rem + 1.5vw, 40px); }
.kiosk .photo img { aspect-ratio: 4 / 5; }
.kiosk h3 { font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.625rem); font-weight: 300; letter-spacing: -.022em; line-height: 1.1; }
.kiosk .steps { margin: 1.75rem 0 1.5rem; }
.kiosk .step { padding: 18px 0; }
@media (min-width: 1024px) {
  .kiosk { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
@media (max-width: 1023.98px) {
  .kiosk .photo img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
}

/* Dringend: één kolom, vanaf 1024px drie nummers naast elkaar (nummers op één lijn) */
.notice--urgent .keyfacts { grid-template-columns: minmax(0, 1fr); margin: 1.25rem 0 1.5rem; border-color: var(--red-100); }
@media (min-width: 1024px) {
  .notice--urgent .keyfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.notice--urgent .keyfacts > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; border-color: var(--red-100); }
.notice--urgent .keyfacts dt { align-self: end; color: var(--ink); }
.notice--urgent .keyfacts dd { align-self: start; }
.notice--urgent .keyfacts a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--red-text); text-decoration-thickness: 1px; }

/* Stappen bovenaan een kolom: geen extra witruimte erboven */
.steps--flush { margin-top: 0; }

/* Kopjes in mededelingen binnen een blok (h4): geen standaardmarge */
.notice h4 { margin: 0 0 .35rem; }
/* mededeling onder een lijst: even breed als de lijst (zoals op huisartsen.html), tekst op leesbare breedte */
.block > .notice > div { max-width: 50rem; }

/* Zo werkt het: onder 1024px komt de foto na de stappen (zoals .booking op de startpagina) */
@media (max-width: 1023.98px) {
  .split--steps { gap: 0; }
  .split--steps > .split__sticky { display: contents; }
  .split--steps > .split__sticky > .photo { order: 2; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
  .split--steps > .split__sticky + div { order: 1; margin-top: 2.5rem; }
}