/* ==========================================================================
   Pokoje U Klipra — style
   Paleta: ciepłe drewno, len, zieleń oliwkowa. Mobile first.
   ========================================================================== */

:root{
  --krem:#fbf7f0;
  --len:#f3ece1;
  --piasek:#e8dcc8;
  --linia:#ddd0b9;
  --dab:#b07c4a;
  --dab-ciemny:#8f6238;
  --zielen:#3d4a3a;
  --zielen-jasna:#5d6f57;
  --szalwia:#8b9a80;
  --tekst:#3a3128;
  --szary:#7a6f62;
  --biel:#fffdf9;

  --r:14px;
  --r-mala:10px;
  --cien:0 1px 2px rgba(58,49,40,.05), 0 8px 28px -14px rgba(58,49,40,.28);
  --cien-mocny:0 24px 60px -28px rgba(58,49,40,.45);
  --wrap:1180px;
  --gora:64px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  background:var(--krem);
  color:var(--tekst);
  font:400 16px/1.65 Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{font-family:Spectral,Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.1rem,7vw,3.5rem);line-height:1.1}
h2{font-size:clamp(1.65rem,4.6vw,2.5rem);line-height:1.15}
h3{font-size:clamp(1.2rem,3vw,1.5rem);line-height:1.25}
p{margin:0 0 1rem}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.15rem}
.srodek{text-align:center;margin-top:2rem}

.omin{position:absolute;left:-9999px;top:0;background:var(--zielen);color:var(--krem);padding:.7rem 1.1rem;z-index:200}
.omin:focus{left:.5rem;top:.5rem}

:focus-visible{outline:2.5px solid var(--dab);outline-offset:2px;border-radius:4px}

.eyebrow{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dab);font-weight:600;margin:0 0 .55rem;
}
.kicker{
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--szary);font-weight:600;margin:0 0 1rem;
}
.lead{font-size:1.06rem;color:#4c4237;max-width:44ch}

/* ---------- przyciski ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:600 .95rem/1 Karla,sans-serif;
  padding:.92rem 1.5rem;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background .18s,color .18s,border-color .18s,transform .12s;
  min-height:46px;
}
.btn:active{transform:translateY(1px)}
.btn--glowny{background:var(--dab);color:#fff;border-color:var(--dab)}
.btn--glowny:hover{background:var(--dab-ciemny);border-color:var(--dab-ciemny)}
.btn--obrys{background:transparent;color:var(--zielen);border-color:var(--linia)}
.btn--obrys:hover{border-color:var(--zielen);background:rgba(61,74,58,.05)}
.btn--ciemny{background:var(--zielen);color:var(--len);border-color:var(--zielen)}
.btn--ciemny:hover{background:#2f3a2d}
.btn--jasny{background:var(--len);color:var(--zielen);border-color:var(--len)}
.btn--jasny:hover{background:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- nagłówek ---------- */
.top{
  /* Wyżej niż .zaslona (94): nagłówek ma własny kontekst układania,
     więc .nav w środku nie przebiłby przyciemnienia, gdyby było odwrotnie. */
  position:sticky;top:0;z-index:95;
  /* Без backdrop-filter! Элемент с ним становится containing block
     для вложенych position:fixed — меню .nav схlopywało się do wysokości nagłówka. */
  background:var(--krem);
  border-bottom:1px solid transparent;
  transition:border-color .2s,box-shadow .2s;
}
.top.przyklejony{border-bottom-color:var(--linia);box-shadow:0 6px 24px -20px rgba(58,49,40,.6)}
.top__in{
  max-width:var(--wrap);margin:0 auto;padding:.6rem 1.15rem;
  display:flex;align-items:center;gap:.8rem;min-height:var(--gora);
}
.marka{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--zielen);margin-right:auto}
.marka svg{width:34px;height:34px;flex:0 0 auto;color:var(--dab)}
.marka__nazwa{display:block;font-family:Spectral,serif;font-size:1.08rem;line-height:1.1;letter-spacing:.01em}
.marka small{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--szary)}

.top__prawo{display:flex;align-items:center;gap:.55rem}

.jezyki{display:flex;gap:2px;background:var(--len);border:1px solid var(--linia);border-radius:999px;padding:2px}
.jezyki button{
  border:0;background:transparent;color:var(--szary);cursor:pointer;
  font:600 .72rem/1 Karla,sans-serif;letter-spacing:.06em;
  padding:.5rem .58rem;border-radius:999px;min-width:36px;min-height:36px;
}
.jezyki button.akt{background:var(--zielen);color:var(--len)}

.burger{
  width:44px;height:44px;border:1px solid var(--linia);border-radius:999px;
  background:var(--len);cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;padding:0;
}
.burger span{display:block;width:17px;height:1.6px;background:var(--zielen);border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

.nav{
  /* Panel zaczyna się pod nagłówkiem, żeby burger (który zamienia się w krzyżyk)
     i przełącznik języka zostały widoczne i klikalne. */
  position:fixed;top:var(--gora);right:0;bottom:0;width:min(84vw,330px);
  background:var(--biel);border-left:1px solid var(--linia);
  box-shadow:-18px 0 40px -30px rgba(58,49,40,.6);
  padding:1rem 1.5rem 2rem;
  display:flex;flex-direction:column;gap:.2rem;
  transform:translateX(102%);transition:transform .26s ease;
  z-index:95;overflow-y:auto;
}
.nav.otwarte{transform:none}
.nav a{
  text-decoration:none;color:var(--tekst);font-size:1.05rem;font-weight:500;
  padding:.85rem .2rem;border-bottom:1px solid var(--len);
}
.nav a:hover{color:var(--dab)}
.nav__cta{margin-top:1.2rem;width:100%}

.zaslona{position:fixed;inset:0;height:100dvh;background:rgba(40,34,27,.42);opacity:0;pointer-events:none;transition:opacity .26s;z-index:94}
.zaslona.widoczna{opacity:1;pointer-events:auto}

@media (min-width:940px){
  .burger{display:none}
  .nav{
    position:static;transform:none;top:auto;bottom:auto;width:auto;background:none;
    border:0;box-shadow:none;padding:0;
    flex-direction:row;align-items:center;gap:1.35rem;overflow:visible;
  }
  .nav a{border:0;padding:.3rem 0;font-size:.92rem;font-weight:500;position:relative}
  .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--dab);transition:right .22s}
  .nav a:hover::after{right:0}
  .nav__cta{margin:0 0 0 .4rem;width:auto;padding:.7rem 1.3rem;min-height:42px}
  .top__prawo{order:3}
}

/* ---------- hero ---------- */
.hero{padding:2.2rem 0 2.6rem;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0 0 auto;height:70%;
  background:radial-gradient(120% 80% at 85% 0%,rgba(176,124,74,.10),transparent 60%);
  pointer-events:none;
}
.hero__siatka{display:grid;gap:2rem;position:relative}
.hero__akcje{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.7rem 0 1.5rem}
.hero__akcje .btn{flex:1 1 auto;min-width:180px}

.odznaki{display:flex;flex-wrap:wrap;gap:.7rem}
.odznaka{
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
  background:var(--biel);border:1px solid var(--linia);border-radius:999px;
  padding:.5rem .95rem;box-shadow:var(--cien);
}
.odznaka b{font-family:Spectral,serif;font-size:1.22rem;line-height:1;color:var(--zielen)}
.odznaka span{display:flex;flex-direction:column;line-height:1.15}
.odznaka s{text-decoration:none;color:var(--dab);font-size:.72rem;letter-spacing:.08em}
.odznaka em{font-style:normal;font-size:.72rem;color:var(--szary)}

.hero__foty{display:grid;grid-template-columns:1fr;gap:.8rem;position:relative}
.hero__fot{margin:0;overflow:hidden;border-radius:var(--r);box-shadow:var(--cien)}
.hero__fot img{width:100%;height:100%;object-fit:cover}
.hero__fot--duza img{aspect-ratio:4/3}
.hero__fot--mala{display:none}

@media (min-width:860px){
  .hero{padding:3.4rem 0 3.6rem}
  .hero__siatka{grid-template-columns:1fr 1.02fr;gap:3rem;align-items:center}
  .hero__foty{grid-template-columns:1fr;padding-bottom:3.4rem}
  .hero__fot--duza img{aspect-ratio:5/4}
  .hero__fot--mala{
    display:block;position:absolute;right:-.6rem;bottom:0;width:46%;
    border:5px solid var(--krem);border-radius:var(--r);
  }
  .hero__fot--mala img{aspect-ratio:4/3}
}

/* ---------- pasmo atutów ---------- */
.pasmo{background:var(--zielen);color:var(--len);padding:1.5rem 0}
.pasmo__siatka{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.pasmo__poz{display:flex;gap:.7rem;align-items:flex-start}
.pasmo__poz svg{width:24px;height:24px;flex:0 0 auto;color:var(--dab);margin-top:2px}
.pasmo__poz b{display:block;font-size:.92rem;font-weight:600;line-height:1.3}
.pasmo__poz span{display:block;font-size:.8rem;color:#c4cdba;line-height:1.35}
@media (min-width:860px){
  .pasmo{padding:1.9rem 0}
  .pasmo__siatka{grid-template-columns:repeat(4,1fr);gap:2rem}
}

/* ---------- sekcje ---------- */
.sekcja{padding:3.4rem 0;scroll-margin-top:calc(var(--gora) + 8px)}
#hero{scroll-margin-top:0}
@media (min-width:860px){.sekcja{padding:5rem 0}}
.sekcja--kremowa{background:var(--len)}
.sekcja--zielona{background:var(--piasek)}
.sekcja--ciemna{background:var(--zielen);color:var(--len)}
.sekcja--ciemna h2{color:var(--biel)}
.sekcja--ciemna .eyebrow{color:var(--dab)}

.naglowek{display:grid;gap:1.2rem;margin-bottom:2.2rem}
.naglowek__lead{margin:.7rem 0 0;color:var(--szary);max-width:52ch}
.naglowek__btn{display:none}
@media (min-width:860px){
  .naglowek{grid-template-columns:1fr auto;align-items:end;gap:2rem}
  .naglowek__btn{display:inline-flex}
}

/* ---------- o obiekcie ---------- */
.duet{display:grid;gap:2.2rem}
.duet__tekst p{color:#4c4237}
.duet__tekst h2{margin:0 0 1.1rem}
.adres-box{
  margin-top:1.6rem;padding:1.1rem 1.2rem;background:var(--len);
  border-left:3px solid var(--dab);border-radius:0 var(--r-mala) var(--r-mala) 0;
}
.adres-box b{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--szary);margin-bottom:.3rem}
.adres-box span{font-size:1rem;line-height:1.5}

.kolaz{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.kolaz figure{margin:0;overflow:hidden;border-radius:var(--r-mala);box-shadow:var(--cien)}
.kolaz figure img{width:100%;aspect-ratio:1/1;object-fit:cover}
.kolaz figure:first-child{grid-column:1/-1}
.kolaz figure:first-child img{aspect-ratio:16/10}
@media (min-width:860px){
  .duet{grid-template-columns:1.05fr .95fr;gap:3.4rem;align-items:center}
  .kolaz{gap:.9rem}
}

/* ---------- obiekty (naprzemienne rzędy) ---------- */
.obiekty{display:flex;flex-direction:column;gap:2.4rem}
.obiekt{
  background:var(--biel);border:1px solid var(--linia);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--cien);
  display:grid;grid-template-columns:minmax(0,1fr);
}
.obiekt__tresc{padding:1.4rem 1.25rem 1.35rem}
.obiekt__gora{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.obiekt__typ{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dab);font-weight:600}
.obiekt h3{margin:.35rem 0 .6rem}
.obiekt__opis{color:#4c4237;font-size:.98rem;margin:0 0 1rem}
.znaczniki{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.znacznik{
  font-size:.76rem;color:var(--szary);background:var(--len);
  border:1px solid var(--linia);border-radius:999px;padding:.3rem .7rem;
}
.obiekt__dol{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--len);padding-top:1.05rem;
}
.cena b{display:block;font-family:Spectral,serif;font-size:1.6rem;line-height:1.1;color:var(--zielen)}
.cena span{display:block;font-size:.78rem;color:var(--szary)}
.obiekt__dol .btn{flex:0 0 auto}

@media (min-width:860px){
  .obiekt{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:stretch}
  .obiekt:nth-child(even) .suwak{order:2}
  .obiekt__tresc{padding:2.4rem 2.4rem;min-height:400px;display:flex;flex-direction:column;justify-content:center}
}

/* suwak zdjęć */
.suwak{position:relative;background:var(--len);min-height:230px;min-width:0;overflow:hidden}
.suwak__tasma{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;height:100%;
  width:100%;max-width:100%;
}
.suwak__tasma::-webkit-scrollbar{display:none}
.suwak__tasma button{
  flex:0 0 100%;scroll-snap-align:start;border:0;padding:0;background:none;cursor:zoom-in;
}
.suwak__tasma img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
@media (min-width:860px){
  .suwak{min-height:340px}
  .suwak__tasma{position:absolute;inset:0;height:auto}
  .suwak__tasma button{height:100%}
  .suwak__tasma img{aspect-ratio:auto;height:100%;min-height:0}
}
.suwak__typ{
  position:absolute;top:.75rem;left:.75rem;z-index:2;
  background:rgba(251,247,240,.94);color:var(--zielen);
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  padding:.32rem .66rem;border-radius:999px;
}
.suwak__licznik{
  position:absolute;bottom:.75rem;right:.75rem;z-index:2;
  background:rgba(40,34,27,.62);color:#fff;font-size:.72rem;
  padding:.24rem .6rem;border-radius:999px;
}
.suwak__strzalka{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(251,247,240,.92);color:var(--zielen);
  font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--cien);transition:opacity .18s;
}
.suwak__strzalka--prev{left:.6rem}
.suwak__strzalka--next{right:.6rem}
.suwak__strzalka[disabled]{opacity:0;pointer-events:none}
/* Na telefonie i tablecie zdjęcia przewija się palcem — strzałki tylko dla myszy. */
@media (pointer:coarse){.suwak__strzalka{display:none}}
.suwak__kropki{position:absolute;bottom:.85rem;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:2}
.suwak__kropki i{width:6px;height:6px;border-radius:50%;background:rgba(251,247,240,.6)}
.suwak__kropki i.akt{background:var(--krem);width:16px;border-radius:999px}

/* obiekt bez zdjęć */
.suwak--pusty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;text-align:center;padding:2.4rem 1.5rem;color:var(--szary);
  background:repeating-linear-gradient(135deg,var(--len),var(--len) 12px,#efe7da 12px,#efe7da 24px);
}
.suwak--pusty svg{width:38px;height:38px;color:var(--linia)}
.suwak--pusty b{font-size:.88rem;color:var(--tekst)}
.suwak--pusty span{font-size:.82rem;max-width:32ch;line-height:1.5}

/* ---------- udogodnienia ---------- */
.udog{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.6rem}
.udog li{
  display:flex;align-items:center;gap:.7rem;
  background:var(--biel);border-radius:var(--r-mala);padding:.85rem 1rem;
  font-size:.93rem;box-shadow:0 1px 2px rgba(58,49,40,.05);
}
.udog svg{width:20px;height:20px;flex:0 0 auto;color:var(--dab)}
@media (min-width:620px){.udog{grid-template-columns:1fr 1fr}}
@media (min-width:940px){.udog{grid-template-columns:repeat(3,1fr);gap:.7rem}}

/* ---------- galeria ---------- */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
.galeria button{
  border:0;padding:0;background:var(--len);cursor:zoom-in;
  overflow:hidden;border-radius:var(--r-mala);
}
.galeria img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .4s}
.galeria button:hover img{transform:scale(1.05)}
@media (min-width:620px){.galeria{grid-template-columns:repeat(3,1fr);gap:.7rem}}
@media (min-width:940px){.galeria{grid-template-columns:repeat(4,1fr)}}

/* ---------- opinie ---------- */
.ocena{
  background:var(--biel);border:1px solid var(--linia);border-radius:var(--r);
  padding:1.1rem 1.3rem;text-align:center;box-shadow:var(--cien);
}
.ocena__gwiazdki{color:var(--dab);letter-spacing:.14em;font-size:1rem}
.ocena__liczba{font-size:.92rem;margin:.25rem 0 .45rem}
.ocena__liczba b{font-family:Spectral,serif;font-size:1.5rem;color:var(--zielen);vertical-align:-2px}
.ocena__link{display:inline-block;padding:.5rem .2rem;font-size:.85rem;color:var(--dab);text-decoration:none;font-weight:600}
.ocena__link:hover{text-decoration:underline}

.opinie{display:grid;gap:.9rem}
@media (min-width:700px){.opinie{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.opinie{grid-template-columns:repeat(3,1fr)}}
.opinia{
  margin:0;background:var(--biel);border:1px solid var(--linia);
  border-radius:var(--r);padding:1.25rem 1.3rem;display:flex;flex-direction:column;
}
.opinia.ukryta{display:none}
.opinia__gwiazdki{color:var(--dab);letter-spacing:.12em;font-size:.85rem;margin-bottom:.6rem}
.opinia__tekst{
  margin:0 0 1rem;font-family:Spectral,serif;font-size:1.02rem;line-height:1.6;
  color:#453b30;flex:1;
}
.opinia__stopka{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--szary)}
.opinia__inicjal{
  width:30px;height:30px;border-radius:50%;background:var(--piasek);color:var(--zielen);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;flex:0 0 auto;
}
.opinia__kiedy{margin-left:auto;font-size:.76rem;color:#9a8f80}

/* ---------- dojazd ---------- */
.mapa-blok{display:grid;gap:1.2rem}
.mapa-blok__mapa{border-radius:var(--r);overflow:hidden;border:1px solid var(--linia);box-shadow:var(--cien);background:var(--len)}
.mapa{width:100%;height:320px;border:0;display:block}
@media (min-width:860px){
  .mapa-blok{grid-template-columns:1.15fr .85fr;gap:1.6rem;align-items:start}
  .mapa{height:470px}
}
.lokal{background:var(--biel);border:1px solid var(--linia);border-radius:var(--r);padding:1.2rem 1.3rem}
.lokal b{display:block;font-family:Spectral,serif;font-size:1.2rem;margin-bottom:.35rem}
.lokal span{display:block;color:var(--szary);font-size:.95rem;line-height:1.55}
.lokal__akcje{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.lokal__akcje .btn{flex:1 1 auto;padding:.75rem 1rem;font-size:.88rem;min-height:42px}

.dojazd-lista{list-style:none;margin:1.2rem 0 0;padding:0}
.dojazd-lista li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--linia);font-size:.92rem;
}
.dojazd-lista li:last-child{border-bottom:0}
.dojazd-lista b{font-weight:600;flex:0 0 auto}
.dojazd-lista span{color:var(--szary);text-align:right}

.zasady{
  list-style:none;margin:2.4rem 0 0;padding:0;
  display:grid;gap:.7rem;
}
@media (min-width:700px){.zasady{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.zasady{grid-template-columns:repeat(4,1fr)}}
.zasady li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--szary)}
.zasady svg{width:17px;height:17px;flex:0 0 auto;color:var(--szalwia);margin-top:3px}

/* ---------- kontakt ---------- */
.kontakt{display:grid;gap:1.3rem;margin:2rem 0 2.4rem}
@media (min-width:620px){.kontakt{grid-template-columns:1fr 1fr}}
@media (min-width:940px){.kontakt{grid-template-columns:repeat(4,1fr)}}
.kontakt b{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--szalwia);margin-bottom:.35rem;font-weight:600}
.kontakt a,.kontakt span{display:inline-block;color:var(--len);text-decoration:none;font-size:1.02rem;line-height:1.5}
.kontakt a{padding:.3rem 0}
.kontakt a:hover{color:#fff;text-decoration:underline}

/* ---------- stopka ---------- */
.stopka{background:#31392e;color:#a9b3a0;padding:1.5rem 0;font-size:.85rem}
.stopka__in{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between}

/* ---------- pasek mobilny ---------- */
.pasek{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  background:var(--krem);
  border-top:1px solid var(--linia);
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .25s;
}
.pasek.widoczny{transform:none}
.pasek span{font-size:.85rem;color:var(--szary);line-height:1.2}
.pasek b{font-family:Spectral,serif;font-size:1.25rem;color:var(--zielen)}
.pasek em{font-style:normal}
.pasek .btn{padding:.75rem 1.4rem;min-height:44px}
@media (min-width:940px){.pasek{display:none}}
body.ma-pasek{padding-bottom:74px}
@media (min-width:940px){body.ma-pasek{padding-bottom:0}}

/* ---------- modal rezerwacji ---------- */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal__tlo{position:absolute;inset:0;background:rgba(40,34,27,.55)}
.modal__okno{
  position:relative;background:var(--krem);width:100%;max-width:680px;
  max-height:96vh;display:flex;flex-direction:column;overflow:hidden;
  border-radius:18px 18px 0 0;box-shadow:var(--cien-mocny);
  animation:wjazd .26s ease;
}
@keyframes wjazd{from{transform:translateY(28px);opacity:.6}to{transform:none;opacity:1}}
@media (min-width:700px){
  .modal{align-items:center;padding:1.5rem}
  .modal__okno{border-radius:var(--r);max-height:90vh}
}
.modal__gora{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.2rem 1.25rem 1rem;border-bottom:1px solid var(--linia);
  flex:0 0 auto;
}
.modal__gora h2{font-size:1.35rem}
.modal__gora p{margin:.2rem 0 0;font-size:.84rem;color:var(--szary)}
.modal__zamknij{
  border:0;background:var(--len);color:var(--tekst);width:40px;height:40px;
  border-radius:50%;font-size:1.5rem;line-height:1;cursor:pointer;flex:0 0 auto;
}
.modal__tresc{padding:1.15rem 1.25rem;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0;overscroll-behavior:contain}
.modal__dol{
  border-top:1px solid var(--linia);background:var(--biel);
  padding:.9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:1rem;justify-content:space-between;flex-wrap:wrap;
  border-radius:0 0 var(--r) var(--r);flex:0 0 auto;
}
.modal__suma{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.modal__suma span{font-size:.8rem;color:var(--szary)}
.modal__suma b{font-family:Spectral,serif;font-size:1.42rem;color:var(--zielen)}
.modal__dol .btn{flex:1 1 auto;min-width:170px}

.pola-2{display:grid;gap:.85rem}
@media (min-width:520px){.pola-2{grid-template-columns:1fr 1fr}}
.pole{margin-bottom:.85rem}
.pole label{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--szary);margin-bottom:.35rem;font-weight:600}
.pole input,.pole select,.pole textarea{
  width:100%;padding:.78rem .85rem;font:inherit;font-size:1rem;
  border:1px solid var(--linia);border-radius:var(--r-mala);
  background:var(--biel);color:var(--tekst);
}
.pole textarea{resize:vertical;min-height:76px}
.pole select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6f62' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:18px;
  padding-right:2.4rem;
}
.pulapka{position:absolute;left:-9999px}

/* kalendarz */
.kal{margin:.4rem 0 .2rem}
.kal__ster{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}
.kal__ster button{
  width:40px;height:40px;border-radius:999px;border:1px solid var(--linia);
  background:var(--biel);cursor:pointer;font-size:1rem;color:var(--zielen);
}
.kal__ster button[disabled]{opacity:.35;cursor:not-allowed}
.kal__ster strong{font-family:Spectral,serif;font-size:1rem;font-weight:500;text-align:center;flex:1}
.kal__miesiace{display:grid;gap:1.2rem}
@media (min-width:620px){.kal__miesiace{grid-template-columns:1fr 1fr}}
.kal__m h4{margin:0 0 .5rem;font:600 .8rem/1 Karla,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--szary);text-align:center}
.kal__naglowki,.kal__dni{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.kal__naglowki span{text-align:center;font-size:.66rem;color:#9a8f80;padding:.25rem 0;letter-spacing:.04em}
.dzien{
  border:0;background:var(--biel);border-radius:7px;padding:0;
  aspect-ratio:1/1;font:500 .88rem/1 Karla,sans-serif;color:var(--tekst);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  min-height:38px;transition:background .12s;
}
.dzien:hover:not([disabled]){background:var(--piasek)}
.dzien.pusty{background:none;pointer-events:none}
.dzien[disabled]{color:#c3b8a6;cursor:not-allowed;background:transparent}
.dzien.zajety{background:#efe7da;color:#b5a894;text-decoration:line-through}
.dzien.zakres{background:var(--piasek);border-radius:0}
.dzien.wybrany{background:var(--zielen);color:var(--krem);font-weight:600}
.legenda{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.9rem;font-size:.76rem;color:var(--szary);align-items:center}
.legenda span{display:flex;align-items:center;gap:.35rem}
.legenda i{width:13px;height:13px;border-radius:4px;display:block}
.pr-wybrany{background:var(--zielen)}
.pr-zakres{background:var(--piasek)}
.pr-zajety{background:#efe7da;border:1px solid var(--linia)}

.rozdzielacz{border:0;border-top:1px solid var(--linia);margin:1.3rem 0}
.podsum-info{font-size:.83rem;color:var(--szary);margin:.4rem 0 0}
.komunikat{padding:.85rem 1rem;border-radius:var(--r-mala);font-size:.92rem;margin-top:.9rem;line-height:1.5}
.komunikat--blad{background:#f8e6df;color:#8c3b25;border:1px solid #e8c9bd}
.komunikat--ok{background:#e2eddc;color:#2f5a2b;border:1px solid #c6dbbd}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:150;background:rgba(30,26,21,.94);
  display:none;align-items:center;justify-content:center;
}
.lightbox.otwarty{display:flex}
.lightbox img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:6px}
.lb-zamknij,.lb-prev,.lb-next{
  position:absolute;border:0;background:rgba(251,247,240,.14);color:#fff;
  width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.lb-zamknij{top:1rem;right:1rem;font-size:1.7rem}
.lb-prev{left:.6rem;top:50%;transform:translateY(-50%)}
.lb-next{right:.6rem;top:50%;transform:translateY(-50%)}
.lb-licznik{position:absolute;bottom:1.1rem;left:0;right:0;text-align:center;color:#e6ddcd;font-size:.85rem}
@media (min-width:700px){.lb-prev{left:1.4rem}.lb-next{right:1.4rem}}