/* Hero + navigatie – prefix .hero- */

/* ---------- Navigatie: vlakke balk ---------- */
.hero-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  transition: transform 200ms var(--ease);
}
/* Wegschuiven bij naar beneden scrollen (zie hero.js) */
.hero-nav.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .hero-nav { transition: none; }
}
.hero-nav-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 24px;
  min-height: 72px;
}

.hero-nav-menu { display: flex; align-items: center; gap: 40px; }
.hero-nav-list { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }
.hero-nav-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--step-body); color: var(--ink); text-decoration: underline;
  text-decoration-color: transparent; text-underline-offset: .25em; text-decoration-thickness: 1px;
  transition: color var(--dur-link) var(--ease), text-decoration-color var(--dur-link) var(--ease), opacity var(--dur-press) var(--ease);
}
.hero-nav-link:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.hero-nav-link:active { opacity: .7; }

/* Zolang de hero-knop in beeld is, is de nav-knop een rustige gouden tekstlink:
   nooit twee gevulde gouden knoppen tegelijk. Daarna wordt hij de vlakke knop.
   In het telefoonmenu is hij altijd gevuld (de hero-knop ligt dan onder het paneel). */
.hero-nav-cta {
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: .25em; text-decoration-thickness: 1px;
  transition: background var(--dur-link) var(--ease), color var(--dur-link) var(--ease),
    text-decoration-color var(--dur-link) var(--ease), transform var(--dur-press) var(--ease);
}
@media (min-width: 768px) {
  .js .hero-nav.is-at-hero .hero-nav-cta { background: transparent; color: var(--accent-ink); }
  .js .hero-nav.is-at-hero .hero-nav-cta:hover { color: var(--ink); text-decoration-color: currentColor; }
}

.hero-nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: clamp(24px, 4vh, 48px);
  padding-bottom: calc(var(--section-gap) / 2);
}
/* Het logo is de titel van de pagina */
.hero-title { margin: 0; line-height: 0; }
.hero-logo { display: block; margin-inline: auto; width: clamp(240px, 46vw, 700px); height: auto; }
.hero-lede {
  margin-top: clamp(24px, 4vh, 36px);
  font-size: var(--step-m); line-height: 1.45; color: var(--ink);
  max-width: 48ch; text-wrap: balance;
}
.hero-cta { margin-top: 24px; }

/* Drie deuren */
.hero-doors {
  /* Kop, zin, knop en deuren met namen en noten samen boven de vouw (ook 1366×768) */
  --door-w: clamp(160px, calc((100svh - 660px) * .75), 240px);
  display: flex; justify-content: center; gap: 64px;
  margin: clamp(32px, 5vh, 48px) 0 0; padding: 0; list-style: none;
  text-align: left;
}
.hero-door-item { width: var(--door-w); flex: none; }
.hero-door { display: block; text-decoration: none; color: inherit; }
.hero-door:focus-visible { outline: none; }
.hero-door-frame {
  display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--surface);
  transition: opacity .45s var(--ease);
}
.hero-door:focus-visible .hero-door-frame { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.hero-door-zoom { display: block; width: 100%; height: 100%; transition: transform .8s var(--ease); }
.hero-door-img {
  width: 100%; height: 100%; object-fit: cover;
  animation: hero-drift 24s ease-in-out infinite alternate;
}
.hero-door-item:nth-child(2) .hero-door-img { animation-delay: -8s; }
.hero-door-item:nth-child(3) .hero-door-img { animation-delay: -16s; }
.hero-door-img--dim { filter: brightness(.85) contrast(1.05); }
.hero-door-img--group { object-position: 46% 50%; } /* liggende groepsfoto: groep in het midden */
@keyframes hero-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(0, -1.5%, 0); }
}

.hero-door-name {
  display: block; margin-top: 14px;
  font-size: var(--step-m); font-weight: 400; line-height: 1.2; color: var(--ink);
  transition: color var(--dur-link) var(--ease);
}
.hero-door-note {
  display: block; margin-top: 4px;
  font-size: var(--step-body); line-height: 1.4; color: var(--muted); text-wrap: balance;
}

/* Eén actieve deur: de muis gaat voor; zonder hover telt de toetsenbordfocus.
   Die deur blijft vol, de andere twee dimmen. */
.hero-doors:not(:has(.hero-door:hover)):has(.hero-door:focus-visible) .hero-door:not(:focus-visible) .hero-door-frame { opacity: .5; }
.hero-doors:not(:has(.hero-door:hover)) .hero-door:focus-visible .hero-door-zoom { transform: scale(1.03); }
.hero-doors:not(:has(.hero-door:hover)) .hero-door:focus-visible .hero-door-name { color: var(--accent-ink); }
@media (hover: hover) {
  .hero-doors:has(.hero-door:hover) .hero-door:not(:hover) .hero-door-frame { opacity: .5; }
  .hero-door:hover .hero-door-zoom { transform: scale(1.03); }
  .hero-door:hover .hero-door-name { color: var(--accent-ink); }
}
.hero-door:active .hero-door-zoom { transform: scale(1.01); transition-duration: var(--dur-press); }

@media (prefers-reduced-motion: reduce) {
  .hero-door-img { animation: none; transform: none; }
  .hero-door-zoom { transform: none !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .hero-doors { gap: 24px; width: 100%; }
  .hero-door-item { width: auto; flex: 1 1 0; max-width: 280px; }
}

/* ---------- Telefoon ---------- */
@media (max-width: 767px) {
  .hero-nav-bar { min-height: 60px; }

  .hero-nav-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
    background: none; border: 0; color: var(--ink); font: 400 var(--step-body)/1 var(--font); cursor: pointer;
    transition: color var(--dur-link) var(--ease), opacity var(--dur-press) var(--ease);
  }
  .hero-nav-toggle:hover, .hero-nav-toggle[aria-expanded="true"] { color: var(--accent-ink); }
  .hero-nav-toggle:active { opacity: .7; }

  /* Uitklappaneel (alleen met JS) */
  .js .hero-nav-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 24px;
    padding: 16px var(--margin) 28px;
    max-height: calc(100svh - 60px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface);
  }
  .js .hero-nav-menu:not(.is-open) { display: none; }
  .js .hero-nav-list { flex-direction: column; gap: 0; }
  .js .hero-nav-link { display: flex; min-height: 54px; font-size: var(--step-m); }
  .js .hero-nav-cta { align-self: flex-start; }

  /* Zonder JS: geen knop, het menu staat als gewone linkrij in de balk */
  html:not(.js) .hero-nav { position: static; }
  html:not(.js) .hero-nav-toggle { display: none; }
  html:not(.js) .hero-nav-bar { flex-wrap: wrap; row-gap: 0; padding-block: 8px; }
  html:not(.js) .hero-nav-menu { flex: 1 0 100%; }
  html:not(.js) .hero-nav-list { flex-wrap: wrap; gap: 8px 24px; }
  html:not(.js) .hero-nav-cta { display: none; } /* de hero-knop staat er direct onder */

  .hero-inner { padding-top: 28px; }
  .hero-lede { margin-top: 20px; font-size: var(--step-body); max-width: 30ch; }
  .hero-cta { margin-top: 20px; }

  .hero-logo { width: min(100%, 300px); }

  /* Deuren: drie naast elkaar binnen de marges */
  .hero-doors {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    width: 100%; margin-top: 36px;
  }
  .hero-door-item { width: auto; max-width: none; }
  .hero-door-name { margin-top: 10px; font-size: var(--step-body); }
}

@media (max-width: 599px) {
  .hero-door-note { display: none; }
}

/* ---------- Lage liggende schermen (liggende telefoon) ----------
   Gestapeld valt de deurenrij hier onder de vouw. Daarom: tekst links, deuren
   rechts (±100–130px breed), zodat de hele hero in het eerste scherm staat. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero-door-note { display: none; }
  .hero-door-name { margin-top: 8px; font-size: var(--step-body); }
  .hero-inner { padding-top: 16px; }
  .hero-lede { margin-top: 16px; }
  .hero-cta { margin-top: 16px; }
  .hero-doors { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
  .hero-door-item { flex: none; width: 150px; max-width: none; }
}
@media (orientation: landscape) and (max-height: 560px) and (min-width: 600px) {
  .hero-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px; align-items: center; justify-items: start; text-align: left;
    padding-top: 24px;
  }
  .hero-title, .hero-lede, .hero-cta { grid-column: 1; }
  .hero-logo { width: clamp(200px, 30vw, 320px); margin-inline: 0; }
  .hero-lede { max-width: 32ch; text-wrap: pretty; }
  .hero-doors { grid-column: 2; grid-row: 1 / span 3; width: auto; margin: 0; }
  .hero-door-item { width: clamp(88px, 15vw, 130px); }
}