/* hero-mobiel.css
 *
 * Laat de achtergrondvideo van de hero op telefoons het hele sectievlak vullen.
 *
 * Het probleem: Squarespace zet de video op mobiel in een strook van 16:9 (390x219)
 * bovenin een sectie die 595px hoog is. Die hoogte komt van de fallback-afbeelding,
 * die op zijn eigen beeldverhouding staat. Daaronder blijft de kale achtergrondkleur
 * over, met de tekst erop. Op desktop doet de site het anders: daar vult de video
 * bijna de hele sectie (810 van 824px) met de tekst eroverheen.
 *
 * Dit bestand trekt dat desktopgedrag door naar mobiel: de video vult de volledige
 * sectie en `object-fit: cover` snijdt links en rechts weg. De sectie wordt niet
 * hoger - de achtergrondlaag staat absoluut gepositioneerd - dus de rest van de
 * pagina blijft exact op zijn plek.
 *
 * Let op de selectors: local-video.js verwijdert juist de oorspronkelijke
 * Squarespace-classes (anders kaapt hun JS de speler terug) en zet er
 * `bleaze-video-wrap`, `bleaze-video-host` en `bleaze-bg-video` voor in de plaats.
 * Selecteren op `.sqs-video-background-native` werkt hier dus niet.
 */

@media (max-width: 767px) {
  /* De twee lagen die de video tot een 16:9-strook beperkten, laten we het hele
     achtergrondvlak vullen. */
  .bleaze-video-wrap,
  .bleaze-video-host {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* De video vult het vlak; wat links en rechts buiten beeld valt, valt weg. */
  .bleaze-video-host > .bleaze-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* De fallback-afbeelding (zichtbaar tot de video speelt) moet hetzelfde doen,
     anders springt het beeld op het moment dat de video begint. Zonder deze regel
     bepaalt juist zij de oude 16:9-hoogte. */
  .bleaze-video-host > .sqs-video-background-native__fallback-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* Donkere sluier over de video. In de oude opzet stond de tekst op een zwart
     vlak; nu ligt hij op bewegend beeld met witte boten en waterreflecties, en
     daar valt witte tekst tegen weg. Het verloop houdt de lucht en de gracht
     bovenin zichtbaar en wordt donkerder waar de kop en de knoppen staan.
     De sluier zit in de achtergrondlaag en dus onder de tekst. */
  .bleaze-video-host::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.28) 30%,
      rgba(0, 0, 0, 0.58) 55%,
      rgba(0, 0, 0, 0.68) 100%
    );
  }
}