/* ══════════════════════════════════════════════════════════════════════════════
   Video-hero op de VOORPAGINA — de beeldlaag achter de tekst, gedeeld door alle
   templates. Elke template laadt dit bestand in zijn _Styles.cshtml, net als
   _shared/wf-verhuur.css en _shared/fq-nav.css.

   Wat hier WEL staat: hoe een <video> of een YouTube/Vimeo-<iframe> de hero
   vult. Wat hier NIET staat: hoogte, overlay, tekstopmaak en knop — die houdt
   elke template in zijn eigen hero-klassen (.biz-hero-*, .bty-hero-*, …), zodat
   de video er per template uitziet als de fotoslider die hij vervangt.

   De video komt IN de bestaande achtergrondlaag van de template
   (.biz-hero-bg, .bty-hero-bg, .htl-hero-bg, .td-hero-bg, .b2-hero-img). Die is
   in elke template al `position:absolute; inset:0`, dus de overlay, de container
   en de tekst eromheen werken ongewijzigd door.

   Twee dingen om te weten:

   1. GEEN pointer-events. De video is decor; klikken hoort naar de knop eronder
      te gaan. business1 en hotel1 hebben bovendien een magic-cursor over de
      hero, die anders boven de video zou stoppen.
   2. Een IFRAME kan geen object-fit. YouTube en Vimeo leveren een vaste 16:9,
      dus die wordt hier op de container geschaald tot hij bedekt (net als
      object-fit: cover) en daarna gecentreerd. Dat gebeurt met container-
      eenheden, zodat het ook klopt bij een hero die niet de volle breedte of
      hoogte van het scherm heeft — hotel1 staat in een kader en business2 vult
      maar 56% van de breedte.
   ══════════════════════════════════════════════════════════════════════════ */

/*  Eigen bestand (MP4/WebM): object-fit doet het rekenwerk. */
.wf-hero-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    border: 0;
}

/*  YouTube/Vimeo: een omhulsel dat afsnijdt, met de iframe gecentreerd erin. */
.wf-hero-embed {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /*  Maakt cqw/cqh hieronder mogelijk: die meten dan DIT vlak, niet het scherm. */
    container-type: size;
}

.wf-hero-embed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    /*  Terugval voor een browser zonder container-eenheden: dan vult de iframe het
        vlak zonder de 16:9 te bewaren. Niet mooi, maar nooit leeg. */
    width: 100%;
    height: 100%;
    /*  Bedekken: minstens zo breed én zo hoog als het vlak, met 16:9 vastgehouden.
        56.25 = 9/16, 177.7778 = 16/9. */
    width: max(100cqw, 177.7778cqh);
    height: max(100cqh, 56.25cqw);
}

/*  De poster (de eerste slidefoto) staat er tot de video speelt. Op een telefoon
    weigert een browser een achtergrondvideo soms te starten; dan blijft dit beeld
    staan in plaats van een zwart vlak. */
.wf-hero-video[poster] {
    background-size: cover;
    background-position: center;
}

/* ── Geluidsknop op de video-hero ──────────────────────────────────────────────
   Een achtergrondvideo start verplicht gedempt — anders weigert de browser hem af
   te spelen. Dit knopje is de enige manier waarop de bezoeker het geluid alsnog
   aan kan zetten. wf-hero-sound.js zet hem aan het werk en maakt hem pas zichtbaar
   als er ook echt iets te horen valt.

   Glazig en terughoudend: doorschijnend met een blur erachter, een dunne lichte
   rand en een zachte schaduw. Bewust GEEN huisstijlkleur — hij ligt over beeld dat
   per klant totaal anders is, en wit-op-doorschijnend leest daar altijd op. De
   knop is 48px, ruim boven de 44px die een vinger nodig heeft.

   Positie: linksonder in de hero. Rechtsonder is bezet door de zwevende knoppen van
   het dashboard (--wf-zweef-*) en door de slider-pijltjes; de scroll-hint van
   business1 staat óók linksonder, dus daar schuift hij in die template iets op.
   ────────────────────────────────────────────────────────────────────────── */
.wf-hero-sound {
    position: absolute;
    left: clamp(16px, 3vw, 40px);
    bottom: clamp(16px, 3vw, 40px);
    z-index: 5;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
    color: #fff;
    cursor: pointer;

    /* Invaden zodra het script weet dat er geluid is; zie .is-zichtbaar. */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease, background-color .35s ease, border-color .35s ease;
}

.wf-hero-sound.is-zichtbaar { opacity: 1; transform: none; }

.wf-hero-sound:hover,
.wf-hero-sound:focus-visible {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .62);
}

.wf-hero-sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.wf-hero-sound svg { width: 20px; height: 20px; display: block; }

/*  Eén icoon, twee standen: het streepje door de luidspreker verdwijnt zodra het
    geluid aanstaat. Een luidspreker en geen microfoon — een microfoon leest als
    "opnemen" of "meepraten", niet als "hier valt iets te horen". */
.wf-hero-sound .wf-hero-sound-uit { display: block; }
.wf-hero-sound .wf-hero-sound-aan { display: none; }
.wf-hero-sound.is-aan .wf-hero-sound-uit { display: none; }
.wf-hero-sound.is-aan .wf-hero-sound-aan { display: block; }

/*  business1 heeft linksonder al zijn scroll-hint staan; daar schuift de knop naar
    rechts zodat de twee elkaar niet raken. */
.biz-spot .wf-hero-sound { left: auto; right: clamp(16px, 3vw, 40px); }

@media (prefers-reduced-motion: reduce) {
    .wf-hero-sound { transition: none; transform: none; }
}

/*  business1 kan onder de hero een actiebanner tonen die zichzelf 96px OVER de hero heen trekt
    (.wf-herobanner-wrap, margin-top: -96px, z-index: 5). Die bedekt precies de onderrand waar dit
    knopje staat — nagemeten: een klik kwam op de bannerkaart terecht in plaats van op de knop.

    Alleen als die banner er ook echt is schuift de knop omhoog tot boven de kaart. Staat hij uit bij
    deze klant, dan blijft de knop gewoon onderin waar hij hoort. z-index 6 zodat hij ook bij een
    latere verschuiving nooit meer achter de kaart verdwijnt. */
body:has(.wf-herobanner) .wf-hero-sound { bottom: clamp(136px, 3vw + 120px, 160px); z-index: 6; }