/* ═══════════════════════════════════════════════════════════════════════════
   KLONOWA PARK — arkusz stylu
   Autor: Claude Opus 5, 29.08.2026. Wersja druga, po werdykcie wlasciciela:
   pierwsza byla broszura, a nie narzedziem do rezerwacji ("wyglada jak praca
   amatora, cos takiego na wix robisz w 15 minut" — i to byla trafna diagnoza).

   CO SIE ZMIENILO I DLACZEGO. Przejrzalem w Mobbinie strony obiektow Airbnb,
   Expedii, Zillow, Klooka, TravelPerka i Turo. Rozniiy sie od mojej nie
   estetyka, tylko GATUNKIEM: kazda ma galerie 1+4 u gory, spec-line z liczbami,
   przyklejony panel rezerwacji z datami, wyposazenie w dwoch kolumnach z ikonami
   i kalendarz dwumiesieczny. To sa narzedzia. Ja zrobilem zdjecie na caly ekran,
   naglowek i dwa przyciski — czyli ulotke.

   CO ZOSTAJE z pierwszej wersji, bo bylo dobre: paleta wyprowadzona ze zdjec
   obiektu, self-hostowane kroje, linia horyzontu jako sygnatura, jeden autorski
   moment ruchu, ostylowane powierzchnie przegladarki.

   IKONY: rysowane recznie jako SVG w jednej grubosci kreski. craft-floor
   zabrania emoji w roli ikon, a biblioteka lucide jest wymieniona w MANIFEST
   par. 1 jako anty-sygnal ("ikony lucide/heroicons na wszystko").
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Bricolage;src:url(fonts/bricolage-latin.woff2) format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}
@font-face{font-family:Bricolage;src:url(fonts/bricolage-ext.woff2) format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF}
@font-face{font-family:Schibsted;src:url(fonts/schibsted-latin.woff2) format('woff2');
  font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Schibsted;src:url(fonts/schibsted-ext.woff2) format('woff2');
  font-weight:400 700;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20AB}
@font-face{font-family:Martian;src:url(fonts/martian-latin.woff2) format('woff2');
  font-weight:300 600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:Martian;src:url(fonts/martian-ext.woff2) format('woff2');
  font-weight:300 600;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF}

:root{
  --papier:#FDFCFA;
  --papier-cien:#F4F1EB;
  --atrament:#14181C;
  --atrament-2:#565C64;
  /* Przyciemnione 31.08.2026 z #767D85. Zmierzone WCAG na dwoch tlach:
     na --papier bylo 4,06:1, na --morze-tlo (stan hover pola daty) 3,69:1 —
     przy progu 4,5 dla tekstu normalnego. Ten kolor niesie CALA tresc pustego
     pola daty, lacznie z jedyna instrukcja „Wybierz", i dziesiec innych miejsc
     o rozmiarach 9,28-15,5 px, wiec zaden nie kwalifikuje sie jako tekst duzy.
     Po zmianie: 5,18:1 i 4,70:1. --atrament-2 zostaje wyraznie mocniejszy (6,58:1),
     wiec trzystopniowa hierarchia szarosci nie splaszcza sie.                  */
  --atrament-3:#666C73;
  --morze:#17455A;
  --morze-jasne:#256780;
  --morze-tlo:#EDF2F4;
  --drewno:#8A6238;
  --linia:#E2DCD2;
  --linia-mocna:#CFC7BA;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:5.5rem;
  --r:10px;
  --r-mala:6px;
  --dotyk:120ms; --wejscie:240ms; --scena:900ms;
  --krzywa:cubic-bezier(.22,1,.36,1);
  --sluchawka:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --ptaszek:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
  --ikona-kal:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;background:var(--papier);color:var(--atrament);
  font:400 clamp(15.5px,1vw,17px)/1.6 Schibsted,system-ui,sans-serif;
  font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E")}

/* Powierzchnie przegladarki — craft-floor: najtanszy sygnal, ze strona byla
   zbudowana, a nie zlozona, i ten, ktory modele pomijaja najczesciej.        */
::selection{background:var(--morze);color:#fff}
html{scrollbar-color:var(--linia-mocna) var(--papier-cien);scrollbar-width:thin}
:focus-visible{outline:2px solid var(--morze);outline-offset:2px;border-radius:3px}
a{color:var(--morze);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--morze-jasne)}
img{max-width:100%;display:block}
h1,h2,h3{margin:0}

.pas{width:min(100% - 2.5rem,80rem);margin-inline:auto}
.mono{font:500 clamp(10.5px,.72vw,12px)/1.5 Martian,ui-monospace,monospace;
  letter-spacing:.055em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.pomin{position:absolute;left:-9999px}
.pomin:focus{left:1rem;top:1rem;z-index:99;background:var(--morze);color:#fff;padding:.7rem 1.1rem}
.tylko-czytnik{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Ikony rysowane recznie, jedna grubosc kreski, jeden rozmiar. */
.ikona{width:18px;height:18px;flex:0 0 18px;stroke:var(--morze);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ═══ PASEK GORNY — przyklejony, z kotwicami i akcja ═════════════════════ */
.pasek{position:sticky;top:0;z-index:20;background:rgba(253,252,250,.94);
  border-bottom:1px solid var(--linia)}
@supports (backdrop-filter:blur(8px)){
  /* Rozmycie TYLKO tutaj i tylko po to, zeby tekst pozostal czytelny nad
     przewijana trescia. MANIFEST zabrania glassmorphismu jako dekoracji;
     to jest efekt funkcjonalny, nie ozdoba.                                 */
  .pasek{background:rgba(253,252,250,.82);backdrop-filter:saturate(1.4) blur(10px)}
}
.pasek-rzad{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);min-height:4.4rem}
.znak{position:relative;display:inline-block;padding-bottom:.3rem;flex:0 0 auto;
  font:600 1.06rem/1 Bricolage,system-ui,sans-serif;letter-spacing:-.014em;
  color:var(--atrament);text-decoration:none}
/* Nazwa pisana lacznie, pierwszy czlon w kolorze morza; przy najechaniu
   caly znak przechodzi w atrament. Odwrotnie niz w pierwszej wersji.       */
.znak em{font-style:normal;font-weight:600;color:var(--morze);
  transition:color var(--dotyk) ease-out}
.znak:hover em{color:var(--atrament)}
.znak::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--morze);transform:scaleX(0);transform-origin:left;
  animation:rysuj 700ms var(--krzywa) .35s forwards}
@keyframes rysuj{to{transform:scaleX(1)}}
/* NAWIGACJA JAKO SPIS TRESCI. Wlasciciel 29.08: napisy w pasku sa
   "ekstremalnie bezduszne". Rzad linkow z podkresleniem przy najechaniu
   to domyslka kazdego szablonu, wiec pozycja zmienia role: numer porzadkowy
   w Martian Mono - pismie, ktore na tej stronie niesie DANE (spec, rejestr,
   rozklad ocen) - stawia nawigacje w tym samym jezyku co reszta strony.
   Numer nie jest ozdoba: rosnie razem z pozycja i pozwala policzyc sekcje.  */
.pasek nav ul{display:flex;gap:1.7rem;margin:0;padding:0;list-style:none}
.pasek nav a{position:relative;display:inline-flex;align-items:baseline;gap:.42rem;
  color:var(--atrament-2);text-decoration:none;padding:.2rem 0;font-size:.95em;
  transition:color var(--dotyk) ease-out}
/* Numer byl w --linia-mocna: 1,63:1 przy 9,6 px. Komentarz wyzej mowi wprost
   „numer nie jest ozdoba (...) pozwala policzyc sekcje", wiec wyjatek dla
   dekoracji NIE przysluguje — element niosacy tresc musi byc czytelny.
   Audyt proponowal --morze (10,06:1), ale --morze jest kolorem stanu HOVER:
   uzycie go w spoczynku zabija rozroznienie i numer przestaje na cokolwiek
   reagowac. --atrament-3 daje 5,18:1 i zostawia --morze jako podkreslenie. */
.pasek nav a::before{content:attr(data-nr);color:var(--atrament-3);
  font:500 .6rem/1 Martian,ui-monospace,monospace;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  transition:color 260ms var(--krzywa),transform 260ms var(--krzywa)}
.pasek nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;
  background:var(--morze);transform:scaleX(0);transform-origin:left;
  transition:transform 260ms var(--krzywa)}
.pasek nav a:hover{color:var(--atrament)}
.pasek nav a:hover::before{color:var(--morze);transform:translateY(-1px)}
.pasek nav a:hover::after{transform:scaleX(1)}

/* Pozycja odpowiadajaca sekcji AKTUALNIE CZYTANEJ zostaje zaznaczona na
   stale, nie tylko pod kursorem. Gosc widzi, gdzie jest, bez klikania.    */
.pasek nav a[aria-current="true"]{color:var(--atrament)}
.pasek nav a[aria-current="true"]::before{color:var(--morze)}
.pasek nav a[aria-current="true"]::after{transform:scaleX(1);background:var(--linia-mocna)}
.pasek-akcje{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
/* Przelacznik jezyka: trzy skroty, nie flagi. Flaga oznacza kraj, nie jezyk —
   niemiecki to takze Austria i Szwajcaria, a angielski nie ma jednej flagi.  */
.jezyk{display:flex;gap:1px;background:var(--linia);border:1px solid var(--linia);
  border-radius:var(--r-mala);overflow:clip}
.jezyk-opcja{border:0;background:var(--papier);color:var(--atrament-2);cursor:pointer;
  padding:.42rem .6rem;font:500 .74rem/1 Martian,ui-monospace,monospace;
  letter-spacing:.05em;transition:background var(--dotyk) ease-out,color var(--dotyk) ease-out}
.jezyk-opcja:hover{background:var(--papier-cien);color:var(--atrament)}
.jezyk-opcja[aria-current="true"]{background:var(--morze);color:#fff}
@media (max-width:40rem){ .jezyk-opcja{padding:.4rem .48rem;font-size:.7rem} }
/* Numer to DANA, wiec dostaje pismo danych i cyfry o rownej szerokosci.
   Wczesniej byl zwyklym tekstem akapitowym i czytal sie jak zdanie.        */
.pasek-tel b{font:500 .92rem/1 Martian,ui-monospace,monospace;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--atrament)}
.pasek-tel:hover b{color:var(--morze)}
.pasek-tel > span[data-i18n]{color:var(--atrament-3);font-size:.9em}
.pasek-tel{display:inline-flex;align-items:baseline;gap:.45rem;color:var(--atrament);
  text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums}
.pasek-tel:hover{color:var(--morze)}
@media (max-width:64rem){ .pasek nav{display:none} }
/* Sluchawka rysowana, nie emoji - ta sama zasada co przy ptaszku. */
.pasek-tel-znak{display:none;flex:0 0 auto;width:1.05rem;height:1.05rem;
  background:currentColor;
  -webkit-mask:var(--sluchawka) center/1.05rem no-repeat;
  mask:var(--sluchawka) center/1.05rem no-repeat}


/* Ponizej 34rem naglowek musi zmiescic sie w oknie razem ze znakiem
   i przyciskiem. Zmierzone przed poprawka: 491 px w oknie 375 px.       */


/* ═══ GALERIA 1+4 — wzorzec zmierzony na Airbnb, Expedii, Zillow, Klooku ══ */
.galeria{margin-top:var(--s3)}
.galeria-siatka{display:grid;grid-template-columns:1.02fr 1fr;gap:8px;
  border-radius:var(--r);overflow:clip}
.galeria-male{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.galeria figure{margin:0;overflow:clip;background:var(--papier-cien);position:relative}
.galeria img{width:100%;height:100%;object-fit:cover;
  transition:transform 520ms var(--krzywa);
  /* Wlasna warstwa kompozycji: bez tego krawedz zdjecia drga przy powiekszeniu
     wewnatrz kontenera z zaokragleniem (widoczne jako miganie co kilka kafli). */
  will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.galeria figure:hover img{transform:scale(1.02) translateZ(0)}
.galeria .duze img{aspect-ratio:4/3.32;
  /* Jedyna animacja wejscia: kadr otwiera sie od linii horyzontu. */
  clip-path:inset(50% 0 50% 0);animation:otwarcie var(--scena) var(--krzywa) .1s forwards}
@keyframes otwarcie{to{clip-path:inset(0 0 0 0)}}
.galeria-male img{aspect-ratio:4/3}
.galeria-licznik{position:absolute;right:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .85rem;background:rgba(253,252,250,.94);border:1px solid var(--linia-mocna);
  border-radius:var(--r-mala);color:var(--atrament);text-decoration:none;
  font:500 .8rem/1 Martian,ui-monospace,monospace;letter-spacing:.03em;
  transition:background var(--dotyk) ease-out}
.galeria-licznik:hover{background:#fff;color:var(--morze)}

/* ═══ UKLAD GLOWNY — tresc plus przyklejony panel rezerwacji ═════════════ */
.uklad{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(340px,1fr);
  gap:var(--s5);align-items:start;margin-top:var(--s4);padding-bottom:var(--s6)}

.tytul{padding-bottom:var(--s3);border-bottom:1px solid var(--linia)}
.tytul h1{font:520 clamp(1.9rem,3.3vw,2.75rem)/1.14 Bricolage,system-ui,sans-serif;
  letter-spacing:-.024em;max-width:20ch;text-wrap:balance;margin-bottom:.5rem}
.tytul-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;
  color:var(--atrament-2)}
.odznaka{display:inline-flex;align-items:center;gap:.5rem;
  padding:.32rem .62rem;background:var(--morze);color:#fff;
  border-radius:var(--r-mala);font:600 .82rem/1 Martian,ui-monospace,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.odznaka small{font-weight:400;opacity:.85;font-size:.86em}

/* Spec-line: liczby duze, etykiety male (wzorzec Zillow). */
/* minmax(0,1fr) zamiast 1fr: domyslne minimum sciezki to max-content, wiec
   podpis "do plazy, przez park" rozpychal siatke ponad szerokosc kontenera.
   Zmierzone: siatka 372 px w kontenerze 349 px, czyli przewijanie w bok.  */
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);
  margin:var(--s3) 0;padding:var(--s3) 0;border-bottom:1px solid var(--linia)}
.spec div{display:flex;flex-direction:column;gap:.2rem}
.spec b{font:500 clamp(1.35rem,2.4vw,1.85rem)/1 Bricolage,system-ui,sans-serif;
  letter-spacing:-.02em;font-variant-numeric:lining-nums}
.spec span{color:var(--atrament-3);font-size:.86em}

.blok{padding:var(--s4) 0;border-bottom:1px solid var(--linia)}
.blok:last-child{border-bottom:0}
.blok h2{font:520 clamp(1.3rem,2.1vw,1.65rem)/1.2 Bricolage,system-ui,sans-serif;
  letter-spacing:-.018em;margin-bottom:var(--s3)}
.blok p{margin:0 0 .9rem;max-width:62ch;color:var(--atrament-2)}
.blok p:last-child{margin-bottom:0}
.blok p strong{color:var(--atrament);font-weight:600}

/* Wyposazenie: dwie kolumny z ikonami (wzorzec Airbnb). */
.wyposazenie{display:grid;grid-template-columns:1fr 1fr;gap:.9rem var(--s4);
  margin:0;padding:0;list-style:none}
.wyposazenie li{display:flex;align-items:flex-start;gap:.7rem}
.wyposazenie small{display:block;color:var(--atrament-3);font-size:.86em}
.wiecej{margin-top:var(--s3);display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.15rem;border:1px solid var(--atrament);border-radius:var(--r-mala);
  background:transparent;color:var(--atrament);font:inherit;font-weight:600;
  font-size:.94em;cursor:pointer;transition:background var(--dotyk) ease-out}
.wiecej:hover{background:var(--papier-cien)}

/* Okolica: rosnaca odleglosc, nie trzy identyczne karty. */
.okolica-lista{margin:0;padding:0;list-style:none;display:grid;gap:0}
.okolica-lista li{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;
  align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--linia)}
.okolica-lista li:last-child{border-bottom:0}
.okolica-lista .ikona{align-self:center}
.okolica-lista b{font-weight:500}
.okolica-lista small{display:block;color:var(--atrament-3);font-size:.87em}
.okolica-lista span{color:var(--atrament-2);white-space:nowrap;
  font:500 .84rem/1.4 Martian,ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* Kalendarz: dwa miesiace obok siebie (wzorzec Airbnb). */
.kalendarz{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.miesiac h3{font:600 .98rem/1 Schibsted,system-ui,sans-serif;margin-bottom:var(--s2);
  text-align:center}
.miesiac table{width:100%;border-collapse:collapse}
.miesiac th{font:500 .72rem/1 Martian,ui-monospace,monospace;color:var(--atrament-3);
  font-weight:500;padding:.4rem 0;text-transform:uppercase;letter-spacing:.04em}
.miesiac td{text-align:center;padding:.28rem 0}
.dzien{display:inline-flex;align-items:center;justify-content:center;
  width:2.05rem;height:2.05rem;border-radius:50%;
  font:500 .84rem/1 Martian,ui-monospace,monospace;font-variant-numeric:tabular-nums}
.dzien.wolny{color:var(--atrament)}
.dzien.zajety{color:var(--atrament-3);text-decoration:line-through;
  text-decoration-thickness:1px}
.dzien.pusty{visibility:hidden}
.kalendarz-nota{margin:var(--s3) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--linia);color:var(--atrament-2);font-size:.92em}

/* Opinie. */
.opinie-glowa{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s3)}
.ocena-duza{font:400 clamp(2.4rem,4.6vw,3.4rem)/1 Bricolage,system-ui,sans-serif;
  letter-spacing:-.03em;color:var(--morze);font-variant-numeric:lining-nums}

/* Gospodarze. */
.gospodarze-siatka{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s4);
  align-items:start}
.kontakty{margin:0}
.kontakty div{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  padding:.62rem 0;border-bottom:1px solid var(--linia)}
.kontakty div:last-child{border-bottom:0}
.kontakty dt{color:var(--atrament-2)}
.kontakty dd{margin:0;font:500 .9rem/1.4 Martian,ui-monospace,monospace;
  font-variant-numeric:tabular-nums}
/* Numer glowny wyrozniony DELIKATNIE — grubsza waga i cieplejsza linia.
   Zadnej etykiety "glowny", zeby dwa pozostale nie wygladaly na gorsze.     */
.kontakty div:first-child{border-bottom-color:var(--drewno)}
.kontakty div:first-child dd a{font-weight:600}

/* ═══ PANEL REZERWACJI — przyklejony, wzorzec Airbnb i Expedia ═══════════ */
.panel{position:sticky;top:6rem;border:1px solid var(--linia-mocna);
  border-radius:var(--r);background:var(--papier);
  box-shadow:0 1px 2px rgba(20,24,28,.04),0 8px 24px -12px rgba(20,24,28,.14);
  padding:var(--s3)}
.panel-cena{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  margin-bottom:var(--s3)}
.panel-cena b{font:500 1.75rem/1 Bricolage,system-ui,sans-serif;letter-spacing:-.02em;
  font-variant-numeric:lining-nums}
.panel-cena span{color:var(--atrament-2);font-size:.94em}
.pola{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linia-mocna);
  border-radius:var(--r-mala);overflow:clip}
.pole{padding:.62rem .8rem;border-right:1px solid var(--linia-mocna)}
.pole:last-child{border-right:0}
.pole-szeroki{grid-column:1/-1;border-right:0;border-top:1px solid var(--linia-mocna)}
.pole label{display:block;color:var(--atrament-3);margin-bottom:.15rem;
  font:500 .66rem/1 Martian,ui-monospace,monospace;letter-spacing:.06em;
  text-transform:uppercase}
.pole input,.pole select{width:100%;border:0;padding:0;background:transparent;
  font:inherit;font-size:.95em;color:var(--atrament);appearance:none;
  min-height:1.55rem;line-height:1.55rem;font-variant-numeric:tabular-nums}
/* Natywny wskaznik kalendarza rozni sie miedzy przegladarkami i psuje rowna
   wysokosc pol. Chowamy go i rysujemy wlasny, ten sam w kazdej przegladarce. */
.pole input[type=date]::-webkit-calendar-picker-indicator{
  opacity:0;position:absolute;right:.55rem;width:1.1rem;height:1.1rem;cursor:pointer}
.pole:has(input[type=date]){position:relative}
.pole:has(input[type=date])::after{content:"";position:absolute;right:.75rem;top:50%;
  width:15px;height:15px;margin-top:-2px;pointer-events:none;
  background:currentColor;color:var(--atrament-3);
  -webkit-mask:var(--ikona-kal) center/contain no-repeat;
  mask:var(--ikona-kal) center/contain no-repeat}
.pole input:focus,.pole select:focus{outline:0}
.pole:focus-within{background:var(--morze-tlo)}
.panel .przycisk{width:100%;justify-content:center;margin-top:var(--s2)}
.panel-nota{margin:.7rem 0 0;text-align:center;color:var(--atrament-3);font-size:.85em}
.panel-rozbicie{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--linia)}
.panel-rozbicie div{display:flex;justify-content:space-between;gap:1rem;
  padding:.36rem 0;color:var(--atrament-2);font-size:.94em}
.panel-rozbicie .suma{margin-top:.4rem;padding-top:.65rem;border-top:1px solid var(--linia);
  color:var(--atrament);font-weight:600}
.panel-rozbicie span{font:500 .88rem/1.4 Martian,ui-monospace,monospace;
  font-variant-numeric:tabular-nums}
.panel-uwaga{margin-top:var(--s3);padding:.8rem;background:var(--morze-tlo);
  border-radius:var(--r-mala);color:var(--atrament-2);font-size:.88em}
.panel-uwaga b{color:var(--atrament)}
/* Kod rabatowy jako WIERSZ DANYCH, nie kupon w przerywanej ramce.
   Ramka-bilet jest jednym z najbardziej rozpoznawalnych znakow generatora,
   a kod to po prostu dana, wiec mieszka tam, gdzie reszta danych.          */
.kod-wiersz{display:flex;align-items:baseline;gap:.7rem;margin-top:.8rem;
  padding-top:.8rem;border-top:1px solid var(--linia)}
.kod-wiersz > span{color:var(--atrament-2);font-size:.94em;flex:1}
.kod{border:0;background:transparent;padding:0;cursor:pointer;color:var(--morze);
  font:600 .95rem/1 Martian,ui-monospace,monospace;letter-spacing:.04em;
  border-bottom:1px dotted var(--morze);transition:color var(--dotyk) ease-out}
.kod:hover{color:var(--morze-jasne)}
.kod[data-skopiowany]{color:var(--drewno);border-bottom-color:var(--drewno)}
.kod-wiersz b{font:600 .95rem/1 Martian,ui-monospace,monospace;
  font-variant-numeric:tabular-nums}

/* ═══ PRZYCISKI ═════════════════════════════════════════════════════════ */
.przycisk{display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.5rem;background:var(--morze);color:#fff;border:1px solid var(--morze);
  border-radius:var(--r-mala);text-decoration:none;font-weight:600;font-size:.97em;
  min-height:46px;cursor:pointer;
  transition:background var(--dotyk) ease-out,transform var(--dotyk) ease-out}
.przycisk:hover{background:var(--morze-jasne);border-color:var(--morze-jasne);
  color:#fff;transform:translateY(-1px)}
.przycisk:active{transform:translateY(0)}
.przycisk-obrys{background:transparent;color:var(--atrament);border-color:var(--linia-mocna)}
.przycisk-obrys:hover{background:var(--papier-cien);color:var(--atrament);
  border-color:var(--atrament)}
.przycisk-maly{padding:.6rem 1.05rem;min-height:40px;font-size:.92em}

/* ═══ STOPKA ════════════════════════════════════════════════════════════ */
/* `body > footer` a NIE `footer`: ten drugi lapal rowniez <footer> wewnatrz
   kart opinii i malowal pod kazda opinia czarny prostokat. Zlapane na zrzucie
   od wlasciciela, nie w pomiarze.                                           */
body > footer{background:var(--atrament);color:#E9E4DC;padding:var(--s5) 0 var(--s4)}
.stopka-siatka{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s4)}
body > footer .mono{color:#98A3AA;margin:0 0 .7rem}
body > footer address{font-style:normal;line-height:1.85;color:#C7CFD4}
body > footer a{color:#E9E4DC}
body > footer a:hover{color:#fff}
.stopka-nota{margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid #2A3138;
  color:#98A3AA;font-size:.86em;max-width:78ch}

/* ═══ MOBILE — projektowane od 390 px w gore ════════════════════════════ */
@media (max-width:66rem){
  /* minmax(0,1fr) + min-width:0 na dzieciach: przy jednej kolumnie sciezka
     brala minimum z max-content panelu (pola dat maja wlasna szerokosc
     minimalna od przegladarki). Zmierzone: sciezka 372 px w kontenerze
     349 px, przez co CALA strona przewijala sie w bok.                    */
  .uklad{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  /* Na telefonie panel przestaje byc szyna i staje sie pierwsza sekcja. */
  .panel{position:static;order:-1}
  .galeria-siatka{grid-template-columns:1fr}
  .galeria-male{grid-template-columns:1fr 1fr}
  .kalendarz{grid-template-columns:1fr;gap:var(--s3)}
  .gospodarze-siatka,.wyposazenie{grid-template-columns:1fr}
  .stopka-siatka{grid-template-columns:1fr 1fr;gap:var(--s3)}
}
@media (max-width:34rem){
  .spec{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s3)}
  .stopka-siatka{grid-template-columns:1fr}
  .pas{width:min(100% - 1.6rem,80rem)}
}

/* ═══ prefers-reduced-motion: wszystko natychmiast, bez wyjatku ═════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .galeria .duze img{clip-path:none;animation:none}
  .znak::after{transform:scaleX(1);animation:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   GALERIA DWUPOZIOMOWA — uklad z przeplywu KAYAK-a (Mobbin, 4 ekrany):
   poziom 1 to siatka kategorii, poziom 2 pelny kadr. Atrybut data-poziom
   na oknie przelacza widoki, wiec JavaScript nie dotyka stylow.
   ═══════════════════════════════════════════════════════════════════════════ */
.galeria-okno{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;
  padding:0;border:0;background:#0C1013;color:#EDE9E3;overflow:hidden;
  display:none;grid-template-rows:auto auto 1fr auto}
.galeria-okno[open]{display:grid}
.galeria-okno::backdrop{background:rgba(6,9,12,.94)}

/* Przelacznik poziomow: siatka albo kadr, nigdy oba naraz. */
.galeria-okno[data-poziom="siatka"] .okno-kadr,
.galeria-okno[data-poziom="siatka"] .okno-dol,
.galeria-okno[data-poziom="siatka"] .okno-powrot{display:none}
.galeria-okno[data-poziom="kadr"] .okno-siatka,
.galeria-okno[data-poziom="kadr"] .okno-tytul{display:none}

.okno-gora{display:flex;align-items:center;gap:var(--s2);padding:.85rem var(--s3);
  border-bottom:1px solid #1E262C}
.okno-powrot{flex:0 0 auto;border:1px solid #2C363E;background:transparent;color:#EDE9E3;
  border-radius:var(--r-mala);padding:.5rem .9rem;cursor:pointer;font:inherit;font-size:.88em;
  transition:background var(--dotyk) ease-out}
.okno-powrot:hover{background:#161D22}
.okno-cta{flex:0 0 auto;margin-left:auto}
.zamknij{flex:0 0 auto;border:0;background:transparent;color:#A9B3BA;cursor:pointer;
  font-size:1.1rem;line-height:1;padding:.55rem .7rem;border-radius:var(--r-mala);
  transition:background var(--dotyk) ease-out}
.zamknij:hover{background:#161D22;color:#fff}

/* Chipy z miniatura — KAYAK pokazuje podglad nad nazwa, wiec kategorie
   wybiera sie okiem zamiast czytaniem.                                      */
.chipy{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;
  padding:.15rem}
.chipy::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:flex;align-items:center;gap:.55rem;cursor:pointer;
  border:1px solid #2C363E;background:transparent;color:#B9C2C8;border-radius:999px;
  padding:.28rem .8rem .28rem .3rem;font:500 .82rem/1 Schibsted,system-ui,sans-serif;
  transition:background var(--dotyk) ease-out,color var(--dotyk) ease-out,
             border-color var(--dotyk) ease-out}
.chip img{width:30px;height:24px;object-fit:cover;border-radius:4px;flex:0 0 auto}
.chip-ile{color:#7B858C;font-variant-numeric:tabular-nums;font-size:.9em}
.chip:hover{background:#161D22;color:#EDE9E3;border-color:#3A464F}
.chip[aria-current="true"]{background:#EDE9E3;color:#0C1013;border-color:#EDE9E3}
.chip[aria-current="true"] .chip-ile{color:#5A646B}

.okno-tytul{padding:var(--s3) var(--s3) 0;
  font:520 clamp(1.1rem,2vw,1.45rem)/1.2 Bricolage,system-ui,sans-serif;
  letter-spacing:-.015em;color:#F3EFE9;
  display:flex;gap:.7rem;align-items:baseline}

/* Siatka: proporcje kadrow celowo NIEROWNE — rytm rozkladowki zamiast tabeli. */
.okno-siatka{overflow-y:auto;padding:var(--s3);display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-content:start}
.kafel{border:0;padding:0;background:#161D22;cursor:pointer;overflow:clip;
  border-radius:var(--r-mala);outline:2px solid transparent;outline-offset:2px;
  transition:outline-color var(--dotyk) ease-out}
.kafel img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform 480ms var(--krzywa);will-change:transform;
  backface-visibility:hidden;transform:translateZ(0)}
.kafel:hover img{transform:scale(1.04) translateZ(0)}
.kafel:hover{outline-color:#3A464F}
/* WSKAZNIK FOKUSU W CIEMNYM OKNIE. Globalna regula `:focus-visible` daje
   `outline:2px solid var(--morze)` = #17455A, co na tle #0C1013 daje 1,85:1 —
   niewidoczne. Gorzej: `.kafel` wyzej ma TE SAMA specyficznosc (0,1,0) i stoi
   pozniej w pliku, wiec wygrywa jego `outline:2px solid transparent` i przy
   realnym fokusie nie ma ZADNEJ obwodki. Ta regula ma specyficznosc (0,2,0),
   wiec bije `.kafel` niezaleznie od kolejnosci. #EDE9E3 to kolor tekstu tego
   okna: 15,80:1, przy progu 3:1 dla elementow nietekstowych (WCAG 1.4.11).  */
.galeria-okno :focus-visible{outline:2px solid #EDE9E3;outline-offset:2px}
.okno-siatka .kafel:nth-child(7n+1) img{aspect-ratio:4/5}
.okno-siatka .kafel:nth-child(5n+3) img{aspect-ratio:1/1}

.okno-kadr{display:grid;place-content:center;padding:var(--s3);min-height:0;
  touch-action:pan-y}
.okno-kadr img{max-width:min(100%,88rem);max-height:calc(100dvh - 13rem);
  object-fit:contain;border-radius:var(--r-mala);view-transition-name:kadr-galerii}
.kadr-podpis{margin:var(--s2) 0 0;text-align:center;color:#98A2A9;font-size:.9em}

.okno-dol{display:flex;align-items:center;justify-content:center;gap:var(--s3);
  padding:.85rem var(--s3);border-top:1px solid #1E262C}
.strzalka{border:1px solid #2C363E;background:transparent;color:#EDE9E3;cursor:pointer;
  width:2.5rem;height:2.5rem;border-radius:50%;font-size:1.25rem;line-height:1;
  display:grid;place-items:center;transition:background var(--dotyk) ease-out}
.strzalka:hover{background:#161D22}
.licznik{margin:0;color:#8D979E;white-space:nowrap;min-width:6rem;text-align:center;
  font:500 .82rem/1 Martian,ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* KAFEL JEST PRZYCISKIEM. Do 31.08.2026 klikalny byl sam <figure> z podpietym
   `click` w JS: `tabIndex=-1`, brak roli, brak nazwy — dla czytnika ekranu NIC,
   a Enter i Spacja nie otwieraly galerii. Zmierzone: 5 x `FIGURE fokusowalny=false`.
   Przycisk siedzi WEWNATRZ figure, a nie zamiast niego, bo ostatni kafel zawiera
   juz <button class="galeria-licznik"> — przycisk w przycisku jest nieprawidlowym
   HTML-em. Ponizej pelny reset, zeby element z wlasnym tlem, ramka i czcionka
   przegladarki nie ruszyl siatki.                                              */
.galeria .galeria-otw{display:block;width:100%;padding:0;border:0;background:none;
  font:inherit;color:inherit;cursor:pointer;text-align:inherit}
.galeria .galeria-otw img{display:block}
.galeria-licznik{border:1px solid var(--linia-mocna);font:500 .8rem/1 Martian,ui-monospace,monospace}

@media (max-width:44rem){
  .okno-gora{flex-wrap:wrap;gap:.6rem}
  .okno-cta{order:3;margin-left:0}
  .chipy{order:4;width:100%;flex:1 0 100%}
  .okno-siatka{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .okno-kadr img{max-height:calc(100dvh - 15rem)}
}
@media (prefers-reduced-motion:reduce){
  .okno-kadr img{view-transition-name:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   SYSTEMY Z PALETY INSPIRACJI — kazdy odtworzony z referencji, nie skopiowany.
   Zrodla i uzasadnienia: PALETA_INSPIRACJI.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SYSTEM 1: TYPOGRAFIA KOMPOZYCYJNA (A24 + Shopify Design) ────────────
   A24 sklada liste tytulow w ogromnym stopniu z rokiem w indeksie gornym.
   Shopify prowadzi naglowek przez trzy wiersze o roznym wyrownaniu i kolorze.
   Wspolne: typografia NIESIE uklad, zamiast go tylko wypelniac.

   U nas dostaje to sekcja o drodze na plaze — jedyny mierzalny atut obiektu.
   Trzy wiersze, kazdy inaczej wyrownany, liczba w roli bohatera.
   Zastepuje kicker + tytul, ktorych craft-floor zabrania.                   */
.droga{padding:var(--s6) 0;border-bottom:1px solid var(--linia)}
.droga-slowa{display:grid;gap:.1em;
  font:400 clamp(2rem,6.4vw,5rem)/1.02 Bricolage,system-ui,sans-serif;
  letter-spacing:-.035em}
.droga-slowa span{display:block}
.droga-slowa .cicho{color:var(--atrament-3);font-weight:300}
.droga-slowa .srodek{padding-left:8%}
.droga-slowa .prawo{padding-left:20%}
.droga-liczba{color:var(--morze);font-weight:500;font-variant-numeric:lining-nums;
  position:relative;display:inline-block}
/* Jednostka w indeksie gornym — chwyt A24 z rokiem przy tytule filmu. */
.droga-liczba sup{font-size:.2em;font-weight:500;letter-spacing:.02em;
  vertical-align:.9em;margin-left:.1em;color:var(--atrament-3)}
.droga-nota{display:grid;grid-template-columns:1fr auto;gap:var(--s4);
  align-items:end;margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid var(--linia)}
.droga-nota p{margin:0;max-width:44ch;color:var(--atrament-2)}
.droga-nota dl{margin:0;display:flex;gap:var(--s4)}
.droga-nota div{display:grid;gap:.1rem}
.droga-nota dt{color:var(--atrament-3);font-size:.84em}
.droga-nota dd{margin:0;font:500 .95rem/1.3 Martian,ui-monospace,monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── SYSTEM 2: KADRY Z PODPISEM ZAMIAST LISTY (Craft) ────────────────────
   Craft w sekcji "Touch to feel the difference" pokazuje funkcje ZDJECIAMI
   z jednym zdaniem pod kazdym, zamiast wypunktowaniem. Dziala, bo obraz
   niesie dowod, a zdanie tylko nazywa.

   U nas: wyposazenie pokazane kadrami z apartamentu. Proporcje kadrow celowo
   rozne (KOBU) — rownie duze kafle to "lazy container" z craft-floor.        */
.pod-reka{padding:var(--s6) 0;border-bottom:1px solid var(--linia)}
/* Dwie kolumny, nie cztery: sekcja lezy w lewej kolumnie ukladu, ktora ma
   okolo 55% szerokosci strony. Cztery kadry byly tam ciasne — zmierzone
   na zrzucie, nie zalozone.                                                 */
/* Pas przewijany poziomo ze snapowaniem: wraca rytm paskowego pokazu
   (Craft, KOBU), a jednoczesnie miesci sie w kolumnie o 55% szerokosci,
   ktora wykluczala cztery kafle obok siebie.                               */
/* Cztery kadry obok siebie, bez przewijania w bok i bez sciskania.
   Sekcja ma cala szerokosc strony, wiec miejsce bierze sie samo.
   Proporcje kadrow zostaja rozne, bo to one daja rytm rozkladowki;
   spina je wspolna linia gorna, nie wspolna wysokosc.                      */
.pod-reka.pelna{padding:var(--s6) 0;border-top:1px solid var(--linia);border-bottom:0}
.pod-reka.pelna > h2{max-width:24ch}
.pod-reka-siatka{display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--s5) var(--s3);margin-top:var(--s4);align-items:start}
.pod-reka figure:nth-child(1){grid-column:span 7}
.pod-reka figure:nth-child(2){grid-column:span 5}
.pod-reka figure:nth-child(3){grid-column:span 5}
.pod-reka figure:nth-child(4){grid-column:span 7}
.pod-reka figure{margin:0}
/* height:auto jest KONIECZNE: bez niego atrybut height= z HTML wygrywa
   z aspect-ratio i kadry wracaja do wlasnych proporcji. Zmierzone: kadr
   deklarowal 4/4.6, a renderowal sie 302x466, czyli dokladnie na atrybucie. */
.pod-reka img{width:100%;height:auto;border-radius:var(--r-mala);background:var(--papier-cien);
  transition:transform 560ms var(--krzywa);will-change:transform;
  backface-visibility:hidden;transform:translateZ(0)}
.pod-reka figure:hover img{transform:scale(1.015) translateZ(0)}
.pod-reka figcaption{margin-top:.7rem;max-width:42ch;color:var(--atrament-2);font-size:.9em;
  max-width:26ch}
.pod-reka figcaption b{display:block;color:var(--atrament);font-weight:600;
  margin-bottom:.15rem}
/* Rytm rozkladowki: przesuniecie w pionie i rozne proporcje.               */
/* Proporcje celowo rozne: rytm rozkladowki zamiast rownego rzedu kafli. */
.pod-reka-siatka img{object-fit:cover;aspect-ratio:auto}
.pod-reka figure:nth-child(1) img,
.pod-reka figure:nth-child(2) img{height:clamp(17rem,25vw,25rem)}
.pod-reka figure:nth-child(3) img,
.pod-reka figure:nth-child(4) img{height:clamp(14rem,20vw,20rem)}

/* ── SYSTEM 3: STRZALKA PRZY LINKACH WYCHODZACYCH (KOBU) ─────────────────
   Tylko tam, gdzie link WYPROWADZA poza biezacy kontekst. Przy kotwicach
   wewnetrznych przestalaby cokolwiek znaczyc.                               */
.wychodzi::after{content:"↗";display:inline-block;margin-left:.3em;font-size:.85em;
  transition:transform 220ms var(--krzywa)}
.wychodzi:hover::after{transform:translate(.12em,-.14em)}

@media (max-width:66rem){
  .pod-reka-siatka{gap:var(--s4) var(--s3)}
  .pod-reka figure:nth-child(1) img,
  .pod-reka figure:nth-child(2) img{height:clamp(13rem,26vw,18rem)}
  .pod-reka figure:nth-child(3) img,
  .pod-reka figure:nth-child(4) img{height:clamp(10.5rem,21vw,14.5rem)}
  .droga-slowa .srodek{padding-left:4%}
  .droga-slowa .prawo{padding-left:10%}
  .droga-nota{grid-template-columns:1fr;gap:var(--s3)}
}
@media (max-width:34rem){
  .pod-reka-siatka{grid-template-columns:1fr;gap:var(--s3)}
  .pod-reka figure:nth-child(n){grid-column:1}
  .pod-reka figure:nth-child(n) img{height:auto;aspect-ratio:4/3}
  .droga-nota dl{flex-wrap:wrap;gap:var(--s3)}
}


/* ═══════════════════════════════════════════════════════════════════════════
   PANEL TERMINU I KROK Z KONTEM
   Wlasciciel: pola byly "brzydkie i nieczytelne". Poprawa nie polega na
   ozdobieniu ich, tylko na tym, ze zaczynaja cos ODDAWAC: liczbe nocy, sume
   i rozbicie licza sie na biezaco, wiec pole odpowiada, zamiast tylko czekac.
   ═══════════════════════════════════════════════════════════════════════════ */

.panel-cena{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  margin-bottom:var(--s3);min-height:2.2rem}
.panel-cena b{font:500 1.8rem/1 Bricolage,system-ui,sans-serif;letter-spacing:-.022em;
  font-variant-numeric:lining-nums;transition:color var(--dotyk) ease-out}

/* Pola dat: wieksze, z wyrazna etykieta i wlasna ikona. */
.pola{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linia-mocna);
  border-radius:var(--r-mala);overflow:clip;background:var(--papier)}
.pole{padding:.7rem .85rem;border-right:1px solid var(--linia-mocna);
  transition:background var(--dotyk) ease-out}
.pole:hover{background:var(--morze-tlo)}
.pole label{display:block;color:var(--atrament-3);margin-bottom:.25rem;
  font:500 .64rem/1 Martian,ui-monospace,monospace;letter-spacing:.08em;
  text-transform:uppercase}
.pole input{width:100%;border:0;padding:0;background:transparent;font:inherit;
  font-size:1em;color:var(--atrament);font-variant-numeric:tabular-nums;
  min-height:1.7rem;line-height:1.7rem}

/* Liczba gosci na krokowaniu zamiast listy rozwijanej: jedno dotkniecie
   zamiast dwoch, granice widac od razu (wzorzec Airbnb i IHG).             */
.gosci{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.gosci-ile{font-size:1em;font-variant-numeric:tabular-nums}
.gosci button{width:1.95rem;height:1.95rem;border-radius:50%;cursor:pointer;
  border:1px solid var(--linia-mocna);background:transparent;color:var(--atrament);
  font-size:1rem;line-height:1;display:grid;place-items:center;
  transition:background var(--dotyk) ease-out,border-color var(--dotyk) ease-out}
.gosci button:hover:not(:disabled){background:var(--morze);border-color:var(--morze);color:#fff}
.gosci button:disabled{opacity:.32;cursor:not-allowed}

.panel-ostrzezenie{margin:.6rem 0 0;color:var(--drewno);font-size:.86em}
.przycisk[aria-disabled="true"]{background:var(--linia);border-color:var(--linia);
  color:var(--atrament-3);cursor:default;pointer-events:none}

/* ── KROK Z KONTEM ────────────────────────────────────────────────────────
   Pojawia sie DOPIERO po wybraniu terminu, bo dopiero wtedy ma kontekst:
   gosc widzi swoje daty i swoja cene, a konto jest przy nich propozycja,
   nie bramka. Zakladanie konta jest zawsze opcja.                          */
.krok{width:min(100vw - 2rem,34rem);max-width:none;border:1px solid var(--linia-mocna);
  border-radius:var(--r);padding:var(--s4);background:var(--papier);color:var(--atrament);
  box-shadow:0 24px 60px -24px rgba(12,16,20,.4)}
.krok::backdrop{background:rgba(12,16,20,.5)}
.krok h2{font:520 1.45rem/1.2 Bricolage,system-ui,sans-serif;letter-spacing:-.02em;
  margin-bottom:.4rem}
.krok-x{position:absolute;top:.7rem;right:.7rem;color:var(--atrament-3)}
.krok-x:hover{background:var(--papier-cien);color:var(--atrament)}
.krok-termin{margin:0;color:var(--atrament-2)}
.krok-termin b{color:var(--atrament)}
.krok-suma{margin:.3rem 0 var(--s3);
  font:500 2rem/1 Bricolage,system-ui,sans-serif;letter-spacing:-.024em;
  color:var(--morze);font-variant-numeric:lining-nums}

.krok-konto{padding:var(--s3);border:1px solid var(--linia);border-radius:var(--r-mala);
  background:var(--papier-cien)}
.krok-zgoda{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}
.krok-zgoda input{margin-top:.28rem;width:1.05rem;height:1.05rem;accent-color:var(--morze);
  flex:0 0 auto}
.krok-zgoda b{display:block;font-weight:600}
.krok-zgoda small{display:block;color:var(--atrament-2);margin-top:.15rem}
.krok-naglowek{margin:var(--s3) 0 .6rem;color:var(--atrament-3)}
.krok-lista{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.krok-lista li{display:flex;gap:.6rem;color:var(--atrament-2);font-size:.94em}
/* Znacznik rysowany, nie emoji: craft-floor zabrania emoji w roli ikony. */
.krok-lista li::before{content:"";flex:0 0 auto;width:1.05rem;height:1.05rem;
  margin-top:.15rem;border-radius:50%;background:var(--morze);
  -webkit-mask:var(--ptaszek) center/.62rem no-repeat;
  mask:var(--ptaszek) center/.62rem no-repeat}
.krok-akcje{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-top:var(--s3)}
.krok-tel{color:var(--atrament-3);font-size:.88em}

@media (max-width:34rem){
  .krok{padding:var(--s3)}
  .krok-akcje .przycisk{width:100%;justify-content:center}
}


/* ===========================================================================
   SYSTEM RABATOW - dwa poziomy: 20% z kontem, 15% bez konta.
   Cena z kontem jest glowna, bo pole jest domyslnie zaznaczone i to jest
   kwota, ktora gosc realnie zaplaci. Pelna stoi obok przekreslona, zeby
   roznica byla widoczna od razu, a nie dopiero po odkliknieciu.
   =========================================================================== */
.panel-cena s{color:var(--atrament-3);font-size:.94em;text-decoration-thickness:1px;
  font-variant-numeric:lining-nums}
.panel-rozbicie .rabat{color:var(--morze);font-weight:600}

.krok-suma{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:.3rem 0 .2rem;
  font:inherit;color:inherit;letter-spacing:normal}
.krok-kwota{font:500 2.1rem/1 Bricolage,system-ui,sans-serif;letter-spacing:-.026em;
  color:var(--morze);font-variant-numeric:lining-nums}
.krok-stara{color:var(--atrament-3);font-size:1.05rem;text-decoration-thickness:1px}
.krok-etyk{color:var(--atrament-2);font-size:.9rem}
.krok-oszczedzasz{margin:0 0 var(--s3);color:var(--atrament-2);font-size:.94em}
.krok-oszczedzasz b{color:var(--morze);font-weight:600}

/* Blok "co tracisz" pojawia sie DOPIERO po odkliknieciu konta. Nie straszy
   z gory; pokazuje sie wtedy, gdy gosc podjal decyzje i moze ja jeszcze
   zmienic majac komplet informacji.                                        */
.krok-tracisz{margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--linia-mocna)}
.krok-tracisz .mono{margin:0 0 .6rem;color:var(--drewno)}
.krok-tracisz ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.krok-tracisz li{display:flex;gap:.6rem;color:var(--atrament-2);font-size:.92em}
.krok-tracisz li::before{content:"";flex:0 0 auto;width:1.05rem;height:1.05rem;
  margin-top:.18rem;border-radius:50%;border:1px solid var(--drewno)}
.krok-tracisz b{color:var(--atrament);font-weight:600}
/* [hidden] to atrybut, wiec przegrywa z kazda regula klasowa ustawiajaca
   display. .krok-lista ma display:grid, wiec bez tej linii ukrywanie nie
   dziala. Zmierzone: obie listy stały obok siebie mimo hidden=true.       */
.krok [hidden]{display:none !important}
.krok-drobne{margin:var(--s2) 0 0;color:var(--atrament-3);font-size:.82em}

/* ===========================================================================
   PLYNNOSC - wlasciciel: "brakuje tu troche duszy niektorym elementom (...)
   nie ma takiego poczucia plynnosci i zycia tej stronie momentami".
   Odpowiedzia nie jest nowa warstwa efektow, tylko to, ze strona przestaje
   stac w miejscu: sekcje wchodza raz i delikatnie, sterowane przewijaniem,
   a to, czego gosc dotyka, odpowiada szybciej. Zero bibliotek, zero JS,
   zero kosztu przy wylaczonych animacjach.
   =========================================================================== */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* 12 px i lekkie rozjasnienie. Zero ruchu w bok, zero skalowania,
       zero kaskady opoznien - to ma byc oddech, nie pokaz.                 */
    .blok,.droga,.pod-reka,.galeria{
      animation:wejscie linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 24%}
    @keyframes wejscie{
      from{opacity:.5;transform:translateY(12px)}
      to{opacity:1;transform:none}}

    /* Kadry w rzedzie maja wlasny prog, wiec rzad sklada sie stopniowo,
       mimo ze zadna regula nie podaje zadnych opoznien.                    */
    .pod-reka figure,.opinia{
      animation:wejscie linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 30%}
  }
}

/* Reakcja na dotkniecie ma byc natychmiastowa: 90 ms tam, gdzie gosc czeka
   na potwierdzenie, ze cos sie klika.                                      */
.przycisk,.kafel,.chip,.gosci button,.kod{transition-duration:90ms}
.kafel:active,.chip:active,.gosci button:active{transform:scale(.97)}
.przycisk:active{transform:translateY(1px)}
.panel-cena b,.krok-kwota{transition:color 200ms var(--krzywa)}


/* Gospodarze zamykaja strone poza ukladem dwukolumnowym, wiec tekst musi
   dostac wlasna miare - inaczej wiersz idzie przez cala szerokosc strony. */
.blok.gospodarze{padding-top:var(--s6)}
.blok.gospodarze .gospodarze-siatka{max-width:64rem}


/* Naglowek na waskim ekranie - reguly stoja na koncu arkusza CELOWO:
   .przycisk-maly jest definiowany w wierszu 354, wiec ta sama specyficznosc
   wczesniej w pliku by przegrala. Zmierzone przed poprawka: pasek-akcje
   siegal 409 px w oknie 375 px, bo flex:0 0 auto nie pozwalal mu sie zwezic. */
/* PASEK GORNY — TRZY PROGI, NIE JEDEN.
   Poprzednia wersja skracala pasek dopiero od 34rem, a nawigacja znika juz
   na 64rem. Przedzial 545–1023 px nie byl obslugiwany przez nic: pasek
   niosl w nim znak, przelacznik jezyka, PELNY numer telefonu i przycisk.
   Zmierzone: przelewanie w bok na 600 px. Budzet liczymy na najdluzszym
   jezyku — polskie "Sprawdz termin" jest o 17 px szersze od "Check dates". */
@media (max-width:64rem){
  .pasek-akcje{flex:0 1 auto;min-width:0}
  .znak{flex:0 1 auto;min-width:0}
}
@media (max-width:48rem){
  /* Numer chowa sie tu, nie na 34rem: to jest pierwszy prog, na ktorym
     przestaje sie miescic. Sluchawka zostaje, wiec jedno dotkniecie dzwoni. */
  .pasek-tel > span[data-i18n],.pasek-tel b{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pasek-tel-znak{display:block}
  .pasek-tel{padding:.35rem}
  .pasek-akcje{gap:.55rem}
  .przycisk-maly{padding:.5rem .7rem;min-height:38px;font-size:.82rem;white-space:nowrap}
}
@media (max-width:34rem){
  /* Odstep rzedu schodzi z 24 px na 10 juz tutaj, nie dopiero na 22rem:
     to daje 14 px zapasu strukturalnie, zamiast dogadzania kolejnym
     pojedynczym szerokosciom. Zmierzone: 360 px przelewalo sie o 1 px.  */
  .pasek-rzad{gap:.62rem}
  .przycisk-maly{padding:.5rem .58rem;min-height:36px;font-size:.78rem}
  /* Przelacznik jezyka to najwiekszy nieobowiazkowy składnik paska (88 px
     z 234). Zmierzone na 375 px z paskiem przewijania: przycisk siegal
     368 px przy limicie 365, czyli brakowalo trzech pikseli.              */
  .jezyk-opcja{padding:.34rem .28rem;font-size:.62rem;letter-spacing:0}
  .znak{font-size:.9em}
}
@media (max-width:22rem){
  /* Najwezsze telefony w obiegu (320 px, realnie 310 z paskiem przewijania).
     Zmierzone: skladniki potrzebowaly 320 px w rzedzie szerokim na 284,
     czyli brakowalo 36. Sluchawka (28 px + odstep) jest tu najtansza do
     oddania — numer stoi w panelu rezerwacji, u gospodarzy i w stopce,
     a przycisk i tak prowadzi do panelu, w ktorym numer jest widoczny.    */
  .pasek-tel{display:none}
  .pasek-rzad{gap:.6rem}
  .jezyk-opcja{padding:.32rem .28rem;font-size:.6rem}
  .znak{font-size:.84em}
  .przycisk-maly{padding:.46rem .5rem;font-size:.74rem}
}

.uklad > *{min-width:0}
.pole input{min-width:0}

/* Siatka bezpieczenstwa: overflow-x:clip, a NIE hidden. hidden zrobilby
   z body kontener przewijania i zabilby position:sticky w pasku gornym
   oraz w panelu rezerwacji; clip przycina bez tego skutku. Przyczyny
   przewijania w bok i tak sa naprawione u zrodla (uklad, spec, pasek),
   to jest zabezpieczenie na przyszle zmiany tresci.                      */
body{overflow-x:clip}


/* ===========================================================================
   OPINIE — przebudowane 30.08 po uwadze wlasciciela ("mega generyczne,
   typowe ai"). Rozpoznanie na Mobbinie rozstrzygnelo, dlaczego poprzednia
   wersja tak sie czytala:

   - Airbnb, Turo, KAYAK, Tripadvisor i Etsy — czyli serwisy, ktore naprawde
     prowadza opinie — NIE pakuja ich w kafle z ramka. Opinia jest zwyklym
     tekstem, oddzielonym wloskowa linia.
   - Kafel z ramka, cieniem i rownym rytmem to wzorzec testimonial-wall
     z SaaS (Framer, Intercom, Sprout Social, Contractbook). Wlasnie on
     czyta sie jak strona zrobiona automatem, bo powtarza go kazdy szablon.
   - Wszystkie serwisy z prawdziwymi opiniami pokazuja ROZKLAD ocen. Zadna
     sciana cytatow go nie ma, bo sciana cytatow nie ma danych.
   - Ragged Edge i Harvest: rytm daje ROZNICA wagi miedzy wypowiedziami,
     nie liczba jednakowych pudelek.
   =========================================================================== */
.opinie.pelna{padding:var(--s6) 0;border-top:1px solid var(--linia)}
.opinie.pelna > h2{max-width:24ch}

.opinie-uklad{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:var(--s5);margin-top:var(--s4);align-items:start}

/* ── SZYNA DANYCH ──────────────────────────────────────────────────────── */
.opinie-szyna{position:sticky;top:calc(var(--wys-paska, 4rem) + var(--s3))}
.ocena-duza{display:block;margin:0;
  font:400 clamp(2.8rem,4.4vw,3.6rem)/1 Bricolage,system-ui,sans-serif;
  letter-spacing:-.03em;color:var(--morze);font-variant-numeric:lining-nums}
.opinie-liczba{margin:.4rem 0 0;color:var(--atrament-3)}

.rozklad{margin:var(--s3) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--linia)}
.rozklad > div{display:grid;grid-template-columns:2.2rem 1fr 1.6rem;
  align-items:center;gap:.6rem;margin-bottom:.45rem}
.rozklad dt{margin:0;color:var(--atrament-2);
  font:500 .78rem/1 Martian,ui-monospace,monospace;font-variant-numeric:tabular-nums}
.rozklad dd{margin:0}
.rozklad-pas{height:3px;border-radius:2px;background:var(--linia)}
/* Pas rysowany skalowaniem, nie szerokoscia: jedna wlasciwosc, ktora
   przegladarka animuje na kompozytorze, wiec wejscie nic nie kosztuje.  */
.rozklad-pas i{display:block;height:100%;border-radius:inherit;
  background:var(--morze);transform:scaleX(var(--u));transform-origin:left}
.rozklad-ile{color:var(--atrament-3);text-align:right;
  font:400 .78rem/1 Martian,ui-monospace,monospace;font-variant-numeric:tabular-nums}

.opinie-nota{margin:var(--s2) 0 var(--s3);color:var(--atrament-3);font-size:.86em}

/* ── GLOSY ─────────────────────────────────────────────────────────────── */
.opinie-lista{min-width:0}
.opinia,.opinia-czolo{margin:0;padding:0;border:0;background:transparent}

/* Pierwsza opinia niesie wieksza wage: to ona ma zatrzymac wzrok, a nie
   dwanascie jednakowych prostokatow.                                     */
.opinia-czolo{padding-bottom:var(--s4);border-bottom:1px solid var(--linia-mocna)}
.opinia-czolo .opinia-tresc{font:400 clamp(1.15rem,1.7vw,1.45rem)/1.45 Bricolage,system-ui,sans-serif;
  letter-spacing:-.012em;color:var(--atrament)}
.opinia-czolo .opinia-tyt{font-size:1.02em}

.opinie-ogon{columns:2;column-gap:var(--s5);margin-top:var(--s4)}
.opinia{break-inside:avoid;margin-bottom:var(--s4);display:inline-block;width:100%}

.opinia-ocena{margin:0 0 .5rem;color:var(--morze);
  font:600 .95rem/1 Martian,ui-monospace,monospace;font-variant-numeric:tabular-nums}
.opinia-ocena span{color:var(--atrament-3);font-size:.78em;font-weight:400}
.opinia-tyt{margin:0 0 .4rem;font-weight:600;color:var(--atrament)}
.opinia-tresc{margin:0;color:var(--atrament-2)}
/* Dopisek goscia to ciag dalszy jego wypowiedzi, wiec idzie zwyklym
   akapitem pod trescia — bez etykiety i bez wlasnej ramki.               */
.opinia-dopisek{margin:.5rem 0 0;color:var(--atrament-2)}

.opinia-minus{margin:.7rem 0 0;color:var(--atrament-2);font-size:.92em}
.opinia-minus span{display:block;color:var(--drewno);
  font:500 .62rem/1 Martian,ui-monospace,monospace;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:.15rem}

.opinia footer,.opinia-czolo footer{margin:.9rem 0 0;padding:0;border:0;
  background:transparent}
.opinia footer b,.opinia-czolo footer b{display:block;color:var(--atrament);
  font-weight:600;font-size:.94em}
.opinia footer span,.opinia-czolo footer span{display:block;color:var(--atrament-3);
  font-size:.8em;margin-top:.1rem}

/* Ponizej 72rem szyna klada sie w poziom nad glosami. Pierwsza wersja
   robila to siatka "auto 1fr" z `grid-row: span 3` i BYLA ROZWALONA:
   ocena, licznik i nota rozjezdzaly sie na niezwiazane kawalki, a paski
   rozkladu sciskaly sie do zera, bo dostawaly 1fr z waskiej kolumny.
   Zmierzone na 1100 px. Flex z sensowna podstawa dla rozkladu trzyma
   je razem i gwarantuje paskom szerokosc, przy ktorej cokolwiek widac.   */
@media (max-width:72rem){
  .opinie-uklad{grid-template-columns:1fr;gap:var(--s4)}
  .opinie-szyna{position:static;display:flex;flex-wrap:wrap;align-items:center;
    gap:var(--s2) var(--s4);padding-bottom:var(--s3);
    border-bottom:1px solid var(--linia)}
  .opinie-szyna .ocena-duza{margin:0}
  .opinie-szyna .opinie-liczba{margin:0;flex:0 0 auto}
  .opinie-szyna .rozklad{flex:1 1 15rem;min-width:13rem;margin:0;padding:0;border-top:0}
  .opinie-szyna .rozklad > div{margin-bottom:.3rem}
  .opinie-szyna .opinie-nota{margin:0;flex:0 0 auto}
  .opinie-szyna .przycisk{margin-left:auto}
}
@media (max-width:52rem){
  .opinie-ogon{columns:1}
  .opinie-szyna .rozklad{flex:1 1 100%}
  .opinie-szyna .przycisk{margin-left:0}
}


/* ===========================================================================
   POSTEP CZYTANIA w wloskowej linii pod naglowkiem. Linia i tak tam byla;
   teraz niesie informacje, ile strony zostalo. Zero JS i zero biblioteki:
   `animation-timeline: scroll()` liczy to sama przegladarka, wiec nie ma
   nasluchu na przewijanie i nie ma kosztu przy kazdej klatce.
   =========================================================================== */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .pasek::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
      background:var(--morze);transform-origin:left;transform:scaleX(0);
      animation:postep linear both;animation-timeline:scroll(root block)}
    @keyframes postep{to{transform:scaleX(1)}}
  }
}

/* Kafel galerii ma na telefonie 171 px, a "Wszystkie zdjecia" lamalo sie
   w nim na dwie linie (zmierzone 159x44 px). Regula raz juz istniala
   i zniknela przy przebudowie opinii — wtedy podmienialem arkusz OD bloku
   OPINIE DO KONCA pliku, wiec zabralo wszystko, co bylo dopisane pozniej. */
@media (max-width:34rem){
  .galeria-licznik{font-size:.66rem;padding:.5rem .6rem;white-space:nowrap}
}


/* ===========================================================================
   WYBOR TERMINU
   Natywne pole daty renderowalo sie formatem systemu gosciа: polski gosc
   widzial "mm/dd/yyyy". Wlasny kalendarz rozwiazuje to przy okazji, ale
   glowny powod jest inny - dopiero on moze POWIEDZIEC WYNIK w trakcie
   wybierania ("4 noce"), pokazac zakres jako jedna bryle i wygasic dni,
   ktore lamalyby minimum trzech nocy. Wzorce: Airbnb, Expedia, Kiwi, Klook.
   =========================================================================== */
.pole-termin{display:block;width:100%;text-align:left;cursor:pointer;
  border:0;border-right:1px solid var(--linia-mocna);background:transparent;
  padding:.7rem .85rem;font:inherit;color:var(--atrament);
  transition:background var(--dotyk) ease-out}
.pole-termin:hover{background:var(--morze-tlo)}
.pole-termin[aria-expanded="true"]{background:var(--morze-tlo);
  box-shadow:inset 0 -2px 0 var(--morze)}
.pole-termin small{display:block;color:var(--atrament-3);margin-bottom:.25rem;
  font:500 .64rem/1 Martian,ui-monospace,monospace;letter-spacing:.08em;
  text-transform:uppercase}
.pole-termin b{display:block;font-weight:500;font-size:1em;min-height:1.7rem;
  line-height:1.7rem;font-variant-numeric:tabular-nums}
.pole-termin.jest-pusty b{color:var(--atrament-3)}

.kal-ekran{position:relative;z-index:30}
.kal{position:absolute;top:.5rem;right:0;
  width:min(34rem,calc(100vw - 2rem));
  padding:var(--s3);border:1px solid var(--linia-mocna);border-radius:var(--r);
  background:var(--papier);box-shadow:0 24px 60px -24px rgba(12,16,20,.32)}

.kal-gora{display:flex;justify-content:space-between;margin-bottom:.2rem}
.kal-gora button{width:2rem;height:2rem;border-radius:50%;cursor:pointer;
  border:1px solid var(--linia-mocna);background:transparent;
  display:grid;place-items:center;
  transition:background var(--dotyk) ease-out,border-color var(--dotyk) ease-out}
.kal-gora button::before{content:"";width:.5rem;height:.5rem;
  border-left:1.5px solid var(--atrament);border-bottom:1.5px solid var(--atrament)}
.kal-wstecz::before{transform:rotate(45deg) translate(1px,-1px)}
.kal-naprzod::before{transform:rotate(-135deg) translate(1px,-1px)}
.kal-gora button:hover:not(:disabled){background:var(--morze);border-color:var(--morze)}
.kal-gora button:hover:not(:disabled)::before{border-color:#fff}
.kal-gora button:disabled{opacity:.28;cursor:not-allowed}

.kal-siatki{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:-1.6rem}
@media (min-width:34rem){ .kal-siatki{grid-template-columns:1fr 1fr} }

.kal-nazwa{margin:0 0 .5rem;text-align:center;font-weight:600;font-size:.95em;
  text-transform:capitalize}
.kal-dni{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.kal-skrot{display:grid;place-items:center;height:1.6rem;color:var(--atrament-3);
  font:500 .58rem/1 Martian,ui-monospace,monospace;letter-spacing:.04em;
  text-transform:uppercase}
.kal-pusty{aspect-ratio:1}

/* Siatka przejmuje gest, inaczej przegladarka potraktuje przeciagniecie
   palcem jako przewijanie i zaznaczanie zakresu nie ma szans zadzialac. */
.kal-siatki{touch-action:none}
.kal-dzien{position:relative;aspect-ratio:1;border:0;background:transparent;
  cursor:pointer;padding:0;font:inherit;font-size:.86em;color:var(--atrament);
  font-variant-numeric:tabular-nums;display:grid;place-items:center}
/* Tlo zakresu rysuje warstwa pod cyfra, zeby siegalo do krawedzi komorki
   i zakres czytal sie jak jedna bryla, a nie jak rzad osobnych kropek.   */
.kal-dzien::before{content:"";position:absolute;inset:0;border-radius:0;
  background:transparent;transition:background 140ms var(--krzywa)}
.kal-dzien span{position:relative;z-index:1;display:grid;place-items:center;
  width:2rem;height:2rem;border-radius:50%;
  transition:background 140ms var(--krzywa),color 140ms var(--krzywa)}
.kal-dzien:hover:not(:disabled) span{background:var(--papier-cien)}
.kal-dzien:focus-visible{outline:none}
.kal-dzien:focus-visible span{outline:2px solid var(--morze);outline-offset:2px}

.kal-dzien.jest-w-zakresie::before{background:var(--morze-tlo)}
/* Doba zajeta ma byc WIDOCZNA, nie ukryta: gosc ma rozumiec, ze termin
   istnieje i jest wziety, a nie zgadywac, czemu kalendarz go pomija. */
.kal-dzien.jest-zajety span{color:var(--atrament-3);text-decoration:line-through;
  text-decoration-thickness:1px;opacity:.55}
.kal-dzien.jest-od::before{background:linear-gradient(to right,transparent 50%,var(--morze-tlo) 50%)}
.kal-dzien.jest-do::before{background:linear-gradient(to left,transparent 50%,var(--morze-tlo) 50%)}
.kal-dzien.jest-od span,.kal-dzien.jest-do span{background:var(--morze);color:#fff;font-weight:600}
.kal-dzien.jest-podglad span{box-shadow:inset 0 0 0 1.5px var(--morze)}
/* Sam przyjazd bez wyjazdu nie ma czego podbarwiac po prawej. */
.kal-dzien.jest-od:not(.jest-w-zakresie)+.kal-dzien:not(.jest-w-zakresie):not(.jest-do)~.kal-dzien{}

.kal-dzien:disabled{cursor:not-allowed;color:var(--linia-mocna)}
.kal-dzien:disabled span{background:transparent}

.kal-stopka{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--linia)}
.kal-stopka-info{margin:0}
.kal-stopka-info b{display:block;font-weight:600;font-size:.95em}
.kal-stopka-info span{display:block;color:var(--atrament-3);font-size:.82em;
  margin-top:.1rem}
.kal-akcje{display:flex;align-items:center;gap:var(--s2)}
.kal-wyczysc{border:0;background:transparent;cursor:pointer;padding:.4rem 0;
  font:inherit;font-size:.9em;color:var(--atrament-2);
  border-bottom:1px solid var(--linia-mocna);
  transition:color var(--dotyk) ease-out}
.kal-wyczysc:hover{color:var(--atrament)}

@media (max-width:34rem){
  .kal{right:auto;left:0;width:100%}
  .kal-dzien span{width:2.2rem;height:2.2rem}
}

/* Ciagniecie po siatce dni nie moze zaznaczac tekstu ani wlaczac natywnego
   przeciagania — inaczej gest wyboru zakresu konczy sie podswietlonymi
   cyframi zamiast wybranym terminem.                                      */
.kal-siatki{user-select:none;-webkit-user-select:none}
.kal-dzien{touch-action:manipulation}

/* Powod nizszej ceny — informacja, nie presja. D21 zakazuje odliczania
   i „ostatniej szansy”; to zdanie mowi, dlaczego jest taniej, i tyle. */
.panel-lastminute{margin:-.4rem 0 var(--s3);color:var(--drewno);font-size:.86em;
  display:flex;align-items:baseline;gap:.45rem}
.panel-lastminute::before{content:"";flex:0 0 auto;width:.42rem;height:.42rem;
  border-radius:50%;background:var(--drewno)}

/* ── FORMULARZ ZAPYTANIA ─────────────────────────────────────────────────────
   Dodany 31.08.2026 razem z trasą `/api/v1/public/enquiries`. Do tego dnia
   jedyną akcją kroku finalizacji był odnośnik `tel:` — gość, który nie chce
   dzwonić, nie miał jak zarezerwować.
   ───────────────────────────────────────────────────────────────────────── */
.krok-form-tyt{margin:1.1rem 0 .6rem;font-weight:600}
.krok-pola{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.krok-pola label{display:flex;flex-direction:column;gap:.3rem;font-size:.86em}
.krok-pola label.pelna{grid-column:1/-1}
.krok-pola span{color:var(--atrament-2);letter-spacing:.02em}
.krok-pola input,.krok-pola textarea{
  font:inherit;font-size:.95rem;padding:.55rem .7rem;border:1px solid var(--linia);
  border-radius:var(--r-mala);background:var(--papier);color:var(--atrament);
  /* 16 px na telefonie, inaczej iOS przybliża stronę przy wejściu w pole. */
  min-height:2.6rem}
.krok-pola textarea{resize:vertical;min-height:3.4rem}
.krok-pola input:focus-visible,.krok-pola textarea:focus-visible{
  outline:2px solid var(--morze);outline-offset:1px;border-color:var(--morze)}
.krok-blad{margin:.6rem 0 0;color:#9B2C2C;font-size:.9em}
.krok-udane{padding:1.1rem 0 .2rem}
.krok-udane-tyt{margin:0 0 .4rem;font-weight:600;font-size:1.05em}
.krok-udane-nr{margin:0 0 .6rem;font-size:.9em;color:var(--atrament-2)}
.krok-udane-nr b{font-family:var(--mono,ui-monospace,monospace);letter-spacing:.06em;color:var(--atrament)}
.krok-udane-opis{margin:0;font-size:.92em;color:var(--atrament-2)}
@media (max-width:30rem){ .krok-pola{grid-template-columns:1fr} }
@media (prefers-color-scheme:dark){ .krok-blad{color:#F2A6A6} }

/* ══ KASA ═════════════════════════════════════════════════════════════════
   Panel płatności w kroku finalizacji. Zbudowany z tych samych klas co reszta
   kroku (`krok-form-tyt`, `krok-akcje`, `krok-blad`), żeby nie powstał drugi
   język wizualny dla jednego ekranu — a przy płatności obcy wygląd kosztuje
   zaufanie dokładnie tam, gdzie jest najpotrzebniejsze.                     */
.krok-kasa{margin-top:var(--s3)}
.krok-kasa-pod{color:var(--atrament-3);font-size:.9em;margin:.15rem 0 var(--s3)}
/* Minimalna wysokość: formularz Stripe'a montuje się asynchronicznie, a bez
   zarezerwowanego miejsca panel „podskakuje" w chwili pojawienia się pól. */
.krok-kasa-pole{min-height:190px}
/* Drugi przycisk jest ALTERNATYWĄ, nie równorzędną akcją: płatność prowadzi,
   zapytanie zostaje dla tych, którzy nie chcą płacić kartą od razu. */
.przycisk-cichy{background:transparent;color:var(--morze);
  box-shadow:inset 0 0 0 1.5px var(--linia-mocna)}
.przycisk-cichy:hover{box-shadow:inset 0 0 0 1.5px var(--morze)}
.przycisk-wroc{background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:.2em}
.krok-zaplacono{margin-top:var(--s3)}

/* ── POWRÓT Z PŁATNOŚCI PRZEKIEROWUJĄCEJ (BLIK, Przelewy24, Google Pay) ───────
   Panel dziedziczy całą geometrię po `.krok`, więc wygląda jak reszta strony
   i nie wprowadza drugiego języka wizualnego. Dokładamy wyłącznie to, czego
   `.krok` nie ma, bo zakładał treść kroku rezerwacji: odstęp pod opisem
   i pasek stanu, który mówi wynik ZANIM ktoś przeczyta zdanie.

   Kolor paska niesie znaczenie, ale NIE JEST jedynym nośnikiem: tytuł mówi to
   samo słowami. Gość z daltonizmem albo z wyłączonymi kolorami czyta to samo. */
.kp-powrot .krok-udane-opis{margin:0 0 var(--s3);color:var(--atrament-2)}
.kp-powrot::before{content:"";display:block;height:3px;border-radius:2px;
  margin:0 0 var(--s3);background:var(--linia-mocna)}
.kp-powrot[data-stan="ok"]::before{background:var(--morze)}
.kp-powrot[data-stan="czeka"]::before{background:var(--drewno)}
.kp-powrot[data-stan="pad"]::before{background:#9B2C2C}