/* sd-hero-fit.css · 23/10/2026 (Stefan: «geen afgekapte beelden meer in de hero»).
   Oorzaak: sd-hero-kleiner zette de desktop-hero op 72vh met max 690px. Op een breed scherm (bv. 1950×900) werd de hero
   een strook van ±2,8:1 terwijl de foto's 3:2 zijn → object-fit: cover hield maar ±53% van de fotohoogte over (hoofden/voeten weg)
   en onder de hero bleef een lege beige band.
   Oplossing: desktop-hero vult het venster (100svh, geen max). homepage-rotate.js kent per foto het onderwerp (heroBox) en
   (1) kiest enkel een foto waarvan het onderwerp volledig past in het huidige venster, (2) berekent de uitsnede (object-position)
   zodat het onderwerp altijd in beeld blijft, (3) maakt de hero in het uiterste geval iets hoger dan het venster (--sd-hero-min);
   de tekst blijft dan aan de onderkant van het venster staan (--sd-hero-extra). Gsm (≤560px) houdt zijn hoogte (74svh, min 580px):
   hoger zou op een smal scherm net méér van de zijkanten wegsnijden. Kersthero: vult nu ook het volle venster. */
@media (min-width: 561px) {
  html:not(.sd-kerst) body section.hero.sd-hero-nl.sd-hero-nl#hero {
    height: 100vh !important;
    height: max(100svh, var(--sd-hero-min, 0px)) !important;
    min-height: 520px !important;
    max-height: none !important;
  }
  html:not(.sd-kerst) body section.sd-hero-nl.sd-hero-nl .hero-text { bottom: calc(var(--sd-hero-extra, 0px) + 6svh) !important; }
  html:not(.sd-kerst) body section.sd-hero-nl.sd-hero-nl .scroll-cue { bottom: calc(var(--sd-hero-extra, 0px) + 14svh); }
}
@media (max-width: 560px) {
  html:not(.sd-kerst) body section.hero.sd-hero-nl.sd-hero-nl#hero {
    height: max(74svh, var(--sd-hero-min, 0px)) !important;
  }
}
/* Kersthero (desktop/tablet): vroeger clamp(760px, 100vh, 980px) → op 2560×1440 een beige band van 460px eronder. Nu het volle venster. */
@media (min-width: 1024px) {
  html.sd-kerst body section.hero.sd-hero-nl.sd-hero-nl.sd-hero-nl#hero { min-height: max(760px, 100svh) !important; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  html.sd-kerst body section.hero.sd-hero-nl.sd-hero-nl.sd-hero-nl#hero { min-height: max(720px, 100svh) !important; }
}