/* Opmaak per pagina: home (deuren) en de kop van een subpagina */

/* ---------- Home: drie deuren (de lijst links, de foto rechts tot de marge) ---------- */
.deuren {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--as) - var(--marge));
  column-gap: 0;
  padding: var(--sectie-ruimte) var(--marge);
}
.deuren h2 { grid-column: 1; grid-row: 1; margin-bottom: 1.5rem; }
.deur-beeld { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-left: 48px; overflow: clip; background: var(--color-surface-alt); }
.deur-beeld img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: opacity var(--duur-ui) ease; }
.deur-beeld img.wissel { opacity: 0.2; }
.deur-lijst { grid-column: 1; 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 + 2vw, 3rem);
}
.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: 1.25rem 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-kort { padding-bottom: var(--sectie-ruimte); }
/* Zin direct onder de titel, links uitgelijnd */
.paginakop-links .intro { grid-column: 1 / -1; padding: 0; margin: 1rem var(--marge) 0; max-width: 56ch; }
.paginakop-naast { align-items: end; }
.paginakop-naast h1 { grid-column: 1; }
.paginakop-naast .intro { grid-row: 1; margin: 0; }

/* ---------- Telefoon ---------- */
@media (max-width: 47.99em) {
  .deuren, .paginakop { grid-template-columns: minmax(0, 1fr); }
  .deuren > *, .paginakop > *, .deuren h2 { 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; grid-row: auto; padding: 0 var(--marge); margin-top: 1.5rem; }
  .paginakop-links .intro { padding: 0; margin-top: 1rem; }
  .paginakop-beeld { margin-top: 40px; }
  .paginakop-beeld img { aspect-ratio: 4 / 3; }
  .paginakop h1 { line-height: 1.05; }
}