/* 首頁「影片」段落（STINT-WEB-015）。六支模式影片：總集＋五個模式。
   直式或橫式看視窗，不看裝置：寬度 700px 以下且直立的視窗用直式，其餘用橫式。
   影片檔在 Vercel Blob（不在這個 repo），這裡只有封面圖 img/films/。行為在 films.js。 */
.films{border-top:1px solid var(--line)}
.films h2{max-width:20ch}
.films-lead{margin-top:14px;max-width:38ch;color:var(--tx2);font-size:clamp(16px,1.9vw,19px);line-height:1.7}

.film-stage{position:relative;width:100%;max-width:1040px;aspect-ratio:16/9;margin-top:38px;background:#000;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.film-poster{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.film-poster[hidden]{display:none}
.film-poster picture,.film-poster img{display:block;width:100%;height:100%}
.film-poster img{object-fit:cover}
.film-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(8,9,10,.55);border:1.5px solid rgba(255,255,255,.85);transition:background .2s,border-color .2s}
.film-play::after{content:"";position:absolute;left:50%;top:50%;margin:-13px 0 0 -8px;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff}
.film-poster:hover .film-play,.film-poster:focus-visible .film-play{background:var(--acc);border-color:var(--acc)}
.film-poster:focus-visible{outline:2px solid var(--acc);outline-offset:-4px}
.film-video{position:absolute;inset:0;display:block;width:100%;height:100%;background:#000;object-fit:contain}
.film-video[hidden]{display:none}

/* 手機直拿：直式，高度不超過視窗的 78% */
@media (max-width:700px) and (orientation:portrait){
.film-stage{aspect-ratio:9/16;width:min(100%,calc(78vh*9/16));width:min(100%,calc(78svh*9/16));margin-inline:auto}
}
/* 開始播放之後比例跟著已經載入的那個檔，轉手機也不換（films.js 會設 data-orient） */
.film-stage[data-orient="h"]{aspect-ratio:16/9;width:100%;margin-inline:0}
.film-stage[data-orient="v"]{aspect-ratio:9/16;width:min(100%,calc(78vh*9/16));width:min(100%,calc(78svh*9/16));margin-inline:auto}

.film-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;max-width:1040px;margin:22px 0 0;padding:0;list-style:none}
.film-list li{min-width:0}
.film-list a{display:block;height:100%;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--panel);color:var(--tx2);transition:border-color .2s}
.film-list img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.7;transition:opacity .2s}
.film-list .fn{display:block;padding:10px 12px 0;color:var(--tx);font-size:15px;font-weight:600;line-height:1.4}
.film-list .fe{display:block;padding:2px 12px 11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--tx3);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-list a:hover,.film-list a.on{border-color:var(--acc)}
.film-list a:hover img,.film-list a.on img{opacity:1}
.film-list a.on .fn{color:var(--acc)}
@media(max-width:860px){.film-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:420px){
.film-list{gap:8px}
.film-list .fn{padding:8px 9px 0;font-size:14px}
.film-list .fe{padding:1px 9px 9px;font-size:8.5px;letter-spacing:.1em}
}

/* 各模式段落裡的「看影片」，樣式跟旁邊的「返回模式列表」同一組；兩個包在 .mode-top 裡排成一列 */
.mode-top{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;align-self:flex-start;column-gap:22px}
.film-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;width:fit-content;margin:0 0 14px;padding:8px 2px;color:var(--tx2);font-size:13px;line-height:1.5;border-bottom:1px solid var(--line2)}
.film-link::before{content:"";border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--acc)}
.film-link:hover{color:var(--acc2);border-color:var(--acc2)}