/* Filmerna (bygg/filmer.py, film.js), 28 okt 2026. Läggs efter sidans övriga stilar. Samma grund som site.css:
   mörkblå ytor, gulorange accent, rundade hörn och luft i stället för ramar. */

/* Spelaren: omslaget är knappen, 16:9. Startknappen nere till vänster, på omslagets tomma yta under rubriken,
   så att numret och ämnet går att läsa i alla storlekar; längden i hörnet till höger. */
.spelare,.spelare-aktiv{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--navy2)}
.spelare{border:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit;box-shadow:0 24px 60px -24px #05091299}
.spelare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spelare .spela{position:absolute;left:5.6%;bottom:9%;width:76px;height:76px;border-radius:50%;background:var(--gold);display:grid;place-items:center;box-shadow:0 10px 30px -6px #05091299;transition:transform .15s,background .15s}
.spelare .spela::after{content:"";border-left:22px solid var(--navy);border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.spelare:hover .spela,.spelare:focus-visible .spela{background:var(--goldhover);transform:scale(1.06)}
.spelare .tid{position:absolute;right:12px;bottom:12px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:999px;background:#0b111ccc;color:#fff}
.spelare:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.spelare-aktiv{background:#000}
.spelare-aktiv iframe,.spelare-aktiv video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
@media(prefers-reduced-motion:reduce){.spelare .spela{transition:none}}

/* Granskningsläget: syns bara i den lokala versionen (publik.py tar bort det) */
.film-granskningsband{border:1px dashed #d7a13b99;background:#d7a13b14;color:#f2d594;border-radius:14px;padding:14px 18px;font-size:15px;line-height:1.55;margin:0 0 32px}
.film-granskningsband b{color:#fff}
.film-granskning{font-size:13px;color:var(--dim);margin:14px 0 0;line-height:1.5}
.film-granskning a{text-decoration:underline;color:var(--soft)}
.lage{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.02em;padding:2px 9px;border-radius:999px;margin-right:6px;vertical-align:1px}
.lage.privat{background:#d7a13b33;color:#f2d594}
.lage.ej-uppladdad{background:#8a3a2e66;color:#ffd9d2}
.lage.publik{background:#2f6f4f66;color:#d6f3e3}

/* Filmavsnitt på en vanlig sida (Start, Om): text och spelare sida vid sida */
.filmblock-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.filmblock-text h2{font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.025em;font-weight:700;margin:0;color:#fff}
.filmblock-text>p:not(.etikett):not(.mikro):not(.film-granskning){color:var(--soft);font-size:18px;line-height:1.65;margin:18px 0 0}
.filmblock-lankar{margin:22px 0 0}
.med-bakgrund .filmblock-text{text-shadow:0 1px 2px #1b2537,0 0 18px #1b2537cc}
.kedja+.filmblock{padding-top:0}

/* Media: scenen med vald film och listan att välja i */
.filmsal{padding-top:72px}
.biograf{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.filmpanel{display:grid;gap:28px;scroll-margin-top:112px}
.filmpanel-text h2{font-size:clamp(28px,3vw,40px);line-height:1.12;letter-spacing:-.025em;font-weight:700;margin:0;color:#fff}
.filmpanel-text h2 .nr{color:var(--gold);margin-right:6px}
.filmpanel-text .etikett{margin-bottom:8px}
.filmpanel-meta{font-size:15px;color:var(--dim);margin:10px 0 0}
.filmpanel-beskrivning{font-size:18px;line-height:1.65;color:var(--soft);margin:16px 0 0;max-width:680px}
.filmpanel-lank{margin:20px 0 0}
/* Utan JavaScript: första filmen, eller den adressen pekar ut (#film-6). Med JavaScript styr film.js. */
.scen .filmpanel{display:none}
.scen .filmpanel:first-of-type{display:grid}
.scen:has(.filmpanel:target) .filmpanel{display:none}
.scen .filmpanel:target{display:grid}
.filmer-js .scen .filmpanel{display:none}
.filmer-js .scen .filmpanel.aktiv{display:grid}

.filmlista{position:sticky;top:112px;max-height:calc(100vh - 136px);overflow:auto;padding:4px 6px 8px 4px;margin:-4px -6px 0 -4px;scrollbar-width:thin}
.filmlista-rubrik{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.filmlista ol{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:6px}
.filmval-rad{position:relative;display:grid;grid-template-columns:112px 1fr;grid-template-areas:"bild text";column-gap:14px;align-items:center;padding:8px;border-radius:14px}
.filmval-rad img{grid-area:bild;width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.filmval{grid-area:text;display:block;min-width:0;line-height:1.35;color:var(--soft)}
.filmval::after{content:"";position:absolute;inset:0;border-radius:14px}
.filmval-nr{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.filmval b{color:#fff;font-weight:600}
.filmval small{display:block;font-size:13px;color:var(--dim);margin-top:3px}
.filmval-rad:hover{background:#ffffff0d}
.filmval-rad:has([aria-current=true]){background:#ffffff17}
.filmval-rad:has([aria-current=true])::before{content:"";position:absolute;left:-2px;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--gold)}
.filmval:focus-visible{outline:0}
.filmval:focus-visible::after{outline:3px solid var(--gold);outline-offset:2px}
.filmval-rad>.lage{grid-area:text;align-self:start;justify-self:start;margin:0 0 4px;font-size:11px;position:relative;pointer-events:none}
.filmval-rad:has(>.lage){grid-template-areas:"bild lage" "bild text";row-gap:2px}
.filmval-rad:has(>.lage)>.lage{grid-area:lage}
.filmsal-not{margin-top:40px}

/* Vad ni kan göra: områdets film under rubrikblocket */
.omr-film{margin-top:28px;max-width:420px}
.omr-film-etikett{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.omr-film .spelare{border-radius:12px}
.omr-film .spelare .spela{width:48px;height:48px}
.omr-film .spelare .spela::after{border-left-width:15px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
.omr-film-namn{font-size:15px;color:var(--soft);margin:10px 0 0;line-height:1.5}
.omr-film-namn b{color:#fff}
.omr-film-namn span{color:var(--dim);margin:0 6px}
.omr-film-namn a{color:var(--gold);font-weight:600;white-space:nowrap}
.omr-film-namn a::after{content:" →"}

@media(max-width:1080px){
  .filmblock-grid{grid-template-columns:1fr;gap:32px}
  .filmblock-spelare{order:-1}
  .biograf{grid-template-columns:1fr;gap:40px}
  .filmlista{position:static;max-height:none;overflow:visible;margin:0;padding:0}
  .filmlista ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
}
@media(max-width:700px){
  .filmsal{padding-top:48px}
  .filmlista ol{grid-template-columns:1fr}
  .filmval-rad{grid-template-columns:96px 1fr;column-gap:12px}
  .filmval-rad img{width:96px}
  .spelare .spela{width:48px;height:48px}
  .spelare .spela::after{border-left-width:15px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
  .filmpanel-beskrivning,.filmblock-text>p:not(.etikett):not(.mikro):not(.film-granskning){font-size:17px}
  .omr-film{max-width:none}
}