/* sd-kerst.css · 20/10/2026 (v7: desktop foto links/tekst rechts; v6: kerstzin als ondertitel + KERSTMINI/CADEAUBON als hoofdknoppen, regeltje bovenaan weg; v5: gsm-kersthero met foto als achtergrond; v4: compacte gsm-hero ≤760px, desktop ongewijzigd; v3: hogere hero, staande foto dsc07082 volledig in beeld; v2: zonder kader, lichtjes en takje) — enkel actief onder html.sd-kerst (zie sd-kerst.js). Zonder die class: geen effect, geen extra beeld geladen.
   Statisch: niets beweegt of knippert. Palet blijft; accent dennengroen #2E4A3B + warm goud #E2C384. */
.sd-kerst-kop, .sd-kerst-foto { display: none; }
/* v6: kerstzin vervangt de ondertitel en KERSTMINI/CADEAUBON vervangen «Laten we kennismaken» (zelfde plek). Zonder html.sd-kerst onzichtbaar. */
html:not(.sd-kerst) .sd-kerst-tag, html:not(.sd-kerst) .sd-kerst-cta { display: none !important; }
html.sd-kerst body .sd-hero-nl .hero-text .tagline:not(.sd-kerst-tag), html.sd-kerst body .sd-hero-nl .hero-book, html.sd-kerst .sd-hero-nl .sd-kerst-kop { display: none !important; }
html.sd-kerst body .sd-hero-nl .hero-text .sd-kerst-tag { display: block; }
html.sd-kerst body .sd-hero-nl .sd-kerst-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 4px; }
html.sd-kerst body .sd-hero-nl .sd-kerst-cta a { min-height: 50px; padding: 14px 28px; font-size: 11px; letter-spacing: .22em; }
html.sd-kerst body section.sd-hero-nl .hero-text { grid-row: 1 / span 2; align-self: center; } /* desktop: regeltje bovenaan weg, tekst verticaal gecentreerd naast de foto */
/* v3 indeling: de hero loopt in kerstmodus als raster/kolom i.p.v. tekst over een volle foto.
   De foto (900x1350, 2:3; grootste beschikbare versie) staat in een 2:3-kader met cover: exact dezelfde verhouding, dus niets afgesneden. */
html.sd-kerst body section.hero.sd-hero-nl.sd-hero-nl#hero {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 5vw, 88px); row-gap: 28px; box-sizing: border-box;
  height: auto !important; min-height: clamp(760px, 100vh, 980px) !important; max-height: none !important;
  padding: 116px 6% 56px 8%;
  background: radial-gradient(110% 90% at 80% 45%, #3a3126 0%, #241f18 52%, #171410 100%);
}
html.sd-kerst .sd-hero-nl > img[data-hp-rotate="hero"] { display: none !important; }
html.sd-kerst .sd-hero-nl::after { content: none; display: none; }
html.sd-kerst .sd-hero-nl .sd-kerst-foto {
  display: block; position: relative; z-index: 2; grid-column: 2; grid-row: 1 / span 2; align-self: center;
  height: min(clamp(600px, calc(100vh - 172px), 860px), 60vw); width: auto; aspect-ratio: 2 / 3;
  background: #2b2a24 url("/images/pf/dsc07082-4a51b2ea-2500.webp") center / cover no-repeat;
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45);
  filter: sepia(.12) saturate(1.04) brightness(.97); /* iets warmere toon, zoals v2 */
}
html.sd-kerst .sd-hero-nl .sd-kerst-kop {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  position: relative; z-index: 6; grid-column: 1; grid-row: 1; align-self: start;
}
html.sd-kerst body .sd-hero-nl .hero-text {
  position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important;
  grid-column: 1; grid-row: 2; align-self: end; max-width: 760px !important; min-width: 0;
}
html.sd-kerst .sd-hero-nl .scroll-cue { right: 2.4%; bottom: 56px; }
html.sd-kerst .sd-kerst-zin {
  margin: 0; font-family: var(--serif, "Cormorant Garamond", Georgia, serif); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; color: #F3DFB2; text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
html.sd-kerst .sd-kerst-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
html.sd-kerst .sd-kerst-knoppen a {
  display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 11px 20px; border-radius: 999px;
  font-family: var(--sans, Inter, Arial, sans-serif); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: #2E4A3B; border: 1px solid #E2C384;
}
html.sd-kerst .sd-kerst-knoppen a + a { background: rgba(20,14,8,.55); }
html.sd-kerst .sd-kerst-knoppen a:hover { background: #24392D; }
html.sd-kerst .sd-kerst-knoppen a:focus-visible, html.sd-kerst .sd-hero-nl .hero-book:focus-visible { outline: 3px solid #E2C384; outline-offset: 3px; }
/* Accent op bestaande titel en knoppen */
html.sd-kerst .sd-hero-nl .hero-text h1 em { color: #F3DFB2 !important; }
html.sd-kerst .sd-hero-nl .hero-text .divider { background: #E2C384; }
html.sd-kerst body .sd-hero-nl .sd-ui3-bottom .hero-book, html.sd-kerst .sd-hero-nl .hero-book { background: #2E4A3B !important; border: 1px solid #E2C384 !important; color: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.sd-kerst body .sd-hero-nl .sd-ui3-bottom .hero-book:hover, html.sd-kerst .sd-hero-nl .hero-book:hover { background: #24392D !important; }
html.sd-kerst .sd-hero-nl .hero-book-secondary { color: #F3DFB2 !important; text-decoration-color: rgba(226,195,132,.7) !important; }
@media (max-width: 1023px) {
  html.sd-kerst body section.hero.sd-hero-nl.sd-hero-nl#hero { min-height: 720px !important; }
  html.sd-kerst body .sd-hero-nl .sd-kerst-cta { gap: 10px; }
  html.sd-kerst body .sd-hero-nl .sd-kerst-cta a { padding: 12px 18px; letter-spacing: .14em; }
}
/* Desktop (v7, ≥761px): foto links over de volle herohoogte (±58%), tekst rechts en rechts uitgelijnd, deels over de foto; donkere overloop naar rechts. */
@media (min-width: 761px) {
  html.sd-kerst body section.hero.sd-hero-nl.sd-hero-nl#hero {
    display: flex !important; flex-direction: column; justify-content: center; align-items: flex-end;
    padding: 116px 6% 64px 6%; background: #1d1913;
  }
  html.sd-kerst .sd-hero-nl .sd-kerst-foto {
    position: absolute !important; top: 0; bottom: 0; left: 0; z-index: 1; align-self: auto;
    width: 58% !important; height: auto !important; aspect-ratio: auto; margin: 0; border-radius: 0; box-shadow: none;
    background:
      linear-gradient(90deg, rgba(29,25,19,0) 0%, rgba(29,25,19,0) 50%, rgba(29,25,19,.55) 74%, rgba(29,25,19,.92) 92%, #1d1913 100%),
      linear-gradient(180deg, rgba(29,25,19,.45) 0%, rgba(29,25,19,0) 18%, rgba(29,25,19,0) 82%, rgba(29,25,19,.5) 100%),
      #2b2a24 url("/images/pf/dsc07082-4a51b2ea-2500.webp") 22% 46% / cover no-repeat;
  }
  html.sd-kerst body section.sd-hero-nl .hero-text {
    position: relative !important; z-index: 5; align-self: flex-end; align-items: flex-end; text-align: right;
    width: auto; max-width: min(660px, 56%) !important;
  }
  html.sd-kerst body section.sd-hero-nl .hero-text h1 { text-shadow: 0 2px 18px rgba(0,0,0,.45); }
  html.sd-kerst body section.sd-hero-nl .hero-text .divider { margin-left: auto; }
  html.sd-kerst body section.sd-hero-nl .sd-ui3-bottom { align-items: flex-end; align-self: flex-end; }
  html.sd-kerst body section.sd-hero-nl .sd-kerst-cta { justify-content: flex-end; }
  html.sd-kerst body section.sd-hero-nl .hero-book-secondary { text-align: right; align-self: flex-end; }
  html.sd-kerst .sd-hero-nl .scroll-cue { right: 1.6%; }
}
/* Gsm (v5, 20/10): kerstfoto dsc07082 als staande achtergrond over de volle hero, net als de normale hero.
   Kerstregel bovenaan, titel en knoppen onderaan, donkere gradient voor leesbaarheid; uitsnede houdt gezicht en rode bal vrij in het midden. */
@media (max-width: 760px) {
  html.sd-kerst body section.hero.sd-hero-nl.sd-hero-nl#hero {
    display: flex !important; flex-direction: column; justify-content: flex-end; align-items: stretch; row-gap: 0;
    height: 100vh !important; height: 100svh !important; min-height: 600px !important; max-height: none !important;
    padding: 92px 20px 22px; background: #1d1913;
  }
  html.sd-kerst .sd-hero-nl .sd-kerst-foto {
    position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; align-self: stretch; justify-self: stretch; width: auto !important; height: auto !important; aspect-ratio: auto; margin: 0; border-radius: 0; box-shadow: none;
    background:
      linear-gradient(180deg, rgba(14,11,7,.6) 0%, rgba(14,11,7,.25) 10%, rgba(14,11,7,0) 18%, rgba(14,11,7,0) 46%, rgba(14,11,7,.55) 58%, rgba(14,11,7,.86) 72%, rgba(14,11,7,.92) 100%),
      #2b2a24 url("/images/pf/dsc07082-4a51b2ea-2500.webp") 12% 0 / cover no-repeat;
  }
  html.sd-kerst .sd-hero-nl .sd-kerst-kop { order: 1; gap: 8px; align-self: stretch; }
  html.sd-kerst .sd-kerst-zin { font-size: clamp(17px, 4.9vw, 21px); line-height: 1.2; white-space: nowrap; }
  html.sd-kerst .sd-kerst-knoppen { flex-wrap: nowrap; gap: 8px; }
  html.sd-kerst .sd-kerst-knoppen a { min-height: 36px; padding: 7px 14px; font-size: 10.5px; letter-spacing: .12em; }
  html.sd-kerst body .sd-hero-nl .hero-text { order: 3; align-self: stretch; max-width: none !important; }
  html.sd-kerst body .sd-hero-nl .hero-text h1 { font-size: clamp(30px, 8.6vw, 42px) !important; margin-bottom: 12px !important; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
  html.sd-kerst body .sd-hero-nl .hero-text .divider { margin-bottom: 10px !important; }
  html.sd-kerst body .sd-hero-nl .hero-text .tagline { margin-bottom: 14px !important; }
  html.sd-kerst body .sd-hero-nl .hero-book-secondary { margin-bottom: 0 !important; opacity: 1 !important; transform: none !important; } /* reveal kon niet afgaan: start 28px lager, buiten de hero (overflow hidden) */
  html.sd-kerst body .sd-hero-nl .sd-kerst-cta { gap: 10px; flex-wrap: nowrap; }
  html.sd-kerst body .sd-hero-nl .sd-kerst-cta a { min-height: 46px; padding: 10px 18px; font-size: 10.5px; letter-spacing: .14em; white-space: nowrap; }
  html.sd-kerst body .sd-hero-nl .sd-kerst-cta, html.sd-kerst body .sd-hero-nl .sd-kerst-tag { opacity: 1 !important; transform: none !important; }
  html.sd-kerst .sd-hero-nl .scroll-cue { display: none; }
}
/* Gsm, ook zonder kerst: de kleine kopregel (Fotograaf · Zandhoven · Sinds 2019) viel achter de pil «Kies een datum»; op gsm weg, zoals al op EN/FR. */
@media (max-width: 760px) {
  html body section.sd-hero-nl .hero-meta { display: none !important; }
}