/* Lek na głupotę świata – styl wtyczki (hero, licznik, formularz, pętle wideo).
   Kolory strony są zmiennymi w strona.css; tu tylko wartości zapasowe. */

:root {
  --lek-f-tekst: 'Lek Garamond', Georgia, serif;
  --lek-f-kapitaliki: 'Lek Cinzel', 'Times New Roman', serif;
  --lek-f-lek: 'Lek Oswald', 'Arial Narrow', sans-serif;
}

/* Kursywa dozwolona w tekście, nigdy w nagłówkach i przyciskach (decyzja Mateusza 5.11.2026). */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.lek-btn, .lek-hero__autor, .lek-hero__podtytul { font-style: normal !important; }

.lek-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- przyciski (hero) ---------- */
.lek-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 28px;
  font: 600 15px/1.2 var(--lek-f-kapitaliki); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; border-radius: 0;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.lek-btn--zloty { background: var(--zloto, #B89763); color: var(--burgund-cien, #160305); }
.lek-btn--zloty:hover, .lek-btn--zloty:focus-visible { background: var(--zloto-jasne, #D9BC85); color: var(--burgund-cien, #160305); }
.lek-btn--obrys { border-color: var(--zloto, #B89763); color: var(--kosc, #F2E6CF); }
.lek-btn--obrys:hover, .lek-btn--obrys:focus-visible { background: rgba(184, 151, 99, .14); color: var(--kosc, #F2E6CF); }
.lek-btn:focus-visible { outline: 2px solid var(--zloto-jasne, #D9BC85); outline-offset: 3px; }

/* ---------- HERO: wersja podstawowa (bez JS / ograniczony ruch) ----------
   Okładka i treść stoją jedna pod drugą, więc nic na siebie nie nachodzi. */
.lek-hero { position: relative; background: var(--burgund, #3D0518); color: var(--kosc, #F2E6CF); }
.lek-hero__scena {
  position: relative; height: auto; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; padding: 96px 16px 64px;
}
.lek-hero__wideo { position: absolute; inset: 0; z-index: 0; background: var(--burgund-cien, #160305); }
.lek-hero__video, .lek-hero__plakat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lek-hero__plakat { z-index: 1; }

.lek-hero__okladka {
  position: relative; inset: auto; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 0 32px; text-align: center; pointer-events: none;
}
.lek-hero__maska { display: block; height: clamp(150px, 34vh, 520px); width: auto; max-width: 92vw; overflow: visible; margin: 2vh 0 1.6vh; }
.lek-hero__tlo { fill: var(--burgund, #3D0518); }
.lek-hero__litery { font-family: var(--lek-f-lek); font-weight: 600; font-size: 520px; letter-spacing: -4px; }
.lek-hero__obrys { fill: none; stroke: var(--zloto, #B89763); stroke-width: 1.5; opacity: .85; }

.lek-hero__autor, .lek-hero__tytul, .lek-hero__lilia, .lek-hero__podtytul, .lek-hero__pigułka { position: relative; z-index: 2; margin: 0; }
.lek-hero__autor {
  font: 500 clamp(13px, 1.45vw, 22px)/1.2 var(--lek-f-kapitaliki);
  letter-spacing: .32em; text-transform: uppercase; color: var(--zloto, #B89763);
}
.lek-hero__tytul {
  font: 500 clamp(26px, 4.1vw, 62px)/1.05 var(--lek-f-kapitaliki);
  letter-spacing: .08em; text-transform: uppercase; color: var(--zloto, #B89763);
}
.lek-hero__lilia { font-size: clamp(16px, 1.6vw, 24px); color: var(--zloto, #B89763); margin-top: 1vh; }
.lek-hero__podtytul {
  margin-top: .8vh; font: 500 clamp(11px, 1vw, 15px)/1.6 var(--lek-f-kapitaliki);
  letter-spacing: .22em; text-transform: uppercase; color: var(--zloto, #B89763); max-width: 34em;
}
/* Pasek oferty: widoczny od pierwszego ekranu, znika razem z podtytułem. */
.lek-hero__pigułka {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px;
  margin-top: 2.4vh; padding: 10px 20px; max-width: min(92vw, 720px);
  border: 1px solid rgba(184, 151, 99, .45); background: rgba(22, 3, 5, .55);
  font: 400 clamp(15px, 1.15vw, 17px)/1.4 var(--lek-f-tekst); color: var(--kosc, #F2E6CF);
}
.lek-hero__pigułka-link {
  pointer-events: auto; font: 600 12px/1.2 var(--lek-f-kapitaliki); letter-spacing: .16em; text-transform: uppercase;
  color: var(--zloto-jasne, #D9BC85); text-decoration: underline; text-underline-offset: 4px;
}
.lek-hero__pigułka-link:hover { color: var(--kosc, #F2E6CF); }

.lek-hero__tresc {
  position: relative; z-index: 3; max-width: 720px; margin: 0 auto; padding: 32px 16px 24px;
  border-top: 1px solid rgba(184, 151, 99, .3); text-align: center;
}
.lek-hero__etykieta {
  margin: 0 0 18px; font: 600 13px/1.2 var(--lek-f-kapitaliki); letter-spacing: .2em; text-transform: uppercase;
  color: var(--zloto, #B89763);
}
.lek-hero__lead { margin: 0 0 32px; font: 400 clamp(21px, 2vw, 28px)/1.45 var(--lek-f-tekst); color: var(--kosc, #F2E6CF); }
.lek-hero__przyciski { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.lek-hero__notka { margin: 18px auto 0; max-width: 34em; font: 400 16px/1.5 var(--lek-f-tekst); color: rgba(242, 230, 207, .78); }
.lek-hero__przewin { display: none; }

/* ---------- HERO: wersja z ruchem (klasa dodawana przez lek.js) ---------- */
.lek-ruch .lek-hero { height: 250vh; }
.lek-ruch .lek-hero__scena { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; min-height: 560px; padding: 0; }
.lek-ruch .lek-hero__okladka { position: absolute; inset: 0; padding: 96px 16px 64px; }
.lek-ruch .lek-hero__maska { height: clamp(150px, 40vh, 520px); }
/* Bez visibility: hidden – treść zostaje w kolejności Tab; klikalna dopiero po pojawieniu się. */
.lek-ruch .lek-hero__tresc {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: none; margin: 0;
  padding: 0 clamp(16px, 6vw, 96px) clamp(48px, 9vh, 104px); border-top: 0; text-align: left;
  opacity: 0; pointer-events: none;
}
.lek-ruch .lek-hero__tresc.is-aktywna { pointer-events: auto; }
.lek-ruch .lek-hero__tresc > * { max-width: 640px; }
.lek-ruch .lek-hero__przyciski { justify-content: flex-start; }
.lek-ruch .lek-hero__notka { margin-left: 0; margin-right: 0; }
.lek-ruch .lek-hero__cien {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(22, 3, 5, .88) 0%, rgba(22, 3, 5, .55) 42%, rgba(22, 3, 5, 0) 75%),
    linear-gradient(0deg, rgba(22, 3, 5, .8) 0%, rgba(22, 3, 5, 0) 45%);
}
.lek-ruch .lek-hero__przewin {
  display: block; position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%);
  margin: 0; font: 600 11px/1 var(--lek-f-kapitaliki); letter-spacing: .3em; text-transform: uppercase;
  color: rgba(184, 151, 99, .8);
}
.lek-ruch .lek-hero__przewin::after {
  content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: currentColor;
}

/* Winieta na scenie (w obu wersjach). */
.lek-hero__scena::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(22, 3, 5, 0) 55%, rgba(22, 3, 5, .55) 100%);
}

@media (max-width: 767px) {
  .lek-hero__maska, .lek-ruch .lek-hero__maska { height: auto; width: 88vw; }
  .lek-ruch .lek-hero { height: 230vh; }
  .lek-ruch .lek-hero__okladka { padding-top: 84px; }
  .lek-ruch .lek-hero__cien {
    background: linear-gradient(0deg, rgba(22, 3, 5, .94) 0%, rgba(22, 3, 5, .7) 55%, rgba(22, 3, 5, .15) 100%);
  }
  .lek-hero__pigułka { padding: 10px 14px; }
  .lek-hero__lead { font-size: 20px; }
  .lek-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lek-hero__scena { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 96px 16px 64px; }
  .lek-hero__okladka { position: relative; inset: auto; padding: 24px 0 32px; }
  .lek-hero__tresc { position: relative; padding: 32px 16px 24px; border-top: 1px solid rgba(184, 151, 99, .3); text-align: center; }
  .lek-hero__przyciski { justify-content: center; }
  .lek-hero__notka { margin-left: auto; margin-right: auto; }
  .lek-ruch .lek-hero { height: auto; }
  .lek-btn { transition: none; }
}

/* ---------- LICZNIK (DEMO – do usunięcia po wklejeniu licznika SKCh) ---------- */
.lek-licznik { color: var(--kosc, #F2E6CF); }
.lek-licznik__cel {
  margin: 0 0 10px; font: 600 13px/1.2 var(--lek-f-kapitaliki); letter-spacing: .22em; text-transform: uppercase;
  color: var(--zloto, #B89763);
}
.lek-licznik__kwota { margin: 0 0 18px; font: 500 clamp(40px, 5vw, 72px)/1 var(--lek-f-tekst); }
.lek-licznik__z { font-size: .42em; color: rgba(242, 230, 207, .7); }
.lek-licznik__pasek { height: 3px; background: rgba(184, 151, 99, .25); }
.lek-licznik__pasek span { display: block; height: 100%; background: var(--zloto, #B89763); }
.lek-licznik__dane {
  display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 16px 0 0; padding: 0; list-style: none;
  font: 400 17px/1.4 var(--lek-f-tekst); color: rgba(242, 230, 207, .82);
}
.lek-licznik__dane strong { color: var(--kosc, #F2E6CF); font-weight: 600; }

/* ---------- FORMULARZ (DEMO – podgląd karty; miejsce na [skch-form]) ---------- */
.lek-formularz {
  display: flex; flex-direction: column; gap: 14px; padding: 32px;
  background: rgba(255, 252, 245, .82); border: 1px solid rgba(24, 18, 16, .22);
  box-shadow: 0 20px 40px -24px rgba(22, 3, 5, .18); color: #181210;
}
.lek-formularz__tytul { margin: 0; font: 600 24px/1.25 var(--lek-f-tekst); }
.lek-formularz__opis { margin: 0; font: 400 17px/1.5 var(--lek-f-tekst); color: #4A3A33; }
.lek-formularz__kwoty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.lek-formularz__etykieta, .lek-formularz__pole::before {
  font: 600 11px/1.2 var(--lek-f-kapitaliki); letter-spacing: .16em; text-transform: uppercase; color: #7A5A2A;
}
.lek-formularz__etykieta { grid-column: 1 / -1; margin: 0 0 4px; padding: 0; }
.lek-formularz__kwota { position: relative; display: block; cursor: pointer; }
.lek-formularz__kwota input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lek-formularz__kwota span {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 4px; text-align: center;
  border: 1px solid rgba(24, 18, 16, .28); background: #fffdf8; font: 600 18px/1.15 var(--lek-f-tekst); color: #181210;
}
.lek-formularz__kwota input:checked + span { background: var(--burgund, #3D0518); border-color: var(--burgund, #3D0518); color: var(--kosc, #F2E6CF); }
.lek-formularz__kwota input:focus-visible + span { outline: 2px solid var(--burgund, #3D0518); outline-offset: 2px; }
.lek-formularz__pola { display: grid; gap: 8px; }
.lek-formularz__pole {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px; border: 1px solid rgba(24, 18, 16, .2); background: #fffdf8;
  font: 400 16px/1 var(--lek-f-tekst); color: rgba(24, 18, 16, .45);
}
.lek-formularz__wplac {
  min-height: 56px; margin-top: 4px; border: 0; border-radius: 0; cursor: not-allowed;
  background: var(--zloto, #B89763); color: var(--burgund-cien, #160305);
  font: 600 15px/1.2 var(--lek-f-kapitaliki); letter-spacing: .12em; text-transform: uppercase;
}
@media (max-width: 400px) { .lek-formularz { padding: 24px 18px; } .lek-formularz__kwoty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lek-demo { position: relative; }
.lek-demo__opis {
  margin: 6px 0 0; font: 500 11px/1.4 system-ui, sans-serif; letter-spacing: .04em;
  color: rgba(179, 58, 46, .85);
}

/* ---------- PĘTLE WIDEO (baner, końcowe wezwanie) ---------- */
.lek-petla { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lek-petla__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Jasne sekcje: jednolity papier z łagodnym światłem (bez tekstury, która dawała szwy na styku sekcji). */
.lngu-jasna {
  background-color: #E2D6C1;
  background-image: radial-gradient(120% 100% at 50% 0%, rgba(255, 250, 240, .4) 0%, rgba(196, 178, 148, .15) 100%);
}