/* kino.css — format kinowy (warstwa zdjęć za treścią + karty sekcji + stopka ze zdjęciem).
   Kolory przez zmienne; serwis nadpisuje je w swoim style.css (--k-noc tło pod zdjęciem, --k-karta tło kart, --k-tekst tekst kart,
   --k-jasny tekst na zdjęciu, --k-akcent przyciski w hero, --k-promien). Plik ładowany PO style.css serwisu. */
:root { --k-noc: #10141c; --k-karta: rgba(251, 251, 248, .96); --k-tekst: #1d2420; --k-jasny: #f3eee4; --k-jasny-2: #ddd6c8; --k-akcent: #c8a26e; --k-promien: 14px; }
body.kino-strona { background: var(--k-noc); }
.tlo-foto { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--k-noc); }
.tlo-foto::after { content: ""; position: absolute; inset: 0; background: rgba(16, 20, 28, .38); transition: background-color .7s; }
.tlo-foto.w-hero::after { background: rgba(16, 20, 28, .16); }
.tlo-foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .7s; }
.tlo-foto img.aktywna { opacity: 1; }
.kino-strona main, .kino-strona .stopka-foto, .kino-strona .kontakt-kino { position: relative; z-index: 1; }
.kino-hero-krotki { min-height: 42svh; }

/* hero na zdjęciu: tekst bez karty, czytelność z gradientu i cienia */
.kino-hero { min-height: 78svh; display: flex; align-items: flex-end; color: var(--k-jasny); position: relative; }
.kino-hero .szer { padding-block: 2rem 3rem; }
.kino-hero .hero-txt { max-width: 40rem; text-shadow: 0 1px 14px rgba(0, 0, 0, .65), 0 1px 2px rgba(0, 0, 0, .55); }
.kino-hero::before { content: ""; position: absolute; inset: auto 0 0 0; height: 70%; background: linear-gradient(180deg, rgba(16, 20, 28, 0), rgba(16, 20, 28, .55)); pointer-events: none; }
.kino-hero .szer { position: relative; }
.kino-hero h1 { color: var(--k-jasny); font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 .8rem; }
.kino-hero .lead, .kino-hero p { color: var(--k-jasny-2); }
.kino-hero a { color: var(--k-jasny); }
.kino-hero .okruszki, .kino-hero .okruszki a { color: var(--k-jasny-2); }
.kino-hero .przycisk { background: var(--k-akcent); color: #1b1f1c; text-shadow: none; }
.kino-hero .przycisk:hover { background: #fff; color: #1b1f1c; }
.kino-hero .przycisk.jasny { background: rgba(16, 20, 28, .45); color: var(--k-jasny); border: 2px solid var(--k-jasny-2); }
.kino-hero .przycisk.jasny:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.kino-hero .pas-krok { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); top: 1rem; z-index: 2; margin: 0; padding: 9px 13px 10px; border: 1px solid rgba(243, 238, 228, .16); border-radius: var(--k-promien); background: rgba(16, 20, 28, .72); color: var(--k-jasny); font-size: .82rem; line-height: 1.3; transition: opacity .35s; text-shadow: none; }
.kino-hero .pas-krok .n { display: block; font-weight: 700; color: var(--k-akcent); text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; margin-bottom: 2px; }
.kino-hero:not(.js) .pas-krok, .kino-hero .pas-krok.ukryty { opacity: 0; }

/* karty sekcji nad zdjęciem: duży odstęp, żeby scena była widoczna między kartami */
.kino-sekcje { padding-block: 0 8svh; }
.kino-sekcje > section { background: var(--k-karta); color: var(--k-tekst); border-radius: var(--k-promien); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); padding: 24px 22px; margin: 0 auto 40svh; max-width: 46rem; }
.kino-sekcje > section:last-child { margin-bottom: 0; }
.kino-sekcje > section.szeroka { max-width: 72rem; }
.tlo-sekw .kino-sekcje > section { margin-bottom: 24svh; }
@media (min-width: 900px) {
  .kino-sekcje > section { width: min(60vw, 52rem); max-width: 52rem; margin: 0 auto 30svh 0; padding: 36px 40px; }
  .kino-sekcje > section:nth-child(even) { margin-left: auto; margin-right: 0; }
  .kino-sekcje > section.szeroka { width: min(92vw, 72rem); max-width: 72rem; margin-left: auto; margin-right: auto; }
  .tlo-sekw .kino-sekcje > section { margin-bottom: 20svh; }
}
@media (max-width: 700px) { .kino-sekcje > section { margin-bottom: 26svh; } .tlo-sekw .kino-sekcje > section { margin-bottom: 16svh; } }

/* kontakt i stopka na zdjęciu */
.kontakt-kino { margin-top: 10svh; }
.stopka-foto { position: relative; overflow: hidden; }
.stopka-foto .stopka-tlo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stopka-foto::after { content: ""; position: absolute; inset: 0; background: rgba(16, 20, 28, .74); }
.stopka-foto > *:not(.stopka-tlo) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .tlo-foto img, .tlo-foto::after, .kino-hero .pas-krok { transition: none; } }

/* etykieta kroku nie zasłania okruszków i H1 (zrzut mobile 26.10) */
.kino-hero:has(.pas-krok) .szer { padding-top: 4.6rem; }

/* kontrast hero na jasnych kadrach (niebo, biała elewacja) — zrzut 26.10 */
.kino-hero::before { height: 100%; background: linear-gradient(180deg, rgba(16,20,28,.10) 0, rgba(16,20,28,.45) 45%, rgba(16,20,28,.78) 100%); }
@media (min-width: 900px) { .kino-hero::before { background: linear-gradient(90deg, rgba(16,20,28,.72) 0, rgba(16,20,28,.45) 38%, rgba(16,20,28,0) 70%), linear-gradient(180deg, rgba(16,20,28,0) 55%, rgba(16,20,28,.5) 100%); } }