/* sv-hero.css - home hero (spec 6.1) + Vandaag-strip (6.2), motion 14 #3. Home only. Prefixes: sv-hero, sv-today.
   Phone (< 600): 4:5 image at the top, a night panel overlapping it by 48 px with a 48 px fade above it, all text on
   solid night. >= 600: full-bleed 16:9 image at min(92svh, 920px), scrim from the bottom-left, text bottom-left. */

/* ---------- hero ---------- */
.sv-hero{position:relative;isolation:isolate}
.sv-hero__media{position:relative;overflow:hidden;background:var(--sv-night)}
.sv-hero__media img{display:block;width:100%;height:auto;object-fit:cover;object-position:58% 60%}
.sv-hero__media > .sv-chip--ai{left:auto;right:var(--sv-gutter);bottom:62px;z-index:3}
.sv-hero__panel{position:relative;z-index:2;margin-top:-48px;padding:8px 0 40px;background:var(--sv-night)}
.sv-hero__panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:48px;background:linear-gradient(transparent,var(--sv-night));pointer-events:none}
.sv-hero__text{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:16px}
.sv-hero__text > *{max-width:720px}
.sv-hero__text > .sv-eyebrow{margin:0}
.sv-hero__text > .sv-lead{max-width:56ch}
.sv-hero__hours{color:var(--sv-on-dark)}

/* phone only: the chip row "Ga direct naar" (scroll-snap, 48 px chips, shell outline on night).
   base.css resets ul[class] padding at (0,1,1), so the list rule carries two classes. */
.sv-hero__chips{justify-self:stretch;max-width:none;margin-inline:calc(-1 * var(--sv-gutter))}
.sv-hero__chips .sv-hero__chiplist{display:flex;gap:8px;margin:0;padding:6px var(--sv-gutter);list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--sv-gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.sv-hero__chiplist::-webkit-scrollbar{display:none}
.sv-hero__chiplist > li{flex:none;scroll-snap-align:start}
.sv-hero__chip{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:var(--sv-r-pill);box-shadow:inset 0 0 0 1.5px var(--sv-shell);color:var(--sv-on-dark);font:600 .9375rem/1.2 var(--sv-font-text);text-decoration:none;white-space:nowrap;transition:background-color .15s var(--sv-ease),transform .09s var(--sv-ease)}
.sv-hero__chip:hover{background:color-mix(in srgb,var(--sv-on-dark) 10%,transparent)}
.sv-hero__chip:active{transform:scale(.97)}
.sv-hero__cue{display:none}

@media (max-width:599px){
  .sv-hero__actions{width:100%}
  .sv-hero__actions .sv-btn{flex:1 1 220px}
}

@media (min-width:600px){
  .sv-hero{display:grid;align-items:end;min-height:min(92vh,920px);min-height:min(92svh,920px);overflow:hidden}
  .sv-hero__media{position:absolute;inset:0}
  .sv-hero__media picture,.sv-hero__media img{height:100%}
  /* the spec's scrim from the bottom (on the image) + a scrim from the left behind the text panel only: it follows the
     text column (container edge + 380 / 640 / 960 px) and fades in over the panel's top padding, so the sky above the
     text stays bright. The bright sky sits behind the eyebrow and the H1 (contrast measured, see build-notes). */
  .sv-hero__media::before{content:"";position:absolute;inset:0;z-index:1;background:var(--sv-scrim);pointer-events:none}
  /* fix round 1: the bottom scrim stays behind the text column only (the spec's "scrim from the bottom-left"), so the
     relit pavilion, the sun and its glow over the lake keep their light; glyph contrast stays >= AA (build-notes) */
  .sv-hero__media::before{--l:max(var(--sv-gutter),calc((100% - var(--sv-max)) / 2));-webkit-mask:linear-gradient(90deg,var(--sv-night) 0,var(--sv-night) calc(var(--l) + 640px),transparent calc(var(--l) + 900px));mask:linear-gradient(90deg,var(--sv-night) 0,var(--sv-night) calc(var(--l) + 640px),transparent calc(var(--l) + 900px))}
  .sv-hero__text > .sv-eyebrow{color:var(--sv-on-dark)}
  .sv-hero__media > .sv-chip--ai{right:max(var(--sv-gutter),calc((100% - var(--sv-max)) / 2));bottom:16px}
  .sv-hero__panel{margin:0;padding:calc(var(--sv-header-h) + 48px) 0 56px;background:none}
  .sv-hero__panel::before{--sv-hero-l:max(var(--sv-gutter),calc((100% - var(--sv-max)) / 2));top:0;bottom:0;z-index:-1;height:auto;background:linear-gradient(90deg,color-mix(in srgb,var(--sv-night) 68%,transparent) 0,color-mix(in srgb,var(--sv-night) 62%,transparent) calc(var(--sv-hero-l) + 380px),color-mix(in srgb,var(--sv-night) 56%,transparent) calc(var(--sv-hero-l) + 560px),transparent calc(var(--sv-hero-l) + 820px));-webkit-mask:linear-gradient(transparent,var(--sv-night) calc(var(--sv-header-h) + 32px));mask:linear-gradient(transparent,var(--sv-night) calc(var(--sv-header-h) + 32px))}
  .sv-hero__chips{display:none}
  .sv-hero__cue{display:inline-flex;margin-top:-4px}
}

/* fix round 1: tablet portrait (600-1023 px) gets the phone stack with the whole 16:9 image (768 x 432 at 768 px)
   instead of a 768 x 920 crop of mostly sky with the pavilion under the text; the text sits on solid night */
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait){
  .sv-hero{display:block;min-height:0}
  .sv-hero__media{position:relative;inset:auto}
  .sv-hero__media picture,.sv-hero__media img{height:auto}
  .sv-hero__media::before{display:none}
  .sv-hero__media > .sv-chip--ai{bottom:62px}
  .sv-hero__panel{margin-top:-48px;padding:8px 0 40px;background:var(--sv-night)}
  .sv-hero__panel::before{top:auto;bottom:100%;height:48px;z-index:auto;background:linear-gradient(transparent,var(--sv-night));-webkit-mask:none;mask:none}
}

/* Integrator: on desktop screens of 800 px and taller the hero leaves room for the whole Vandaag-strip plus the
   concept pill (fixed bottom-left from 1024 px), so the pill never sits on "Vandaag open vanaf" in the first view. */
@media (min-width:1024px) and (min-height:800px){
  .sv-hero{min-height:min(920px,calc(100vh - 168px));min-height:min(920px,calc(100svh - 168px))}
}

/* motion 14 #3: the image settles from 1.06 to 1 on load (motion only; still otherwise) */
.sv-motion .sv-hero__media img{animation:sv-hero-settle 1.4s var(--sv-ease) both}
@keyframes sv-hero-settle{from{transform:scale(1.06)}to{transform:none}}

/* ---------- Vandaag-strip (6.2): shell band, 4 items; phone 2 x 2, >= 1024 one row ---------- */
.sv-today{background:var(--sv-shell);border-bottom:1px solid var(--sv-line)}
.sv-today__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sv-gap);margin:0}
.sv-today__item{display:flex;align-items:flex-start;min-width:0;min-height:72px;padding:18px 0}
.sv-today__item:nth-child(n+3){border-top:1px solid var(--sv-line)}
.sv-today__p.sv-today__p{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;font-weight:400;line-height:1.35;overflow-wrap:anywhere}
.sv-today__p > .sv-icon{width:24px;height:24px;color:var(--sv-lime-deep)}
.sv-today__p > span{display:grid;justify-items:start;gap:3px;min-width:0}
.sv-today__p strong{font-weight:600}
.sv-today__sub,.sv-today .sv-hours__sub{font-size:.875rem;line-height:1.4;color:var(--sv-muted)}
.sv-today__act{position:relative;display:inline-flex;align-items:center;font-weight:600;font-size:.9375rem;line-height:1.4;color:var(--sv-lime-deep);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.sv-today__act::after{content:"";position:absolute;inset:-14px -6px} /* 21 + 28 = 49 px hit area (spec 3.4) */
@media (min-width:600px){
  .sv-today__p.sv-today__p{flex-direction:row;gap:12px}
  .sv-today__p > .sv-icon{margin-top:1px}
}
@media (min-width:1024px){
  .sv-today__list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sv-today__item{padding:22px 0}
  .sv-today__item:nth-child(n+3){border-top:0}
  .sv-today__item + .sv-today__item{padding-left:var(--sv-gap);border-left:1px solid var(--sv-line)}
}

/* fix round 1 (TBT): the lower home sections skip layout until they come near the screen (same as base .sv-cv).
   #deuren, the heritage strip and the events block stay out (in-page links and the film need their real size). */
.sv-page-home .sv-home-prices,.sv-page-home .sv-gift,.sv-page-home .sv-home-route,.sv-page-home .sv-band,.sv-page-home .sv-footer{content-visibility:auto;contain-intrinsic-size:auto 800px}