/* Shared cinematic hero, same across light/dark modes. No text cards. */
/* 1.9.10 — One visual treatment for BOTH color modes of each branch's HERO.
   Intentional scope: the hero plus the Groesbeek site header, never the rest of either demo. */

/* Remove earlier theme-mode cards and translucent blur panels. The photograph carries
   the shading; text floats directly above it in BOTH modes. */
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-hero-copy,
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-copy {
  background:transparent !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  color:#fff5e6 !important;
}
/* Keep native mobile spacing, but remove card-specific horizontal indentation. */
@media (max-width:900px) {
  html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-hero-copy,
  html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-copy {
    padding:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
    max-width:470px;
  }
}

/* Palette is deliberately mode-INDEPENDENT. */
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen {
  --hero-overlay-rgb:9 12 11;
  color:#fff8eb !important;
  background:#131619 !important;
}
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek {
  --hero-overlay-rgb:18 11 7;
  color:#fff0dc !important;
  background:#1d1510 !important;
}
/* Overlay belongs on image, NOT on the heading/CTA panel. */
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-hero-frame::after,
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-frame::after {
  content:"";
  display:block;
  pointer-events:none;
  background:
    linear-gradient(0deg,
      rgb(var(--hero-overlay-rgb) / .90) 0%,
      rgb(var(--hero-overlay-rgb) / .72) 29%,
      rgb(var(--hero-overlay-rgb) / .35) 55%,
      rgb(var(--hero-overlay-rgb) / .04) 100%) !important;
}
@media(min-width:901px){
  html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-hero-frame::after,
  html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-frame::after {
    background:linear-gradient(90deg,
      rgb(var(--hero-overlay-rgb) / .82),
      rgb(var(--hero-overlay-rgb) / .35) 54%,
      rgb(var(--hero-overlay-rgb) / .03) 100%) !important;
  }
}
/* Text remains legible, including the second line in gold and muted descriptions. */
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen :is(.im-hero-title,.im-hero-title>span,.im-hero-copy h1,.im-hero-copy h2),
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek :is(.im-hero-title,.im-hero-title>span,.im-hero-copy h1,.im-hero-copy h2){
  color:#fff9ef !important;
  text-shadow:0 2px 16px rgb(0 0 0 / .55) !important;
}
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-hero-title>em,
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-title>em {
  color:#e3bb70 !important;
  text-shadow:0 2px 10px rgb(0 0 0 / .35) !important;
}
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen :is(.im-hero-intro,.im-hero-note,.im-hero-edition,.im-hero-index,.im-scroll-cue,.im-hero-bottom),
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek :is(.im-hero-intro,.im-hero-note,.im-hero-edition,.im-hero-index,.im-scroll-cue,.im-hero-bottom){
  color:#f3e8d8 !important;
  opacity:1 !important;
}
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-kicker,
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-kicker {
  color:#e2bb74 !important;
  opacity:1 !important;
}
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-btn-underlined,
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-btn-underlined{
  color:#fff5e6 !important;
  border-color:rgba(255,245,230,.76) !important;
  background:transparent !important;
}
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-btn-primary,
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-btn-primary {
  background:#d5ac61 !important;
  color:#20180f !important;
  border-color:transparent !important;
}
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-btn-primary .im-btn-circle,
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-btn-primary .im-btn-circle{
  background:#211912 !important;
  color:#f7dea9 !important;
}
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-hero-bottom,
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-bottom{
  border-color:rgba(235,205,154,.55) !important;
}
html body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-scroll-cue,
html body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-scroll-cue{
  font-size:12px !important;
}



/* Mobile geometry is shared by both theme modes: full-bleed imagery, no opaque copy card.
   Native story scrolling is supplied by main.js; this sheet only defines the pinned scene. */
@media (max-width:900px){
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-layout{
    display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
    width:100%;min-height:0;max-height:none;height:var(--hero-viewport,100svh);
    padding:96px 22px 126px;gap:0;
  }
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-scene{
    position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;
    transform:none;z-index:-2;
  }
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-frame{
    border:0;border-radius:0;box-shadow:none;width:100%;height:100%;clip-path:none;
  }
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-copy{
    width:100%;max-width:470px;padding:0;
  }
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-title,
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-copy h1{
    font-size:clamp(30px,7.4vw,42px);line-height:1.08;margin:12px 0;
  }
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-intro{
    font-size:14px;line-height:1.6;max-width:unset;
  }
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-actions{margin-top:18px;gap:12px}
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-btn-primary{min-height:48px;padding:8px 8px 8px 16px}
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-btn-underlined{min-height:38px;padding:8px 0}
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-note{margin-top:16px;padding-top:12px;font-size:12px;line-height:1.55}
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek :is(.im-scene-label,.im-hero-stamp){display:none}
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-bottom{
    position:absolute;bottom:65px;left:22px;right:22px;width:auto;
    height:42px;margin:0;justify-content:space-between;flex-wrap:nowrap;
  }
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-bottom-left{display:none}
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-bottom .im-scroll-cue{display:flex;font-size:12px}
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero-story-progress{bottom:106px}
  body.imado-groesbeek.im-spectacle .im-hero-story.is-pinned :is([data-hero-prev],[data-hero-next],[data-hero-pause]){display:none}
  body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-hero-layout{
    padding-left:20px;padding-right:20px;padding-bottom:125px;
  }
  body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-hero-bottom{left:22px;right:22px}
  body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-hero-title{font-size:clamp(30px,7.5vw,42px)}
  body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-hero-intro{font-size:14px;line-height:1.6}
}
@media (max-height:675px) and (max-width:900px){
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-layout{padding-top:78px;padding-bottom:115px}
  body.imado-groesbeek.im-spectacle .im-hero-story .im-hero--groesbeek .im-hero-note{margin-top:10px;padding-top:8px}
  body.imado-nijmegen.im-spectacle .im-hero-story .im-hero--nijmegen .im-hero-layout{padding-top:75px;padding-bottom:115px}
}