/* Oxynite — wyprawy zimowe. Styl katalogu i stron wypraw.
   Paleta z oxynite.com (limonka #82bd00, czerń, biel) + biel jako kolor wiodący (zima).
   Kroje wczytuje <link rel="stylesheet" href="fonts/fonts.css"> w HTML — równolegle z tym plikiem. */

/* ---------- zmienne ---------- */
:root {
  --limonka: #82bd00;
  /* ciemniejszy wariant do TEKSTU: 5,2:1 na bieli i na tle śnieżnym — powyżej progu WCAG AA */
  --limonka-ciemna: #4f7300;
  --czern: #0b0d0c;
  --grafit: #16191a;
  --stal: #2c3134;
  --szary: #5d666b;
  --szary-jasny: #97a1a6;
  --biel: #ffffff;
  --snieg: #f4f7f8;
  --lod: #e4ebee;
  --fiord: #16405c;
  --zorza: #b8148c;

  --tekst: var(--czern);
  --tekst-cichy: #4a5359;
  --tlo: var(--biel);
  --tlo-2: var(--snieg);
  --kreska: var(--lod);
  --karta: var(--biel);
  --cien: 0 2px 4px rgba(11, 13, 12, .04), 0 12px 32px rgba(11, 13, 12, .07);
  --cien-mocny: 0 4px 10px rgba(11, 13, 12, .08), 0 20px 50px rgba(11, 13, 12, .12);

  --naglowek: "Barlow Condensed", "Barlow Condensed Fallback Arial Narrow", "Barlow Condensed Fallback Arial", "Barlow Condensed Fallback Roboto", "Arial Narrow", sans-serif;
  --tresc: "Barlow", "Barlow Fallback Arial", "Barlow Fallback Roboto", -apple-system, "Segoe UI", sans-serif;

  --szer: 1180px;
  --luz: clamp(22px, 5vw, 40px);
  --sekcja: clamp(64px, 9vw, 116px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--tresc);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
img, video { height: auto; }
/* reguła autora nadpisuje domyślne [hidden] przeglądarki — przywracamy je */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4, .nad {
  font-family: var(--naglowek);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(34px, 5vw, 58px); text-transform: uppercase; }
h3 { font-size: clamp(23px, 2.6vw, 30px); }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.szer { width: min(100% - var(--luz) * 2, var(--szer)); margin-inline: auto; }
.sekcja { padding: var(--sekcja) 0; }
.sekcja--snieg { background: var(--tlo-2); }
.sekcja--czern { background: var(--czern); color: var(--biel); }
.sekcja--czern .nad { color: var(--limonka); }
/* na czerni tekst pomocniczy musi być jasny, inaczej ginie */
.sekcja--czern .dzien p,
.sekcja--czern .powody span,
.sekcja--czern .opinia p { color: #c3ccd0; }
.sekcja--czern .dzien { border-color: rgba(255,255,255,.14); }
.sekcja--czern .dzien__nr,
.sekcja--czern .gwiazdka { color: #97a1a6; }
.sekcja--czern .dzien__nr b { color: var(--limonka); }

/* nadtytuł sekcji */
.nad {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--limonka-ciemna); font-weight: 600; margin-bottom: 14px;
}
.nad::before { content: ""; width: 34px; height: 3px; background: var(--limonka); flex: none; }
.wstep { font-size: clamp(18px, 2vw, 21px); color: var(--tekst-cichy); max-width: 62ch; margin-top: 18px; }
.sekcja--czern .wstep { color: #c3ccd0; }

/* ---------- przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--naglowek); font-weight: 700; font-size: 19px;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  padding: 15px 30px; border: 2px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--glowny { background: var(--limonka); color: var(--czern); border-color: var(--limonka); }
.btn--glowny:hover { background: var(--limonka-ciemna); border-color: var(--limonka-ciemna); color: var(--biel); }
.btn--jasny { background: transparent; color: var(--biel); border-color: rgba(255,255,255,.55); }
.btn--jasny:hover { background: var(--biel); color: var(--czern); border-color: var(--biel); }
.btn--ciemny { background: transparent; color: var(--czern); border-color: var(--czern); }
.btn--ciemny:hover { background: var(--czern); color: var(--biel); }
.btn--maly { font-size: 16px; padding: 11px 20px; }
/* przycisk rezerwacji czeka na otwarcie okna zapisów */
.btn.laduje { opacity: .7; cursor: progress; transform: none; }

/* ---------- górny pasek ---------- */
.pasek {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--luz);
  background: linear-gradient(to bottom, rgba(11,13,12,.68), rgba(11,13,12,0));
  transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
}
.pasek.przyklejony {
  background: rgba(11,13,12,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.09);
  padding-block: 10px;
}
.pasek__logo { flex: none; }
.pasek__logo img { width: 132px; }
.pasek__menu { display: flex; gap: 26px; margin-left: auto; }
.pasek__menu a {
  color: var(--biel); text-decoration: none; font-family: var(--naglowek);
  font-size: 18px; text-transform: uppercase; letter-spacing: .05em; padding: 4px 0;
  border-bottom: 2px solid transparent; transition: border-color .18s, color .18s;
}
.pasek__menu a:hover, .pasek__menu a.aktywny { border-color: var(--limonka); color: var(--limonka); }
.pasek__menu a { white-space: nowrap; }
@media (max-width: 1180px) { .pasek__menu { gap: 17px; } .pasek__menu a { font-size: 16.5px; } }
.pasek__cta { flex: none; }
.pasek__burger { display: none; background: none; border: 0; color: var(--biel); padding: 6px; cursor: pointer; }
/* przełącznik języka PL / EN */
.pasek__jezyk {
  flex: none; color: var(--biel); text-decoration: none; font-family: var(--naglowek); font-weight: 600;
  font-size: 15px; letter-spacing: .1em; border: 1px solid rgba(255,255,255,.45); border-radius: 100px; padding: 5px 12px;
  transition: border-color .18s, color .18s;
}
.pasek__jezyk:hover { border-color: var(--limonka); color: var(--limonka); }

@media (max-width: 960px) {
  .pasek__jezyk { order: 2; margin-left: auto; }
  .pasek__burger { margin-left: 8px !important; }
  .pasek__menu {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    flex-direction: column; gap: 4px; justify-content: center;
    background: var(--czern); padding: 80px 30px; transform: translateX(100%);
    transition: transform .3s ease; box-shadow: var(--cien-mocny);
  }
  .pasek__menu.otwarte { transform: none; }
  .pasek__menu a { font-size: 26px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .pasek__burger { display: block; order: 3; margin-left: auto; }
  .pasek__cta { display: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: var(--biel); }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }

/* film w tle: leży na zdjęciu (jego pierwszej klatce) i wchodzi płynnie, gdy ruszy odtwarzanie */
.hero__film {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  opacity: 0; transition: opacity .8s ease; pointer-events: none;
}
.hero__film.gra { opacity: 1; }
/* Przy ograniczonym ruchu film nie startuje sam (decyduje o tym skrypt), ale musi
   dać się włączyć przyciskiem — dlatego nie ukrywamy go tu na stałe. */
@media (prefers-reduced-motion: reduce) { .hero__film { transition: none; } }

/* Przycisk zatrzymania — wymóg dostępności dla ruchu trwającego dłużej niż 5 s.
   Zakotwiczony do GÓRY sekcji hero: na dole zasłaniałby go przyklejony pasek „Rezerwuj”
   na telefonie, a na niskim laptopie wypadałby poniżej pierwszego ekranu. */
.hero__film-przycisk {
  position: absolute; right: var(--luz); top: calc(var(--luz) + 46px); z-index: 46;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(11,13,12,.72); color: var(--biel);
  border: 1px solid rgba(255,255,255,.4); border-radius: 100px;
  padding: 8px 15px; font-size: 13.5px; letter-spacing: .02em; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .18s, border-color .18s;
}
.hero__film-przycisk:hover { background: rgba(11,13,12,.9); border-color: var(--limonka); }
.hero__film-przycisk svg { flex: none; }
@media (max-width: 960px) { .hero__film-przycisk { top: calc(var(--luz) + 34px); padding: 7px 12px; font-size: 12.5px; } }
/* Przyciemnienie kadru. Wartości w środku gradientu są celowo wysokie: to tam siedzi nagłówek,
   a pod nim przesuwa się jasny śnieg i słońce — pomiar kontrastu na klatkach filmu pokazał,
   że przy słabszym przyciemnieniu biały napis schodzi poniżej progu czytelności. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(11,13,12,.93) 0%, rgba(11,13,12,.78) 34%, rgba(11,13,12,.62) 62%, rgba(11,13,12,.66) 100%);
}
.hero__tresc { width: min(100% - var(--luz) * 2, var(--szer)); margin-inline: auto; padding: 130px 0 40px; }
.hero__znacznik {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  background: var(--limonka); color: var(--czern); padding: 7px 16px;
  font-family: var(--naglowek); font-weight: 700; font-size: 17px;
  text-transform: uppercase; letter-spacing: .09em;
}
.hero h1 {
  font-size: clamp(46px, 9.2vw, 122px); text-transform: uppercase; line-height: .92;
  letter-spacing: -.02em; text-shadow: 0 4px 30px rgba(0,0,0,.45);
}
.hero h1 em { font-style: normal; color: var(--limonka); }
.hero__lid { font-size: clamp(18px, 2.2vw, 23px); max-width: 44ch; margin: 22px 0 30px; color: #eef2f3; }
.hero__akcje { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__cena { font-family: var(--naglowek); font-size: 19px; text-transform: uppercase; letter-spacing: .05em; color: #d7dee1; }
.hero__cena b { color: var(--biel); font-size: 26px; }

/* pasek faktów pod hero */
.fakty {
  position: relative; z-index: 2; background: var(--biel);
  border-bottom: 1px solid var(--kreska); box-shadow: var(--cien);
}
.fakty__lista {
  width: min(100% - var(--luz) * 2, var(--szer)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
}
.fakt { padding: 26px 18px; border-left: 1px solid var(--kreska); text-align: center; }
.fakt:first-child { border-left: 0; }
.fakt svg { margin: 0 auto 10px; color: var(--limonka-ciemna); }
.fakt b { display: block; font-family: var(--naglowek); font-size: 26px; line-height: 1.1; }
.fakt span { font-size: 14px; color: var(--szary); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 900px) {
  .fakty__lista { grid-template-columns: repeat(3, 1fr); }
  .fakt { border-top: 1px solid var(--kreska); padding: 20px 10px; }
  .fakt:nth-child(3n+1) { border-left: 0; }
  .fakt b { font-size: 21px; }
  .fakt span { font-size: 12px; }
}
@media (max-width: 480px) { .fakty__lista { grid-template-columns: repeat(2, 1fr); } .fakt:nth-child(3n+1) { border-left: 1px solid var(--kreska); } .fakt:nth-child(2n+1) { border-left: 0; } }

/* ---------- dwie kolumny ---------- */
.duet { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.duet--odwrotnie > :first-child { order: 2; }
@media (max-width: 860px) { .duet { grid-template-columns: 1fr; } .duet--odwrotnie > :first-child { order: 0; } }
.duet__foto { position: relative; }
.duet__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.duet__foto--szer img { aspect-ratio: 3 / 2; }
.duet__podpis {
  position: absolute; left: 0; bottom: 0; background: var(--limonka); color: var(--czern);
  font-family: var(--naglowek); font-size: 17px; text-transform: uppercase; letter-spacing: .06em;
  padding: 9px 16px;
}

/* powody */
.powody { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }
.powody li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.powody svg { color: var(--limonka-ciemna); margin-top: 4px; }
.powody b { display: block; font-family: var(--naglowek); font-size: 21px; }
.powody span { color: var(--tekst-cichy); }

/* ---------- program dnia ---------- */
.dni { margin-top: 44px; display: grid; gap: 0; }
.dzien {
  display: grid; grid-template-columns: 116px 1fr; gap: clamp(18px, 3vw, 40px);
  padding: 28px 0; border-top: 1px solid var(--kreska); position: relative;
}
.dzien:last-child { border-bottom: 1px solid var(--kreska); }
.dzien__nr { font-family: var(--naglowek); font-size: 17px; text-transform: uppercase; letter-spacing: .1em; color: var(--szary); }
.dzien__nr b { display: block; font-size: 46px; color: var(--limonka-ciemna); letter-spacing: -.02em; line-height: 1; }
.dzien h3 { margin-bottom: 8px; }
.dzien p { color: var(--tekst-cichy); max-width: 70ch; }
.dzien__dane { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.plakietka {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--snieg); border: 1px solid var(--kreska); color: var(--stal);
  font-size: 14px; font-weight: 500; padding: 5px 12px; border-radius: 100px;
}
.sekcja--czern .plakietka { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #dbe2e5; }
.plakietka--limonka { background: rgba(130,189,0,.13); border-color: rgba(130,189,0,.4); color: var(--limonka-ciemna); }
@media (max-width: 640px) {
  .dzien { grid-template-columns: 1fr; gap: 6px; }
  .dzien__nr { display: flex; align-items: baseline; gap: 10px; }
  .dzien__nr b { font-size: 30px; }
}
.gwiazdka { font-size: 15px; color: var(--szary); margin-top: 22px; }

/* ---------- galeria ---------- */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 44px; }
.galeria img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .4s ease; }
.galeria figure { margin: 0; overflow: hidden; background: var(--stal); }
.galeria figure:hover img { transform: scale(1.05); }
.galeria .duza { grid-column: span 2; grid-row: span 2; }
.galeria .duza img { aspect-ratio: 1; }
@media (max-width: 720px) { .galeria { grid-template-columns: repeat(2, 1fr); } }

/* ---------- poziom trudności ---------- */
.skala { display: flex; gap: 6px; margin: 6px 0 16px; }
.skala i { width: 44px; height: 8px; background: var(--lod); border-radius: 2px; }
.skala i.on { background: var(--limonka); }
.sekcja--czern .skala i { background: rgba(255,255,255,.16); }
.sekcja--czern .skala i.on { background: var(--limonka); }

.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 42px; }
.karta {
  background: var(--karta); border: 1px solid var(--kreska); padding: 30px 26px;
  box-shadow: var(--cien); border-top: 4px solid var(--limonka);
}
.sekcja--czern .karta { background: var(--grafit); border-color: rgba(255,255,255,.1); box-shadow: none; }
.karta h3 { margin-bottom: 12px; }
.karta ul { margin: 0; padding-left: 20px; color: var(--tekst-cichy); }
.sekcja--czern .karta ul, .sekcja--czern .karta p { color: #c3ccd0; }
.karta li { margin-bottom: 7px; }

/* ---------- cena ---------- */
.cennik { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(26px, 4vw, 54px); align-items: start; }
@media (max-width: 860px) { .cennik { grid-template-columns: 1fr; } }
.cena-box {
  background: var(--czern); color: var(--biel); padding: 34px 30px; position: sticky; top: 92px;
  border-top: 5px solid var(--limonka);
}
@media (max-width: 860px) { .cena-box { position: static; } }
.cena-box__kwota { font-family: var(--naglowek); font-size: 62px; line-height: 1; letter-spacing: -.02em; }
.cena-box__kwota span { font-size: 24px; color: var(--szary-jasny); }
.cena-box__rata { border-top: 1px solid rgba(255,255,255,.14); margin-top: 22px; padding-top: 18px; display: grid; gap: 12px; }
.rata { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: baseline; font-size: 15.5px; color: #cdd5d8; }
.rata b { color: var(--biel); font-family: var(--naglowek); font-size: 20px; }
.rata i { font-style: normal; color: var(--limonka); font-family: var(--naglowek); font-size: 19px; }
.cena-box .btn { width: 100%; margin-top: 24px; }
.cena-box small { display: block; margin-top: 14px; color: var(--szary-jasny); font-size: 13.5px; line-height: 1.5; }

.zawiera { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
@media (max-width: 560px) { .zawiera { grid-template-columns: 1fr; } }
.zawiera h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 22px; }
.zawiera ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zawiera li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 16px; color: var(--tekst-cichy); }
.zawiera svg { margin-top: 5px; }
.tak svg { color: var(--limonka-ciemna); }
.nie svg { color: var(--szary-jasny); }

/* ---------- terminy ---------- */
.terminy { display: grid; gap: 14px; margin-top: 40px; }
.termin {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 24px; align-items: center;
  background: var(--biel); border: 1px solid var(--kreska); border-left: 5px solid var(--limonka);
  padding: 22px 26px; box-shadow: var(--cien);
}
.termin__data { font-family: var(--naglowek); font-size: 27px; line-height: 1.1; }
.termin__data span { display: block; font-family: var(--tresc); font-size: 14px; color: var(--szary); text-transform: uppercase; letter-spacing: .06em; }
.termin__stan { font-size: 15px; color: var(--tekst-cichy); }
.termin__stan b { color: var(--czern); }
.termin__cena { font-family: var(--naglowek); font-size: 28px; }
@media (max-width: 760px) {
  .termin { grid-template-columns: 1fr 1fr; gap: 14px; }
  .termin .btn { grid-column: 1 / -1; }
}
.kropka { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--limonka); margin-right: 7px; }
.kropka--malo { background: #e8a33d; }
.kropka--brak { background: var(--szary-jasny); }

/* ---------- opinie ---------- */
.opinie { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 42px; }
.opinia { background: var(--biel); border: 1px solid var(--kreska); padding: 28px 26px; box-shadow: var(--cien); display: flex; flex-direction: column; }
.opinia__gwiazdki { color: #f2b01e; letter-spacing: 2px; margin-bottom: 12px; font-size: 17px; }
.opinia p { font-size: 16.5px; color: var(--tekst-cichy); }
.opinia footer { margin-top: auto; padding-top: 16px; font-family: var(--naglowek); font-size: 19px; text-transform: uppercase; letter-spacing: .04em; }
.opinia footer span { display: block; font-family: var(--tresc); font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--szary); }
.ocena-pas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 34px;
  padding: 20px 24px; background: var(--snieg); border: 1px solid var(--kreska);
}
.ocena-pas b { font-family: var(--naglowek); font-size: 32px; }
.ocena-pas span { color: var(--tekst-cichy); font-size: 15.5px; }

/* ---------- kapitan ---------- */
.kapitan { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(26px, 5vw, 60px); align-items: center; }
@media (max-width: 860px) { .kapitan { grid-template-columns: 1fr; } }
.kapitan__foto img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.cytat {
  border-left: 4px solid var(--limonka); padding-left: 22px; margin: 24px 0;
  font-size: clamp(19px, 2.3vw, 25px); font-family: var(--naglowek); font-weight: 600; line-height: 1.3;
}
.uprawnienia { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; border-top: 1px solid var(--kreska); }
.faq details { border-bottom: 1px solid var(--kreska); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 46px 22px 0; position: relative;
  font-family: var(--naglowek); font-size: clamp(19px, 2.1vw, 24px); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px;
  border-right: 3px solid var(--limonka); border-bottom: 3px solid var(--limonka);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--limonka-ciemna); }
.faq__odp { padding: 0 40px 24px 0; color: var(--tekst-cichy); max-width: 78ch; }

/* ---------- formularz „Masz pytanie?” ----------
   Wersja podstawowa na jasnym tle; w sekcji czarnej (strona główna) nadpisania niżej. */
.zapis { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .zapis { grid-template-columns: 1fr; } }
.pytanie { display: block; }
.pytanie__pola { display: grid; gap: 16px; }
.pole { display: grid; gap: 6px; }
.pole label { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stal); }
.pole__opcja { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--szary); }
.pole input, .pole select, .pole textarea {
  font: inherit; font-size: 17px; padding: 14px 15px; background: var(--biel); width: 100%;
  /* ramka 3,6:1 na bieli — próg WCAG 1.4.11 dla elementów formularza to 3:1 */
  border: 1.5px solid #78838a; color: var(--tekst); border-radius: 3px;
}
.pole textarea { resize: vertical; min-height: 110px; }
.pole input:hover, .pole textarea:hover { border-color: var(--stal); }
.pole input:focus-visible, .pole select:focus-visible, .pole textarea:focus-visible {
  outline: 3px solid var(--limonka-ciemna); outline-offset: 0; border-color: var(--limonka-ciemna);
}
.pole select option { color: var(--czern); }
/* pułapka na boty: poza ekranem, nie display:none, bo część botów to sprawdza */
.pole--pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.para { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .para { grid-template-columns: 1fr; } }
.zgoda { display: grid; grid-template-columns: 22px 1fr; gap: 11px; font-size: 15px; color: var(--tekst-cichy); line-height: 1.5; cursor: pointer; }
.zgoda input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--limonka); }
.zgoda a { color: var(--limonka-ciemna); }
.form__info { font-size: 13.5px; color: var(--szary); }
.form__info a { color: inherit; }
.pytanie__blad { margin: 0; font-size: 15px; font-weight: 500; color: #b3261e; }
/* pusty komunikat ma zostać w drzewie dostępności (aria-live), więc nie display:none — tylko zerowa wysokość */
.pytanie__blad:empty { height: 0; overflow: hidden; margin-top: -16px; }
.pytanie .hero__akcje { gap: 10px 18px; }
.komunikat { padding: 16px 18px; border-left: 4px solid var(--limonka); background: rgba(130,189,0,.12); font-size: 16px; }
.komunikat:focus { outline: none; }

/* ta sama forma na czarnym tle */
.sekcja--czern .pole label { color: #cdd5d8; }
.sekcja--czern .pole__opcja { color: var(--szary-jasny); }
.sekcja--czern .pole input, .sekcja--czern .pole select, .sekcja--czern .pole textarea {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: var(--biel);
}
.sekcja--czern .pole input:hover, .sekcja--czern .pole textarea:hover { border-color: rgba(255,255,255,.45); }
.sekcja--czern .pole input:focus-visible, .sekcja--czern .pole textarea:focus-visible { background: rgba(255,255,255,.1); outline-color: var(--limonka); border-color: var(--limonka); }
.sekcja--czern .zgoda { color: #b9c2c6; }
.sekcja--czern .zgoda a, .sekcja--czern .form__info a { color: var(--limonka); }
.sekcja--czern .form__info { color: var(--szary-jasny); }
.sekcja--czern .pytanie__blad { color: #ff9b8f; }
.sekcja--czern .komunikat { color: var(--biel); }

/* ---------- strony dokumentów (formularz informacyjny, polityka prywatności) ---------- */
.dokument { max-width: 78ch; padding-top: 70px; }
.dokument h1 { font-size: clamp(30px, 4.6vw, 48px); text-transform: uppercase; margin-bottom: 10px; }
.dokument h2 { font-size: clamp(22px, 2.6vw, 30px); text-transform: none; margin: 38px 0 12px; }
.dokument h3 { font-size: 20px; margin: 26px 0 8px; }
.dokument p, .dokument li { color: var(--tekst-cichy); }
.dokument ul, .dokument ol { padding-left: 22px; }
.dokument li { margin-bottom: 8px; }
.dokument .male { font-size: 14.5px; color: var(--szary); }
.dokument a { color: var(--limonka-ciemna); }
/* dane, które ma uzupełnić Oxynite, są widocznie zaznaczone — nie wolno ich przeoczyć przed publikacją */
.dokument mark { background: #fff2a8; color: var(--czern); padding: 0 4px; }
.dokument .ramka { border: 1px solid var(--kreska); border-left: 4px solid var(--limonka); background: var(--snieg); padding: 16px 20px; margin: 22px 0; }

/* ---------- cena w euro, w nawiasie złotówki po kursie NBP ---------- */
[data-eur] .zl { font-size: .56em; font-weight: 400; letter-spacing: 0; opacity: .8; white-space: nowrap; }
.cena-box__kwota [data-eur] .zl { font-size: 22px; color: var(--szary-jasny); opacity: 1; }
.cena-box__kwota { text-wrap: balance; }

/* ---------- powiększanie zdjęć z galerii ---------- */
.galeria__przycisk { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.galeria__przycisk:focus-visible { outline-offset: -4px; }
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 60px 72px 52px; background: rgba(11,13,12,.95); color: var(--biel);
}
.lightbox__kadr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; }
.lightbox__obraz { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; box-shadow: 0 24px 70px rgba(0,0,0,.6); background: var(--stal); transition: opacity .2s ease; }
.lightbox__obraz.laduje { opacity: .35; }
.lightbox__podpis { color: #c3ccd0; font-size: 14.5px; text-align: center; max-width: 70ch; }
.lightbox__podpis:empty { display: none; }
.lightbox__zamknij, .lightbox__strzalka {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: var(--biel); cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
.lightbox__zamknij:hover, .lightbox__strzalka:hover { background: rgba(255,255,255,.2); border-color: var(--limonka); }
.lightbox__zamknij { top: 14px; right: 14px; }
.lightbox__strzalka { top: 50%; transform: translateY(-50%); }
.lightbox__strzalka--lewo { left: 12px; }
.lightbox__strzalka--prawo { right: 12px; }
.lightbox__licznik { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0; font-family: var(--naglowek); font-size: 15px; letter-spacing: .1em; color: var(--szary-jasny); }
body.lightbox-otwarty { overflow: hidden; }
@media (max-width: 720px) {
  .lightbox { padding: 60px 10px 70px; }
  .lightbox__obraz { max-height: calc(100vh - 170px); }
  .lightbox__strzalka { top: auto; bottom: 12px; transform: none; width: 46px; height: 46px; }
  .lightbox__strzalka--lewo { left: 12px; }
  .lightbox__strzalka--prawo { right: 12px; }
  .lightbox__licznik { bottom: 24px; }
}

/* ---------- stopka ---------- */
.stopka { background: var(--czern); color: #b9c2c6; padding: 60px 0 28px; font-size: 15.5px; }
.stopka__siatka { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .stopka__siatka { grid-template-columns: 1fr; gap: 28px; } }
.stopka h3, .stopka .stopka__tytul { color: var(--biel); font-size: 20px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.stopka a { color: #b9c2c6; text-decoration: none; }
.stopka a:hover { color: var(--limonka); }
/* podpis autora: link w zdaniu, więc podkreślony — nie może różnić się od tekstu samym kolorem (WCAG 1.4.1) */
.stopka__autor a { text-decoration: underline; text-underline-offset: 2px; }
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.stopka__logo { width: 150px; margin-bottom: 18px; }
.stopka__socjale { display: flex; gap: 12px; margin-top: 16px; }
.stopka__socjale a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); transition: background-color .18s, border-color .18s, color .18s;
}
.stopka__socjale a:hover { background: var(--limonka); border-color: var(--limonka); color: var(--czern); }
.stopka__dol {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13.5px; color: #7d878c;
}

/* ---------- pasek mobilny (sticky CTA) ---------- */
.pasek-dolny {
  position: fixed; inset: auto 0 0; z-index: 45; display: none;
  align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(11,13,12,.96); color: var(--biel); padding: 11px 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pasek-dolny b { font-family: var(--naglowek); font-size: 22px; }
.pasek-dolny span { display: block; font-size: 12.5px; color: var(--szary-jasny); }
@media (max-width: 700px) { .pasek-dolny { display: flex; } body { padding-bottom: 72px; } }

/* ---------- okruszki nad nagłówkiem hero ---------- */
.okruszki { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; font-size: 14.5px; letter-spacing: .04em; color: #d7dee1; }
.okruszki a { color: var(--biel); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); }
.okruszki a:hover { color: var(--limonka); border-color: var(--limonka); }
.okruszki span[aria-hidden] { color: var(--szary-jasny); }

/* ---------- katalog wypraw ---------- */
.hero--katalog { min-height: 82vh; min-height: 82svh; }
.wyprawy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 26px; margin-top: 44px; }
.wyprawa-karta {
  position: relative; display: flex; flex-direction: column; background: var(--biel);
  border: 1px solid var(--kreska); box-shadow: var(--cien); text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wyprawa-karta:hover { transform: translateY(-4px); box-shadow: var(--cien-mocny); }
.wyprawa-karta__foto { position: relative; overflow: hidden; background: var(--stal); margin: 0; }
.wyprawa-karta__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s ease; }
.wyprawa-karta:hover .wyprawa-karta__foto img { transform: scale(1.04); }
.wyprawa-karta__data {
  position: absolute; left: 0; top: 0; background: var(--limonka); color: var(--czern);
  font-family: var(--naglowek); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .07em; padding: 8px 15px;
}
.wyprawa-karta__tresc { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; border-top: 4px solid var(--limonka); }
.wyprawa-karta__kraj { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--limonka-ciemna); font-weight: 600; margin-bottom: 8px; }
.wyprawa-karta h3 { font-size: clamp(28px, 3.2vw, 38px); text-transform: uppercase; margin-bottom: 12px; }
.wyprawa-karta p { color: var(--tekst-cichy); }
.wyprawa-karta .dzien__dane { margin: 4px 0 22px; }
.wyprawa-karta__dol { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid var(--kreska); }
.wyprawa-karta__cena { font-family: var(--naglowek); font-size: 17px; text-transform: uppercase; letter-spacing: .05em; color: var(--szary); }
.wyprawa-karta__cena b { font-size: 32px; color: var(--czern); letter-spacing: -.01em; }
.wyprawa-karta__wiecej { font-family: var(--naglowek); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .06em; color: var(--limonka-ciemna); display: inline-flex; gap: 8px; align-items: center; }
.wyprawa-karta:focus-visible { outline-offset: 4px; }

/* ---------- pojawianie ---------- */
.wjazd { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.wjazd.widoczny { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .wjazd { opacity: 1; transform: none; } }

/* ---------- dostępność ---------- */
:focus-visible { outline: 3px solid var(--limonka); outline-offset: 2px; }
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--limonka); color: var(--czern); padding: 10px 18px; font-weight: 600;
}
.skip:focus { left: 8px; }
.tylko-czytnik {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- druk ---------- */
@media print {
  .pasek, .pasek-dolny, .hero__akcje, .pytanie, .galeria, .lightbox, .hero__film-przycisk { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero { min-height: auto; color: #000; }
  .hero::after, .hero__foto, .hero__film { display: none; }
  .sekcja--czern, .cena-box { background: #fff !important; color: #000 !important; }
  .sekcja { padding: 14pt 0; }
  @page { size: A4; margin: 14mm 12mm; }
}