/* ============================================================
   Padel54 — film in a post hero: silent loop in the strip,
   "Watch the film" opens it full screen with sound
   (loaded after news.css)
   ============================================================ */
.post-hero.film{position:relative;background:var(--ink)}
.film > video{display:block;width:100%;height:100%;object-fit:cover}
.film::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(12,13,15,.6),rgba(12,13,15,0) 45%);pointer-events:none}

.film-play{position:absolute;z-index:3;left:clamp(16px,2.6vw,36px);bottom:clamp(18px,2.6vw,34px);display:inline-flex;align-items:center;gap:14px;padding:6px 20px 6px 6px;border-radius:999px;background:rgba(244,243,240,.12);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(244,243,240,.2);box-shadow:0 10px 30px rgba(0,0,0,.25);color:var(--paper);cursor:pointer;font:600 12px/1 var(--font);text-transform:uppercase;letter-spacing:.12em;transition:background .4s var(--ease),color .3s,transform .5s var(--ease)}
.film-play .disc{width:42px;height:42px;border-radius:50%;background:var(--signal);color:var(--ink);display:grid;place-items:center;transition:transform .5s var(--ease)}
.film-play .disc svg{width:14px;margin-left:2px}
.film-play .dur{padding-left:14px;border-left:1px solid rgba(244,243,240,.28);color:rgba(244,243,240,.7);font-variant-numeric:tabular-nums;transition:color .3s,border-color .3s}
.film-play:hover{background:var(--paper);color:var(--ink);transform:translateY(-2px)}
.film-play:hover .dur{color:#6c6b65;border-color:rgba(12,13,15,.2)}
.film-play:hover .disc{transform:scale(1.06)}
.film-play:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.film-modal{position:fixed;inset:0;z-index:200;background:rgba(6,7,8,.95);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.film-modal.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.film-modal video{width:min(94vw,calc(84svh * 16 / 9));height:auto;aspect-ratio:16/9;object-fit:contain;background:#000;transform:scale(.96);transition:transform .5s var(--ease)}
.film-modal.open video{transform:none}
.film-close{position:absolute;top:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);width:46px;height:46px;border-radius:50%;border:1px solid rgba(244,243,240,.3);background:none;color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s}
.film-close:hover{background:var(--paper);color:var(--ink)}
.film-close svg{width:18px;height:18px}


/* upright film: shown at its own size in a panel, a blurred copy of it fills the strip,
   with an optional credit on the left (wide screens only) */
.film.tall{display:flex;justify-content:center;align-items:stretch}
.film.tall::after{z-index:2}
.film.tall .bd{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);filter:blur(28px) brightness(.45) saturate(1.2)}
.film.tall .panel{position:relative;z-index:1;height:100%;aspect-ratio:404/720;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.film.tall .panel video{display:block;width:100%;height:100%;object-fit:cover}
.film.tall .film-play{z-index:4}
.film.cred{justify-content:flex-end;padding-right:clamp(20px,8vw,140px)}
.film.cred .credit{position:absolute;z-index:3;left:clamp(20px,5.5vw,96px);top:50%;transform:translateY(-62%);max-width:46%}
.film.cred .credit .k{font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--signal)}
.film.cred .credit h2{margin-top:14px;font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.6vw,52px);line-height:.95;letter-spacing:-.025em;color:var(--paper)}
.film.cred .credit p{margin-top:14px;color:var(--paper-dim);font-size:14px}
@media(max-width:760px){.film.cred{justify-content:center;padding-right:0}.film.cred .credit{display:none}}
.film-modal.tall video{width:auto;height:min(88svh,1000px);aspect-ratio:404/720}

/* a film with black bars baked into the picture: zoom just enough on narrow strips to hide them */
@media(max-width:760px){.film.lbox > video{transform:scale(1.19)}}