/* Augustijnenhof-pagina: de plek als vergaderplek met haar geschiedenis. Kop met twee foto's, het verhaal op kalk
   met de kerk over de volle breedte, en de kloosterkamer naast een staande foto */

/* ---------- Kop: naam over de volle breedte, zin op de as, twee foto's naast elkaar tot de randen ---------- */
.hof-kop {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 8px;
  padding-top: clamp(2rem, 1rem + 4vw, 6rem);
}
.hof-kop 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);
}
.hof-kop .intro { grid-column: 6 / -1; margin: 2rem 0 56px; padding-right: var(--marge); }
.hof-kop figure { overflow: clip; background: var(--color-surface-alt); }
.hof-kop img { width: 100%; height: 100%; object-fit: cover; }
.hof-kop-groot { grid-column: 1 / span 8; }
.hof-kop-groot img { aspect-ratio: 4 / 3; height: auto; object-position: 50% 78%; }
.hof-kop-smal { grid-column: 9 / -1; }

/* ---------- Het verhaal: kalk, kop links, alinea's op de as, kerk over de volle breedte ---------- */
.hof-verhaal {
  display: grid;
  grid-template-columns: var(--as) minmax(0, 1fr);
  row-gap: 64px;
  background: var(--color-kalk);
  color: var(--color-text-inverse);
  padding-top: var(--sectie-ruimte);
}
.hof-verhaal h2 { grid-column: 1; padding: 0 48px 0 var(--marge); }
.hof-verhaal-tekst { grid-column: 2; padding-right: var(--marge); }
.hof-verhaal-tekst p { margin: 0 0 1.25rem; max-width: 52ch; }
.hof-verhaal-tekst p:last-child { margin-bottom: 0; }
.hof-verhaal-beeld { grid-column: 1 / -1; }
.hof-verhaal-beeld img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 60%; }

/* ---------- Vergaderplek: tekst links, staande foto rechts tot de rand ---------- */
.hof-vergader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  column-gap: 48px;
  align-items: end;
  padding: var(--sectie-ruimte) 0 var(--sectie-ruimte) var(--marge);
}
.hof-vergader-tekst .intro { margin: 1.5rem 0 0; }
.hof-vergader-beeld img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 42% 50%; }

/* ---------- Telefoon: één kolom ---------- */
@media (max-width: 47.99em) {
  .hof-kop { grid-template-columns: minmax(0, 1fr); }
  .hof-kop > * { grid-column: 1; }
  .hof-kop h1 { font-size: clamp(2.25rem, 9.6vw, 4rem); }  /* "Augustijnenhof" is lang: kleiner, zodat het binnen de marge blijft */
  .hof-kop .intro { grid-column: 1; padding: 0 var(--marge); margin-bottom: 40px; }
  .hof-kop-groot img { aspect-ratio: 4 / 5; }
  .hof-kop-smal { display: none; }
  .hof-verhaal { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .hof-verhaal h2, .hof-verhaal-tekst { grid-column: 1; padding-inline: var(--marge); }
  .hof-verhaal-beeld img { aspect-ratio: 4 / 3; }
  .hof-vergader { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding: var(--sectie-ruimte) var(--marge); }
  .hof-vergader-beeld { width: 75%; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .hof-kop .intro { grid-column: 1 / -1; padding-left: var(--marge); }
  .hof-verhaal { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .hof-verhaal h2, .hof-verhaal-tekst { grid-column: 1; padding-inline: var(--marge); }
}