/* =====================================================================
   Lukullus — ekrany z odsłanianiem
   =====================================================================

   Zasada działania: zdjęcia SIĘ NIE RUSZAJĄ. W trybie odsłaniania każda
   warstwa jest przypięta do okna (`position:fixed`) i leży nieruchomo,
   a wszystkie poukładane są po `z-index` — najnowsza na wierzchu. Przy
   przewijaniu zmienia się tylko okno, przez które widać wierzchnie
   zdjęcie: rośnie od dolnej krawędzi ekranu w górę. Wędruje sama
   granica, stąd wrażenie, że jedno zdjęcie przechodzi w drugie.

   Granicę ustawia JS przez `clip-path: inset(Ypx 0 0 0)`. Świadomie NIE
   używamy `overflow:hidden` na ekranie (tak robi pierwowzór), bo
   przycinanie potomka o `position:fixed` działa tylko wtedy, gdy któryś
   przodek tworzy dla niego blok zawierający — a nad widżetem jest kilka
   opakowań motywu i Elementora, nad którymi nie mamy kontroli.

   Warstwy zostają w swoich ekranach, nie przenosimy ich po DOM-ie.
   Dzięki temu reguły Elementora (`{{WRAPPER}} .elementor-repeater-item-…`)
   nadal w nie trafiają, a po wyłączeniu efektu widżet sam z siebie
   wygląda jak zwykłe sekcje ze zdjęciem w tle.
   ===================================================================== */

.lke{
  position:relative;
  display:block;
  --lke-tlo:#1f2328;
  --lke-kreska:#fff;
  /* Kolor tytułu pod wskaźnikiem. Bez własnej wartości bierze kolor kresek,
     więc widżet bez ustawiania czegokolwiek zostaje spójny. */
  --lke-poz-on:var(--lke-kreska);
}

/* ---------------------------------------------------------------- */
/*  Ekran                                                            */
/* ---------------------------------------------------------------- */

.lke__ekran{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:70vh;
  padding:24px;
  text-decoration:none;
  color:#fff;
  background-color:var(--lke-tlo);
  overflow:hidden;              /* tylko w trybie zwykłym; niżej zdejmowane */
}

.lke__warstwa{
  position:absolute;
  inset:0;
  display:block;
  z-index:0;
}

/* `!important` nie z lenistwa: praktycznie każdy motyw ma w arkuszu
   `img{max-width:100%;height:auto}`, a to zbija zdjęcie do wysokości
   wynikającej z proporcji i pod spodem wychodzi tło warstwy. */
.lke .lke__zdjecie{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none;
  max-height:none;
  object-fit:cover;
}

.lke__cien{
  position:absolute;
  inset:0;
  display:block;
  background:#000;
  opacity:.25;
  pointer-events:none;
}

.lke__tresc{
  position:relative;
  /* Nad zdjęciami (warstwy mają z-index = numer ekranu, lke.js), ale pod
     przypiętym nagłówkiem motywu — Blocksy daje mu 50. Przy 100 tytuł
     przewijał się PO belce zamiast pod nią. */
  z-index:var(--lke-z-tresc, 40);
  display:flex;
  flex-direction:column;
  align-items:inherit;
  gap:14px;
  max-width:32em;
}

/* Nadtytuł nad tytułem — ta sama rola co „Od 1946 roku” na stronie głównej. */
.lke__nad{
  display:block;
  margin:0;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.9;
}

.lke__tytul{
  display:block;
  margin:0;
  font-family:var(--lk-font-head, inherit);
  font-size:clamp(26px,7.5vw,40px);
  letter-spacing:var(--lk-ls-head, .14em);
  text-transform:uppercase;
  font-weight:200;
  line-height:1.2;
}

.lke__tekst{
  display:block;
  margin:0;
  opacity:.85;
  line-height:1.6;
}

.lke__cta{
  display:inline-block;
  margin-top:4px;
  padding:12px 26px;
  border:1px solid currentColor;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:background-color 300ms ease, color 300ms ease;
}

.lke__podpowiedz{
  position:absolute;
  z-index:var(--lke-z-tresc, 40);
  bottom:24px;
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.75;
}

/* Strzałka pod „przewiń”. Plik wybiera autor (Zachowanie → Strzałka),
   PHP wpisuje jego adres w --lke-ikona na korzeniu. Kształt to maska,
   kolor to tło, więc każdy plik — łopatka, szewron czy własny — dostaje
   kolor z ustawień. Pole jest kwadratowe, a maska „contain” wpisuje
   w nie ikonę dowolnych proporcji. */
.lke{ --lke-ikona:url(ikony/lopatka.svg); }

.lke__strzalka{
  display:block;
  height:var(--lke-ikona-h, 32px);
  aspect-ratio:1;
  background:var(--lke-ikona-kolor, currentColor);
  -webkit-mask:var(--lke-ikona) center / contain no-repeat;
          mask:var(--lke-ikona) center / contain no-repeat;
  animation:lke-bounce 2s infinite;
}

.lke--strzalka-stoi .lke__strzalka{ animation:none; }

@keyframes lke-bounce{
  0%,20%,50%,80%,100%{ transform:translateY(0); }
  40%{ transform:translateY(5px); }
  60%{ transform:translateY(3px); }
}

.lke__ukryte{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------------------------------------------------------------- */
/*  Tryb odsłaniania — klasę nadaje JS                               */
/* ---------------------------------------------------------------- */

/*
 * Własny kontekst warstw. Zdjęcia dostają z-index równy numerowi ekranu
 * (lke.js), więc przy pięciu ekranach ostatnie miało 4 — więcej niż
 * sekcja pod widżetem (motyw daje jej 3) — i dopóki widżet był choć
 * trochę w kadrze, przypięte do okna zdjęcie zasłaniało blok pod spodem.
 * Izolacja zamyka wszystkie te numery w widżecie: na zewnątrz leży on na
 * poziomie 0, pod dalszą częścią strony i pod nagłówkiem, niezależnie od
 * liczby ekranów. `position:fixed` warstw działa dalej względem okna.
 */
.lke.lke--odslanianie{ isolation:isolate; }

.lke.lke--odslanianie .lke__ekran{
  /* Zdjęcie wychodzi poza swój ekran, więc ekran nie może go przycinać.
     Wysokość ustawia JS w pikselach (--lke-vh), a nie 100vh — na telefonie
     pasek adresu chowa się przy przewijaniu i 100vh skacze. */
  overflow:visible;
  background-color:transparent;
  height:var(--lke-vh,100svh);
  min-height:0;
}

.lke.lke--odslanianie .lke__warstwa{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:auto;
  /* Stała wysokość zamiast `inset:0`. Okno telefonu rośnie, gdy przy
     pierwszym przewinięciu chowa się pasek adresu — warstwa o wysokości
     okna zmieniałaby wtedy rozmiar, a zdjęcie z `object-fit:cover`
     przekadrowywałoby się w locie (wygląda jak powiększanie i szarpie
     pierwszy ruch). `100vh`/`100lvh` to wysokość okna bez paska. */
  height:100vh;
  height:100lvh;
  background-color:var(--lke-tlo);

  /* własna warstwa kompozytora — bez tego przycinanie dużego zdjęcia
     potrafi szarpać, bo przeglądarka przemalowuje je w każdej klatce */
  backface-visibility:hidden;
  will-change:clip-path;

  /* pozycję granicy ustawia scroll, nie przejście */
  transition:none;

  opacity:0;
  visibility:hidden;
}

/* Warstwy pokazujemy tylko wtedy, gdy widżet jest w kadrze. Bez tego
   zdjęcie o `position:fixed` zostawałoby pod resztą strony. */
.lke.lke--odslanianie.is-w-kadrze .lke__warstwa{
  opacity:1;
  visibility:visible;
}

/* Tło pod całością — na wypadek zdjęć węższych niż ekran. */
.lke.lke--odslanianie::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:auto;
  height:100vh;
  height:100lvh;
  z-index:-1;
  background-color:var(--lke-tlo);
  /* do dolnej krawędzi widżetu — --lke-dol liczy lke.js razem z warstwami */
  clip-path:inset(0 0 var(--lke-dol, 0px) 0);
  opacity:0;
  visibility:hidden;
}

.lke.lke--odslanianie.is-w-kadrze::before{
  opacity:1;
  visibility:visible;
}

/* ---------------------------------------------------------------- */
/*  Kreski nawigacji                                                 */
/* ---------------------------------------------------------------- */

.lke__kreski{
  display:none;
  flex-direction:column;
  gap:10px;
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:calc(var(--lke-z-tresc, 40) + 1);
}

.lke--kreski-right .lke__kreski{ right:14px; }
.lke--kreski-left  .lke__kreski{ left:14px; }

.lke.lke--odslanianie.is-w-kadrze .lke__kreski{ display:flex; }

.lke__kreska{
  width:1px;
  height:15px;
  padding:0;
  border:1.5px solid var(--lke-kreska);
  background:transparent;
  border-radius:5px;
  cursor:pointer;
  background-clip:padding-box;
  transition:height .3s ease, background-color .3s ease;
}

.lke__kreska.is-on{
  height:50px;
  background:var(--lke-kreska);
}

@media (prefers-reduced-motion: reduce){
  .lke__strzalka{ animation:none; }
}

/* ---------------------------------------------------------------- */
/*  Komputer                                                         */
/* ---------------------------------------------------------------- */

/* Wszystkie liczby wyżej są pod telefon i na szerokim ekranie się sypią:
   70vh znaczy, że widać naraz koniec jednego zdjęcia i początek drugiego,
   więc nic się nie kadruje, a tytuł ograniczony do 40 px ginie na środku
   pustego pasa. Poniżej to samo, przeliczone na komputer. */

@media (min-width:782px){

  /* Wysokość tylko w trybie zwykłym — przy odsłanianiu liczy ją skrypt
     i wpisuje w `--lke-vh`; nadpisanie jej tutaj rozjechałoby granicę. */
  .lke:not(.lke--odslanianie) .lke__ekran{
    min-height:100vh;             /* dla przeglądarek bez svh */
    min-height:100svh;
  }

  /* Reszta dotyczy obu trybów. */
  .lke__ekran{ padding:64px; }

  .lke__tresc{
    max-width:40em;
    gap:20px;
  }

  .lke__tytul{ font-size:clamp(34px,3.4vw,58px); }

  .lke__tekst{ font-size:17px; }

  .lke__podpowiedz{ bottom:40px; }
  .lke__strzalka{ height:var(--lke-ikona-h, 40px); }

  .lke--kreski-right .lke__kreski{ right:28px; }
  .lke--kreski-left  .lke__kreski{ left:28px; }
}

/* ---------------------------------------------------------------- */
/*  Wygląd „lista” — jeden kadr, tytuły jako menu                    */
/* ---------------------------------------------------------------- */

/* Odtworzenie hero strony głównej: zdjęcia leżą jedno na drugim i
   przenikają się kryciem, a najechanie na tytuł wybiera, które jest na
   wierzchu. Blok jest osobny od stosu ekranów, bo tamte przy odsłanianiu
   chodzą po `position:fixed` z własnym przycinaniem — dwa zachowania
   w jednym elemencie biłyby się o ten sam `transform`.

   O tym, który układ widać, decyduje skrypt: klasę `lke--lista-czynna`
   nadaje wtedy, gdy odsłaniania nie ma. Progu nie da się zapisać
   w zapytaniu medialnym, bo jest ustawieniem widżetu. */

.lke__lista{ display:none; }

.lke.lke--lista-czynna .lke__ekrany{ display:none; }
.lke.lke--lista-czynna .lke__kreski{ display:none; }

.lke.lke--lista-czynna .lke__lista{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;              /* dla przeglądarek bez svh */
  min-height:100svh;
  padding:64px;
  overflow:hidden;
  background-color:var(--lke-tlo);
  text-align:center;
}

.lke__lista-tlo{ position:absolute; inset:0; }

/* Warstwa to zdjęcie razem z jego przyciemnieniem — przenikają się jako
   całość, więc przy zmianie pozycji nie widać, jak najpierw zmienia się
   kadr, a dopiero potem zaciemnienie. */
.lke__lista-warstwa{
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  transition:opacity var(--lke-przenikanie, 900ms) ease;
  will-change:opacity;
}

.lke__lista-warstwa.is-on{ opacity:1; }

.lke .lke__lista-zdjecie{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;         /* motyw ma `img{max-width:100%;height:auto}` */
  height:100% !important;
  max-width:none;
  max-height:none;
  object-fit:cover;
}

/* Krycie wpisuje PHP z suwaka „Przyciemnienie zdjęcia” przy ekranie. */
.lke__lista-cien{
  position:absolute;
  inset:0;
  display:block;
  background:#000;
  pointer-events:none;
}

.lke__lista-tresc{
  position:relative;
  z-index:2;
  color:#fff;
  max-width:34em;
}

.lke__lista-nad{
  margin:0 0 18px;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.9;
}

.lke__lista-nawigacja{ display:block; }

.lke__poz{
  margin:0;
  font-family:var(--lk-font-head, inherit);
  font-size:clamp(22px,3.8vw,48px);
  line-height:1.22;
  font-weight:200;
  letter-spacing:var(--lk-ls-head, .14em);
  text-transform:uppercase;
  opacity:.72;
  transition:opacity .35s ease;
}

.lke__poz.is-on,
.lke__poz:hover{ opacity:1; }

.lke__poz-link{
  color:#fff;
  text-decoration:none;
  transition:color .35s ease;
}

.lke__poz.is-on .lke__poz-link{ color:var(--lke-poz-on); }

/* Strzałka jako wskaźnik: ta sama ikona co pod „przewiń”, obrócona
   ostrzem w prawo. Pole wskaźnika w spoczynku ma zerową szerokość, więc
   nazwy stoją równo; na wskazanej pozycji rozsuwa się i przepycha nazwę
   w prawo. Ikonę rysuje ::before — obrócony kwadrat o boku długości
   wskaźnika, wyjęty z układu, żeby nie podnosił wysokości wiersza.
   Najechanie ustawia `is-on` (lke.js), więc wskaźnik idzie za myszą. */
.lke__poz{
  display:flex;
  align-items:center;
}
.lke__poz-strzalka{
  position:relative;
  flex:none;
  width:0;
  height:.34em;
  margin-right:0;
  opacity:0;
  transform:translateX(-.4em);
  transition:width .45s cubic-bezier(.22,.61,.36,1), margin .45s cubic-bezier(.22,.61,.36,1),
             opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.lke__poz-strzalka::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:var(--lke-wsk, 1.36em);
  height:var(--lke-wsk, 1.36em);
  transform:translate(-50%,-50%) rotate(-90deg);
  background:var(--lke-ikona-kolor, #fff);
  -webkit-mask:var(--lke-ikona) center / contain no-repeat;
          mask:var(--lke-ikona) center / contain no-repeat;
}
.lke__poz.is-on .lke__poz-strzalka{
  width:var(--lke-wsk, 1.36em);
  margin-right:.45em;
  opacity:1;
  transform:none;
}
.lke__poz:hover .lke__poz-link{ color:var(--lke-zolty, var(--lk-bar, #fefd54)); }

/* Opisy przenikają się w miejscu, więc lista nad nimi nie podskakuje przy
   zmianie pozycji. Wysokość bierze się z najwyższego — pozostałe leżą
   na nim, wyjęte z układu. */
.lke__lista-opisy{
  position:relative;
  margin-top:28px;
  display:grid;
}

.lke__lista-opis{
  grid-area:1 / 1;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}

.lke__lista-opis.is-on{ opacity:1; visibility:visible; }

.lke__lista-tekst{ margin:0; opacity:.85; line-height:1.6; }

.lke__lista-cta{
  display:inline-block;
  margin-top:14px;
  padding:12px 26px;
  border:1px solid currentColor;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* ---------- Animacje listy (1.7.0) ----------
   Jak dawne hero motywu i wzorzec: nadtytuł i tytuły wjeżdżają z rozmycia
   po kolei, a wskazane zdjęcie powoli się przybliża.

   Wejście to animacja, nie przejście: Elementor ustawia `.lke__poz`
   krycie z suwaka („Krycie pozycji nieaktywnych”) regułą o wyższej
   specyficzności. Klatka kluczowa ma tylko `from`, więc po wejściu każda
   pozycja wraca do krycia z ustawień, a nie do 1. Do chwili wejścia
   napisy są ukryte przez `visibility` — tej właściwości Elementor nie
   rusza. Numer w kolejce (`--i`) wpisuje PHP. */
.lke--wejscie.lke--lista-czynna:not(.lke--weszla) .lke__lista-nad,
.lke--wejscie.lke--lista-czynna:not(.lke--weszla) .lke__poz{
  visibility:hidden;
}

.lke--wejscie.lke--lista-czynna.lke--weszla .lke__lista-nad,
.lke--wejscie.lke--lista-czynna.lke--weszla .lke__poz{
  animation:lke-wejscie 1000ms cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay:calc(var(--i, 0) * 110ms + 150ms);
}

@keyframes lke-wejscie{
  from{ opacity:0; transform:translateY(18px); filter:blur(6px); }
}

/* Najazd kadru. Wskazane zdjęcie jedzie od 1.06 do 1 przez 9 s; zgaszone
   wraca do 1.06 dopiero po swoim przenikaniu, żeby nie podskoczyło, gdy
   jeszcze je widać. */
.lke--najazd .lke__lista-zdjecie{
  transform:scale(1.06);
  transition:transform 0s linear var(--lke-przenikanie, 900ms);
}

.lke--najazd .lke__lista-warstwa.is-on .lke__lista-zdjecie{
  transform:scale(1);
  transition:transform var(--lke-najazd, 9s) cubic-bezier(.2,.6,.3,1);
}

/* „Ogranicz ruch”: bez przesuwania, rozmycia i przybliżania — zostaje
   samo pojawianie się. `?lk-motion=on` motywu (klasa lk-motion-forced)
   pokazuje pełną wersję. */
@media (prefers-reduced-motion: reduce){
  html:not(.lk-motion-forced) .lke--wejscie.lke--lista-czynna.lke--weszla .lke__lista-nad,
  html:not(.lk-motion-forced) .lke--wejscie.lke--lista-czynna.lke--weszla .lke__poz{
    animation-name:lke-wejscie-bez-ruchu;
    /* motyw skraca przy „ogranicz ruch” każdą animację do .01ms z
       !important — samo pojawianie się (krycie) ma jednak zostać */
    animation-duration:700ms !important;
  }

  html:not(.lk-motion-forced) .lke--najazd .lke__lista-zdjecie,
  html:not(.lk-motion-forced) .lke--najazd .lke__lista-warstwa.is-on .lke__lista-zdjecie{
    transform:none;
    transition:none;
  }
}

@keyframes lke-wejscie-bez-ruchu{
  from{ opacity:0; }
}

/* ---------- Rodzaj przejścia między zdjęciami (1.8.0) ----------
   Styl → Lista tytułów → Przejście. Klasę `lke--przejscie-*` daje PHP.
   Czas bierze się z tego samego suwaka co przenikanie. */
.lke__lista-tlo{ overflow:hidden; }

.lke--przejscie-brak .lke__lista-warstwa{ transition:none; }

/* Wchodzące zdjęcie startuje lekko przybliżone i osiada w kadrze. */
.lke--przejscie-zoom .lke__lista-warstwa{
  transform:scale(1.05);
  transition:opacity var(--lke-przenikanie, 900ms) ease,
             transform var(--lke-przenikanie, 900ms) cubic-bezier(.22,.61,.36,1);
}
.lke--przejscie-zoom .lke__lista-warstwa.is-on{ transform:none; }

/* Wchodzące zdjęcie wyostrza się z rozmycia. */
.lke--przejscie-rozmycie .lke__lista-warstwa{
  filter:blur(14px);
  transition:opacity var(--lke-przenikanie, 900ms) ease,
             filter var(--lke-przenikanie, 900ms) ease;
}
.lke--przejscie-rozmycie .lke__lista-warstwa.is-on{ filter:none; }

/* Elementor (frontend.min.css) przy systemowym „ogranicz animacje” daje
   `html *{transition-duration:0s!important}` i zdjęcia przeskakują.
   Przy „Łagodnie także przy ogranicz animacje” zostawiamy samo
   przenikanie krycia — to nie ruch. `?lk-motion=on` motywu przywraca
   pełne przejścia, najazd kadru i ruch wskaźnika. */
@media (prefers-reduced-motion: reduce){
  html:not(.lk-motion-forced) .lke--przenikaj-zawsze:not(.lke--przejscie-brak) .lke__lista-warstwa{
    transition:opacity var(--lke-przenikanie, 900ms) ease !important;
    transform:none !important;
    filter:none !important;
  }

  html.lk-motion-forced .lke:not(.lke--przejscie-brak) .lke__lista-warstwa{
    transition-duration:var(--lke-przenikanie, 900ms) !important;
  }
  html.lk-motion-forced .lke--najazd .lke__lista-warstwa.is-on .lke__lista-zdjecie{
    transition-duration:var(--lke-najazd, 9s) !important;
  }
  html.lk-motion-forced .lke__poz-strzalka,
  html.lk-motion-forced .lke__poz,
  html.lk-motion-forced .lke__poz-link{
    transition-duration:.45s !important;
  }
}

/* Przy „ogranicz ruch” gasimy przesuwanie, ale nie przenikanie zdjęć:
   zmiana krycia to nie ruch, a bez niej kadr przeskakuje jak ucięty. */
@media (prefers-reduced-motion: reduce){
  .lke__lista-opis,
  .lke__poz-strzalka{ transition-duration:.01ms; }
}

/* Lista może trafić i na telefon — gdy autor wybrał „Odsłanianie: nigdy”.
   Wtedy 64 px marginesu zjada pół ekranu. */
@media (max-width:781px){
  .lke.lke--lista-czynna .lke__lista{ padding:32px 20px; }
}