/* SVC-HERO — ServiceHero-contract (HERO-SYSTEEM.md §4 + §9, bindend).
   Timo-besluit 2026-07-20 (mock Screenshot 17.28.23): dienst-hero's zijn WIT
   (omgekeerde kleuren t.o.v. de rest — zo is meteen duidelijk dat dit een
   ander paginatype is), met:
   - kruimelpad bovenaan (sitebreed contract, base.css),
   - eyebrow OPLOSSING (ongewijzigd),
   - H1 = dienstnaam heel groot, gestapeld (TALENT / INTELLIGENCE etc.),
   - rechts een VSL-kader zoals de homepage-hero: rondom r-lg, play-knop
     altijd zichtbaar (homepage-recept, play-btn--pulse),
   - direct onder de hero de logostrip op licht, daarna een NAVY sectie.
   De oude flush-right-paneelgeometrie is vervangen door een grid met een
   rondom afgerond kader (homepage .hero-video-familie). Paginaspecifiek mag
   ALLEEN media-invulling/object-position via .svc-hero--ws / --rpo / --ti.
   TI-paneel-internals (dot-grid, svg, chips) blijven in ti1.css.
   Valkuil: play-btn centreert via de translate-PROPERTY (reveal-proof). */

.svc-hero {
  position: relative;
  padding-top: clamp(102px, 13vh, 128px);   /* tot het kruimelpad (§9) */
  padding-bottom: clamp(3rem, 6vh, 4.25rem);
}

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

.svc-hero-grid {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: center;
}

/* HERO ZONDER MEDIA (Timo 2026-08-20). De panelen naast de copy op W&S en RPO
   zijn eruit tot de dienstvideo's er zijn; de hero is daar nu alleen tekst.

   WAAROM display:block EN NIET grid-template-columns: 1fr. Met één kolom zou de
   copy de volle containerbreedte pakken en dan valt de H1 anders af: de <br>'s in
   "Werving &<br>Selectie" en de 46ch van de lead zijn op deze kolombreedte
   ingeregeld. Met een blok van 640px blijft de regelval exact zoals hij was en is
   het enige verschil dat er rechts niets meer staat -- precies wat er gevraagd is.
   640px is dezelfde waarde die de gestapelde stand (<=1024) al gebruikt, dus de
   hero leest op elke breedte hetzelfde.

   Terug naar twee kolommen: haal --solo van de grid in ws1/rpo1 en plak het
   <figure> terug uit content/ARCHIEF-260820-videos-en-heropanelen.md. */
.svc-hero-grid--solo {
  display: block;
}

.svc-hero-grid--solo .svc-hero-copy {
  max-width: 640px;
}

.svc-hero-copy {
  position: relative;
  z-index: 1;
}

.svc-hero-copy .eyebrow { margin-bottom: 20px; }

/* Dienstnaam gestapeld en groot (mock): regelval per pagina vast met <br>.
   Timo 2026-07-21: exact de homepage-hero-schaal (--text-hero), sitebreed gelijk. */
.svc-hero-title {
  font-size: var(--text-hero);
  margin-bottom: 20px;
}

.svc-hero-lead { max-width: 46ch; }

.svc-hero-acties { margin-top: 28px; }

.svc-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* W&S-hero draagt twee primaire anchors (zelfde href): het lange desktop-label
   en het korte mobiele "Plan een strategiegesprek". Standaard toont het lange;
   ≤560 wisselt (zie onder). Op de overige dienstpagina's bestaat .svc-cta-sm niet. */
.svc-cta-sm { display: none; }

/* Timo 2026-07-21: op alle drie de dienstpagina's staan de twee CTA's NAAST
   elkaar (zoals TI); WS/RPO wrapten door lange labels. Op desktop nowrap; de
   ghost-labels zijn ingekort zodat het paar past. */
@media (min-width: 1025px) {
  .svc-hero-ctas { flex-wrap: nowrap; }
}

.svc-hero-micro {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 14px;
}

/* VSL-kader: homepage-recept (rondom r-lg, zachte lift-schaduw op licht).
   Timo 2026-07-21: hoger/groter kader op alle drie de dienstpagina's (was 16/10
   max 520px); 4/3 max 560px voelt "groter en wat hoger", identiek voor WS/RPO/TI. */
.svc-hero-media {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-paper);
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 3;
  max-height: 560px;
}

.svc-hero-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.svc-hero-media:hover .svc-hero-thumb { transform: scale(1.05); }

.svc-hero--rpo .svc-hero-thumb { object-position: center 22%; }

/* Play-knop: altijd zichtbaar (homepage-recept; klik doet pas iets zodra
   data-video een URL heeft, main.js). Centrering via translate-property. */
.svc-hero .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 76px;
  height: 76px;
  z-index: 2;
}

.svc-hero .play-btn::after {
  border-left-width: 21px;
  border-top-width: 13px;
  border-bottom-width: 13px;
  margin-left: 6px;
}

/* VERWIJDERD 23 augustus 2026 (SEO-audit, prestaties: "Het lettertype Caveat
   wordt op alle 35 pagina's opgehaald terwijl geen enkele pagina het gebruikt").
   Deze selectors waren de laatste gebruikers van --font-hand (Caveat). Hun
   markup is bij de bouwronde van 20 augustus met de video-placeholders
   verdwenen: grep op de klasse geeft 0 treffers over alle 46 gebouwde .html,
   sections/, sections-en/ en cms/templates/, terwijl dezelfde grep op de wel
   bestaande klasse hero-video-thumb 2 gebouwde pagina's vindt. Komt de
   handschrift-notitie terug, dan komt --font-hand in css/tokens.css er weer bij
   en Caveat weer in de fonts-URL in de shells.

   CONTROLE 23 augustus 2026 (Timo, tweede paar ogen): zelfde fout als in
   css/sections/s1.css. Het geciteerde blok droeg zijn eigen commentaarhaken nog,
   en CSS-commentaar NEST NIET, dus sloot de eerste sluitmarkering het hele blok.
   Gevolg: .svc-hero-video-note stond gewoon weer als levende regel in de
   stylesheet en de losse sluitmarkering op de laatste regel slokte de
   eerstvolgende regel op. Nagemeten in Chrome via
   document.styleSheets[0].cssRules: 27 regels voor, 26 na, en de regel die
   ontbrak was .svc-clients .hero-clients { margin-top: 0; }. Daarom staan de
   haken van het citaat hieronder als (* en *). Verander dat niet terug.
   Oude waarden verbatim:
     (* Video-note-slot: pas renderen ná de opname, met echte duur (§4).
        Op licht: navy tekst zonder text-shadow. *)
     .svc-hero-video-note {
       position: absolute;
       left: 22px;
       bottom: 16px;
       z-index: 2;
       font-family: var(--font-hand);
       font-size: 1.35rem;
       color: var(--text-strong);
     } */

/* Logostrip-band direct onder de hero: zelfde .hero-clients-markup als de
   homepage (s1.css), maar op LICHT — label en hairline in de lichte tokens
   en de client-logo's (van zichzelf donker) zonder wit-invert-filter. */
.svc-clients .hero-clients { margin-top: 0; }

.svc-clients .hero-clients {
  border-top-color: color-mix(in srgb, var(--navy-950) 14%, transparent);
}

.svc-clients .hero-clients-label { color: var(--text-muted); }

.svc-clients .hero-clients-logos img {
  filter: none;
  opacity: .8;
}

@media (max-width: 1024px) {
  .svc-hero {
    padding-top: calc(78px + clamp(1.25rem, 3vh, 1.75rem));
  }

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

  /* Gestapeld: copy-stack boven de media (HERO-SYSTEEM §2). */
  .svc-hero-grid {
    display: block;
  }

  .svc-hero-copy { max-width: 640px; }

  .svc-hero-media {
    aspect-ratio: 3 / 2;
    max-height: 420px;
    margin-top: clamp(28px, 5vw, 40px);
  }

  .svc-hero--rpo .svc-hero-thumb { object-position: center 18%; }

  /* TI-paneel is geen foto: vaste hoogte i.p.v. beeldverhouding. */
  .svc-hero--ti .svc-hero-media { aspect-ratio: auto; height: 380px; }
}

@media (max-width: 560px) {
  /* Fold-compressie (Timo 260722): op de telefoon moet alles t/m de logostrip
     boven de vouw passen. Strakker verticaal ritme + een VSL-kader op normale
     videohoogte (16/9) i.p.v. het hoge 3/2- (WS/RPO) resp. 300px-kader (TI). */
  .svc-hero {
    padding-top: 76px;               /* net onder de fixed header; was ~103 */
    padding-bottom: 1.75rem;
  }
  .svc-hero .crumbs { margin-bottom: 16px; }
  .svc-hero-copy .eyebrow { margin-bottom: 12px; }

  .svc-hero-title {
    font-size: var(--text-hero-s); /* gedeelde ≤560-schaal */
    line-height: 1.04;
    margin-bottom: 14px;
  }

  .svc-hero-acties { margin-top: 16px; }

  /* VSL-kader op normale videohoogte (16/9); label-caption botst op deze lage
     hoogte met de chip → verborgen (svc-panel.css / ti1.css). */
  .svc-hero-media {
    aspect-ratio: 16 / 9;
    max-height: 200px;
    margin-top: 14px;
  }
  .svc-hero--ti .svc-hero-media {
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 200px;
  }

  /* Logostrip strak tegen de hero (fold-budget). */
  .svc-clients .hero-clients { padding-top: 12px; }

  /* W&S-hero: op mobiel de korte "Plan een strategiegesprek"-CTA i.p.v. het
     lange "Bespreek je openstaande vacature" (Timo 260722; desktop ongewijzigd).
     Beide anchors staan in ws1.html; hier wisselt de zichtbaarheid. */
  .svc-cta-lg { display: none; }
  .svc-cta-sm { display: inline-flex; }

  /* Fold-budget (T6): boven de vouw alleen primaire CTA + micro-trust. */
  .svc-hero-ctas .btn--ghost { display: none; }

  /* Knoppen 100% breed + kleinere gap: uitsluitend in dit ≤560-regime
     (HERO-SYSTEEM §4; op tablet blijft de inline CTA-rij staan). */
  .svc-hero-ctas { gap: 12px; }

  .svc-hero-ctas .btn {
    width: 100%;
    justify-content: center;
    /* <a> erft text-align: left; bij een 2-regelig label centreren zodat de
       wrap-regel matcht met de submit-knop (<button>, UA-center). Review-fix
       uit ws1/rpo1.css (260719) behouden bij de svc-hero-consolidatie. */
    text-align: center;
  }

  /* Micro-trust gecentreerd onder de gecentreerde full-width knop. */
  .svc-hero-micro { text-align: center; }

  .svc-hero .play-btn { width: 60px; height: 60px; }

  .svc-hero .play-btn::after {
    border-left-width: 17px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    margin-left: 5px;
  }
}