/* Opmaak per pagina: home (deuren), de kop van een subpagina, rondleiding, route, Augustijnenhof en aanmelden */

/* ---------- Home: drie deuren ---------- */
.deuren {
  display: grid;
  grid-template-columns: calc(var(--as) - var(--marge)) minmax(0, 1fr);
  column-gap: 0;
  padding: var(--sectie-ruimte) var(--marge);
}
.deuren h2 { grid-column: 2; grid-row: 1; margin-bottom: 40px; }
.deur-beeld { grid-column: 1; grid-row: 1 / span 2; margin-right: 48px; overflow: clip; background: var(--color-surface-alt); }
.deur-beeld img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: opacity var(--duur-ui) ease; }
.deur-beeld img.wissel { opacity: 0.2; }
.deur-lijst { grid-column: 2; grid-row: 2; align-self: start; }

/* ---------- Kop van een subpagina: titel over de volle breedte, zin op de as, foto eronder ---------- */
.paginakop {
  display: grid;
  grid-template-columns: var(--as) minmax(0, 1fr);
  padding-top: clamp(2rem, 1rem + 4vw, 6rem);
}
.paginakop h1 {
  grid-column: 1 / -1;
  padding: 0 var(--marge);
  margin-left: -0.05em;
  font-size: var(--text-display);
  font-weight: 500;
  line-height: var(--regelafstand-display);
  letter-spacing: var(--letterafstand-display);
}
.paginakop .intro { grid-column: 2; margin: 2rem 0 0; padding-right: var(--marge); max-width: 46ch; }
.paginakop-beeld figcaption { padding-inline: var(--marge); }
.paginakop-beeld { grid-column: 1 / -1; margin-top: 64px; overflow: clip; background: var(--color-surface-alt); }
.paginakop-beeld img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.paginakop-staand img { object-position: 50% 62%; }
.paginakop-kort { padding-bottom: clamp(3rem, 1rem + 5vw, 7rem); }

/* ---------- Rondleiding ---------- */
.leiders {
  display: grid;
  grid-template-columns: var(--as) minmax(0, 1fr);
  padding: var(--sectie-ruimte) 0 var(--sectie-ruimte) var(--marge);
  align-items: center;
}
.leiders-tekst { grid-column: 1; grid-row: 1; padding-right: 48px; }
.leiders-tekst .intro { margin: 1.5rem 0; }
.leiders-portret { grid-column: 2; grid-row: 1; }
.leiders-portret img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; }

.interactief {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  background: var(--color-surface-alt);
  padding: var(--sectie-ruimte) var(--marge);
}
.interactief h2, .interactief .intro { grid-column: 6 / -1; }
.interactief .intro { margin: 1.5rem 0 56px; }
.i-een { grid-column: 1 / span 4; }
.i-een img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.i-twee { grid-column: 5 / -1; align-self: end; }
.i-twee img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.opbrengst-vlak { background: var(--color-kalk); color: var(--color-text-inverse); padding: var(--sectie-ruimte) var(--marge); }
.opbrengst-vlak h2 { margin-left: calc(var(--as) - var(--marge)); margin-bottom: 48px; }
.opbrengst-groot li { display: grid; grid-template-columns: calc(var(--as) - var(--marge)) minmax(0, 1fr); align-items: baseline; padding: 0.6rem 0; }
.opbrengst-groot h3 { font-size: var(--text-kop); font-weight: 600; letter-spacing: var(--letterafstand-kop); line-height: 1.1; }
.opbrengst-groot p { margin: 0; font-size: var(--text-intro); line-height: 1.35; max-width: 40ch; }

/* Afsluiter: één vraag en twee icoontjes, op elke pagina gelijk */
.afsluiter { display: grid; grid-template-columns: var(--as) 1fr; padding: var(--sectie-ruimte) var(--marge); }
.afsluiter h2 { grid-column: 2; margin-bottom: 2rem; }
.icoon-rij { grid-column: 2; display: flex; gap: 32px; }
.icoon-rij > div { display: grid; justify-items: center; gap: 0.6rem; font-weight: 600; }

/* ---------- Route: de kaart staat stil, de stops schuiven erlangs ---------- */
.route { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); column-gap: 48px; padding: 0 var(--marge) var(--sectie-ruimte); }
.route-kop { grid-column: 2; margin-bottom: 40px; }
.kaart { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: 24px; }
.kaart svg { display: block; width: 100%; height: auto; background: var(--kaart-land); }
.k-water { fill: var(--kaart-water); }
.k-straat { fill: none; stroke: var(--kaart-straat); stroke-width: 14; stroke-linecap: round; }
.k-kerk { fill: var(--kaart-straat); }
.k-label { fill: var(--color-text-muted); font: 500 30px var(--font-body); }
.k-route { fill: none; stroke: var(--color-kalk); stroke-width: 4; stroke-dasharray: 2 12; stroke-linecap: round; stroke-linejoin: round; }
.kaart-stop circle { r: 26px; fill: var(--color-accent); transition: transform var(--duur-ui) var(--curve-uit), fill var(--duur-hover) ease; transform-box: fill-box; transform-origin: center; }
.kaart-stop text { fill: var(--color-text-inverse); font: 700 28px var(--font-body); text-anchor: middle; pointer-events: none; }
.kaart-stop.actief circle, .kaart-stop:focus-visible circle { fill: var(--color-kalk); transform: scale(1.35); }
.kaart-stop.bezocht:not(.actief) circle { fill: var(--color-text-muted); }
.k-loper { fill: var(--color-kalk); stroke: var(--color-accent); stroke-width: 6; pointer-events: none; }
.kaart-venster {
  position: absolute; right: 16px; top: 16px;
  width: min(42%, 260px);
  background: var(--color-kalk); color: var(--color-text-inverse);
  transition: opacity var(--duur-ui) ease, transform var(--duur-ui) var(--curve-uit);
}
.kaart-venster.wissel { opacity: 0; transform: translateY(8px); }
.kaart-venster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kaart-venster figcaption { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; padding: 12px 14px 14px; font-family: var(--font-body); font-style: normal; font-size: var(--text-basis); font-weight: 600; line-height: 1.2; }
.venster-nummer { flex: none; color: var(--color-accent-ink); }
.kaart-bediening { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kaart-bediening .btn { flex: 1 1 auto; justify-content: center; }
.stops { grid-column: 2; }
.stop { padding-bottom: 72px; scroll-margin-top: 24px; }
.stop-kop { display: flex; align-items: baseline; gap: 1rem; }
.stop-nummer { flex: none; min-width: 1.2ch; font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1; color: var(--color-text-muted); font-variant-numeric: tabular-nums; transition: color var(--duur-hover) ease; }
.stop.actief .stop-nummer { color: var(--color-accent-ink); }
.stop h3 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 600; letter-spacing: var(--letterafstand-kop); line-height: 1.05; }
.stop p { margin: 1rem 0 1.5rem; max-width: 40ch; }
.stop-beelden { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stop-beelden figure { overflow: clip; }
.stop-beelden img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.stop-beelden-1 figure, .stop-beelden-3 figure:first-child { grid-column: 1 / -1; }
.stop-beelden-1 img, .stop-beelden-3 figure:first-child img { aspect-ratio: 3 / 2; }

/* ---------- Augustijnenhof ---------- */
.kerk { display: grid; grid-template-columns: var(--as) minmax(0, 1fr); background: var(--color-kalk); color: var(--color-text-inverse); padding: var(--sectie-ruimte) 0; align-items: end; }
.kerk-tekst { padding: 0 48px 0 var(--marge); }
.kerk-tekst .intro { margin: 1.5rem 0 0; }
.kerk-beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.kerk-beeld figcaption { padding-right: var(--marge); }

.heisessie { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--as) - var(--marge)); column-gap: 48px; padding: var(--sectie-ruimte) var(--marge); align-items: start; }
.hei-beeld { grid-column: 2; grid-row: 1; }
.hei-tekst { grid-column: 1; grid-row: 1; }
.hei-beeld img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.hei-tekst .intro { margin: 1.5rem 0 2.5rem; }
.keuzes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 2.5rem; }
.keuzes li { display: grid; gap: 0.5rem; padding: 28px; background: var(--color-surface-alt); }
.keuzes li + li { background: var(--color-brand-dark); }
.keuzes b { font-size: var(--text-intro); font-weight: 600; line-height: 1.15; }


/* ---------- Aanmelden ---------- */
.plannen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-vlak { display: grid; align-content: end; justify-items: start; gap: 1rem; min-height: 32vw; padding: 40px var(--marge); text-decoration: none; }
.plan-vlak h2 { font-size: var(--text-kop); font-weight: 600; letter-spacing: var(--letterafstand-kop); line-height: 1; }
.plan-vlak p { margin: 0; max-width: 40ch; font-size: var(--text-intro); line-height: 1.35; }
.plan-vlak .knoppen { margin-top: 0.5rem; }
.plan-vlak mark { justify-self: start; }
.plan-mail { background: var(--color-surface-alt); }
.plan-bel { background: var(--color-brand-dark); }

.praktisch { display: grid; grid-template-columns: var(--as) minmax(0, 1fr); padding: var(--sectie-ruimte) var(--marge); }
.prak-beeld { margin-right: 48px; }
.prak-beeld img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.prak-tekst h2 { margin-bottom: 2rem; }
.gegevens { margin: 0 0 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gegevens div { background: var(--color-surface-alt); padding: 24px; }
.gegevens div:nth-child(2), .gegevens div:nth-child(3) { background: var(--color-brand-dark); }
.gegevens dt { color: var(--color-text-muted); font-size: var(--text-klein); margin-bottom: 0.4rem; }
.gegevens dd { margin: 0; font-weight: 600; }
.prak-tekst p { margin: 0 0 1.5rem; }

/* Twee stappen (Augustijnenhof) en de beeldstrook (aanmelden) */
.stappen, .strook { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; padding: var(--sectie-ruimte) var(--marge) 0; }
.stappen h2, .strook h2 { grid-column: 6 / -1; margin-bottom: 48px; }
.stappen img, .strook img { width: 100%; height: 100%; object-fit: cover; }
.stap-een { grid-column: 1 / span 4; }
.stap-een img { aspect-ratio: 3 / 4; height: auto; }
.stap-twee { grid-column: 5 / -1; align-self: end; }
.stap-twee img { aspect-ratio: 16 / 9; height: auto; }
.s-een { grid-column: 1 / span 3; }
.s-een img { aspect-ratio: 9 / 16; }
.s-twee { grid-column: 4 / span 6; }
.s-drie { grid-column: 10 / -1; align-self: end; }
.s-drie img { aspect-ratio: 3 / 4; }


/* ---------- Telefoon ---------- */
@media (max-width: 47.99em) {
  .deuren, .paginakop, .leiders, .afsluiter, .route, .kerk, .heisessie, .praktisch, .plannen { grid-template-columns: minmax(0, 1fr); }
  .deuren > *, .paginakop > *, .afsluiter > *, .deuren h2, .afsluiter h2, .icoon-rij { grid-column: 1; }
  .deur-beeld { grid-row: auto; margin: 0 0 16px; }
  .deur-beeld img { aspect-ratio: 3 / 2; }
  .deur-lijst { grid-row: auto; }
  .paginakop .intro { grid-column: 1; padding: 0 var(--marge); }
  .paginakop-beeld { margin-top: 40px; }
  .paginakop-beeld img { aspect-ratio: 4 / 3; }
  .leiders { padding: var(--sectie-ruimte) var(--marge); }
  .leiders-portret, .leiders-tekst,   .leiders-portret { margin: 0 0 32px; width: 75%; }
  .interactief { display: flex; flex-direction: column; gap: 16px; }
  .interactief .intro { margin: 0 0 24px; }
  .i-een { width: 75%; }
  .opbrengst-vlak h2 { margin-left: 0; }
  .opbrengst-groot li { grid-template-columns: minmax(0, 1fr); padding: 0.75rem 0; }
  .route-kop, .kaart, .stops { grid-column: 1; grid-row: auto; }
  .kaart { position: sticky; top: 0; z-index: 5; margin: 0 calc(var(--marge) * -1) 32px; padding: 0 var(--marge) 10px; background: var(--color-surface); }
  .kaart-venster { display: none; }
  .stop { scroll-margin-top: 330px; }
  .kaart-bediening { margin-top: 8px; }
  .kaart-bediening .btn { min-height: 44px; font-size: var(--text-klein); padding-inline: 0.6em; }
  .kerk-tekst { padding: 0 var(--marge) 32px; }
  .kerk-beeld figcaption { padding-inline: var(--marge); }
  .hei-beeld, .hei-tekst { grid-column: 1; grid-row: auto; }
  .hei-beeld, .prak-beeld { margin: 0 0 32px; width: 75%; }
  .keuzes { grid-template-columns: minmax(0, 1fr); }
  .plan-vlak { min-height: 64vw; padding: 28px var(--marge); }
  .stappen, .strook { display: flex; flex-direction: column; gap: 16px; }
  .stappen h2, .strook h2 { margin-bottom: 8px; }
  .stap-een, .s-een { width: 75%; }
  .s-een img { aspect-ratio: 3 / 4; }
  .paginakop h1 { font-size: clamp(2.5rem, 11.5vw, 4rem); line-height: 1; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .interactief h2, .interactief .intro, .stappen h2, .strook h2 { grid-column: 1 / -1; }
  .route { grid-template-columns: minmax(0, 1fr); }
  .route-kop, .kaart, .stops { grid-column: 1; grid-row: auto; }
  .kaart { position: relative; margin-bottom: 56px; }
  .stops { columns: 2; column-gap: 32px; }
  .stop { break-inside: avoid; }
}