/* Freddy's films (public/films.js), on Brands and the Academy. Each card is a poster; the
 * video file (public/video/, H.264, fast start) loads only when someone presses play.
 * Horizontal films fill a 16:9 frame. A vertical film (.vid-v) sits centred at full height
 * over a blurred copy of its own poster, so every card keeps the same shape. */
/* Six tracks: a card takes half a row (span 3), .vid-third a third (span 2), so Brands runs
 * wide, two, then three across (Oct 18 2026) with no empty cell. */
.vid-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:28px clamp(12px,1.6vw,22px)}
.vid-card{margin:0;min-width:0}
.vid-grid>.vid-card{grid-column:span 3}
.vid-grid>.vid-third{grid-column:span 2}
/* The drone film (Oct 13 2026) spans the row above the others on tablet and desktop. */
.vid-wide{grid-column:1/-1}
.vid-grid>.vid-wide{grid-column:1/-1}
.vid-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111}
.vid-play{position:absolute;inset:0;width:100%;height:100%;padding:0;display:block}
.vid-play img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .3s ease}
.vid-play:hover img{transform:scale(1.03);filter:brightness(.85)}
.vid-play:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.vid-btn{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.vid-btn::after{content:"";position:absolute;left:27px;top:22px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--ink)}
.vid-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.vid-card figcaption{font-size:15px;font-weight:500;margin-top:10px}
.vid-card figcaption a:hover{text-decoration:underline}
.vid-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:734px){
 .vid-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;gap:12px;margin:0 -24px;padding:0 24px 6px;scrollbar-width:none}
 .vid-grid::-webkit-scrollbar{display:none}
 .vid-card{flex:0 0 84%;scroll-snap-align:start}
 /* A lone film (Events, Oct 15 2026) takes the full width instead of peeking like a carousel. */
 .vid-card:only-child{flex-basis:100%}
 .vid-btn{width:56px;height:56px;margin:-28px 0 0 -28px}.vid-btn::after{left:22px;top:18px;border-width:10px 0 10px 17px}
}
.vid-v{background:#000}
.vid-v::before{content:"";position:absolute;inset:-24px;background:var(--bg) center/cover no-repeat;filter:blur(22px) brightness(.55);transform:scale(1.1)}
.vid-v .vid-play img{object-fit:contain;position:relative}
.vid-v video{object-fit:contain;background:transparent}
.vid-frame.vid-on .vid-play{display:none}