/* Gedeelde paginalayout: kopbalk, hero, footer en 404. Alles hangt aan één as op 40% van de inhoud (--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;
  align-items: center;
  gap: 1rem;
  padding: 24px var(--marge);
}

/* Hero (home): foto over de volle breedte, het logobord links, de zin ernaast */
.hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* links het logobord, de zin direct ernaast */
  column-gap: 48px;
  row-gap: 2rem;
  padding-bottom: var(--sectie-ruimte);
}
.hero-beeld { position: relative; grid-column: 1 / -1; grid-row: 1; overflow: clip; background: var(--color-surface-alt); height: clamp(360px, 72vh, 720px); }
.hero-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }   /* hoog genoeg dat bijna de hele foto te zien is; de hoofden van de groep vrij in beeld */
/* Het logobord links, zodat het de groep op de brug in het midden niet bedekt; de zin rechts ernaast */
.hero-titel { grid-column: 1; grid-row: 2; justify-self: start; margin: -170px 0 0 var(--marge); position: relative; }
.hero-logo { display: block; width: clamp(200px, 19vw, 250px); padding: 18px 20px 14px; background: var(--color-kalk); box-shadow: var(--shadow-zwevend); }
.naast { grid-column: 2; grid-row: 2; align-self: end; padding: 0 var(--marge) 0 0; }
/* De zin in de stijl van de deur-titels (tussenkop in Lora) en over de volle breedte naast het logo */
.naast p { margin: 0; max-width: none; font-family: var(--font-display); font-size: var(--text-subkop); font-weight: 500; line-height: var(--regelafstand-kop); letter-spacing: var(--letterafstand-kop); text-wrap: balance; }

/* Footer: drie kolommen (wie, navigatie, contact) en een regel onderaan, zoals bij Van Steensel Wielersport; compact gehouden */
.site-footer { background: var(--color-footer); color: var(--color-text-inverse); padding: 3rem var(--marge) 1.5rem; font-size: var(--text-basis); line-height: var(--regelafstand-tekst); }
.voet-raster { display: grid; grid-template-columns: calc(var(--as) - var(--marge)) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.voet-raster p { margin: 0 0 0.5rem; max-width: 40ch; }
.voet-naam { font-weight: 700; letter-spacing: -0.02em; }
.voet-titel { font-family: var(--font-body); font-size: inherit; font-weight: 700; line-height: var(--regelafstand-tekst); margin-bottom: 0.4rem; }
.voet-links { display: grid; gap: 0.15rem; }
.voet-raster > div:last-child { justify-self: end; }
.voet-links a { text-decoration: none; }
.voet-onder { margin: 2rem 0 0; padding-top: 1rem; font-size: var(--text-klein); border-top: 1px solid rgb(28 33 21 / 0.15); color: var(--color-text-inverse-muted); }
.jtro { display: flex; gap: 14px; align-items: center; }
.jtro img { flex: none; background: var(--color-kalk); padding: 4px; }

/* 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: 500; 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 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; column-gap: 0.75rem; row-gap: 0; padding: 12px var(--marge); }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .hero-beeld { grid-column: 1; grid-row: 1; height: auto; aspect-ratio: 4 / 3; }
  .hero-titel { grid-column: 1; grid-row: 2; margin: -40px 0 0 var(--marge); }   /* minder overlap: de groep op de brug blijft vrij */
  .hero-logo { width: 170px; padding: 14px 15px 10px; }
  .naast { grid-column: 1; grid-row: 3; padding: 0 var(--marge); }
  .site-footer { padding: 2.5rem var(--marge) 1.5rem; }
  /* Op de telefoon: wie over de volle breedte, navigatie en contact naast elkaar */
  .voet-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
  .voet-raster > div:first-child { grid-column: 1 / -1; }
  .voet-raster > div:last-child { justify-self: start; }
  .niet-gevonden { padding-left: var(--marge); }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .balk { grid-template-columns: 1fr auto; }
}

/* 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; }
}
@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); } }