/* KOVA v7 · film.css · tylko film.html · „większe grafiki, sekcja z filmami” */

/* kolumny brakujące w systemie */
.c1-4{grid-column:1/5}.c3-7{grid-column:3/8}.c3-8{grid-column:3/9}.c4-8{grid-column:4/9}.c5-12{grid-column:5/-1}.c6-12{grid-column:6/-1}.c7-10{grid-column:7/11}.c8-12{grid-column:8/-1}

/* proporcje kinowe: obraz wypełnia ramę (cover), bez pasów */
.kadr.k239{aspect-ratio:2.39/1}
.kadr.k169{aspect-ratio:16/9}
.kadr.k21{aspect-ratio:2/1}

/* HERO · kadr na całą szerokość okna, karta tekstu na kadrze */
.hero-film{overflow:clip}
.hero-scena{display:grid;grid-template-columns:minmax(0,1fr);position:relative;z-index:1}
.hero-obraz{grid-area:1/1;aspect-ratio:auto;height:clamp(520px,84svh,1100px);width:100%}
.hero-obraz picture,.hero-obraz img{display:block;width:100%;height:100%}
.hero-obraz img{object-fit:cover;object-position:12% 50%}
.hero-obraz video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-obraz video:not([src]){visibility:hidden}
.hero-obraz .odtworz{left:auto;bottom:auto;top:var(--m);right:var(--m)}
.hero-karta{grid-area:1/1;align-self:end;justify-self:start;position:relative;z-index:2;margin:0 0 var(--m) var(--m);width:min(520px,calc(100% - 2 * var(--m)));background:var(--paper);padding:24px 24px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero-karta h1{font-size:40px}
.hero-karta .cta{margin-top:8px}
.hero-podpis{position:relative;z-index:1;background:var(--paper);display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 24px;padding-block:8px 0;font:400 12px/1.4 var(--mono);color:var(--ink-2);max-width:none;width:100%}
.slowo-hero{margin-top:-.1em;padding-inline:var(--m);max-width:var(--max);margin-inline:auto}

/* TAŚMA · pięć filmów, klatki 2× większe, przewijana poziomo */
.tasma{margin-top:24px}
.tasma-lista{display:flex;gap:var(--g);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px var(--m) 20px;scroll-padding-inline:var(--m);scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.tasma-lista::-webkit-scrollbar{height:6px}
.tasma-lista::-webkit-scrollbar-thumb{background:var(--ink)}
.tasma-lista li{flex:0 0 clamp(300px,42vw,720px);scroll-snap-align:start}
.tasma figcaption{font-size:13px;margin-top:10px}
.tasma figcaption span{display:inline}
.tasma .rok{white-space:nowrap}

/* PREMIERA · jeden film = tytuł duży + kadr duży + dane */
.premiera{padding-block:96px 112px;border-top:1px solid var(--hair)}
.premiera .siatka{align-items:start;row-gap:24px}
.glowa{align-items:end!important;margin-bottom:32px}
.tytul{font:600 clamp(32px,calc(4.4vw + 12px),88px)/1 var(--inter);letter-spacing:-.02em;max-width:18ch;margin-top:12px}
.glowa .dane{margin-bottom:6px}
.kadr-film{margin:0}
.kadr-film figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 24px;max-width:none;margin-top:10px}
.kadr-film.pelny figcaption{max-width:var(--max);margin-inline:auto}
.szeroki-l{width:calc(100% * 10 / 12 - var(--g) * 2 / 12)}
.szeroki-p{width:calc(100% * 10 / 12 - var(--g) * 2 / 12);margin-left:auto}
.opis{margin-top:40px}
.premiera:target .glowny{outline:2px solid var(--signal);outline-offset:-2px}
.dane{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;font:400 13px/1.4 var(--mono);margin-block:4px 20px}
.dane dt{color:var(--ink-2)}
.linki{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:8px}
.kadr.afisz{aspect-ratio:auto}.kadr.afisz img{height:auto}
.plakat-duzy{max-width:520px;justify-self:end;width:100%}
.plakat-glowny .kadr{max-width:none}
#ryzykowne .bok{align-self:end;padding-bottom:40px}
#ryzykowne .tytul{margin-bottom:24px}
.kadr .rm{display:none}
html[data-motion=off] .kadr .rm{display:block}
html[data-motion=off] .kadr .rm+video{display:none}
#co-robie .lead+.lead{margin-top:8px}

/* GDZIE BYŁY · pasmo ink + tabela */
#gdzie-byly{padding-block:96px;color:var(--paper)}
#gdzie-byly .siatka{row-gap:32px}
#gdzie-byly h2{margin-bottom:8px}
#gdzie-byly .obieg{grid-row:2;font:400 20px/1.45 var(--inter);max-width:26ch}
.tabela{width:100%;border-collapse:collapse;font:400 13px/1.4 var(--mono);color:var(--paper-2)}
.tabela th{font-weight:400;text-align:left;padding:0 16px 10px 0;color:var(--paper-2)}
.tabela td{text-align:left;padding:12px 16px 12px 0;border-top:1px solid var(--hair-ink);vertical-align:middle;height:48px}
.tabela tr:last-child td{border-bottom:1px solid var(--hair-ink)}
.tabela td:last-child,.tabela th:last-child{padding-right:0}
.tabela .rok{width:72px;white-space:nowrap}
.tabela .t{font:500 17px/1.3 var(--inter);color:var(--paper)}

/* KINO · VOD */
#kino .siatka{align-items:start}
#kino h2{margin-bottom:16px}
#kino .lead{max-width:40ch}
#kino .link{margin-top:12px}

@media (max-width:1023px){
  .c1-4,.c3-7,.c3-8,.c4-8,.c5-12,.c6-12,.c7-10,.c8-12{grid-column:1/-1}
  .szeroki-l,.szeroki-p{width:100%}
  .plakat-duzy{justify-self:start;max-width:480px}
  #ryzykowne .bok{padding-bottom:0}
  #gdzie-byly .obieg{grid-row:auto}
  .glowa{align-items:start!important}
}
@media (max-width:767px){
  .hero-obraz{height:auto;aspect-ratio:4/5}
  .hero-obraz img{object-position:50% 50%}
  .hero-karta{grid-area:2/1;align-self:start;margin:0;width:100%;padding:20px var(--m) 8px}
  .hero-karta h1{font-size:28px}
  .hero-karta .cta{align-self:stretch;justify-content:center}
  .hero-podpis{padding-top:12px}
  .tasma-lista li{flex-basis:76vw}
  .tasma .rok{display:none}
  .premiera{padding-block:48px 56px}
  .glowa{margin-bottom:20px}
  .kadr.k239,.kadr.k169{aspect-ratio:16/9}
  .kadr-film.pelny figcaption{padding-inline:var(--m)}
  .rama>.kadr-film{margin-inline:calc(-1 * var(--m))}
  .rama>.kadr-film figcaption{padding-inline:var(--m)}
  .opis{margin-top:24px}
  #gdzie-byly{padding-block:48px}
  .kadr .rm{display:block}.kadr .rm+video{display:none} /* mobile: kadr zamiast pętli (0 MB) */
  #gdzie-byly .obieg{font-size:18px}
  .tabela thead{display:none}
  .tabela,.tabela tbody{display:block}
  .tabela tr{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;border-top:1px solid var(--hair-ink);padding-block:10px}
  .tabela tr:last-child{border-bottom:1px solid var(--hair-ink)}
  .tabela td,.tabela tr:last-child td{display:block;border:0;padding:0;height:auto}
  .tabela .rok{grid-area:1/1/3/2;width:auto}
  .tabela .t{grid-area:1/2;font-size:16px}
  .tabela .gdzie{grid-area:2/2;margin-top:4px}
}