/* ═══════════════════════════════════════════════════════════════════
   Układ immersyjny — wspólny dla podstron wydarzeń (wrzesień 2026)
   Nacisk na obraz: materiał wideo na pełną szerokość, opis w osobnej
   ciemnej karcie pod ujęciem, dużo powietrza, sprzedaż dopiero na dole.
   Wzór układu: teamlab.art/e/planets.
   Wszystkie klasy mają przedrostek r2-, żeby nie zderzały się z front.css.
   Kolory biorą się z motywu „afisz” (złoto na czerni), który front.js
   włącza dla tej trasy przez body[data-motyw="afisz"].
   ═══════════════════════════════════════════════════════════════════ */

main[data-uklad="immersyjny"] {
  --r2-tlo: #0b0a08;
  --r2-karta: #141311;
  --r2-karta-2: #1b1917;
  --r2-tekst: #f5f2ee;
  --r2-cichy: #97918a;
  --r2-zloto: #f2c14e;
  --r2-kreska: rgba(255, 255, 255, .12);
  /* Ta sama szpalta co w nagłówku serwisu (.szpalta z front.css), żeby napisy
     stały w jednej linii z logo i menu również na szerokich ekranach. */
  --r2-szpalta: calc(var(--szer) + 2 * var(--margines));
  --r2-margines: var(--margines);
  --r2-odstep: clamp(72px, 9vw, 150px);
  background: var(--r2-tlo);
  color: var(--r2-tekst);
}

/* Bloki tej podstrony nie noszą klas z front.css (.sekcja, .szpalta), więc
   niczego nie trzeba zerować: własne odstępy siedzą przy każdym bloku niżej.
   Zbiorcza reguła na `main > section` jest tu niemożliwa, bo biłaby swoją
   szczegółowością odstępy pojedynczych bloków. */
main[data-uklad="immersyjny"] video { display: block; max-width: 100%; }

/* ─────────── 1. wejście ─────────── */
.r2-wejscie {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex;
}
/* film idzie przez całą szerokość, a napisy trzymają się szpalty nagłówka */
.r2-wejscie-w {
  width: 100%;
  max-width: var(--r2-szpalta);
  margin-inline: auto;
  padding: clamp(118px, 15vh, 150px) var(--r2-margines) clamp(34px, 6vh, 64px);
  display: grid; grid-template-rows: auto 1fr auto;
}
.r2-wejscie-film {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.r2-wejscie-cien {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(11, 10, 8, .92) 2%, rgba(11, 10, 8, .16) 48%, rgba(11, 10, 8, .5)),
    radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(11, 10, 8, .5));
}
.r2-wejscie-data {
  font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .14em; text-transform: uppercase;
  color: var(--r2-zloto); font-weight: 700;
}
.r2-wejscie-data span {
  display: block; margin-top: 5px; font-weight: 400; letter-spacing: .1em;
  color: rgba(255, 255, 255, .75);
}
.r2-wejscie-tytul { grid-row: 2; align-self: end; }
.r2-wejscie-tytul h1 {
  margin: 0;
  font-size: clamp(54px, 11.5vw, 168px);
  font-weight: 900; line-height: .9; letter-spacing: -.02em;
  text-shadow: 0 8px 50px rgba(0, 0, 0, .6);
}
.r2-wejscie-podpis {
  margin: 16px 0 0;
  font-size: clamp(13px, 1.5vw, 17px); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.r2-wejscie-tag {
  grid-row: 3; justify-self: end; align-self: end; margin: 0;
  font-size: clamp(13px, 1.6vw, 20px); font-weight: 900;
  color: rgba(255, 255, 255, .85);
}
.r2-strzalka {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 26px; height: 42px; display: grid; place-items: start center;
}
.r2-strzalka span {
  width: 1px; height: 26px; background: rgba(255, 255, 255, .6);
  animation: r2-spadanie 2.4s ease-in-out infinite;
}
@keyframes r2-spadanie {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 620px) { .r2-wejscie-tag { display: none; } }

/* ─────────── 2. zdanie otwierające ─────────── */
.r2-manifest {
  position: relative; isolation: isolate;
  min-height: min(78vh, 720px);
  display: grid; place-items: center;
  padding: var(--r2-odstep) var(--r2-margines);
}
.r2-manifest-tlo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.r2-manifest-tlo video { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.r2-manifest-tlo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--r2-tlo), rgba(11, 10, 8, .35) 45%, var(--r2-tlo));
}
.r2-haslo {
  position: relative; margin: 0; text-align: center; max-width: 18ch;
  font-size: clamp(27px, 4.6vw, 62px); font-weight: 900; line-height: 1.16; letter-spacing: -.01em;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .7);
}

.r2-wstep {
  max-width: 860px; margin: 0 auto;
  padding: var(--r2-odstep) var(--r2-margines);
  text-align: center;
}
.r2-lead { margin: 0; font-size: clamp(17px, 2vw, 23px); line-height: 1.75; }
.r2-tekst { margin: 26px 0 0; font-size: 16px; line-height: 2; color: var(--r2-cichy); }

/* ─────────── 3. mozaika ─────────── */
.r2-mozaika {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  max-width: var(--r2-szpalta); margin: 0 auto;
  padding: 0 var(--r2-margines) var(--r2-odstep);
}
.r2-kafel {
  position: relative; overflow: hidden; background: #0a0a0a; margin: 0;
  aspect-ratio: 9 / 16;
}
.r2-kafel-panorama { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.r2-kafel video { width: 100%; height: 100%; object-fit: cover; }
.r2-kafel figcaption {
  position: absolute; inset: auto 0 0; padding: 40px 14px 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent);
  font-size: 12px; letter-spacing: .05em; color: rgba(255, 255, 255, .9);
  opacity: 0; transition: opacity .3s ease;
}
.r2-kafel:hover figcaption { opacity: 1; }
@media (max-width: 900px) {
  .r2-mozaika { grid-template-columns: repeat(2, 1fr); }
  .r2-kafel-panorama { aspect-ratio: 16 / 9; }
  .r2-kafel figcaption { opacity: 1; }
}

/* ─────────── 4. słowo działowe ─────────── */
.r2-dzial {
  position: relative; isolation: isolate;
  scroll-margin-top: 110px;
  min-height: min(56vh, 480px);
  display: flex; align-items: center;
  overflow: hidden;
}
.r2-dzial video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; opacity: .42;
}
.r2-dzial::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--r2-tlo), rgba(11, 10, 8, .25) 50%, var(--r2-tlo));
}
.r2-dzial h2 {
  width: 100%; max-width: var(--r2-szpalta);
  margin-inline: auto; padding-inline: var(--r2-margines);
  margin-block: 0;
  font-size: clamp(42px, 8vw, 118px); font-weight: 900; letter-spacing: -.02em; line-height: 1;
}

/* ─────────── 5. dzieło: ujęcie + opis ─────────── */
.r2-dzielo {
  max-width: var(--r2-szpalta); margin: 0 auto;
  padding: clamp(26px, 3.4vw, 54px) var(--r2-margines) clamp(48px, 6vw, 92px);
}
.r2-dzielo-film { background: #0a0a0a; overflow: hidden; }
.r2-dzielo-film video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.r2-dzielo-opis {
  background: var(--r2-karta);
  padding: clamp(28px, 3.4vw, 52px) clamp(22px, 3.4vw, 60px);
}
.r2-dzielo-opis h3 {
  margin: 0 0 20px;
  font-size: clamp(19px, 2.1vw, 27px); font-weight: 900; letter-spacing: -.005em;
}
.r2-dzielo-opis p {
  margin: 0; max-width: 82ch;
  font-size: 15px; line-height: 2; color: var(--r2-cichy);
}
.r2-dzielo-opis p + p { margin-top: 18px; }

/* ─────────── 6. fakty ─────────── */
.r2-naglowek {
  margin: 0; text-align: center;
  font-size: clamp(25px, 3.4vw, 42px); font-weight: 900; letter-spacing: -.01em;
}
.r2-nadtytul {
  margin: 0 0 14px; text-align: center;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  color: var(--r2-zloto);
}
.r2-fakty {
  max-width: var(--r2-szpalta); margin: 0 auto;
  padding: var(--r2-odstep) var(--r2-margines);
  border-top: 1px solid var(--r2-kreska);
}
.r2-fakty-siatka {
  margin-top: clamp(36px, 4vw, 60px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.r2-fakt { background: var(--r2-karta); padding: clamp(26px, 3vw, 44px); }
.r2-fakt b {
  display: block; margin-bottom: 14px;
  font-size: clamp(19px, 2vw, 25px); font-weight: 900; color: var(--r2-zloto);
}
.r2-fakt p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--r2-cichy); }
@media (max-width: 820px) { .r2-fakty-siatka { grid-template-columns: 1fr; } }

/* ─────────── 7. bilety ─────────── */
.r2-bilety {
  max-width: 1000px; margin: 0 auto;
  padding: var(--r2-odstep) var(--r2-margines) clamp(80px, 9vw, 130px);
  scroll-margin-top: 92px;
}
.r2-lista { margin-top: clamp(32px, 4vw, 52px); display: grid; gap: 6px; }
.r2-stan {
  background: var(--r2-karta); padding: 34px; text-align: center; margin: 0;
  color: var(--r2-cichy); font-size: 15px;
}
.r2-stan a { color: var(--r2-zloto); }
.r2-seans {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--r2-karta); padding: 22px clamp(20px, 2.6vw, 34px);
  border: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.r2-seans:hover { border-color: rgba(242, 193, 78, .5); background: var(--r2-karta-2); }
.r2-seans-kiedy { display: grid; gap: 5px; }
.r2-seans-dzien { font-size: clamp(17px, 2vw, 21px); font-weight: 900; }
.r2-seans-opis { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--r2-cichy); }
.r2-seans-godzina {
  font-size: clamp(24px, 3vw, 34px); font-weight: 900; color: var(--r2-zloto);
  font-variant-numeric: tabular-nums;
}
.r2-seans-kup {
  flex: none; border: 0; cursor: pointer; border-radius: 0;
  background: var(--r2-zloto); color: #0b0a08;
  font-family: inherit; font-weight: 900; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; padding: 15px 26px;
  transition: background .2s ease;
}
.r2-seans-kup:hover { background: #fff; }
.r2-nota { margin: 26px 0 0; text-align: center; font-size: 13px; line-height: 1.9; color: var(--r2-cichy); }
.r2-nota b { color: var(--r2-tekst); }
@media (max-width: 660px) {
  .r2-seans { flex-wrap: wrap; }
  .r2-seans-godzina { order: -1; }
  .r2-seans-kup { width: 100%; }
}

/* ─────────── 8. dojazd ─────────── */
.r2-dojazd {
  max-width: var(--r2-szpalta); margin: 0 auto;
  padding: var(--r2-odstep) var(--r2-margines);
  border-top: 1px solid var(--r2-kreska);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 90px);
}
.r2-dojazd h2 { margin: 0 0 18px; font-size: clamp(24px, 3vw, 38px); font-weight: 900; }
.r2-dojazd h3 {
  margin: 0 0 12px;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--r2-zloto);
}
.r2-dojazd h3 + p + h3 { margin-top: 32px; }
.r2-dojazd p { margin: 0; font-size: 15px; line-height: 1.95; color: var(--r2-cichy); }
.r2-adres { color: var(--r2-tekst) !important; font-size: 17px !important; margin-bottom: 20px !important; }
.r2-dojazd a { color: var(--r2-zloto); text-decoration: none; border-bottom: 1px solid rgba(242, 193, 78, .35); }
.r2-dojazd a:hover { border-bottom-color: var(--r2-zloto); }
.r2-kontakt { margin-top: 22px !important; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.r2-kontakt a { font-size: 16px; }
@media (max-width: 820px) { .r2-dojazd { grid-template-columns: 1fr; } }

/* ─────────── pojawianie się przy przewijaniu ─────────── */
main[data-uklad="immersyjny"] [data-r2-wejdz] { opacity: 0; transform: translateY(26px); }
main[data-uklad="immersyjny"] [data-r2-wejdz="tak"] {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  main[data-uklad="immersyjny"] [data-r2-wejdz],
  main[data-uklad="immersyjny"] [data-r2-wejdz="tak"] { opacity: 1; transform: none; transition: none; }
  .r2-strzalka span { animation: none; }
}

/* ─────────── karta zakupu serwisu na ciemnym tle ───────────
   front.css zaznacza wybrane wydarzenie, dzień i godzinę pełnym jasnym
   wypełnieniem, bo powstała dla jasnego motywu. Na prawie czarnej stronie
   taki biały klocek jest za mocny. Tutaj zaznaczenie robi cienka ramka
   w kolorze akcentu i ledwie widoczne rozjaśnienie tła, a nie wypełnienie. */
main[data-uklad="immersyjny"] .bp-wyd {
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--r2-kreska);
}
main[data-uklad="immersyjny"] .bp-wyd button { color: var(--r2-cichy); }
main[data-uklad="immersyjny"] .bp-wyd button[aria-pressed="true"] {
  background: rgba(255, 255, 255, .1);
  color: var(--r2-tekst);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
main[data-uklad="immersyjny"] .bp-dni button,
main[data-uklad="immersyjny"] .bp-godziny button {
  background: transparent;
  border-color: rgba(255, 255, 255, .15);
  color: var(--r2-tekst);
}
main[data-uklad="immersyjny"] .bp-dni button:hover:not([aria-pressed="true"]),
main[data-uklad="immersyjny"] .bp-godziny button:hover:not(:disabled):not([aria-pressed="true"]) {
  border-color: rgba(255, 255, 255, .4);
}
main[data-uklad="immersyjny"] .bp-dni button[aria-pressed="true"],
main[data-uklad="immersyjny"] .bp-godziny button[aria-pressed="true"] {
  background: rgba(255, 255, 255, .07);
  border-color: var(--r2-zloto);
  color: var(--r2-tekst);
}
main[data-uklad="immersyjny"] .bp-dni button[aria-pressed="true"] small { color: var(--r2-cichy); opacity: 1; }
main[data-uklad="immersyjny"] .bp-dni button small { color: var(--r2-cichy); }

/* Przycisk zakupu w pasku na telefonie (21.09.2026)
   Serwis chowa „Kup bilet” poniżej 600 px, bo na jasnych podstronach pasek robi
   miejsce dla menu. Na trasach wydarzeń to jednak najkrótsza droga do kasy, więc
   tutaj zostaje widoczny, tylko węższy, żeby zmieścił się obok logo i menu. */
@media (max-width: 600px) {
  body.uklad-immersyjny:not(.bez-kup) .naglowek-kup { display: inline-flex; }
  body.uklad-immersyjny .naglowek-kup { padding: 9px 13px; font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
}
@media (max-width: 380px) {
  body.uklad-immersyjny .naglowek-kup { padding: 8px 10px; font-size: 11px; letter-spacing: .05em; }
}