/* ==========================================================================
   Flow29 — merkfilm
   ==========================================================================
   Hoort bij de shortcode `merkfilm` (layouts/shortcodes/merkfilm.html) en laadt
   alleen op pagina's waar die staat. Twee varianten:
     .film-section  gecentreerd (launchpagina)
     .film-split    tekst links, film rechts (Over Flow29)
   ========================================================================== */
.film-section{border-top:1px solid var(--slate-200)}

.film-head{max-width:56ch;margin:0 auto var(--s7);text-align:center}
.film-head .label{margin-bottom:var(--s3)}
.film-head h2{margin-bottom:var(--s3)}
.film-head .lead{margin:0 auto;max-width:52ch}

/* Naast elkaar: kop links uitgelijnd, kaart vult de rechterkolom. Onder de
   breekpunt van .g-2 komen ze onder elkaar, kop eerst. */
.film-split .film-head{max-width:none;margin:0;text-align:left}
.film-split .film-head .lead{margin:0}
.film-split .film-trigger{max-width:none;margin:0}
.film-length{margin-top:var(--s4)}

/* Compacte videokaart — ondersteunend element, geen dominant hero-blok.
   Vaste, bescheiden breedte in plaats van vol-breed, met dezelfde rand +
   schaduw als .card in style.css, zodat het als "kaart" leest binnen het
   bestaande ontwerpsysteem. */
.film-trigger{display:block;position:relative;width:100%;max-width:420px;
  margin:0 auto;padding:0;border:0;background:none;cursor:pointer}

.film-poster-box{display:block;position:relative;overflow:hidden;
  border-radius:var(--r-lg);background:var(--navy-700);aspect-ratio:16/9;
  border:1px solid var(--slate-200);box-shadow:0 2px 10px rgba(7,27,51,.06)}
/* Zelfde corridor-motief als .imgslot in style.css: mocht de poster niet
   laden, dan staat er een merkeigen navy vlak in plaats van een kapot
   plaatje. */
.film-poster-box::before,.film-poster-box::after{content:"";position:absolute;
  top:50%;width:14px;height:56px;border:2px solid var(--navy-500);
  transform:translateY(-50%)}
.film-poster-box::before{left:14%;border-right:0}
.film-poster-box::after{right:14%;border-left:0}
.film-poster-box .rule{position:absolute;top:50%;left:calc(14% + 14px);
  right:calc(14% + 14px);height:2px;background:var(--teal-500);
  transform:translateY(-50%)}
.film-poster{position:relative;z-index:1;width:100%;height:100%;
  object-fit:cover;display:block}

/* Kleine play-knop linksonder i.p.v. gecentreerd: het logo in de
   posterafbeelding staat gecentreerd, een middenknop zou daar precies
   overheen vallen. */
.film-play{display:block;position:absolute;left:var(--s3);bottom:var(--s3);z-index:2}
/* Witte rand (in de SVG zelf) + schaduw: de poster is zelf ook overwegend
   navy, dus zonder duidelijke rand valt een navy cirkel daar tegenop weg. */
.film-play svg{width:40px;height:40px;display:block;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.45))}
/* Alleen een kleurwissel op hover, geen verschuiving/schaal: het
   merksysteem staat verder geen hover-animaties toe. */
.film-trigger:hover .film-play svg circle{fill:var(--navy-600)}

@media (max-width:640px){
  .film-play svg{width:34px;height:34px}
  /* Vaste hoogtebandbreedte i.p.v. aspect-ratio: de kaart blijft zo altijd
     compact, ongeacht schermbreedte — de inhoud erboven blijft zichtbaar in
     beeld in plaats van dat de video het scherm overneemt. Breedte blijft
     vrij (volgt de paginabreedte), alleen de hoogte is begrensd tussen 200
     en 280px. */
  .film-poster-box{aspect-ratio:auto;height:clamp(200px,60vw,280px)}
}

/* ---------------------------------------------------------------- modal --- */
.film-modal{position:relative;border:0;padding:0;background:transparent;
  max-width:min(1120px,92vw);width:100%;overflow:visible}
.film-modal::backdrop{background:rgba(7,27,51,.85)}

.film-modal-close{position:absolute;top:var(--s3);right:var(--s3);z-index:2;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:rgba(7,27,51,.7);border:1px solid rgba(255,255,255,.4);
  border-radius:var(--r-sm);color:var(--white);cursor:pointer;padding:0}
.film-modal-close:hover{background:rgba(7,27,51,.9)}
.film-modal-close svg{width:18px;height:18px}

.film-video{display:block;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:var(--r-lg)}

/* Alleen voor schermlezers (kop van het videovenster). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:640px){
  .film-modal{max-width:96vw}
  .film-modal-close{width:36px;height:36px}
}