/* Gedeelde paginalayout: kopbalk, hero, mozaïek, tafel, footer en 404. Alles hangt aan één as op 42% (--as), de kantlijn van het jaarboek */

/* Kopbalk: woordmerk op de marge, het menu op de as, de actie rechts */
.balk {
  position: relative;
  z-index: 15;
  display: grid;
  grid-template-columns: calc(var(--as) - var(--marge)) 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 24px var(--marge);
}

/* Hero (home): foto over de volle breedte, titel op de as, intro en knoppen links */
.hero {
  display: grid;
  grid-template-columns: var(--as) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: max(560px, calc(100svh - var(--balk-dikte) - 96px));
  padding-bottom: 56px;
}
.hero-beeld { position: relative; grid-column: 1 / -1; grid-row: 1; overflow: clip; background: var(--color-surface-alt); min-height: 280px; margin-bottom: 40px; }
.hero-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero h1 {
  grid-column: 2; grid-row: 2;
  padding-right: var(--marge);
  margin-left: -0.05em;
  font-size: var(--text-display);
  font-weight: 500;
  line-height: var(--regelafstand-display);
  letter-spacing: var(--letterafstand-display);
}
.naast { grid-column: 1; grid-row: 2; align-self: end; padding: 0 40px 0.6rem var(--marge); }
.naast p { margin: 0 0 1.5rem; max-width: 26ch; font-size: var(--text-intro); line-height: 1.3; }

/* Mozaïek: zes kolommen, tegels zonder voeg */
.mozaiek { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(30vw, auto); }
.mozaiek > * { margin: 0; overflow: clip; }
.mozaiek img { width: 100%; height: 100%; object-fit: cover; }
.tegel-kop { grid-column: span 3; background: var(--color-kalk); color: var(--color-text-inverse); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.tegel-kop h2 { max-width: 11ch; }
.tegel-kop p { margin: 0 0 1.5rem; max-width: 40ch; }
.tegel-beeld { grid-column: span 3; background: var(--color-surface-alt); }
.tegel-oranje { grid-column: span 2; background: var(--color-accent); color: var(--color-text-inverse); padding: 32px; display: flex; align-items: flex-end; }
.tegel-oranje p { margin: 0; font-size: var(--text-intro); font-weight: 600; line-height: 1.1; max-width: 16ch; }
.tegel-oranje b { display: block; font-size: var(--text-monument); font-weight: 700; letter-spacing: -0.06em; line-height: 0.85; margin-left: -0.06em; }
.tegel-donker { grid-column: span 4; background: var(--color-surface-alt); padding: 40px; display: flex; align-items: flex-end; }
.opbrengst li { font-size: var(--text-intro); line-height: 1.3; letter-spacing: -0.01em; padding: 0.45em 0; }
.tegel-breed { grid-column: span 4; }
.tegel-smal { grid-column: span 2; }

/* Aan tafel: het getal links, de tekst op de as */
.tafel {
  display: grid;
  grid-template-columns: var(--as) 1fr;
  align-items: end;
  background: var(--color-surface-alt);
  padding: calc(var(--sectie-ruimte) * 0.8) var(--marge);
}
.tafel-getal { margin: 0 0 -0.1em -0.05em; font-size: var(--text-monument); font-weight: 700; letter-spacing: -0.06em; line-height: 0.8; white-space: nowrap; }
.tafel-tekst .intro { margin: 1.5rem 0 2rem; max-width: 40ch; }

/* Footer: de naam op volle breedte, op kalk */
.site-footer { background: var(--color-kalk); color: var(--color-text-inverse); padding: 96px var(--marge) 40px; }
.site-footer .naam { margin: 0 0 56px -0.05em; max-width: none; font-size: var(--text-monument); font-weight: 700; letter-spacing: -0.055em; line-height: 0.88; }
.site-footer .rij { display: grid; grid-template-columns: calc(var(--as) - var(--marge)) 1fr 1fr; gap: 2rem; align-items: end; }
.jtro { display: flex; gap: 14px; align-items: flex-end; margin: 0; font-size: var(--text-klein); line-height: 1.45; max-width: 44ch; }
.jtro img { flex: none; }

/* 404: het getal op de as */
.niet-gevonden { min-height: 60svh; padding: var(--sectie-ruimte) var(--marge); padding-left: var(--as); }
.niet-gevonden h1 { font-size: var(--text-display); font-weight: 600; letter-spacing: var(--letterafstand-display); line-height: var(--regelafstand-display); }
.niet-gevonden .intro { margin: 1.5rem 0 2rem; }

/* Telefoon: een eigen compositie, één kolom */
@media (max-width: 47.99em) {
  .balk { grid-template-columns: 1fr auto auto; gap: 12px; padding: 14px var(--marge); }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; padding-bottom: 48px; }
  .hero-beeld { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; min-height: 0; margin: 0 0 28px; }
  .hero h1 { grid-column: 1; grid-row: 2; padding-left: var(--marge); font-size: clamp(3.25rem, 16vw, 5rem); }
  .naast { grid-column: 1; grid-row: 3; padding: 24px var(--marge) 0; }
  .mozaiek { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .mozaiek > * { grid-column: 1 / -1; }
  .tegel-kop, .tegel-donker { padding: 28px var(--marge); }
  .tegel-kop { min-height: 70vw; }
  .tegel-beeld { aspect-ratio: 4 / 3; }
  .tegel-smal { display: none; }
  .tegel-oranje { min-height: 60vw; padding: 28px var(--marge); }
  .tafel { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .site-footer { padding: 64px var(--marge) 32px; }
  .site-footer .rij { grid-template-columns: minmax(0, 1fr); }
  .niet-gevonden { padding-left: var(--marge); }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .balk { grid-template-columns: 1fr auto auto; }
  .site-footer .rij { grid-template-columns: 1fr 1fr; }
}

/* Aankomst van de eerste sectie: de kop blijft zichtbaar en schuift alleen een stukje */
@media (prefers-reduced-motion: no-preference) {
  [data-laad="kop"]   { animation: hero-schuif 900ms var(--curve-expo) 80ms both; }
  [data-laad="zin"]   { animation: hero-rijs 520ms var(--curve-uit) 320ms both; }
  [data-laad="actie"] { animation: hero-rijs 520ms var(--curve-uit) 420ms both; }
  [data-laad="beeld"] img { animation: hero-zak 1400ms var(--curve-zacht) 60ms both; }
  /* Trage drift op de havenfoto tijdens het scrollen */
  @supports (animation-timeline: view()) {
    .tegel-breed img { animation: drift linear both; animation-timeline: view(); }
  }
}
@keyframes hero-schuif { from { transform: translateY(0.15em); } }
@keyframes hero-rijs   { from { opacity: 0; transform: translateY(12px); } }
@keyframes hero-zak    { from { transform: scale(1.06); } }
@keyframes drift       { from { transform: scale(1.1) translateY(-3%); } to { transform: scale(1.1) translateY(3%); } }