/* PAGE-HERO — compacte navy pagina-opener (HERO-SYSTEEM §9, bindend).
   Eén contract voor de vier "gewone" pagina's: over-ons, oplossingen,
   kennisbank en contact. Timo-besluit 2026-07-20: zelfde hoogte, navy,
   copy links, H1 = paginanaam groot; direct onder de hero ALTIJD een
   lichte sectie (paginacontract, geen navy-op-navy vervolg meer).

   Twee varianten:
   - .page-hero--foto  (over-ons): foto rechts in een r-lg kader; H1 draagt
     meer tekst en staat één trap kleiner via .page-hero--lang.
   - standaard (tekst-hero's): beeldmerk-watermerk rechts (ct1-recept),
     zodat de rechterflank nooit leeg oogt.

   Kruimelpad: eerste kind van .container (sitebreed contract in base.css);
   de padding-top hieronder loopt tot het kruimelpad en is IDENTIEK aan het
   svc-hero-regime zodat de kruimels op elke pagina op dezelfde plek staan.

   Geladen door de shells van over-ons, oplossingen, kennisbank en contact. */

.page-hero {
  position: relative;
  overflow: hidden; /* cropt watermerk/foto-schaduw aan de rand */
  padding-top: clamp(102px, 13vh, 128px);   /* tot het kruimelpad */
  padding-bottom: clamp(2.5rem, 5vh, 3.25rem);
}

.page-hero .crumbs { margin-bottom: clamp(28px, 4.5vh, 44px); }

/* De vaste content-band: dit maakt de vier hero's even hoog, met of zonder
   foto. Copy verticaal gecentreerd in de band. */
.page-hero-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  min-height: clamp(300px, 38vh, 396px);
}

.page-hero-copy {
  max-width: 660px;
}

.page-hero-copy .eyebrow { margin-bottom: 18px; }

/* Paginanaam-titel (over-ons/oplossingen/kennisbank/contact): één maat, groot.
   Timo 2026-07-21: exact de homepage-hero-schaal (--text-hero), zodat elke
   pagina-H1 sitebreed even groot is als "de juiste mensen echt impact". */
.page-hero-title {
  font-size: var(--text-hero);
  margin-bottom: 18px;
}

/* .page-hero--lang blijft bestaan voor kop-lastige varianten maar draagt
   sinds 2026-07-21 GEEN eigen kleinere maat meer: over-ons kreeg de korte
   paginanaam "Over ons." en volgt nu dezelfde --text-hero-schaal als de rest. */
.page-hero--lang .page-hero-title {
  max-width: 13em;
}

.page-hero-lead {
  max-width: 54ch;
  color: var(--text-body-inv);
}

/* Scroll-link ("Ontmoet het team"): btn--link-contract + chevron omlaag. */
.page-hero-scroll { margin-top: 26px; }

.page-hero-scroll .chev {
  flex: none;
  color: var(--orange-500);
  transition: transform .18s ease;
}

.page-hero-scroll:hover .chev { transform: translateY(3px); }

/* — Foto-variant (over-ons) — */
.page-hero-media {
  position: relative;
  flex: 0 0 min(45%, 560px);
  align-self: stretch;
  /* min-height 0 + absolute img: anders duwt de intrinsieke fotohoogte
     (flex min-height:auto) de band omhoog en is over-ons hoger dan de
     andere drie (contract-eis: zelfde hoogte; runtime gemeten 260720). */
  min-height: 0;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
}

.page-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* — Watermerk-variant (tekst-hero's): beeldmerk rechts, ct1-recept.
   GEEN data-reveal op dit element: eigen transform-centrering (translateY)
   botst met de reveal-transform van motion.js (HANDOVER-ti gotcha 1). — */
.page-hero-watermark {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(420px, 38vw, 620px);
  /* Zie de toelichting bij .s8-watermark in s8.css: deze regel zet alleen width,
     dus zonder height:auto duwt het height-attribuut van de img het watermerk
     plat (547x550 werd 547x391). */
  height: auto;
  opacity: var(--watermark-dark);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Over-ons: Timo 2026-07-21 wil het beeldmerk RECHTS, "een beetje achter die foto"
   is prima — dus dezelfde rechter-positie als de andere tekst-hero's (default
   .page-hero-watermark). De oude links-override is verwijderd; het merk zit nu
   deels achter het foto-kader en piept er rondom uit. Iets zachter zodat het
   naast de foto niet luid wordt. */
.page-hero--foto .page-hero-watermark {
  opacity: .06;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .page-hero {
    /* fixed header (~78px) staat uit de flow */
    padding-top: calc(78px + clamp(1.25rem, 3vh, 1.75rem));
  }

  .page-hero .crumbs { margin-bottom: clamp(22px, 4vw, 32px); }

  /* Gestapeld: band loslaten, copy boven de foto (HERO-SYSTEEM §2). */
  .page-hero-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
  }

  .page-hero-media {
    flex: none;
    align-self: auto;
    width: 100%;
    aspect-ratio: 3 / 2;
    max-height: 420px;
    margin-top: clamp(28px, 5vw, 40px);
  }

  .page-hero-watermark {
    width: clamp(340px, 44vw, 460px);
    opacity: .06;
  }
}

@media (max-width: 560px) {
  .page-hero-title { font-size: var(--text-hero-s); line-height: 1.04; } /* gedeelde ≤560-schaal */

  .page-hero-media { max-height: 300px; }

  .page-hero-watermark { display: none; } /* op smal alleen ruis */
}