/* ════════════════════════════════════════════════════════
   INDUSTRY DETAIL — hero (NovaVolt model, reusable)
   White zone (fixed navbar + heading bar) ABOVE a contained,
   round-topped photo. Stats + breadcrumb sit over the photo.
   Intro: a fixed .ind-hero__intro cover (same photo) shrinks
   from full-screen into the photo's slot (FLIP), revealing the
   white zone above. Uses only existing tokens. No libraries.
   ════════════════════════════════════════════════════════ */

.ind-hero {
  --nav-h: 72px;                 /* fallback; JS sets the real navbar height */
  box-sizing: border-box;
  position: relative;
  height: 100vh;                 /* photo fills down to the bottom of the viewport */
  padding-top: var(--nav-h);     /* clear the fixed navbar (part of the white zone) */
  background: var(--e-global-color-bg);
  display: flex;
  flex-direction: column;
  /* no overflow:hidden — the fixed intro cover must not be clipped */
}

/* --- white heading bar (under the navbar, above the photo) --- */
.ind-hero__bar { flex: 0 0 auto; background: var(--e-global-color-bg); }
/* same container as .site-header__inner so the heading lines up with the logo */
.ind-hero__bar-inner {
  max-width: 1400px; margin: 0 auto;
  /* horizontal gutter matches .site-header__inner so the heading lines up with the logo */
  padding: 56px var(--gutter) 48px;   /* more breathing room above the breadcrumb + below the title */
}
.ind-hero__heading {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.85vw, 3rem);   /* afgestemd op de langste titel (52 tekens) zodat nowrap op elk desktopformaat past */
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--e-global-color-text);
  margin: 0;
  white-space: nowrap;
  text-align: left;
}
@media (max-width: 1024px) {
  .ind-hero__heading { white-space: normal; }   /* allow wrap on tablet/mobile */
}
/* yellow highlight that stays legible on white: skewed marker bar behind text */
.ind-hero__hl { position: relative; display: inline-block; color: var(--e-global-color-text); }
.ind-hero__hl::after {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.08em;
  height: 0.30em; background: var(--e-global-color-accent);
  opacity: 0.9; z-index: -1; transform: skew(-6deg); border-radius: 4px;
}
/* blinking caret for the code-typing effect (JS types the title after the reveal) */
.ind-hero__caret {
  display: none;
}
@keyframes indHeroBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* Telefoon: hero-kop altijd wrappen + klein genoeg zodat ook langere NL-titels niet overflowen (voorkomt verspringen). */
@media (max-width: 640px) {
  html body .ind-hero .ind-hero__heading {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: clamp(22px, 6vw, 28px) !important;
  }
}
@media (prefers-reduced-motion: reduce) { .ind-hero__caret { display: none; } }

/* --- contained photo block --- */
.ind-hero__media {
  flex: 1 1 auto;
  position: relative;
  min-height: 300px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}
.ind-hero__media .hero-img,
.ind-hero__media img.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
}
.ind-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(0,0,0,0.55), transparent 42%),
    linear-gradient(to bottom, rgba(0,0,0,0.30), transparent 30%);
  pointer-events: none;
  opacity: 0;                       /* fades in after the reveal */
  transition: opacity .8s ease;
}
.hero-reveal.is-loaded .ind-hero__scrim { opacity: 1; }

/* scroll-down hint, bottom-right of the photo: label + thin line with a pulse */
.ind-hero__scroll {
  /* rechts uitgelijnd op dezelfde lijn als de header-inhoud (max-width 1400 + --gutter) */
  position: absolute; right: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); bottom: 16px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  /* ≥44px touch target without shifting the visible content (padding offsets the lower `bottom`) */
  min-height: 44px; padding: 14px 0;
  color: #fff; text-decoration: none;
  opacity: 0; transition: opacity .6s ease;
}
.hero-reveal.is-loaded .ind-hero__scroll { opacity: 1; }
.ind-hero__scroll-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82); transition: color .25s ease;
}
.ind-hero__scroll:hover .ind-hero__scroll-label { color: #fff; }
.ind-hero__scroll-arrow {
  position: relative; width: 16px; height: 16px;
}
.ind-hero__scroll-arrow svg {
  width: 16px; height: 16px; display: block;
  color: rgba(255, 255, 255, 0.35);
  animation: indHeroArrowPulse 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes indHeroArrowPulse {
  0%, 100% { color: rgba(255, 255, 255, 0.35); }
  50%      { color: #ffffff; }
}
/* smooth in-page scroll + offset for the fixed navbar */
html { scroll-behavior: smooth; }
#how-we-help { scroll-margin-top: 88px; }

/* breadcrumb in the white bar, above the heading */
.ind-hero__crumb {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--e-global-color-text-mute);
}
.ind-hero__crumb a { color: var(--e-global-color-text-mute); text-decoration: none; transition: color .2s ease; }
.ind-hero__crumb a:hover { color: var(--e-global-color-primary); }
.ind-hero__crumb span[aria-current] { color: var(--e-global-color-text); }
.ind-hero__crumb-sep { opacity: 0.5; }

/* stats row over the bottom of the photo — same 1400/20px container as the
   title so the thumbnail's left edge lines up with the heading + logo */
.ind-hero__stats {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: 18px 52px;
  padding: 0 var(--gutter) 34px;   /* horizontal gutter aligns the stats with heading + logo */
}
.ind-hero__stat strong {
  display: block;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1; letter-spacing: -0.02em;
  color: #fff; margin-bottom: 8px;
}
.ind-hero__stat span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ════════════════════════════════════════════════════════
   INTRO — ONE photo. The real .ind-hero__media goes full-screen +
   zoomed, then clip-reveals to its resting frame while zooming out.
   No separate cover element → no cross-fade glitch. JS adds the
   `intro` then `is-revealing` classes and measures --ct/--cr/--cb/
   --cl/--crad (the resting frame on screen).
   ════════════════════════════════════════════════════════ */
.ind-hero.intro .ind-hero__media {
  position: fixed; inset: 0; height: auto; width: auto;
  border-radius: 0; z-index: 9999;
  clip-path: inset(0 0 0 0 round 0);
  transition: clip-path 1200ms cubic-bezier(.65, .05, .36, 1);
  will-change: clip-path;
}
/* Pending-stand: door een inline <head>-script gezet vóór de allereerste
   paint, zodat de hero meteen in de intro-startstand staat. Anders flitst
   de normale layout (titel + foto op z'n plek) even in beeld totdat run()
   op window.load de intro opstart (op traag netwerk goed zichtbaar). */
html.hero-pending .ind-hero .ind-hero__media {
  position: fixed; inset: 0; height: auto; width: auto;
  border-radius: 0; z-index: 9999;
  clip-path: inset(0 0 0 0 round 0);
}
html.hero-pending .ind-hero .ind-hero__media .hero-img {
  transform: scale(1.18) translateZ(0);
}
.ind-hero.intro .ind-hero__media .hero-img {
  transform: scale(1.18) translateZ(0); /* start zoomed in — instant, NO transition here */
  will-change: transform, top, left, width, height;
  backface-visibility: hidden;
}
/* end state: clip away to the resting frame + zoom back to 1. The transform
   transition lives HERE so the initial jump to 1.18 does NOT animate; only the
   zoom-out does, synced with the clip-path. */
.ind-hero.intro.is-revealing .ind-hero__media {
  /* round ONLY the top corners (top-left top-right bottom-right bottom-left) */
  clip-path: inset(var(--ct) var(--cr) var(--cb) var(--cl) round var(--crad) var(--crad) 0 0);
}
.ind-hero.intro.is-revealing .ind-hero__media .hero-img {
  /* de IMG-box animeert mee naar het rustframe, synchroon met de clip:
     anders is de object-fit-uitsnede fullscreen berekend en verspringt de
     foto zichtbaar zodra hij terug de flow in gaat (smal scherm: hoogte-
     gedreven cover-schaal ≈ halveert). Box = clipvenster → naadloze landing.
     Expliciete top/left + calc-maat: een <img> (replaced element) negeert
     bottom/right bij width/height:auto en valt terug op z'n intrinsieke maat. */
  top: var(--ct); left: var(--cl);
  width: calc(100% - var(--cl) - var(--cr));
  height: calc(100% - var(--ct) - var(--cb));
  transform: scale(1) translateZ(0);
  transition: transform 1200ms cubic-bezier(.65, .05, .36, 1),
              top       1200ms cubic-bezier(.65, .05, .36, 1),
              left      1200ms cubic-bezier(.65, .05, .36, 1),
              width     1200ms cubic-bezier(.65, .05, .36, 1),
              height    1200ms cubic-bezier(.65, .05, .36, 1);
}

/* ── context (breadcrumb + stats): hidden until the cover lands ── */
.hero-reveal .hero-breadcrumb,
.hero-reveal .hero-stat {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.hero-reveal.is-loaded .hero-breadcrumb { opacity: 1; transform: none; }
.hero-reveal.is-loaded .hero-stat       { opacity: 1; transform: none; }
.hero-reveal.is-loaded .hero-stat:nth-child(1) { transition-delay: .05s; }
.hero-reveal.is-loaded .hero-stat:nth-child(2) { transition-delay: .15s; }
.hero-reveal.is-loaded .hero-stat:nth-child(3) { transition-delay: .25s; }
.hero-reveal.is-loaded .hero-stat:nth-child(4) { transition-delay: .35s; }
.hero-reveal.is-loaded .hero-stat:nth-child(5) { transition-delay: .45s; }

/* ── responsive ── */
/* TABLET: lighter heading-bar rhythm; stats wrap to 2-up; thumb hidden */
@media (max-width: 1024px) {
  /* tablet: laat de hero met content meegroeien i.p.v. een vol 100vh-scherm,
     zodat de stats-rij niet pas na een volledig scherm verschijnt */
  .ind-hero { height: auto; min-height: 80vh; }
  /* a little less reserved navbar space + lighter heading-bar rhythm */
  .ind-hero__bar-inner { padding: 44px var(--gutter) 36px; }
  .ind-hero__stats { gap: 16px 40px; }
  .ind-hero__stat { flex: 1 1 40%; }   /* wrap to 2-up on tablet */
  .ind-hero__thumb { display: none; }
  /* scroll-hint calc collapses below 1400px; pin it to the gutter edge */
  .ind-hero__scroll { right: var(--gutter); }
  #how-we-help { scroll-margin-top: 72px; }
}
/* PHONE: hero grows with content; stats stay 2-up but smaller; scroll hint lifts */
@media (max-width: 640px) {
  /* let the hero grow with its content instead of being locked to one screen,
     so stacked stats + scroll hint never collide or get clipped */
  .ind-hero { height: auto; min-height: 100svh; }
  .ind-hero__media { min-height: 60vh; }
  .ind-hero__bar-inner { padding: 28px var(--gutter) 22px; }
  /* heading fits small screens without overflowing its container */
  .ind-hero__heading { font-size: clamp(1.3rem, 6vw, 2rem); }
  /* scroll hint: align with the photo padding and lift it above the stats row */
  .ind-hero__scroll { right: 16px; bottom: 72px; }
  /* stats: roomier stacking, smaller numbers so 2-up stays within the viewport */
  .ind-hero__stats { gap: 12px 24px; }
  .ind-hero__stat strong { font-size: clamp(20px, 6vw, 26px); }
}
/* SMALLEST PHONES: largest-heading floor; stats stack to one column */
@media (max-width: 420px) {
  .ind-hero__heading { font-size: clamp(1.2rem, 7vw, 1.7rem); }
  .ind-hero__stat { flex: 1 1 100%; }   /* single column on the smallest phones */
  /* with stats stacked taller, hide the scroll hint to avoid overlap/overflow */
  .ind-hero__scroll { display: none; }
}

/* ── reduced motion: no intro animation, everything shown ── */
@media (prefers-reduced-motion: reduce) {
  .ind-hero.intro .ind-hero__media,
  html.hero-pending .ind-hero .ind-hero__media {
    position: relative; inset: auto; clip-path: none; z-index: auto;
  }
  .ind-hero.intro .ind-hero__media .hero-img,
  html.hero-pending .ind-hero .ind-hero__media .hero-img { transform: none; top: 0; left: 0; width: 100%; height: 100%; transition: none; }
  .ind-hero__scrim { opacity: 1 !important; transition: none !important; }
  .ind-hero__scroll { opacity: 1 !important; transition: none !important; }
  .ind-hero__scroll-line::after { animation: none !important; }
  html { scroll-behavior: auto; }
  .hero-reveal .hero-breadcrumb,
  .hero-reveal .hero-stat {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Telefoon: scroll-indicator uit — botst met de 2-aan-2 statistieken in de foto */
@media (max-width: 640px) {
  .ind-hero__scroll { display: none; }
}