/* Komancza Stay — system wizualny */

:root {
  --ink: #1e1e1e;         /* Deep Onyx — ciemne tło i tekst */
  --ink-2: #4a4a4a;
  --ink-3: #767676;
  --paper: #f5f5f5;       /* Pure Mist — jasne tło */
  --paper-2: #ececec;
  --white: #fff;
  --line: rgba(30, 30, 30, 0.12);
  --line-soft: rgba(30, 30, 30, 0.07);
  --accent: #c06226;      /* Ruddy Brown — buttony (stan domyślny) */
  --accent-deep: #984619; /* Saddle Brown — hover buttonów */
  --accent-soft: #f4e6dc;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;

  --maxw: none;           /* treść pełną szerokością — o marginesach decyduje wyłącznie --gut */
  --gut: 72px;            /* stały odstęp od lewej i prawej krawędzi w całym projekcie */
  --r: 6px;
  --sek: 130px;           /* pion: odstęp treści od krawędzi sekcji — po każdej stronie granicy tła,
                             czyli 260 px między treścią jednego bloku a drugiego */
  --shadow: 0 1px 2px rgba(30, 30, 30, 0.04), 0 8px 24px rgba(30, 30, 30, 0.06);
  --shadow-lg: 0 2px 4px rgba(30, 30, 30, 0.04), 0 24px 60px rgba(30, 30, 30, 0.14);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; }
h1 { font-size: clamp(40px, 5.4vw, 72px); }
h2 { font-size: clamp(30px, 3.4vw, 44px); }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
p { font-size: 16px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: var(--sek) 0; }
/* wariant historyczny — dziś taki sam odstęp, żeby rytm strony był równy wszędzie */
.section--tight { padding: var(--sek) 0; }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: rgba(255, 255, 255, 0.72); }
.section--ink h2, .section--ink h3 { color: #fff; }

/* ——— Eyebrow / nagłówki sekcji ——— */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--accent); display: block; }
.section--ink .eyebrow { color: #d99b74; }
.section--ink .eyebrow::before { background: #d99b74; }
.lead { font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 60ch; }
.section--ink .lead { color: rgba(255, 255, 255, 0.72); }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 52px; flex-wrap: wrap; }

/* ——— Przyciski ——— */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  font-size: 16px; font-weight: 600; font-family: var(--sans);
  /* CTA są kwadratowe — żadnych zaokrągleń na buttonach (reguła projektu) */
  border: 1px solid transparent; border-radius: 0;
  cursor: pointer; transition: all 0.25s var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--light { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.35); backdrop-filter: blur(6px); }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn--outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--wide { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* ——— Nawigacja ——— */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gut);
  transition: background 0.35s var(--ease), padding 0.35s var(--ease), box-shadow 0.35s var(--ease),
              transform 0.4s var(--ease);
}
/* Zwijanie przy scrollu w dół — +1px, żeby cień nie wystawał zza krawędzi */
.nav--hidden { transform: translateY(calc(-100% - 1px)); }
.nav--over { color: #fff; }
.nav--solid { background: rgba(245, 245, 245, 0.94); backdrop-filter: saturate(160%) blur(14px); padding: 20px var(--gut); box-shadow: 0 1px 0 var(--line-soft); color: var(--ink); }
.nav--locked.nav--solid { background: #fff; }
.nav__logo { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.nav__logo b { font-weight: 400; }
.nav__logo i { font-style: normal; width: 7px; height: 7px; background: var(--accent); display: block; }
/* logo graficzne (standalone Willi Komanczy) — jasny wariant na przezroczystym
   navie nad zdjęciem hero, ciemny po scrollu i w menu mobilnym */
.nav__logo img { height: 46px; width: auto; display: block; }
.foot__logo img { height: 60px; width: auto; display: block; }
/* fraktura Aparthause jest szeroka — przy 46px wychodzil ogromny napis;
   logo apartu idzie mniejsze (18.08, prosba klientki), willa bez zmian */
.nav__logo img[src*="aparthause"] { height: 32px; }
.foot__logo img[src*="aparthause"] { height: 42px; }
.nav__logo .logo-jasne { display: none; }
.nav--over .nav__logo .logo-jasne { display: block; }
.nav--over .nav__logo .logo-ciemne { display: none; }
/* mobile: szerokie logo (fraktura Aparthause) nachodziło na treść — zmniejszamy */
@media (max-width: 760px) {
  .nav__logo img { height: 30px; }
  .nav__logo img[src*="aparthause"] { height: 24px; }
  .foot__logo img { height: 44px; }
}
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  padding: 9px 15px; font-size: 16px; font-weight: 500; border-radius: var(--r);
  position: relative; transition: all 0.2s var(--ease);
}
.nav__links a:hover { background: rgba(128, 128, 128, 0.1); }
.nav__links a.is-active::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 3px; height: 1.5px; background: var(--accent);
}
.nav__cta { display: flex; align-items: center; gap: 14px; }
.nav__tel { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.nav__tel svg { width: 16px; height: 16px; flex: none; }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; color: inherit; }
.nav__burger svg { width: 26px; height: 26px; }

.drawer {
  position: fixed; inset: 0; z-index: 950; background: var(--paper);
  transform: translateX(100%); transition: transform 0.4s var(--ease);
  display: flex; flex-direction: column; padding: 28px var(--gut); overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.drawer__close { background: none; border: 0; font-size: 30px; cursor: pointer; line-height: 1; color: var(--ink); }
.drawer a { font-family: var(--serif); font-size: 30px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); display: block; color: var(--ink); }
/* `.drawer a` jest bardziej szczegółowe niż `.btn`, więc zjadało padding, kolor
   i krój przycisku — stąd czarny napis wciśnięty w lewą krawędź. Przywracamy. */
.drawer .btn {
  margin-top: 32px; padding: 15px 28px; justify-content: center;
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  border-bottom: 1px solid transparent;
}
.drawer .btn--primary { color: #fff; border-color: var(--accent); }

/* ——— Hero ——— */
.hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero--short { min-height: 62vh; }

/* ——— Hero podstrony: tekst nad zdjęciem (rozdzielone) ——— */
.hero-split { background: var(--paper); }
.hero-split__text { padding-top: 152px; padding-bottom: 60px; }
.hero-split__text h1 { margin-top: 4px; max-width: 18ch; }
.hero-split__sub { font-size: 20px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; margin-top: 22px; }
.hero-split__media { width: 100%; height: clamp(340px, 44vw, 640px); }
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .hero-split__text { padding-top: 116px; padding-bottom: 40px; }
  .hero-split__media { height: clamp(240px, 58vw, 380px); }
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: heroZoom 14s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.15) 35%, rgba(10, 10, 10, 0.82) 100%);
}
.hero__inner { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) 76px; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero .eyebrow { color: #e3b795; }
.hero .eyebrow::before { background: #e3b795; }
.hero__sub { font-size: 20px; color: rgba(255, 255, 255, 0.82); max-width: 56ch; margin-top: 22px; }
.hero__cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero__scroll { position: absolute; right: var(--gut); bottom: 76px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); display: flex; align-items: center; gap: 10px; }
.hero__scroll::after { content: ""; width: 40px; height: 1px; background: rgba(255, 255, 255, 0.4); }

/* ——— Hero główny: slajdy, wyśrodkowanie, pasek-slider, belka rezerwacji ——— */
.hero__slides { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s var(--ease); }
.hero__slide.is-active { opacity: 1; animation: heroZoom 9s var(--ease) forwards; }
.hero__slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 30, 30, 0.5) 0%, rgba(30, 30, 30, 0.22) 34%, rgba(30, 30, 30, 0.74) 100%); }
/* mobile: tekst zajmuje większą część kadru, a jasne zdjęcia (fasady, niebo)
   zjadały biały tekst — gradient musi być wyraźnie ciemniejszy */
@media (max-width: 760px) {
  .hero__slides::after { background: linear-gradient(180deg, rgba(30, 30, 30, 0.58) 0%, rgba(30, 30, 30, 0.44) 30%, rgba(30, 30, 30, 0.86) 100%); }
}

/* Hero sięga do samej góry — przezroczyste menu leży na zdjęciu, nie na białym pasku */
.hero-frame { background: #fff; }
.hero--home { min-height: 100vh; min-height: 100svh; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
/* hero strony obiektu — pełny ekran, tekst dołem po lewej */
.hero--obiekt { min-height: 100vh; min-height: 100svh; }
.hero--home .hero__inner { max-width: 960px; padding: 0 var(--gut) 150px; }
.hero--home .eyebrow { justify-content: center; }
.hero--home h1 { max-width: 20ch; margin: 0 auto; }
.hero--home .hero__sub { margin-left: auto; margin-right: auto; }
.hero--home .hero__cta { justify-content: center; }

.hero__book { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; background: rgba(30, 30, 30, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.hero__book-cell { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 16px 26px; border-right: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; text-align: left; }
.hero__book-cell > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.hero__book-cell select, .hero__book-cell input { background: none; border: 0; color: #fff; font-family: var(--serif); font-size: 16px; padding: 0; outline: none; cursor: pointer; width: 100%; }
.hero__book-cell select option { color: var(--ink); }
.hero__book-cell input[type=date] { color-scheme: dark; accent-color: var(--accent); }

/* ——— Własny kalendarz przyjazdu (hcal) ——— */
.hcal { position: relative; }
.hcal__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; padding: 0; margin: 0; color: #fff; font-family: var(--serif); font-size: 16px; text-align: left; cursor: pointer; }
.hcal__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcal__val.is-empty { color: rgba(255, 255, 255, 0.55); }
.hcal__btn svg { width: 15px; height: 15px; flex: none; opacity: 0.7; transition: transform 0.25s var(--ease); }
.hcal.is-open .hcal__btn svg { transform: rotate(180deg); }
.hcal__pop { position: absolute; bottom: calc(100% + 14px); left: 0; width: 306px; padding: 16px; background: #262626; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; z-index: 30; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.hcal.is-open .hcal__pop { opacity: 1; visibility: visible; transform: translateY(0); }
.hcal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hcal__title { color: #fff; font-family: var(--serif); font-size: 16px; text-transform: capitalize; }
.hcal__nav { display: flex; gap: 4px; }
.hcal__arrow { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 7px; color: #fff; cursor: pointer; transition: background 0.15s var(--ease); }
.hcal__arrow:hover { background: rgba(255, 255, 255, 0.14); }
.hcal__arrow svg { width: 16px; height: 16px; }
.hcal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 6px; }
.hcal__dow span { text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); padding: 4px 0; }
.hcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hcal__day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 7px; color: rgba(255, 255, 255, 0.85); font-family: var(--serif); font-size: 16px; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.hcal__day:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.hcal__day.is-out { color: rgba(255, 255, 255, 0.28); }
.hcal__day.is-today { box-shadow: inset 0 0 0 1px rgba(180, 99, 58, 0.65); }
.hcal__day.is-sel { background: var(--accent); color: #fff; }
.hcal__day.is-sel:hover { background: var(--accent-deep); }
.hcal__day:disabled { color: rgba(255, 255, 255, 0.18); cursor: default; }
.hcal__day:disabled:hover { background: none; color: rgba(255, 255, 255, 0.18); }
.hcal__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.hcal__link { background: none; border: 0; color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; padding: 0; transition: opacity 0.15s var(--ease); }
.hcal__link:hover { opacity: 0.7; }
.hero__book-btn { flex: 0 0 auto; padding: 0 46px; background: var(--accent); color: #fff; border: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background 0.25s var(--ease); }
.hero__book-btn:hover { background: var(--accent-deep); }
.hero__book-btn svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.hero__book-btn:hover svg { transform: translateX(4px); }

.hsel { position: relative; }
.hsel__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; padding: 0; margin: 0; color: #fff; font-family: var(--serif); font-size: 16px; text-align: left; cursor: pointer; }
.hsel__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsel__btn svg { width: 15px; height: 15px; flex: none; opacity: 0.7; transition: transform 0.25s var(--ease); }
.hsel.is-open .hsel__btn svg { transform: rotate(180deg); }
.hsel__list { position: absolute; bottom: calc(100% + 14px); left: 0; min-width: 100%; margin: 0; padding: 6px; list-style: none; background: #262626; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; z-index: 30; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s; }
.hsel.is-open .hsel__list { opacity: 1; visibility: visible; transform: translateY(0); }
.hsel__opt { font-family: var(--serif); font-size: 16px; color: rgba(255, 255, 255, 0.82); padding: 10px 16px; border-radius: 5px; white-space: nowrap; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.hsel__opt:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.hsel__opt.is-sel { color: #fff; background: rgba(180, 99, 58, 0.28); }

@media (max-width: 860px) {
  /* Górny padding musi odsunąć treść spod przyklejonego menu: hero centruje
     zawartość w pełnej wysokości ekranu, więc bez niego dolny padding wypycha
     nagłówek w górę, prosto pod logo i przycisk. */
  .hero--home .hero__inner { padding-top: 116px; padding-bottom: 210px; }
  .hero__book { flex-wrap: wrap; }
  /* po zawinięciu same pionowe kreski nie wystarczą — wiersze potrzebują poziomych,
     inaczej pola zlewają się w jeden blok i wchodzą prosto w pomarańczowy przycisk */
  .hero__book-cell { flex: 1 1 50%; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .hero__book-cell:nth-child(2) { border-right: 0; }
  .hero__book-btn { flex: 1 1 100%; padding: 16px; justify-content: center; }
}
@media (max-width: 560px) {
  /* jednakowa szerokość obu CTA — inaczej wyglądają jak przypadkowo złamane */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .hero--home h1 { max-width: none; }
  .hero__sub { font-size: 18px; }
}

/* ——— Wybór obiektu (rozdroże) ——— */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.split__card { position: relative; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; color: #fff; border-radius: var(--r); }
.split__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.split__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0.15), rgba(10, 10, 10, 0.88)); }
.split__card:hover img { transform: scale(1.05); }
.split__body { position: relative; z-index: 2; padding: 40px; width: 100%; }
.split__body h3 { color: #fff; font-size: 36px; margin-bottom: 6px; }
.split__meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 18px; }
.split__body p { color: rgba(255, 255, 255, 0.8); margin-bottom: 24px; max-width: 44ch; font-size: 16px; }
.split__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.split__price { font-size: 16px; color: rgba(255, 255, 255, 0.72); }
.split__price b { font-family: var(--serif); font-size: 26px; color: #fff; display: block; }

/* ——— Atuty ——— */
/* bez kafelków i kresek — same ikony, nagłówki i opisy rozdzielone odstępem */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(40px, 5vw, 88px); row-gap: clamp(36px, 4vw, 60px); }
.atut { background: none; padding: 0; }
.atut__n { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 20px; }
.atut__ico { color: var(--accent); margin-bottom: 18px; }
.atut__ico svg { width: 34px; height: 34px; display: block; stroke-linecap: round; stroke-linejoin: round; }
/* ikona + numer w jednym rzędzie nad tytułem */
.atut__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; max-width: 38ch; }
.atut__top .atut__ico, .atut__top .atut__n { margin-bottom: 0; }
.atut__top .atut__n { color: var(--ink-3); }

/* atuty — układ lista 2-kol + zdjęcie */
.atuts { display: block; }
.atuts__grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(40px, 5vw, 88px); row-gap: clamp(36px, 4vw, 60px); }
.atut-card__ico { color: var(--accent); display: flex; margin-bottom: 18px; }
.atut-card__ico svg { width: 30px; height: 30px; display: block; }
.atut-card__t { font-size: 21px; font-weight: 400; margin: 0 0 10px; }
.atut-card__d { font-size: 16px; line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 36ch; }
@media (max-width: 900px) { .atuts__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .atuts__grid { grid-template-columns: 1fr; } }

/* ——— moduł edytorski (feature) ——— */
.feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 88vh; background: var(--paper); }

/* stos: kolejne moduły przyklejają się do góry okna, a następny nasuwa się na poprzedni.
   Sekcja pod stosem musi mieć własne tło (.section--solid), inaczej prześwituje przyklejony blok. */
.stack { position: relative; }
.stack .feature { position: sticky; top: 0; min-height: 100vh; }
.section--solid { position: relative; z-index: 2; background: var(--paper); }
@media (max-width: 860px) {
  .stack .feature { position: static; min-height: 0; }
}
.feature__text { display: flex; align-items: center; justify-content: center; padding: 72px clamp(24px, 5vw, 92px); }
.feature__inner { max-width: 460px; text-align: center; }
.feature__inner .eyebrow { justify-content: center; }
.feature__title { font-family: var(--serif); font-size: clamp(34px, 4vw, 54px); font-weight: 500; color: var(--accent); line-height: 1.05; margin-bottom: 44px; }
.feature__thumb { width: 210px; margin: 0 auto 34px; }
.feature__thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.feature__lead { font-size: 16px; line-height: 1.72; color: var(--ink-2); margin-bottom: 30px; }
.feature__link { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent); border-bottom: 1.5px solid var(--accent); padding-bottom: 3px; display: inline-block; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.feature__link:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

.feature__media { position: relative; overflow: hidden; min-height: 60vh; background: var(--ink); --par-zapas: 9%; }
/* warstwa wyższa niż kadr — parallax (app.js) przesuwa ją w pionie i nie odsłania krawędzi */
.feature__track { position: absolute; left: 0; right: 0; top: calc(var(--par-zapas) * -1); height: calc(100% + var(--par-zapas) * 2); will-change: transform; }
.feature__track img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s var(--ease); }
.feature__track img.is-active { opacity: 1; }
.feature__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 54px; height: 54px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; opacity: 0.85; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55)); transition: opacity 0.2s var(--ease); }
.feature__arrow:hover { opacity: 1; }
.feature__arrow svg { width: 30px; height: 30px; }
.feature__arrow--prev { left: 6px; }
.feature__arrow--next { right: 6px; }
.feature__dots { position: absolute; bottom: 20px; left: 0; right: 0; z-index: 3; display: flex; gap: 9px; justify-content: center; }
.feature__dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, 0.5); transition: background 0.25s var(--ease), transform 0.25s var(--ease); }
.feature__dot.is-active { background: #fff; transform: scale(1.25); }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; min-height: 0; }
  .feature__media { order: -1; min-height: 62vh; }
  .feature__text { padding: 56px 24px; }
}
/* ——— moduł „Nasz obiekt" (showcase): zdjęcie + biały panel z checklistą i liczbami ——— */
.showcase {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center; background: var(--paper);
  padding: var(--sek) var(--gut);
}
.showcase__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--paper-2); }
.showcase__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase__panel {
  position: relative; z-index: 2; margin-left: clamp(-96px, -5vw, -40px);
  background: var(--white); box-shadow: var(--shadow-lg);
  padding: clamp(36px, 4vw, 64px) clamp(28px, 4.5vw, 72px);
}
.showcase__h { font-size: clamp(28px, 3vw, 42px); line-height: 1.14; margin-bottom: 18px; }
.showcase__lead { font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 46ch; }
.showcase__cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 3vw, 48px); align-items: start; margin: 34px 0 32px; }
.showcase__list { list-style: none; display: grid; gap: 13px; }
.showcase__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.showcase__list i { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.showcase__list svg { width: 100%; height: 100%; display: block; }
.showcase__stats { display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 10px; }
.showcase__stat { background: var(--paper); padding: 18px 14px; text-align: center; }
.showcase__stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--accent); }
.showcase__stat span { display: block; margin-top: 5px; font-size: 16px; color: var(--ink-3); }
.showcase__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

@media (max-width: 980px) {
  /* górny padding rozdziela zdjęcie tego modułu od zdjęcia sekcji nad nim —
     bez niego dwie fotki stykają się krawędziami i wyglądają jak jedna */
  .showcase { grid-template-columns: 1fr; padding: var(--sek) 0 clamp(40px, 6vw, 72px); }
  .showcase__media { aspect-ratio: 16 / 10; }
  .showcase__panel { margin: -48px var(--gut) 0; }
}
@media (max-width: 560px) {
  .showcase__cols { grid-template-columns: 1fr; }
  .showcase__stats { grid-template-columns: repeat(2, 1fr); }
}

.atut h3 { font-size: 21px; margin-bottom: 10px; }
.atut p { font-size: 16px; color: var(--ink-3); max-width: 38ch; }

/* ——— Karty jednostek ——— */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* ——— Karuzela kart (strona główna obiektu): 3 w kadrze, strzałki pod spodem ——— */
.cards--carousel {
  grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 56px) / 3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cards--carousel::-webkit-scrollbar { display: none; }
.cards--carousel > * { scroll-snap-align: start; }
.carousel-nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 26px; }
.carousel-dashes { display: flex; gap: 8px; flex: 1; max-width: 380px; }
.carousel-dash { height: 3px; flex: 1; background: rgba(30, 30, 30, 0.14); transition: background 0.2s var(--ease); }
.carousel-dash.is-on { background: var(--accent); }
.carousel-arrows { display: flex; gap: 10px; }
.carousel-arrow {
  width: 46px; height: 46px; border: 1px solid var(--line); background: var(--white);
  display: grid; place-items: center; cursor: pointer; border-radius: 0;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.carousel-arrow:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow:disabled { opacity: 0.35; cursor: default; }
.card {
  background: var(--white); border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line-soft); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); border-color: var(--line); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.card__slides { position: absolute; inset: 0; }
.card__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease); }
.card__slides img.is-active { opacity: 1; }
/* mobilna karuzela zdjęć — na desktopie ukryta, na telefonie zastępuje siatki galerii;
   nawigacja pod zdjęciem: kreski postępu + kwadratowe strzałki (jak karuzela pokoi) */
.foto-mobile { display: none; }
.foto-mobile .card__media { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; cursor: zoom-in; position: relative; background: var(--paper-2); }
.foto-mobile__nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; width: 100%; min-width: 0; }
.foto-mobile .card__dots { position: static; display: flex; gap: 6px; flex: 1 1 0; min-width: 0; filter: none; }
.foto-mobile__nav .carousel-arrows { flex: none; }
.foto-mobile .card__dot { min-width: 0; }
.foto-mobile .card__dot { width: auto; flex: 1; height: 3px; border-radius: 0; background: rgba(30, 30, 30, 0.14); }
.foto-mobile .card__dot.is-active { background: var(--accent); transform: none; }

/* ——— Kontakt: baner ze zdjęciem okolicy ——— */
.kontakt-foto { height: clamp(260px, 42vh, 440px); overflow: hidden; border-radius: var(--r); margin: 44px 0 52px; }
.kontakt-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ——— Okolica: pełnoekranowy pokaz widoków (crossfade co kilka sekund) ———
   --exp steruje rozszerzaniem przy scrollu (0 = z gutterami, 1 = full-bleed) */
.okol-show { position: relative; height: min(86vh, 840px); overflow: hidden; margin-top: 44px; margin-inline: calc(var(--gut) * (1 - var(--exp, 1))); }
.okol-show__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s var(--ease); }
.okol-show__slide.is-active { opacity: 1; }
.okol-show__cap { position: absolute; left: var(--gut); bottom: 36px; background: rgba(30, 30, 30, 0.82); color: #fff; padding: 14px 22px; }
.okol-show__cap b { font-family: var(--serif); font-size: 21px; font-weight: 400; display: block; }
.okol-show__cap span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 760px) { .okol-show { height: 58vh; } .okol-show__cap { left: 20px; bottom: 20px; } }
.card__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.8); color: var(--ink); cursor: pointer; opacity: 0.85; transition: opacity 0.25s var(--ease), background 0.2s var(--ease); }
.card:hover .card__arrow { opacity: 1; }
.card__arrow:hover { background: #fff; }
.card__arrow svg { width: 18px; height: 18px; }
.card__arrow--prev { left: 10px; }
.card__arrow--next { right: 10px; }
.card__dots { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 3; display: flex; gap: 6px; justify-content: center; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
.card__dot { width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, 0.6); transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.card__dot.is-active { background: #fff; transform: scale(1.35); }
.card__badge {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  background: rgba(255, 255, 255, 0.94); color: var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 3px;
}
.card__badge--tag { left: auto; right: 14px; background: var(--accent); color: #fff; }
/* miasto rozróżniamy kolorem jak pinezki na mapie: Szczawnica = accent, Mielec = grafit */
[data-obiekt="szczawnica"] .card__badge:not(.card__badge--tag) { background: var(--accent); color: #fff; }
[data-obiekt="mielec"] .card__badge:not(.card__badge--tag) { background: var(--ink); color: #fff; }
.card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-size: 23px; margin-bottom: 16px; }
.card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip-spec { font-size: 16px; font-weight: 500; color: var(--ink); background: var(--paper-2); border: 1px solid var(--ink-3); border-radius: 999px; padding: 6px 13px; white-space: nowrap; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line-soft); margin-top: auto; }
.btn--sm { padding: 11px 24px; font-size: 16px; }
.price { font-size: 16px; color: var(--ink-3); }
.price b { font-family: var(--serif); font-size: 24px; color: var(--ink); display: block; line-height: 1.2; }
.link-arrow { font-size: 16px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: gap 0.25s var(--ease); }
.link-arrow svg { width: 18px; height: 18px; flex: none; display: block; }
.link-arrow:hover { gap: 11px; }

/* ——— Filtry ——— */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--line-soft); }
.chip {
  padding: 9px 18px; border: 1px solid var(--line); border-radius: 100px; background: transparent;
  font-size: 16px; font-weight: 500; color: var(--ink-2); cursor: pointer; font-family: var(--sans);
  transition: all 0.2s var(--ease);
}
.chip:hover { border-color: var(--ink-3); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.filters__count { margin-left: auto; font-size: 16px; color: var(--ink-3); font-family: var(--mono); }

/* ——— Autorzy zdjęć (atrybucje CC) ——— */
.kredyty { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 44px; }
.kredyt { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.kredyt img { width: 108px; height: 72px; object-fit: cover; border-radius: var(--r); flex: none; }
.kredyt b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); margin-bottom: 4px; }
.kredyt span { font-size: 16px; color: var(--ink-3); }
.kredyt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .kredyty { grid-template-columns: 1fr; } }

/* ——— Rozwijane selecty filtrów (obiekt / liczba osób) ——— */
.fsel { position: relative; }
.fsel__btn { display: inline-flex; align-items: center; gap: 9px; }
.fsel__btn svg { width: 15px; height: 15px; flex: none; transition: transform 0.25s var(--ease); }
.fsel.is-open .fsel__btn svg { transform: rotate(180deg); }
.fsel__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  min-width: max(100%, 230px); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 16px 44px rgba(20, 20, 20, 0.14);
  padding: 6px; display: none;
}
.fsel.is-open .fsel__menu { display: block; }
.fsel__opt {
  position: relative; display: block; width: 100%; text-align: left;
  font-size: 16px; color: var(--ink-2); background: none; border: 0; cursor: pointer;
  padding: 11px 14px 11px 32px; border-radius: 4px; white-space: nowrap;
}
.fsel__opt::before {
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; background: transparent;
}
.fsel__opt:hover { background: var(--paper-2); color: var(--ink); }
.fsel__opt.is-active { color: var(--ink); font-weight: 600; }
.fsel__opt.is-active::before { background: var(--accent); }

/* ——— Galeria ——— */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery__item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); cursor: zoom-in; background: var(--paper-2); }
.gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__more { position: absolute; inset: 0; background: rgba(30, 30, 30, 0.72); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 26px; }

.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 16, 14, 0.96); display: none; align-items: center; justify-content: center; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 4px; }
.lightbox__close { position: absolute; top: 24px; right: 32px; background: none; border: 0; color: #fff; font-size: 34px; cursor: pointer; line-height: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.12); border: 0; color: #fff; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; font-size: 22px; transition: background 0.2s; }
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox__prev { left: 28px; }
.lightbox__next { right: 28px; }
.lightbox__count { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; }

/* ——— Karuzela zdjęć w jednostce ——— */
.unit-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; height: 62vh; min-height: 460px; }
.unit-hero__main, .unit-hero__side { position: relative; overflow: hidden; border-radius: var(--r); cursor: zoom-in; background: var(--paper-2); }
.unit-hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.unit-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.unit-hero__main:hover img, .unit-hero__side > div:hover img { transform: scale(1.04); }
.unit-hero__side > div { position: relative; overflow: hidden; border-radius: var(--r); cursor: zoom-in; }

/* ——— Layout treści jednostki ——— */
.unit-grid { display: grid; grid-template-columns: 1fr 400px; gap: 72px; align-items: start; }
.unit-facts { display: flex; flex-wrap: wrap; margin: 40px 0; }
.unit-fact { flex: 1; min-width: 110px; padding: 6px 22px; text-align: center; position: relative; }
.unit-fact + .unit-fact::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: var(--line); }
.unit-fact__ico { color: var(--accent); display: flex; justify-content: center; margin-bottom: 12px; }
.unit-fact__ico svg { width: 28px; height: 28px; }
.unit-fact b { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink); display: block; line-height: 1.1; }
.unit-fact span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); display: block; margin-top: 8px; }
.amen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin-top: 20px; }
.amen li { list-style: none; display: flex; align-items: center; gap: 10px; font-size: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.amen li::before {
  content: ""; width: 17px; height: 17px; flex: none;
  border: 1px solid var(--accent); border-radius: 3px;
  background: var(--accent-soft) center / 11px 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c06226' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 5 5L19 7'/%3E%3C/svg%3E");
}

.book-box { position: sticky; top: 96px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; box-shadow: var(--shadow); }
.book-box__price { display: flex; align-items: baseline; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); margin-bottom: 22px; }
.book-box__price b { font-family: var(--serif); font-size: 38px; color: var(--ink); }
.book-box__price span { color: var(--ink-3); font-size: 16px; }
/* cennik dobowy — oba sezony równorzędnie, obok siebie */
.price-cols { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); margin-bottom: 20px; }
.price-col { padding: 16px 18px 14px; }
.price-col + .price-col { border-left: 1px solid var(--line); }
.price-col__label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 6px; }
.price-col b { font-family: var(--serif); font-size: 28px; color: var(--ink); display: block; line-height: 1.1; }
.price-col small { color: var(--ink-3); font-size: 13px; display: block; margin-top: 4px; }
.book-box .field { margin-bottom: 16px; }
.book-box__note { font-size: 16px; color: var(--ink-3); text-align: center; margin-top: 16px; line-height: 1.5; }

/* ——— Formularze ——— */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 16px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  padding: 13px 15px; font-size: 16px; font-family: var(--sans); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180, 99, 58, 0.12);
}
.field textarea { resize: vertical; min-height: 130px; }
.field__hint { font-size: 16px; color: var(--ink-3); }
.field--err input, .field--err select { border-color: #c0392b; }
.field__err { font-size: 16px; color: #c0392b; display: none; }
.field--err .field__err { display: block; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* pole wymagane → czerwona gwiazdka przy etykiecie (automatycznie z atrybutu required) */
.field:has(input:required, select:required, textarea:required) > label::after,
.gw { content: ' *'; color: #c0392b; font-weight: 700; }
.bk-wym { margin: -6px 0 16px; font-size: 15px; color: var(--ink-3); }

/* ——— Rezerwacja: kroki ——— */
.steps { display: flex; gap: 0; margin-bottom: 48px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--white); }
.step {
  flex: 1; padding: 18px 22px; display: flex; align-items: center; gap: 12px;
  border-right: 1px solid var(--line); transition: background 0.3s var(--ease); position: relative;
}
.step:last-child { border-right: 0; }
.step__n {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink-3); font-size: 14px; font-weight: 700; font-family: var(--mono);
}
.step__t { font-size: 16px; font-weight: 600; color: var(--ink-3); }
.step.is-active { background: var(--ink); }
.step.is-active .step__n { background: var(--accent); color: #fff; }
.step.is-active .step__t { color: #fff; }
.step.is-done .step__n { background: var(--accent-deep); color: #fff; }
.step.is-done .step__t { color: var(--ink); }

.pane { display: none; }
.pane.is-active { display: block; animation: fadeUp 0.45s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ——— Kalendarz ——— */
.cal-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cal { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal__title { font-family: var(--serif); font-size: 21px; color: var(--ink); text-transform: capitalize; }
.cal__nav { background: none; border: 1px solid var(--line); width: 34px; height: 34px; border-radius: var(--r); cursor: pointer; color: var(--ink); font-size: 16px; transition: all 0.2s; }
.cal__nav:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.cal__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: center; padding: 6px 0; text-transform: uppercase; letter-spacing: 0.06em; }
.cal__day {
  aspect-ratio: 1; display: grid; place-items: center; border: 0; background: transparent;
  font-size: 16px; font-family: var(--sans); color: var(--ink); cursor: pointer; border-radius: var(--r);
  transition: background 0.15s, color 0.15s; position: relative;
}
.cal__day:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--paper-2); }
.cal__day:disabled, .cal__day[aria-disabled="true"] { color: #c9cfcc; cursor: not-allowed; text-decoration: line-through; background: transparent; }
/* Dymek z powodem niedostępności dnia (data-dymek) — najechanie albo stuknięcie (.dymek-on) */
.cal__day[data-dymek]::after {
  content: attr(data-dymek); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 200px; padding: 7px 10px; border-radius: 6px; background: var(--ink); color: #fff;
  font-size: 12.5px; line-height: 1.35; font-weight: 400; text-align: center; white-space: normal;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s; z-index: 20;
}
.cal__day[data-dymek]:hover::after, .cal__day[data-dymek].dymek-on::after { opacity: 1; visibility: visible; }
.cal__grid > .cal__day:nth-child(7n+1)::after { left: 0; transform: none; }
.cal__grid > .cal__day:nth-child(7n)::after { left: auto; right: 0; transform: none; }
.cal__day.is-busy { color: #c9cfcc; text-decoration: line-through; cursor: not-allowed; }
.cal__day.is-start, .cal__day.is-end { background: var(--accent) !important; color: #fff; font-weight: 700; }
.cal__day.is-between { background: var(--accent-soft); color: var(--accent-deep); border-radius: 0; }
.cal__day.is-empty { visibility: hidden; }
.cal__legend { display: flex; gap: 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 16px; color: var(--ink-3); flex-wrap: wrap; }
.cal__legend span { display: flex; align-items: center; gap: 7px; }
.cal__legend i { width: 12px; height: 12px; border-radius: 3px; display: block; }

/* ——— Podsumowanie / koszyk ——— */
.summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; position: sticky; top: 96px; }
.summary h3 { font-size: 21px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 16px; border-bottom: 1px solid var(--line-soft); }
.summary__row span:first-child { color: var(--ink-3); }
.summary__row b { color: var(--ink); font-weight: 600; text-align: right; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 20px; margin-top: 8px; }
.summary__total span { font-size: 16px; color: var(--ink); font-weight: 600; }
.summary__total b { font-family: var(--serif); font-size: 34px; color: var(--ink); }
.summary__empty { color: var(--ink-3); font-size: 16px; text-align: center; padding: 30px 0; }

/* ——— Rezerwacja: jeden ekran (bez kreatora krokowego) ———
   Sekcje 1–4 ułożone jedna pod drugą, boczne podsumowanie z CTA
   przyklejone na sticky — przycisk płacenia jest widoczny cały czas. */
[data-booking] [hidden] { display: none !important; }  /* hidden musi wygrywać z display:grid widoków */
.bk-sec { padding: 36px 0; border-top: 1px solid var(--line-soft); }
.bk-sec:first-child { border-top: 0; padding-top: 0; }
.bk-sec__h { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.bk-sec__h h2 { font-size: 27px; margin: 0; }
.bk-n {
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--ink); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.bk-sec__info { margin: -6px 0 20px; }
.bk-obiekty { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-obiekt {
  display: flex; align-items: center; gap: 14px; padding: 12px; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.bk-obiekt img { width: 88px; height: 66px; object-fit: cover; border-radius: 4px; flex: none; }
.bk-obiekt__t b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 2px; }
.bk-obiekt__t span { font-size: 16px; color: var(--ink-3); }
.bk-obiekt:hover { border-color: var(--ink-3); }
.bk-obiekt.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(192, 98, 38, 0.22); }
.bk-row { display: flex; gap: 20px; margin-top: 24px; }
.bk-row .field { flex: 1; max-width: 280px; }
/* Paragon / faktura (templates/parts/rezerwacja-faktura.php) */
.bk-dok { margin-top: 20px; }
.bk-dok__l { display: block; font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.bk-dok__opcje { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-dok__pola { display: grid; gap: 16px; margin-top: 16px; padding: 18px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--white); }
.bk-dok__pola[hidden] { display: none; }
.bk-dok__ksef { margin: 0; font-size: 15px; color: var(--ink-3); }
.nip-wiersz { display: flex; gap: 10px; }
.nip-wiersz input { flex: 1; min-width: 0; }
.nip-wiersz .btn { flex: none; padding-top: 0; padding-bottom: 0; }
@media (max-width: 420px) { .nip-wiersz { flex-direction: column; } .nip-wiersz .btn { padding: 13px 20px; justify-content: center; } }
.field__hint.is-ok { color: #2f6b45; }
.field__hint.is-blad { color: #c0392b; }
@media (max-width: 560px) { .bk-dok__opcje { grid-template-columns: 1fr; } }
.bk-uwagi { margin-top: 16px; }
.bk-uwagi summary { cursor: pointer; font-size: 16px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
[data-flow] aside { position: sticky; top: 96px; }
[data-flow] .summary { position: static; }
.bk-cta { margin-top: 16px; }
.bk-cta .btn { width: 100%; justify-content: center; font-size: 17px; padding: 18px 24px; }
.bk-cta .btn.is-czeka { opacity: 0.85; }
.bk-cta .book-box__note { margin-top: 12px; text-align: center; }
.bk-pay { max-width: 760px; }
.card__cta { display: flex; gap: 8px; flex: none; }
@media (max-width: 900px) {
  .bk-obiekty { grid-template-columns: 1fr; }
  .bk-row { flex-direction: column; gap: 12px; }
  [data-flow] aside { position: static; }
}

.opt-list { display: grid; gap: 12px; }
.opt {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--white); cursor: pointer;
  transition: all 0.2s var(--ease);
}
.opt:hover { border-color: var(--ink-3); }
.opt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.opt input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.opt__t { flex: 1; }
.opt__t b { display: block; font-size: 16px; color: var(--ink); font-weight: 600; }
.opt__t span { font-size: 16px; color: var(--ink-3); }
.opt__p { font-weight: 600; color: var(--ink); white-space: nowrap; }
/* opcja tymczasowo niedostępna (np. „Zapłać kartą przed przyjazdem”) — widoczna, nie do kliknięcia */
.opt.is-wkrotce { cursor: not-allowed; opacity: 0.55; background: var(--line); }
.opt.is-wkrotce:hover { border-color: var(--line); }
.opt__wkrotce {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--ink-3); color: var(--white); vertical-align: middle;
}

/* wybór jednostki w rezerwacji — karty działają jak przełączniki (multi-select):
   klik dodaje/usuwa z rezerwacji, więc zaznaczenie musi być jednoznaczne na
   pierwszy rzut oka (grubsza ramka + wypełnienie + plakietka z ptaszkiem,
   nie tylko cienka obwódka jak wcześniej — uwaga właściciela, 20.08) */
.pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pick__card {
  position: relative;
  display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 14px;
  border: 2px solid var(--line); border-radius: var(--r); background: var(--white);
  cursor: pointer; transition: all 0.25s var(--ease); text-align: left; font-family: var(--sans);
}
.pick__card:hover { border-color: var(--ink-3); transform: translateY(-2px); box-shadow: var(--shadow); }
.pick__card.is-on {
  border-color: var(--accent);
  background: rgba(192, 98, 38, 0.07);
  box-shadow: 0 0 0 3px rgba(180, 99, 58, 0.18);
}
.pick__card img { width: 130px; height: 100px; object-fit: cover; border-radius: 4px; }
.pick__card h4 { font-size: 19px; margin-bottom: 3px; }
.pick__card p { font-size: 16px; color: var(--ink-3); margin-bottom: 8px; }
.pick__card .price b { font-size: 20px; }
.pick__card.is-off { opacity: 0.45; pointer-events: none; }
.pick__off { font-size: 16px; color: #c0392b; font-weight: 600; }
.pick__check {
  position: absolute; top: -10px; right: -10px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; border: 2px solid var(--white);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.5); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.pick__check svg { width: 15px; height: 15px; }
.pick__card.is-on .pick__check { opacity: 1; transform: scale(1); }

/* pasek nad siatką: ile jednostek wybrano / czy starcza miejsc dla gości */
.pick__cel { font-size: 16px; color: var(--ink-2); margin-bottom: 18px; }
.pick__cel.is-ok b { color: var(--accent); }
.pick__cel.is-brak { color: #b5401f; }
.pick__cel.is-brak b { color: inherit; }

/* ——— Potwierdzenie ——— */
.done { text-align: center; max-width: 640px; margin: 0 auto; padding: 40px 0; }
.done__ico { width: 76px; height: 76px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 28px; font-size: 34px; }
/* powrót z płatności: niepowodzenie / w toku (sukces = domyślny ✓) */
.done__ico--blad, .done__ico--karta-blad { background: #fbe9e7; color: #c0392b; }
.done__ico--w-toku { background: var(--paper-2); color: var(--ink-3); }
.done__code { font-family: var(--mono); font-size: 22px; letter-spacing: 0.12em; color: var(--ink); background: var(--paper-2); padding: 16px 28px; border-radius: var(--r); display: inline-block; margin: 24px 0; }

/* ——— Mapa ——— */
.map { height: 520px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); z-index: 1; }
.map--tall { height: 620px; }
/* jasna mapa (CARTO light_all) — bez filtra, kafelki idą w oryginale */
.leaflet-container { font-family: var(--sans); background: #f2f1ef; }
.map-pin { background: var(--accent); color: #fff; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); border: 2px solid #fff; }
.map-pin b { transform: rotate(45deg); font-size: 13px; font-family: var(--mono); }
/* drugi obiekt odróżniamy grafitem z palety, nie kolorem spoza niej */
.map-pin--ink { background: var(--ink); }
.leaflet-popup-content-wrapper { border-radius: var(--r); }
.leaflet-popup-content { margin: 14px 18px; font-size: 16px; }
.leaflet-popup-content b { font-family: var(--serif); font-size: 17px; color: var(--ink); display: block; margin-bottom: 3px; }

/* ——— Płatność (krok 5 rezerwacji) ——— */
/* Płatność kartą przed przyjazdem — ramki PayU (Secure Form) wyglądają jak nasze pola */
.pay-karta { margin-top: 4px; padding: 20px; border: 1px solid var(--line); background: var(--paper-2); display: grid; gap: 14px; }
.pay-karta[hidden] { display: none; }
.pay-karta .row-2 { gap: 14px; }
.pay-karta__intro { margin: 0; font-size: 15px; color: var(--ink-3); line-height: 1.5; }
.pay-karta__pole { height: 50px; padding: 0 15px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); transition: border-color 0.2s, box-shadow 0.2s; }
.pay-karta__pole > * { width: 100%; }
/* do czasu załadowania ramki PayU — ta sama szara podpowiedź co w ramce (bez „pustego” pola przez sekundę) */
.pay-karta__pole { position: relative; }
.pay-karta__pole::before { content: attr(data-ph); position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font: 16px Arial, sans-serif; color: #9a9a9a; pointer-events: none; }
.pay-karta__pole.is-ready::before { content: none; }
.pay-karta__pole.is-focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180, 99, 58, 0.12); }
.pay-karta__pole.is-err { border-color: #c0392b; }
.pay-karta__blad, .pay-karta__niedostepna { margin: 0; color: #c0392b; font-size: 15px; }
.pay-karta__blad[hidden], .pay-karta__niedostepna[hidden] { display: none; }
.pay-karta__zgoda, .bk-zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.pay-karta__zgoda input, .bk-zgoda input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.pay-karta__zgoda.is-err, .bk-zgoda.is-err { color: #c0392b; }
.bk-zgoda { margin-bottom: 14px; font-size: 14px; text-align: left; }
.bk-zgoda a { color: inherit; text-decoration: underline; }
.pay-status { margin-top: 20px; font-size: 16px; color: var(--ink-3); padding: 14px 18px; background: var(--paper-2); border: 1px solid var(--line); }
#blik { font-family: var(--mono); font-size: 22px; letter-spacing: 0.35em; }

/* pinezka atrakcji — mniejsza kropka, żeby nie konkurowała z pinezkami obiektów */
.map-poi { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); cursor: pointer; }
.map-poi:hover { background: var(--accent-deep); }
/* atrakcja ze zdjęciem — okrągła miniaturka, klik otwiera pełny popup */
.map-poi--foto { width: 44px; height: 44px; background-size: cover; background-position: center; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); transition: transform 0.15s var(--ease); }
.map-poi--foto:hover { transform: scale(1.12); }

/* popup atrakcji ze zdjęciem */
.poi-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.poi-popup .leaflet-popup-content-wrapper { overflow: hidden; padding: 0; }
.poi-pop { width: 264px; }
.poi-pop img { display: block; width: 100%; height: 140px; object-fit: cover; }
.poi-pop__body { padding: 14px 18px 16px; }
.poi-pop__body b { font-family: var(--serif); font-size: 17px; color: var(--ink); display: block; margin-bottom: 2px; }
.poi-pop__dist { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 8px; }
.poi-pop__body p { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin: 0 0 10px; }
.poi-pop__body a { color: var(--accent); font-weight: 600; }
.poi-pop__body a:hover { color: var(--accent-deep); }

/* ——— Kontakt ——— */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; margin-bottom: 20px; }
.contact-card h3 { font-size: 22px; margin-bottom: 4px; }
.contact-card__meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.contact-row { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line-soft); font-size: 16px; align-items: flex-start; }
.contact-row svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; margin-top: 3px; }
.contact-row a:hover { color: var(--accent); }

/* ——— FAQ ——— */
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; padding: 26px 0; display: flex; justify-content: space-between;
  align-items: center; gap: 24px; cursor: pointer; text-align: left; font-family: var(--serif);
  font-size: 21px; color: var(--ink);
}
.faq__q::after { content: "+"; font-size: 26px; color: var(--accent); flex: none; transition: transform 0.3s var(--ease); font-family: var(--sans); }
.faq__item.is-open .faq__q::after { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq__a p { padding-bottom: 26px; color: var(--ink-3); max-width: 72ch; }
.faq__item.is-open .faq__a { max-height: 420px; }

/* ——— Okolica — ciemny panel z akordeonem + zdjęcie obok ———
   Sekcja jest „torem" przewijania: --steps kroków po 28vh + jeden ekran na wyjście.
   (Krok skrócony z 62vh na życzenie właściciela 19.08 — sekcja trzymała gościa
   za długo; teraz całość przewija się ponad dwa razy szybciej.)
   Wewnątrz przykleja się .nearby__stage i to ona zmienia stan przy scrollu. */
.nearby { position: relative; background: var(--ink); height: calc(100vh + var(--steps, 6) * 28vh); }
.nearby__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-columns: 1fr 0.92fr; align-items: stretch;
}
/* kolumna kotwiczona od GORY (18.08): przy align-items:center kazde
   rozwiniecie opisu przesuwalo caly blok w pionie — podskakiwal przy
   kazdej zmianie slajdu; przy 10 pozycjach lista i tak nie miesci sie
   wysrodkowana w 100vh */
.nearby__panel { display: flex; align-items: flex-start; padding: clamp(28px, 5vh, 56px) var(--gut) 4vh; }
/* treść równo z resztą strony — 72px od lewej krawędzi, nie dosunięta do zdjęcia */
.nearby__inner { width: 100%; max-width: 720px; margin-left: 0; }
.nearby__h { color: #fff; margin-bottom: 22px; }
.nearby__h em { font-style: italic; }
.nearby__lead { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.66); max-width: 44ch; margin-bottom: 46px; }

.nearby__list { border-top: 1px solid rgba(255, 255, 255, 0.16); }
/* bez wciecia is-open (18.08): 26px padding-left szarpalo tekstem w bok
   przy kazdej zmianie slajdu — aktywna pozycje wyroznia kolor, to starczy */
.nearby__item { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.nearby__row {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 13px 0; text-align: left; font-family: var(--sans);
}
.nearby__t {
  font-size: 16px; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42); transition: color 0.3s var(--ease);
}
.nearby__d {
  font-family: var(--mono); font-size: 24px; line-height: 1.1; white-space: nowrap;
  color: rgba(255, 255, 255, 0.42); transition: color 0.3s var(--ease);
}
.nearby__row:hover .nearby__t { color: rgba(255, 255, 255, 0.78); }
.nearby__item.is-open .nearby__t { color: #fff; }
.nearby__item.is-open .nearby__d { color: #d99b74; }

.nearby__item.is-open .nearby__body p { opacity: 1; transition-delay: 0.1s; }
.nearby__body p::after { content: ""; display: block; height: 24px; }

/* pasek postępu — ile pozycji już „przescrollowane" */
.nearby__bar { margin-top: 34px; height: 2px; background: rgba(255, 255, 255, 0.14); position: relative; }
.nearby__bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #d99b74; transition: transform 0.5s var(--ease); }

/* Zdjęcia leżą na sobie jak talia kart: aktywne i wszystkie wcześniejsze są w pełni
   kryjące, kolejne czekają przezroczyste. Dzięki temu przy szybkim scrollu pod
   wchodzącym kadrem zawsze leży poprzedni — nigdy nie prześwituje tło. */
/* prawy panel: ramka zdjecia + krotki opis POD zdjeciem (18.08);
   opis ma zarezerwowana wysokosc, wiec nic nie skacze przy zmianie slajdu */
.nearby__media {
  min-height: 620px; background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 48px;
}
.nearby__frame { position: relative; width: min(100%, 980px); aspect-ratio: 3 / 2; }
.nearby__cap {
  margin: 0; width: min(100%, 980px); min-height: 3.2em;
  font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.72);
}
/* Wszystkie slajdy w JEDNEJ, identycznej ramce 3:2 wyśrodkowanej na tle
   sekcji (18.08): każdy kadr ma ten sam rozmiar, przejścia nie skaczą.
   Cover tnie w obrębie tej ramki minimalnie (większość zdjęć to 3:2). */
.nearby__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.45s var(--ease);
  will-change: opacity; pointer-events: none;
}
.nearby__img.is-on { opacity: 1; }

/* niskie ekrany — panel musi się zmieścić w 100vh */
@media (max-height: 820px) {
  .nearby__lead { margin-bottom: 30px; font-size: 16px; }
  .nearby__h { margin-bottom: 16px; }
  .nearby__row { padding: 13px 0; }
  .nearby__body p { padding-bottom: 18px; }
  .nearby__bar { margin-top: 22px; }
}

/* ——— Breadcrumb ——— */
.crumbs { font-size: 16px; color: var(--ink-3); padding: 22px 0; display: flex; gap: 9px; align-items: center; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { opacity: 0.4; }

/* ——— CTA pas ——— */
/* ——— Mapa + rezerwacja w jednym bloku (strony obiektów) ——— */
.mapcta { display: grid; grid-template-columns: 1.12fr 1fr; border-radius: var(--r); overflow: hidden; }
.mapcta__map { height: auto; min-height: 560px; border-radius: 0; border: 0; }
.mapcta__panel {
  background: var(--ink); color: #fff; padding: 64px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.mapcta__adres {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #d99b74; display: flex; align-items: center; gap: 9px; margin-bottom: 20px;
}
.mapcta__adres svg { width: 15px; height: 15px; flex: none; }
.mapcta__adres + .mapcta__adres { margin-top: -12px; }
.mapcta__panel h2 { color: #fff; max-width: 16ch; }
.mapcta__panel p { color: rgba(255, 255, 255, 0.66); margin-top: 14px; max-width: 42ch; }
.mapcta__btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ——— pasek CTA na zdjęciu, pełną szerokością (ostatnia sekcja przed stopką) ——— */
.photocta { position: relative; display: grid; place-items: center; text-align: center; overflow: hidden; color: #fff; }
.photocta__bg { position: absolute; inset: 0; }
.photocta__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photocta__bg::after { content: ""; position: absolute; inset: 0; background: rgba(20, 20, 20, 0.58); }
.photocta__inner { position: relative; z-index: 2; padding: clamp(80px, 11vw, 150px) var(--gut); max-width: 820px; }
.photocta h2 { color: #fff; }
.photocta p { color: rgba(255, 255, 255, 0.82); margin: 20px auto 36px; max-width: 54ch; }

.cta-band { background: var(--ink); color: #fff; border-radius: var(--r); padding: 64px 60px; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { color: rgba(255, 255, 255, 0.66); margin-top: 12px; max-width: 46ch; }

/* ——— Skrót regulaminu na stronie obiektu ——— */
/* overflow-x: clip — punkty czekające na animację stoją 44px w prawo i bez
   klipa poszerzały stronę (poziomy scroll na telefonach); clip, nie hidden,
   bo hidden zabiłby sticky intro */
.zasady { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 100px); align-items: start; overflow-x: clip; }
/* intro przyklejone: „Zanim przyjedziesz" stoi, a punkty przewijają się obok */
.zasady__intro { position: sticky; top: 130px; }
.zasady__intro .lead { max-width: 40ch; }
/* punkty wjeżdżają z prawej, jeden po drugim (kaskadę wydłuża data-rv-cap) */
/* :not(.is-in) — bez tego selektor wygrywał z .rv.is-in i punkty zostawały
   przesunięte w prawo na stałe (obcięta prawa krawędź na mobile, 19.08) */
.zasady__list li.rv:not(.is-in) { transform: translateX(44px); }
.zasady__list { list-style: none; border-top: 1px solid var(--line); }
.zasady__list li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1.6; color: var(--ink-2);
}
.zasady__list i { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.zasady__list svg { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) { .zasady { grid-template-columns: 1fr; gap: 36px; } .zasady__intro { position: static; } }

/* ——— Wzmianka o regulaminach (strona główna) ——— */
.dok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.dok__intro .lead { max-width: 46ch; }
.dok__linki { display: grid; gap: 14px; }
.dok__link {
  display: grid; gap: 6px; padding: 26px 30px;
  background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.dok__link:hover { border-color: var(--line); transform: translateY(-2px); }
.dok__meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.dok__nazwa { font-family: var(--serif); font-size: 24px; color: var(--ink); }
.dok__marka { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--accent); }
.dok__marka svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.dok__link:hover .dok__marka svg { transform: translateX(4px); }
@media (max-width: 900px) { .dok { grid-template-columns: 1fr; gap: 36px; } }

/* ——— Nasi partnerzy: taśma z logotypami w ruchu ———
   Track ma dwie identyczne kopie listy i przejeżdża o -50% — po pełnym cyklu druga kopia
   stoi dokładnie tam, gdzie startowała pierwsza, więc pętla nie ma szwu. Odstępy siedzą
   w paddingu kafelków (nie w gap), bo tylko wtedy obie kopie mają identyczną szerokość. */
.partners__head { text-align: center; margin-bottom: 44px; }
.partners__head .eyebrow { justify-content: center; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track { display: flex; align-items: center; width: max-content; animation: przewijaj 62s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes przewijaj { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.marquee__item {
  flex: none; display: grid; place-items: center;
  padding: 20px clamp(34px, 4.5vw, 72px); transition: opacity 0.25s var(--ease);
}
.marquee__item img { height: 84px; width: auto; max-width: none; object-fit: contain; }
a.marquee__item:hover { opacity: 0.6; }
.partners__name { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
@media (max-width: 700px) { .marquee__item img { height: 62px; } }

/* ——— FAQ + CTA obok siebie (strona główna) ——— */
.faq-cta { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; }
.cta-card { background: var(--ink); color: #fff; border-radius: var(--r); padding: 44px 40px; position: sticky; top: 100px; }
.cta-card h2 { color: #fff; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.15; }
.cta-card p { color: rgba(255, 255, 255, 0.68); margin-top: 16px; }
.cta-card__btns { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
@media (max-width: 900px) {
  .faq-cta { grid-template-columns: 1fr; gap: 44px; }
  .cta-card { position: static; }
}

/* ——— Stopka ——— */
.foot { background: var(--ink); color: rgba(255, 255, 255, 0.6); padding: var(--sek) 0 32px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 52px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.foot__logo { font-family: var(--serif); font-size: 26px; color: #fff; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.foot__logo i { width: 7px; height: 7px; background: var(--accent); display: block; }
.foot p { font-size: 16px; max-width: 34ch; }
.foot h4 { color: #fff; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; }
.foot ul { list-style: none; }
.foot li { margin-bottom: 10px; }
.foot a { font-size: 16px; transition: color 0.2s; }
.foot a:hover { color: #fff; }
.foot__social { display: flex; gap: 12px; margin-top: 26px; }
.foot__social a {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.72);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.foot__social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.foot__social svg { width: 19px; height: 19px; display: block; }
.foot__bot { display: flex; justify-content: space-between; padding-top: 26px; font-size: 16px; flex-wrap: wrap; gap: 16px; }

/* ——— Reveal (bez guardu na reduced-motion — świadomie) ——— */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }

/* ——— Regulamin ——— */
.rules { max-width: 76ch; margin-inline: auto; }
/* regulaminy: nagłówek w tej samej, wyśrodkowanej kolumnie co treść */
.wrap:has(> .rules) > .head-row { max-width: 76ch; margin-inline: auto; }
.rules h3 { margin: 40px 0 14px; font-size: 22px; }
.rules ol { padding-left: 22px; }
.rules li { margin-bottom: 12px; }
.rules a { color: inherit; text-decoration: underline; }
.tabs { display: flex; gap: 8px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.tab { padding: 14px 22px; background: none; border: 0; border-bottom: 2px solid transparent; font-size: 16px; font-weight: 600; color: var(--ink-3); cursor: pointer; font-family: var(--sans); margin-bottom: -1px; }
.tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }

/* ——— Toast ——— */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 120%);
  background: var(--ink); color: #fff; padding: 15px 26px; border-radius: var(--r);
  font-size: 16px; z-index: 1100; box-shadow: var(--shadow-lg); transition: transform 0.4s var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); }

/* ——— Notka o danych demo ——— */
.demo-note {
  background: var(--accent-soft); border: 1px solid rgba(180, 99, 58, 0.28); border-radius: var(--r);
  padding: 14px 18px; font-size: 16px; color: var(--accent-deep); display: flex; gap: 10px; align-items: flex-start;
}
.demo-note b { font-weight: 700; }

/* ——— Responsywność ——— */
@media (max-width: 1080px) {
  :root { --gut: 28px; }
  .cards, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cards--carousel { grid-template-columns: none; grid-auto-columns: calc((100% - 28px) / 2); }
  /* bez toru scrolla — zwykły, klikalny akordeon jeden pod drugim */
  .nearby { height: auto; }
  .nearby__stage { position: static; height: auto; grid-template-columns: 1fr; }
  /* mobile: najpierw opis (panel z akordeonem), pod nim zdjęcia — decyzja 18.08 */
  .nearby__panel { padding: 72px var(--gut) 8px; order: 1; }
  .nearby__inner { max-width: none; margin-left: 0; }
  .nearby__media { min-height: 0; height: auto; order: 2; padding: 20px var(--gut) 40px; gap: 12px; }
  .unit-grid, .contact-grid, .cal-wrap { grid-template-columns: 1fr; gap: 44px; }
  .book-box, .summary { position: static; }
  .split { grid-template-columns: 1fr; }
  .mapcta { grid-template-columns: 1fr; }
  .mapcta__map { min-height: 0; height: 380px; }
  .mapcta__panel { padding: 48px 34px; }
  .mapcta__panel h2, .mapcta__panel p { max-width: none; }
  .pick { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  :root { --gut: 20px; }
  body { font-size: 16px; }
  .nav__links, .nav__tel { display: none; }
  .nav__burger { display: block; }
  /* zostaje logo + „Rezerwuj" + hamburger; przy 390 px domyślne rozmiary
     nachodziły na siebie, więc pasek i przycisk jadą na kompaktowych wartościach */
  .nav { padding: 13px var(--gut); }
  .nav__logo { font-size: 19px; gap: 8px; }
  .nav__cta { gap: 6px; }
  .nav__cta .btn { padding: 11px 16px; font-size: 15px; }
  .nav__burger { padding: 6px; }
  .nav__burger svg { width: 24px; height: 24px; }
  :root { --sek: 76px; }
  .cards, .row-2, .amen { grid-template-columns: 1fr; }
  /* atuty na telefonie w parach (2 ikonki na linijkę), z ciaśniejszymi odstępami */
  .grid-3 { grid-template-columns: 1fr 1fr; column-gap: 22px; row-gap: 32px; }
  .cards--carousel { grid-template-columns: none; grid-auto-columns: 100%; }
  .nearby__panel { padding: 56px var(--gut); }
  .nearby__media { padding: 16px var(--gut); }
  /* fakty w JEDNYM rzedzie takze na telefonie (18.08) — flex nie moze
     zawijac, a kafelki ida na kompaktowych paddingach; etykiety lamia sie
     same. Wczesniejsze reguly grid-template-columns byly martwe (to flex). */
  .unit-facts { flex-wrap: nowrap; }
  .unit-fact { min-width: 0; padding: 6px 8px; }
  .unit-fact b { font-size: 21px; }
  .unit-fact span { font-size: 10px; letter-spacing: 0.08em; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item:first-child { grid-column: span 2; }
  /* mobile: galerie = jeden kadr ze strzałkami zamiast kafelków */
  .unit-hero { grid-template-columns: 1fr; height: auto; min-height: 0; display: block; }
  .unit-hero__main, .unit-hero__side { display: none; }
  .foto-mobile { display: block; }
  .gallery .gallery__item { display: none; }
  .gallery { display: block; }
  .steps { flex-direction: column; }
  .step { border-right: 0; border-bottom: 1px solid var(--line); }
  .cta-band { padding: 44px 28px; }
  .mapcta__panel { padding: 40px 26px; }
  .hero__scroll { display: none; }
  .hero { min-height: 86vh; }
  .split__card { min-height: 440px; }
  .split__body { padding: 28px; }
  .filters__count { width: 100%; margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMACJE
   Świadomie BEZ guardu prefers-reduced-motion — użytkowniczka ma
   „zredukuj ruch" włączone w macOS i wtedy nie zobaczyłaby efektów.
   Wejście hero i nawigacji robi czysty CSS (nie JS), więc nawet gdy
   app.js padnie, treść i tak się pokaże.
   ═══════════════════════════════════════════════════════════════ */

@keyframes anWejdz      { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes anWejdzLekko { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes anZBoku      { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes anNav        { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes anKadr       { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes anOdsloniec  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes anKenBurns   { from { transform: scale(1); } to { transform: scale(1.09); } }

/* ——— 1. Wejście nawigacji ——— */
/* `backwards`, nie `both` — fill forwards trzymałby transform: none i blokował .nav--hidden */
.nav { animation: anNav 0.75s var(--ease) 0.1s backwards; }

/* ——— 2. Wejście hero (kaskada) ——— */
.hero__inner .eyebrow    { animation: anWejdz 0.9s var(--ease) 0.25s both; }
.hero__inner h1          { animation: anWejdz 1s var(--ease) 0.38s both; }
.hero__sub               { animation: anWejdz 0.9s var(--ease) 0.52s both; }
.hero__cta               { animation: anWejdz 0.9s var(--ease) 0.64s both; }
.hero__scroll            { animation: anWejdzLekko 0.9s var(--ease) 0.9s both; }
.hero__book              { animation: anWejdz 1s var(--ease) 0.78s both; }

/* hero podstron (tekst nad zdjęciem) */
.hero-split__text .eyebrow { animation: anWejdz 0.9s var(--ease) 0.2s both; }
.hero-split__text h1       { animation: anWejdz 1s var(--ease) 0.32s both; }
.hero-split__sub           { animation: anWejdz 0.9s var(--ease) 0.44s both; }
.hero-split__media img     { animation: anKadr 1.6s var(--ease) 0.2s both; }

/* h1 rozbity na słowa przez app.js — każde wjeżdża spod maski osobno.
   Bez JS działa animacja całego h1 powyżej, więc nic nie znika. */
.hero h1.h-split { animation: none; opacity: 1; }
/* padding+ujemny margines dają miejsce na ogonki (j, p, g) — bez tego maska je ucina */
.hero h1.h-split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.hero h1.h-split .w > span {
  display: inline-block;
  animation: anWejdz 0.95s var(--ease) both;
  animation-delay: calc(0.34s + var(--i) * 0.075s);
}

/* ——— 3. Reveal przy scrollu: kaskada w obrębie jednej grupy ——— */
.rv { transition-delay: var(--rv-d, 0ms); }

/* ——— 4. Zdjęcia odsłaniane przy wjeździe sekcji ——— */
/* animacja bez fill:forwards — po zakończeniu element wraca do stanu z CSS,
   więc hover (scale 1.05) nadal działa */
.split__card.is-in img            { animation: anKadr 1.5s var(--ease); }
.card.is-in .card__media          { animation: anOdsloniec 0.85s var(--ease); }
.feature.is-in .feature__thumb img,
.feature__thumb.is-in img         { animation: anOdsloniec 0.9s var(--ease) 0.15s both; }
.unit-hero.is-in img              { animation: anKadr 1.4s var(--ease); }
.photocta.is-in .photocta__bg img { animation: anKenBurns 14s linear forwards; }

/* ——— 5. Nagłówki sekcji: kwadrat i tekst wjeżdżają osobno ——— */
.head-row.is-in .eyebrow      { animation: anZBoku 0.7s var(--ease) 0.1s both; }
.head-row.is-in h2            { animation: anWejdzLekko 0.8s var(--ease) 0.22s both; }
.head-row.is-in .lead,
.head-row.is-in .link-arrow   { animation: anWejdzLekko 0.8s var(--ease) 0.34s both; }
.partners__head.is-in .eyebrow { animation: anWejdzLekko 0.7s var(--ease) 0.1s both; }

/* ——— 6. Moduł edytorski (feature) ——— */
.feature.is-in .feature__title { animation: anWejdzLekko 0.9s var(--ease) 0.1s both; }
.feature.is-in .feature__lead  { animation: anWejdzLekko 0.9s var(--ease) 0.3s both; }
.feature.is-in .feature__link  { animation: anWejdzLekko 0.9s var(--ease) 0.42s both; }
.feature__link { position: relative; border-bottom-color: transparent; }
.feature__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(1); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.feature__link:hover::after { transform: scaleX(0); transform-origin: right; }
.feature__link:hover { border-bottom-color: transparent; }

/* ——— 7. Karty jednostek: zdjęcie przybliża się na hover ——— */
.card { transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.card:hover { box-shadow: var(--shadow); }
.card__slides img { transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); }
.card:hover .card__slides img.is-active { transform: scale(1.06); }
.card__body h3 a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.35s var(--ease); }
.card__body h3 a:hover { background-size: 100% 1px; }

/* ——— 8. Atuty: ikona reaguje na wjazd i na hover ——— */
.atut.is-in .atut__ico { animation: anWejdz 0.7s var(--ease) 0.05s both; }
.atut.is-in .atut__n   { animation: anWejdzLekko 0.7s var(--ease) 0.18s both; }
.atut__ico svg { transition: transform 0.4s var(--ease); }
.atut:hover .atut__ico svg { transform: translateY(-4px) scale(1.08); }
.atut-card:hover .atut-card__ico svg { transform: translateY(-4px) scale(1.08); }
.atut-card__ico svg { transition: transform 0.4s var(--ease); }

/* ——— 9. Przyciski: przetarcie światłem na hover ——— */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -140%; width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left 0.65s var(--ease);
}
.btn--primary:hover::after { left: 150%; }
.hero__book-btn { position: relative; overflow: hidden; }
.hero__book-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -140%; width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
  transform: skewX(-18deg); pointer-events: none; transition: left 0.65s var(--ease);
}
.hero__book-btn:hover::after { left: 150%; }

/* ——— 10. FAQ: odpowiedź wsuwa się razem z rozwinięciem ——— */
.faq__a p { opacity: 0; transform: translateY(-8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.faq__item.is-open .faq__a p { opacity: 1; transform: none; transition-delay: 0.08s; }
.faq__q { transition: color 0.25s var(--ease); }
.faq__q:hover { color: var(--accent); }
.faq__q::after { transition: transform 0.3s var(--ease), color 0.25s var(--ease); }

/* ——— 11. Regulaminy / linki dokumentów ——— */
.dok__link { position: relative; overflow: hidden; }
.dok__link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.35s var(--ease);
}
.dok__link:hover::before { transform: scaleY(1); transform-origin: top; }

/* ——— 12. Nawigacja: podkreślenie wyjeżdżające spod linku ——— */
.nav__links a::before {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover::before { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-active::before { display: none; }
.nav__logo i { transition: transform 0.4s var(--ease); }
.nav__logo:hover i { transform: rotate(45deg) scale(1.2); }

/* ——— 13. Pasek postępu czytania (element dokłada app.js) ——— */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1000; pointer-events: none;
}
.progress i {
  display: block; height: 100%; width: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.12s linear;
}

/* ——— 14. Stopka: linki przesuwają się na hover ——— */
.foot li a { display: inline-block; transition: color 0.2s var(--ease), transform 0.25s var(--ease); }
.foot li a:hover { transform: translateX(4px); }

/* ——— 15. Chipy i drobiazgi ——— */
.chip-spec { transition: border-color 0.25s var(--ease), background 0.25s var(--ease); }
.card:hover .chip-spec { border-color: var(--line); }
.split__card .btn--light { transition: transform 0.3s var(--ease), background 0.25s var(--ease); }
.split__card:hover .btn--light { transform: translateX(4px); }
.marquee__item img { transition: transform 0.35s var(--ease), opacity 0.25s var(--ease); }
a.marquee__item:hover img { transform: scale(1.06); }

/* na wąskich ekranach mniej ruchu — krótsze dystanse, bez kaskad opóźnień */
@media (max-width: 760px) {
  .rv { transform: translateY(16px); transition-delay: 0ms; }
  .hero__book { animation-delay: 0.5s; }
  .photocta.is-in .photocta__bg img { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MODUŁY DODATKOWE (inspiracja: apartamentyolgi.com)
   Okolica ze zdjęciami · siatka wyposażenia · galeria mozaika · opinie
   ═══════════════════════════════════════════════════════════════ */

/* ——— Okolica: kafle ze zdjęciem atrakcji ——— */
.okol { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.6vw, 40px); }
.okol__k { display: block; }
.okol__foto {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r); background: var(--paper-2); margin-bottom: 18px;
}
.okol__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.okol__k:hover .okol__foto img { transform: scale(1.06); }
.okol__dyst {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  background: rgba(255, 255, 255, 0.94); color: var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 3px;
}
.okol__t { font-family: var(--serif); font-size: 23px; color: var(--ink); line-height: 1.2; margin-bottom: 8px; }
.okol__d { font-size: 16px; color: var(--ink-3); max-width: 40ch; }
@media (max-width: 1080px) { .okol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .okol { grid-template-columns: 1fr; } }

/* ——— Region na stronie głównej: mozaika atrakcji Pienin ———
   Duży kafel (spływ) + cztery mniejsze; podpisy na zdjęciu, nad dolnym
   gradientem, dystans w pastylce jak w .okol__dyst. */
.region__moz { display: grid; grid-template-columns: 1.65fr 1fr 1fr; grid-auto-rows: clamp(230px, 24vw, 350px); gap: clamp(18px, 2vw, 28px); }
/* mozaika bez duzego kafla — rowne kolumny (atuty na /o-nas).
   MODYFIKATOR zamiast stylu inline: inline nadpisywal mobilne media
   queries i przy 390px siatka rozpychala strone w bok (18.08). */
.region__moz--r3 { grid-template-columns: repeat(3, 1fr); }
.region__moz--r2 { grid-template-columns: repeat(2, 1fr); }
.region__k { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--paper-2); }
.region__k--duzy { grid-column: 1; grid-row: 1 / span 2; }
.region__k img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.region__k:hover img { transform: scale(1.05); }
.region__k::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 12, 0) 40%, rgba(12, 12, 12, 0.78)); }
.region__dyst {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255, 255, 255, 0.94); color: var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 3px;
}
.region__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: block; padding: 22px 24px; color: #fff; }
.region__cap b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.region__cap i { display: block; font-style: normal; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.95); margin-top: 6px; max-width: 46ch; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
.region__k--duzy .region__cap { padding: 28px 30px; }
.region__k--duzy .region__cap b { font-size: clamp(27px, 2.3vw, 38px); }
.region__foot { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 44px; }
@media (max-width: 1080px) {
  .region__moz, .region__moz--r3, .region__moz--r2 { grid-template-columns: 1fr 1fr; }
  .region__k--duzy { grid-column: 1 / -1; grid-row: auto; min-height: clamp(300px, 52vw, 420px); }
}
@media (max-width: 640px) {
  .region__moz, .region__moz--r3, .region__moz--r2 { grid-template-columns: 1fr; }
  .region__cap { padding: 18px 18px; }
}

/* ——— Wyposażenie: siatka ikon bez kafelków ——— */
.wyp { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: clamp(28px, 3.4vw, 60px); row-gap: clamp(32px, 3.6vw, 50px); }
.wyp__p { display: flex; flex-direction: column; gap: 14px; }
.wyp__ico { color: var(--accent); }
.wyp__ico svg { width: 30px; height: 30px; display: block; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease); }
.wyp__p:hover .wyp__ico svg { transform: translateY(-4px) scale(1.08); }
.wyp__t { font-size: 16px; font-weight: 600; color: var(--ink); }
.wyp__d { font-size: 16px; color: var(--ink-3); max-width: 26ch; }
.wyp__nota { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line-soft); font-size: 16px; color: var(--ink-3); }
.wyp__nota b { color: var(--ink); font-weight: 600; }
@media (max-width: 1080px) { .wyp { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .wyp { grid-template-columns: 1fr; } }

/* ——— Opinie gości: siatka kart z awatarem ——— */
.opinie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
/* białe karty na szarym tle sekcji — opinia ma swoją własną, czystą planszę */
.opin { display: flex; flex-direction: column; background: var(--white); border-radius: var(--r); padding: 30px 26px; }
.opin__gwiazdki { display: flex; gap: 4px; margin-bottom: 24px; color: var(--accent); }
.opin__gwiazdki svg { width: 16px; height: 16px; display: block; }
.opin blockquote { font-size: 16px; line-height: 1.7; color: var(--ink-2); flex: 1; }
.opin__stopka { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.opin__awatar {
  width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em;
}
.opin__awatar img { width: 100%; height: 100%; object-fit: cover; }
.opin__kto { font-size: 16px; line-height: 1.4; }
.opin__kto b { display: block; color: var(--ink); font-weight: 600; }
.opin__kto span { color: var(--ink-3); }
/* cudzysłów domyka kartę od prawej — dekoracja, stąd auto-margines zamiast pozycjonowania */
.opin__cudzyslow {
  margin-left: auto; font-family: var(--serif); font-size: 62px; line-height: 1;
  color: var(--line); align-self: flex-start; margin-top: -6px;
}
/* skrócona sekcja opinii (sama ocena + link), gdy nie mamy jeszcze treści wpisów */
.opinie-skrot { text-align: center; max-width: 520px; margin: 0 auto; }
.opinie-skrot__ocena { font-family: var(--serif); font-size: 72px; line-height: 1; color: var(--ink); }
.opinie-skrot__ocena span { font-size: 26px; color: var(--ink-3); margin-left: 6px; }
.opinie-skrot .opin__gwiazdki { justify-content: center; margin: 16px 0 10px; }
.opinie-skrot .lead { margin-bottom: 26px; }

.opinie-nav { display: none; }
@media (max-width: 1200px) { .opinie { grid-template-columns: 1fr 1fr; } }
/* mobile: karuzela — jedna opinia w kadrze, strzałki i kreski postępu pod spodem */
@media (max-width: 640px) {
  .opinie {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .opinie::-webkit-scrollbar { display: none; }
  .opinie > * { scroll-snap-align: start; }
  .opinie-nav { display: flex; }
}

/* ——— Rezerwacja przez portale: pełnoekranowe zdjęcie + logotypy ——— */
.portale {
  position: relative; background-size: cover; background-position: center;
  padding: var(--sek) 0; text-align: center; color: #fff;
}
.portale__zaslona { position: absolute; inset: 0; background: rgba(30, 30, 30, 0.62); }
.portale__tresc { position: relative; max-width: 70ch; }
.portale h2 { color: #fff; margin-bottom: 22px; margin-left: auto; margin-right: auto; }
/* .eyebrow to flex — bez justify-content kropka i tekst zostają przy lewej krawędzi */
.portale .eyebrow { color: #e0a077; justify-content: center; }
.portale .eyebrow::before { background: #e0a077; }
.portale__lead { color: rgba(255, 255, 255, 0.8); margin: 0 auto 14px; max-width: 60ch; }
.portale__loga { display: flex; align-items: center; justify-content: center; gap: clamp(32px, 6vw, 72px); margin-top: 46px; flex-wrap: wrap; }
.portale__logo {
  font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.86);
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.portale__logo img { max-height: 40px; width: auto; opacity: 0.86; }
a.portale__logo:hover { color: #fff; }
a.portale__logo:hover img { opacity: 1; }

/* ——— Galeria na stronie głównej: mozaika + podpis ——— */
.galeria-home .gallery { margin-top: 4px; }
.gallery__item::after {
  content: ""; position: absolute; inset: 0; background: rgba(30, 30, 30, 0);
  transition: background 0.35s var(--ease);
}
.gallery__item:hover::after { background: rgba(30, 30, 30, 0.18); }

/* ——— Animacje nowych modułów ——— */
.okol__k.is-in .okol__foto { animation: anOdsloniec 0.85s var(--ease); }
.wyp__p.is-in .wyp__ico    { animation: anWejdz 0.7s var(--ease) both; }
/* bez animation-fill-mode — gdyby animacja nie wystartowała, kafle i tak są widoczne */
.gallery.is-in .gallery__item { animation: anOdsloniec 0.8s var(--ease); }

/* ikona w notce demo — bez tego SVG rozjeżdża się do własnego rozmiaru */
.demo-note svg { width: 18px; height: 18px; flex: none; display: block; margin-top: 3px; }
.demo-note > span:first-child { display: flex; flex: none; }
/* wariant bez ikony — pojedynczy tekst; bez tego reguła wyżej blokowałaby zawijanie */
.demo-note--info { display: block; }

/* ——— Menu nad zdjęciem: wyrównanie optyczne ———
   Rozmiary są identyczne jak w stanie nav--solid (zmierzone: nav 98,4 px,
   padding 20/72, linki 16 px/500) — ale biały tekst na jasnym niebie jest
   optycznie cieńszy i sprawia wrażenie mniejszego. Stąd delikatny scrim pod
   paskiem i cięższy krój wyłącznie w stanie „nad hero". */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.45), rgba(20, 20, 20, 0));
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.nav--over::before { opacity: 1; }
.nav--over .nav__links a,
.nav--over .nav__tel { font-weight: 600; }
.nav--over .nav__links a,
.nav--over .nav__tel,
.nav--over .nav__logo { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4); }

/* ——— Stopka: bloki per obiekt ———
   Dwa obiekty mają osobne adresy, telefony i listy jednostek — dostają więc
   własne kolumny, ale zostają w jednej stopce (wzór: stopki willa-komancza.pl
   i aparthause.pl, zestawione obok siebie). */
.foot__grid { grid-template-columns: 1.7fr 1fr 1.1fr; }
.foot__obiekty {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 88px);
  padding: 52px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.foot__ob-meta {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.foot__ob-nazwa { font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 22px; }
.foot__ob-nazwa a { font-size: inherit; color: #fff; }
.foot__ob-nazwa a:hover { color: var(--accent); }

.foot__dane { list-style: none; margin-bottom: 30px; }
.foot__dane li { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 11px; flex-wrap: wrap; }
.foot__dane svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--accent); }
.foot__dane span { font-size: 16px; }
.foot__tel2 { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.18); }

.foot__jedn-h {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; font-weight: 600; padding-top: 26px; margin-bottom: 16px;
}
.foot__jedn-h span { color: rgba(255, 255, 255, 0.45); font-weight: 400; }
.foot__jedn { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
/* strona w kontekście jednego obiektu — jedyna sekcja rozciąga się na całą szerokość stopki */
.foot__ob:only-child { grid-column: 1 / -1; }
.foot__ob:only-child .foot__jedn { grid-template-columns: repeat(3, 1fr); column-gap: 48px; max-width: 900px; }
/* stopka SOLO (standalone jednego obiektu) — jeden grid: marka | skróty | kontakt | jednostki */
.foot__grid--solo { grid-template-columns: 1.5fr 0.9fr 1.2fr 1.3fr; }
.foot__grid--solo .foot__jedn { grid-template-columns: 1fr; }
.foot__grid--solo .foot__dane li { padding: 7px 0; flex-wrap: nowrap; }
.foot__grid--solo .foot__dane span, .foot__grid--solo .foot__dane a { min-width: 0; }
.foot__grid--solo .foot__social--ob { margin-top: 22px; }
.foot__jedn li { margin-bottom: 9px; }
.foot__jedn a { display: flex; align-items: baseline; gap: 8px; }
.foot__jedn a span { font-size: 16px; color: rgba(255, 255, 255, 0.68); white-space: nowrap; }
.foot__jedn a:hover span { color: rgba(255, 255, 255, 0.92); }

@media (max-width: 1080px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__obiekty { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 620px) {
  .foot__grid { grid-template-columns: 1fr; }
  .foot__jedn { grid-template-columns: 1fr; }
}

/* ——— Profile społecznościowe przy obiekcie w stopce ———
   Ikona bez adresu jest wyszarzona i nieklikalna (span, nie link) — widać, że
   kanał istnieje w układzie, ale nikt nie trafi w martwy odnośnik. */
.foot__social--ob { margin-top: 28px; }
.foot__social span.is-pusty {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.26);
}
.foot__social span.is-pusty svg { width: 19px; height: 19px; display: block; }

/* ——— Drobne poprawki na wąskich ekranach ——— */
@media (max-width: 560px) {
  /* dwie zakładki regulaminu miały razem ~440 px i wychodziły poza ekran */
  .tabs { gap: 0; }
  .tab { flex: 1; padding: 12px 8px; font-size: 15px; text-align: center; line-height: 1.3; }
  .rules h3 { font-size: 20px; margin: 32px 0 12px; }
}

/* ——— Pływające CTA na mobile ———
   „Rezerwuj" wyprowadzony z paska (nachodził na logo) na dół ekranu, wyśrodkowany.
   Osobny element, nie dziecko `.nav` — nav przy chowaniu dostaje transform, a ten
   tworzy nowy układ odniesienia i `position: fixed` jechałoby razem z paskiem. */
.cta-plywajaca { display: none; }
@media (max-width: 760px) {
  .nav__cta .btn { display: none; }
  .cta-plywajaca {
    display: inline-flex; align-items: center; gap: 10px;
    position: fixed; z-index: 940; left: 50%; transform: translateX(-50%); bottom: 20px;
    padding: 15px 34px; border-radius: var(--r);
    background: var(--accent); color: #fff; font-size: 16px; font-weight: 600;
    box-shadow: 0 10px 28px rgba(30, 30, 30, 0.32);
    transition: background 0.25s var(--ease);
  }
  .cta-plywajaca:active { background: var(--accent-deep); }
  .cta-plywajaca svg { width: 16px; height: 16px; }
  /* żeby pływający guzik nie przykrywał ostatniej linijki stopki */
  .foot { padding-bottom: 96px; }
}

/* ——— Karta obiektu: cena i CTA na wąskim ekranie ——— */
@media (max-width: 700px) {
  .split__foot { flex-direction: column; align-items: stretch; gap: 16px; }
  /* cena w jednej linijce zamiast trzech („od" / kwota / jednostka) */
  .split__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
  .split__price b { display: inline; font-size: 22px; }
  .split__foot .btn { width: 100%; justify-content: center; }
}

/* ——— Okolica: liczby dopasowane do szerokości telefonu ——— */
@media (max-width: 700px) {
  /* karta jednostki: cena NAD przyciskami, przyciski równo na pełną szerokość
     (wcześniej cena łamała się w wąską kolumnę obok CTA — uwaga 19.08);
     cała linia ceny („2750 zł miesięcznie · doby od 240 zł") ma się zaczynać
     i kończyć w JEDNYM wierszu — stąd nowrap i ciaśniejsze rozmiary */
  .card__foot { flex-direction: column; align-items: stretch; }
  .card__foot .price { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: 14px; }
  .card__foot .price b { display: inline; font-size: 22px; }
  .card__cta { display: flex; }
  .card__cta .btn { flex: 1; }

  .nearby__row { gap: 14px; padding: 15px 0; }
  .nearby__t { font-size: 14px; letter-spacing: 0.08em; }
  .nearby__d { font-size: 17px; }
  .nearby__item.is-open { padding-left: 10px; }
}

/* ——— Wybór płatności w kroku 4 + rozbicie kwot w podsumowaniu ——— */
.platnosc__h { font-size: 20px; margin-bottom: 14px; }
.platnosc .opt { align-items: flex-start; }
.platnosc .opt input { margin-top: 3px; }
.platnosc .opt__p { font-family: var(--serif); font-size: 22px; font-weight: 400; }
/* kwoty „do zapłaty teraz" odcinamy od reszty podsumowania, żeby nie zlewały się z pozycjami */
.summary__plat { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.summary__plat .summary__row:first-child b { color: var(--accent); }

/* ——— Krok 3: potwierdzenie jednostki, z którą gość tu przyszedł ——— */
.wybrana {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 18px; border: 1px solid var(--accent); border-radius: var(--r);
  background: var(--accent-soft);
}
.wybrana img { width: 132px; height: 100px; object-fit: cover; border-radius: var(--r); flex: none; }
.wybrana__body { flex: 1; min-width: 180px; }
.wybrana__meta {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-deep); margin-bottom: 6px;
}
.wybrana__body h4 { font-size: 22px; margin-bottom: 4px; }
.wybrana__body p { font-size: 16px; color: var(--ink-3); margin-bottom: 8px; }
.wybrana .price b { font-family: var(--serif); font-size: 24px; color: var(--ink); }
.wybrana .price span { font-size: 16px; color: var(--ink-3); }
.wybrana .btn { background: var(--white); }
@media (max-width: 560px) {
  .wybrana { gap: 16px; }
  .wybrana img { width: 100%; height: 180px; }
  .wybrana .btn { width: 100%; justify-content: center; }
}