/* Dwie strony sprzedażowe Strefy: Renesans na weekend 26 i 27 września 2026.
   Obie chodzą z reklam, obie mają jedno zadanie: sprzedać bilet na jeden z czterech
   seansów. Style są pisane od telefonu, bo tam sprzedaje się najwięcej biletów;
   układ na komputer dokłada się dopiero w zapytaniu od 860 px.

   kw- = /weekend-renesans/  (ciemna, kinowa, wybór terminu w widżecie)
   kz- = /wydarzenie-renesans/ (jasna, rzeczowa, cztery seanse jako płaska lista)

   Świadomie bez gradientów, plakietek i zaokrągleń na wszystkim: konwersję niesie
   czytelna cena, widoczny termin i przycisk, który zawsze jest pod ręką. */

/* ——————————————————————————————————————————————————————————————
   wspólne dla obu stron
   —————————————————————————————————————————————————————————————— */
main[data-kampania] {
  --k-szpalta: calc(var(--szer) + 2 * var(--margines));
  --k-margines: var(--margines);
  display: block;
}
main[data-kampania] .k-szpalta {
  /* display trzeba podać wprost: serwis ma regułę układającą szpalty w wiersz,
     przez co nagłówek sekcji stawał obok treści zamiast nad nią */
  display: block;
  width: min(100% - 2 * var(--k-margines), var(--szer));
  margin-inline: auto;
}
/* height: auto jest konieczne, bo obrazy mają atrybuty width i height (rezerwują
   miejsce przy wczytywaniu), a bez tego atrybut wygrywa z proporcją z arkusza */
main[data-kampania] img,
main[data-kampania] video { display: block; max-width: 100%; height: auto; }

/* cena: najważniejsza liczba na stronie, więc nie chowamy jej w ozdobnikach */
main[data-kampania] .k-cena { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
main[data-kampania] .k-cena b { font-size: 40px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
main[data-kampania] .k-cena s { font-size: 18px; opacity: .6; text-decoration-thickness: 1px; }
main[data-kampania] .k-cena span { font-size: 14px; }

main[data-kampania] .k-akcja {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 0 24px;
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer; border-radius: 2px;
}
main[data-kampania] .k-nad {
  /* na wąskim ekranie cały nadtytuł ma zmieścić się w jednym wierszu,
     dlatego litery są ciaśniejsze niż na komputerze */
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
@media (min-width: 560px) {
  main[data-kampania] .k-nad { font-size: 12px; letter-spacing: .16em; }
}
main[data-kampania] h1 { letter-spacing: -.02em; }

/* ——————————————————————————————————————————————————————————————
   A. /weekend-renesans/ — ciemna
   —————————————————————————————————————————————————————————————— */
main[data-kampania="weekend"] {
  --kw-tlo: #0b0a08;
  --kw-karta: #141311;
  --kw-tekst: #f5f2ee;
  --kw-cichy: #9d968d;
  --kw-zloto: #f2c14e;
  --kw-kreska: rgba(255, 255, 255, .14);
  background: var(--kw-tlo); color: var(--kw-tekst);
}
main[data-kampania="weekend"] .k-akcja { background: var(--kw-zloto); color: #14110a; }
main[data-kampania="weekend"] .k-akcja:hover { background: #ffd469; }

/* Wejście trzyma tytuł i wybór terminu w jednej sekcji. Na telefonie widżet stoi
   tuż pod ceną, żeby nie trzeba było przewijać do zakupu; na komputerze idzie obok. */
/* Na telefonie nagłówek serwisu kończy się na 114 px, więc treść zaczyna się niżej,
   inaczej nadtytuł wchodzi pod pasek z logo. */
.kw-wejscie { position: relative; padding: 138px 0 36px; overflow: hidden; }
.kw-wejscie-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.kw-wejscie::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 10, 8, .55) 0%, rgba(11, 10, 8, .35) 42%, rgba(11, 10, 8, .94) 100%);
}
.kw-wejscie .k-szpalta { position: relative; z-index: 2; }
.kw-wejscie .k-nad { color: var(--kw-zloto); }
.kw-wejscie h1 { margin: 12px 0 0; font-size: clamp(38px, 12vw, 58px); font-weight: 900; line-height: 1.02; }
.kw-lead { margin: 14px 0 0; max-width: 34ch; font-size: 17px; line-height: 1.5; color: #e4ded6; }
.kw-wejscie .k-cena { margin-top: 22px; }
.kw-wejscie .k-cena b { color: var(--kw-zloto); }
.kw-wejscie .k-cena span { color: var(--kw-cichy); }
.kw-wejscie .k-akcja { margin-top: 20px; }
/* cztery terminy pod przyciskiem: gość widzi całą ofertę, zanim cokolwiek kliknie */
.kw-terminy { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.kw-terminy li { font-size: 14px; color: var(--kw-cichy); display: flex; gap: 10px; }
.kw-terminy b { color: var(--kw-tekst); font-weight: 700; min-width: 108px; }

/* wybór terminu: na telefonie karta na pełną szerokość, zaraz pod ceną */
.kw-wejscie-kup {
  margin: 24px 0 0; padding: 20px 18px; scroll-margin-top: 78px;
  background: rgba(20, 19, 17, .88); border: 1px solid var(--kw-kreska);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.kw-wejscie-kup h2 { margin: 0 0 4px; font-size: 20px; font-weight: 900; }
.kw-wejscie-kup > p { margin: 0 0 16px; font-size: 13px; color: var(--kw-cichy); }

.kw-fakty { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--kw-kreska); border-block: 1px solid var(--kw-kreska); }
.kw-fakty li { background: var(--kw-tlo); padding: 14px 2px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.kw-fakty dt, .kw-fakty .kw-f-nazwa { font-size: 13px; color: var(--kw-cichy); letter-spacing: .04em; text-transform: uppercase; }
.kw-fakty .kw-f-wartosc { font-size: 17px; font-weight: 700; text-align: right; }

.kw-sekcja { padding: 44px 0 0; }
.kw-sekcja h2 { margin: 0 0 6px; font-size: 26px; font-weight: 900; line-height: 1.12; }
.kw-sekcja > .k-szpalta > p { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: #ded8d0; }
.kw-kafle { margin: 22px 0 0; display: grid; gap: 14px; }
.kw-kafel { position: relative; }
.kw-kafel video, .kw-kafel img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--kw-karta); }
.kw-kafel p { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: #ded8d0; }
.kw-kafel b { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--kw-zloto); margin-bottom: 4px; }

.kw-domkniecie { margin: 44px 0 0; padding: 30px 0 40px; border-top: 1px solid var(--kw-kreska); }
.kw-domkniecie h2 { margin: 0 0 12px; font-size: 24px; font-weight: 900; }
.kw-domkniecie .k-cena { margin-bottom: 18px; }
.kw-domkniecie .k-cena b { color: var(--kw-zloto); }
.kw-domkniecie p { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--kw-cichy); }
.kw-domkniecie a { color: var(--kw-tekst); }

/* widżet zakupu z serwisu: na ciemnym tle ma trzymać ten sam język co reszta strony */
main[data-kampania="weekend"] .bp { background: var(--kw-karta); border: 1px solid var(--kw-kreska); border-radius: 2px; }
/* Widżet jest robiony pod Chopina, który ma kilkanaście terminów, więc rozkłada dni
   i godziny na ośmiokolumnową siatkę. Renesans ma dwa dni i dwie godziny, przez co
   kafelki ściskały się do 51 px i data się w nich nie mieściła. Tutaj układamy je
   w wiersz, żeby każdy miał tyle miejsca, ile potrzebuje. */
main[data-kampania="weekend"] .bp-dni,
main[data-kampania="weekend"] .bp-godziny {
  display: flex; flex-wrap: wrap; gap: 10px;
}
main[data-kampania="weekend"] .bp-dni button,
main[data-kampania="weekend"] .bp-godziny button {
  flex: 0 0 auto; min-width: 96px; padding-inline: 14px;
}
main[data-kampania="weekend"] .bp-dni button[aria-pressed="true"],
main[data-kampania="weekend"] .bp-godziny button[aria-pressed="true"] {
  background: rgba(255, 255, 255, .08); border-color: var(--kw-zloto); color: var(--kw-tekst);
}

/* ——————————————————————————————————————————————————————————————
   B. /wydarzenie-renesans/ — jasna
   —————————————————————————————————————————————————————————————— */
main[data-kampania="wydarzenie"] {
  --kz-tlo: #f7f4ef;
  --kz-karta: #fff;
  --kz-tekst: #211c19;
  --kz-cichy: #6b635c;
  --kz-akcent: #7a2f12;
  --kz-kreska: rgba(33, 28, 25, .14);
  background: var(--kz-tlo); color: var(--kz-tekst);
}
main[data-kampania="wydarzenie"] .k-akcja { background: var(--kz-akcent); color: #fff; }
main[data-kampania="wydarzenie"] .k-akcja:hover { background: #8f3a18; }

/* bez wideo w nagłówku: strona ma wejść od razu, także na słabym zasięgu.
   Odstęp u góry musi minąć pasek serwisu, który na telefonie sięga 94 px. */
.kz-czolo { padding: 122px 0 0; }
.kz-czolo .k-nad { color: var(--kz-akcent); }
.kz-czolo h1 { margin: 10px 0 0; font-size: clamp(34px, 10vw, 50px); font-weight: 900; line-height: 1.05; }
.kz-podtytul { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: var(--kz-cichy); max-width: 38ch; }
.kz-obraz { margin: 22px 0 0; }
.kz-obraz img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #e6e0d8; }
.kz-obraz figcaption { margin: 8px 0 0; font-size: 13px; color: var(--kz-cichy); }

.kz-cena-blok { margin: 24px 0 0; padding: 18px 0; border-block: 1px solid var(--kz-kreska); }
.kz-cena-blok .k-cena b { color: var(--kz-akcent); }
.kz-cena-blok .k-cena span { color: var(--kz-cichy); }

/* terminy skrótem przy cenie: gość zna całą ofertę, zanim zejdzie do listy seansów */
.kz-terminy { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.kz-terminy li { display: flex; gap: 12px; font-size: 15px; }
.kz-terminy b { min-width: 118px; font-weight: 700; }
.kz-terminy span { color: var(--kz-cichy); }
/* na telefonie lista seansów jest tuż pod spodem, więc ten przycisk pojawia się dopiero na komputerze */
.kz-czolo-akcja { display: none; }

/* cztery seanse: każdy wiersz to jedno kliknięcie do kasy, bez wybierania dnia i godziny osobno */
.kz-seanse { padding: 28px 0 0; scroll-margin-top: 78px; }
.kz-seanse h2 { margin: 0 0 4px; font-size: 24px; font-weight: 900; }
.kz-seanse > .k-szpalta > p { margin: 0 0 16px; font-size: 14px; color: var(--kz-cichy); }
main[data-kampania="wydarzenie"] .r2-seans {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px;
  padding: 16px 16px; background: var(--kz-karta); border: 1px solid var(--kz-kreska);
  margin-bottom: 10px;
}
main[data-kampania="wydarzenie"] .r2-seans-kiedy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
main[data-kampania="wydarzenie"] .r2-seans-dzien { font-size: 16px; font-weight: 800; }
main[data-kampania="wydarzenie"] .r2-seans-opis { font-size: 13px; color: var(--kz-cichy); }
main[data-kampania="wydarzenie"] .r2-seans-godzina { grid-row: 1; grid-column: 2; font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
main[data-kampania="wydarzenie"] .r2-seans-kup {
  grid-column: 1 / -1; min-height: 50px; margin-top: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--kz-akcent); color: #fff; border: 0; border-radius: 2px; cursor: pointer;
  font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-family: inherit;
}
main[data-kampania="wydarzenie"] .r2-seans-kup:hover { background: #8f3a18; }
main[data-kampania="wydarzenie"] .r2-stan { font-size: 15px; color: var(--kz-cichy); }

.kz-tabela { padding: 34px 0 0; }
.kz-tabela h2 { margin: 0 0 12px; font-size: 22px; font-weight: 900; }
.kz-tabela dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.kz-tabela div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--kz-kreska); }
.kz-tabela div:first-child { border-top: 1px solid var(--kz-kreska); }
.kz-tabela dt { font-size: 14px; color: var(--kz-cichy); }
.kz-tabela dd { margin: 0; font-size: 15px; font-weight: 700; text-align: right; }

.kz-opis { padding: 34px 0 0; }
.kz-opis h2 { margin: 0 0 10px; font-size: 22px; font-weight: 900; }
.kz-opis p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; max-width: 56ch; }
.kz-galeria { margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kz-galeria img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #e6e0d8; }

.kz-pytania { padding: 34px 0 0; }
.kz-pytania h2 { margin: 0 0 10px; font-size: 22px; font-weight: 900; }
.kz-pytania details { border-bottom: 1px solid var(--kz-kreska); padding: 14px 0; }
.kz-pytania summary { font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.kz-pytania summary::-webkit-details-marker { display: none; }
.kz-pytania summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--kz-cichy); }
.kz-pytania details[open] summary::after { content: "–"; }
.kz-pytania p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--kz-cichy); max-width: 56ch; }

.kz-domkniecie { margin: 36px 0 0; padding: 28px 0 44px; border-top: 1px solid var(--kz-kreska); }
.kz-domkniecie h2 { margin: 0 0 14px; font-size: 22px; font-weight: 900; }
.kz-domkniecie p { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--kz-cichy); }
.kz-domkniecie a { color: var(--kz-tekst); }

/* ——————————————————————————————————————————————————————————————
   komputer: ten sam materiał, dwie szpalty i większa typografia
   —————————————————————————————————————————————————————————————— */
@media (min-width: 860px) {
  main[data-kampania] .k-akcja { width: auto; min-width: 280px; }

  .kw-wejscie { min-height: 92svh; display: flex; align-items: center; padding: 150px 0 60px; }
  main[data-kampania] .kw-wejscie .k-szpalta { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); gap: 64px; align-items: center; }
  .kw-wejscie h1 { font-size: clamp(56px, 4.6vw, 76px); }
  .kw-lead { font-size: 19px; }
  /* na komputerze wybór terminu stoi obok tytułu, więc widać go bez przewijania */
  .kw-wejscie-kup { margin: 0; padding: 26px; }
  .kw-wejscie-kup h2 { font-size: 22px; }
  .kw-fakty { grid-template-columns: repeat(3, 1fr); gap: 1px; }
  .kw-fakty li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 24px; }
  .kw-fakty .kw-f-wartosc { font-size: 20px; text-align: left; }
  .kw-kafle { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .kw-sekcja h2 { font-size: 34px; }
  .kw-domkniecie { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
  .kw-domkniecie .kw-dom-tekst { grid-column: 1; }

  .kz-czolo { padding: 150px 0 0; }
  main[data-kampania] .kz-czolo .k-szpalta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 56px; align-items: start; }
  .kz-czolo h1 { font-size: clamp(48px, 3.8vw, 62px); }
  .kz-obraz { margin: 0; }
  .kz-obraz img { aspect-ratio: 1 / 1; }
  .kz-czolo-akcja { display: flex; margin-top: 26px; }
  main[data-kampania] .kz-seanse [data-r2-seanse] { max-width: 760px; }
  main[data-kampania="wydarzenie"] .r2-seans { grid-template-columns: 1fr auto auto; gap: 24px; padding: 18px 22px; }
  main[data-kampania="wydarzenie"] .r2-seans-godzina { grid-column: 2; }
  main[data-kampania="wydarzenie"] .r2-seans-kup { grid-column: 3; grid-row: 1; margin-top: 0; min-width: 180px; }
  .kz-tabela dl { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
  .kz-tabela div:nth-child(2) { border-top: 1px solid var(--kz-kreska); }
  .kz-galeria { grid-template-columns: repeat(4, 1fr); }
  main[data-kampania] .k-szpalta.kz-dwie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
}

/* Pasek na dole telefonu jest z serwisu, ale jego przycisk ma tam gradient karty.
   Na obu stronach kampanii ma być ten sam płaski kolor co przyciski w treści. */
body.kampania-weekend .pasek-zakupu .przycisk { background: #f2c14e; color: #14110a; }
body.kampania-wydarzenie .pasek-zakupu .przycisk { background: #7a2f12; color: #fff; }
body.kampania-weekend .pasek-zakupu .przycisk:hover,
body.kampania-wydarzenie .pasek-zakupu .przycisk:hover { filter: brightness(1.06); }