/* ============================================================================
   site.css - warstwa publiczna. Jeden plik, zero frameworkow, zero zaleznosci.
   Kierunek od 23.09 (decyzja Michala): "ladnie, miekko, przyjemnie" w duchu
   apartamentyprzemysl.pl - cieple tlo, hero ze zdjeciem, karty z miekkim cieniem,
   zaokraglenia 8-14px (bez pigulek 999px). Szczegoly: docs/DESIGN.md sekcja 6.
   Kontrasty policzone na tle, na ktorym kolor faktycznie lezy.
   ========================================================================== */

/* --- fonty self-hosted, zero obcych hostow ------------------------------- */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Besley';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/besley-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Besley';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/besley-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --- tokeny -------------------------------------------------------------- */
:root {
  /* kolory - podmiana marki = podmiana tych wartosci */
  --paper:        #F6F0E7;   /* cieple kremowe tlo strony */
  --card:         #FFFCF7;   /* karty i panele - odrobine jasniejsze od papieru */
  --surface:      #EEE5D8;   /* tlo pol, pasmo zaufania, stopka */
  --ink:          #2B2621;
  --ink-muted:    #675D54;
  --brick:        #A9503A;
  --brick-strong: #8C3F2B;
  --brick-soft:   #F3E1D8;
  --moss:         #3E654B;
  --moss-soft:    #E1EBE2;
  --line:         #E5DBCD;
  --line-strong:  #B9AC9C;

  /* pasek gorny i stopka w wersji ciemnej (HEADER_STYLE = 'dark'), kontrasty w DESIGN.md 2a */
  --bar-dark:      #16263D;   /* granat hotelowy, ten sam odcien co nakladka hero */
  --bar-ink:       #F6F0E7;   /* 13.4:1 na --bar-dark */
  --bar-ink-muted: #C3CBD6;   /*  9.3:1 */
  --bar-accent:    #E39A80;   /*  6.7:1 - znak logo i obrys focusu na ciemnym */
  --bar-hover:     rgba(255, 255, 255, 0.10);

  /* nakladka na zdjecie hero ("jak na stronach hoteli", Beata 24.09): kolor + krycie w jednym */
  --hero-tint: rgba(34, 84, 150, 0.30);
  --hero-shade: 10 24 46;   /* przyciemnienie pod tekstem (kanaly RGB), granat zamiast czerni */

  --ff-text: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-head: 'Besley', Georgia, 'Times New Roman', serif;
  /* liczby (ceny, liczniki) zawsze krojem tekstu: w pliku Besley glif "0" nie ma osi
     grubosci i przy 650 rysuje sie cienko obok grubych cyfr (zglosil Michal 24.09) */
  --ff-num:  var(--ff-text);

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-lg:   clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --fs-h3:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --fs-h2:   clamp(1.5rem, 1.28rem + 1.1vw, 2.125rem);
  --fs-h1:   clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
  --fs-hero: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);

  /* miekkosc (decyzja Michala 23.09): umiarkowane zaokraglenia, cienie ciepłe i rozmyte */
  --r-s: 8px;
  --r:   14px;
  --sh-1: 0 1px 2px rgba(70, 48, 28, 0.05), 0 6px 18px rgba(70, 48, 28, 0.06);
  --sh-2: 0 2px 4px rgba(70, 48, 28, 0.06), 0 16px 36px rgba(70, 48, 28, 0.12);

  --pad-card:  1.1rem;
  --pad-sec:   clamp(2.25rem, 5vw, 4rem);
  --wrap:      74rem;
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Kolorystyki do wyboru w panelu (Ustawienia -> Kolorystyka, 28.10): podmieniaja tylko kolory, nakladka hero
   zostaje (HERO_TINT). Akcent z bialym tekstem na przycisku >= 4.5:1, --bar-accent na --bar-dark >= 4.5:1. */
html[data-theme="sea"] {
  --paper: #F1F5F7; --card: #FBFDFE; --surface: #E2EAEF; --ink: #1E2A33; --ink-muted: #55636F;
  --brick: #1D6A85; --brick-strong: #15536A; --brick-soft: #DAECF2;
  --line: #D6E0E6; --line-strong: #A3B2BD;
  --bar-dark: #102C44; --bar-ink: #F1F5F7; --bar-ink-muted: #BFCEDA; --bar-accent: #7CC4DC;
}
html[data-theme="forest"] {
  --paper: #F3F4EE; --card: #FCFCF8; --surface: #E5E9DD; --ink: #232921; --ink-muted: #5B6455;
  --brick: #3B6845; --brick-strong: #2D5135; --brick-soft: #DEEADF;
  --moss: #2F6B60; --moss-soft: #DCEBE7;
  --line: #DCE1D3; --line-strong: #AAB39F;
  --bar-dark: #1C2A21; --bar-ink: #F3F4EE; --bar-ink-muted: #C4CEBF; --bar-accent: #A5D39E;
}
html[data-theme="graphite"] {
  --paper: #F4F4F3; --card: #FFFFFF; --surface: #E8E8E6; --ink: #1D1E20; --ink-muted: #5A5C60;
  --brick: #2E4A8C; --brick-strong: #223A72; --brick-soft: #DFE6F4;
  --line: #DDDDDA; --line-strong: #A9AAA8;
  --bar-dark: #1D1F23; --bar-ink: #F4F4F3; --bar-ink-muted: #C6C8CC; --bar-accent: #9DB3EC;
}

/* --- reset minimalny ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-text);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
img, picture, video { max-width: 100%; }
img { height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--ff-head); line-height: 1.15; margin: 0; font-weight: 550; }
p { margin: 0 0 0.75em; }
a { color: var(--brick); text-underline-offset: 0.18em; }
a:hover { color: var(--brick-strong); }
:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; border-radius: 4px; }

/* --- utilities ----------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 40rem) { .wrap { padding-inline: 1.5rem; } }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
}
.skip:focus { left: 0; }

/* --- naglowki sekcji ----------------------------------------------------- */
.h-page { font-size: var(--fs-h1); margin: 0 0 0.4em; letter-spacing: -0.01em; }
.h-sec  { font-size: var(--fs-h2); margin: 0 0 0.6em; letter-spacing: -0.005em; }
.lead   { font-size: var(--fs-lg); color: var(--ink-muted); max-width: 42ch; }
.prose  { max-width: 66ch; }
.prose p:last-child { margin-bottom: 0; }
.prose__h { font-size: var(--fs-h3); margin: 1.6em 0 0.5em; }
.wa-reply { margin: -0.35rem 0 0; font-size: var(--fs-sm); color: var(--ink-muted); text-align: center; }
.about-fig { display: block; margin: 0.4rem 0 1.8rem; }
/* lewa 1/3 ilustracji to tlo w kolorze --paper: na szerokim ekranie wtapia sie w strone (maska), na telefonie kadr z prawej */
.about-fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 60%; border-radius: 0 var(--r) var(--r) 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%); mask-image: linear-gradient(to right, transparent, #000 22%); }
@media (max-width: 40rem) { .about-fig img { aspect-ratio: 4 / 3; object-position: 85% 50%; border-radius: var(--r); -webkit-mask-image: none; mask-image: none; } }
.sec { padding-block: var(--pad-sec); }
.sec--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }
.sec__more { margin: 1.5rem 0 0; }
.lnk-more { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }

/* --- przyciski ----------------------------------------------------------- */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.8rem 1.3rem;
  border-radius: var(--r-s);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease,
              box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.btn--solid { background: var(--brick); color: #FFF; border-color: var(--brick); box-shadow: 0 2px 6px rgba(20, 16, 12, 0.14); }
.btn--solid:hover, .btn--solid:focus-visible {
  background: var(--brick-strong); border-color: var(--brick-strong); color: #FFF;
  box-shadow: 0 6px 16px rgba(20, 16, 12, 0.2); transform: translateY(-1px);
}
.btn--ghost { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--ink); color: var(--ink); background: var(--card); box-shadow: var(--sh-1); }
.btn--light { background: rgba(255, 252, 247, 0.12); color: #FFF; border-color: rgba(255, 255, 255, 0.55); }
.btn--light:hover, .btn--light:focus-visible { background: rgba(255, 252, 247, 0.22); color: #FFF; border-color: #FFF; }
.btn--wide { display: block; width: 100%; text-align: center; }

/* --- header -------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(6px)) and (background: color-mix(in srgb, red 50%, transparent)) {
  .site-head { background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: saturate(1.2) blur(8px); }
}
.site-head__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
  padding-block: 0.7rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--ink); text-decoration: none; margin-right: auto;
}
.brand__mark { color: var(--brick); flex: none; }
.brand__mark { display: block; }
/* logo tekstowe: nazwa w linii, kreska, pod nia miasto wersalikami (jak w logo klientki) */
.brand__txt { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; }
.brand__name {
  font-family: var(--ff-text); font-weight: 500; font-size: 1.2rem; letter-spacing: 0.01em;
  white-space: nowrap; padding: 0 0.1rem 0.22rem; border-bottom: 1px solid currentColor;
}
.brand__city {
  font-family: var(--ff-text); font-size: 0.62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.45em; margin-right: -0.45em; padding-top: 0.28rem; color: var(--ink-muted);
}
.site-nav { order: 3; width: 100%; padding-top: 0.25rem; overflow-x: auto; }
.site-nav__list { display: flex; gap: 0.25rem; font-size: var(--fs-sm); white-space: nowrap; }
.site-nav__list a {
  display: inline-block; padding: 0.4rem 0.7rem; border-radius: var(--r-s);
  color: var(--ink-muted); text-decoration: none; transition: background-color 160ms ease, color 160ms ease;
}
.site-nav__list a:hover { color: var(--ink); background: var(--surface); }

.langsw__list { display: flex; gap: 0.25rem; font-size: var(--fs-sm); font-weight: 600; padding: 0.2rem; background: var(--surface); border-radius: var(--r-s); }
.langsw__list a, .langsw__cur {
  display: inline-block; padding: 0.25rem 0.55rem; border-radius: 6px; text-decoration: none;
}
.langsw__cur { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(70, 48, 28, 0.12); }
.langsw__list a { color: var(--ink-muted); }
.langsw__list a:hover { color: var(--ink); }

/* 28.09: Zadzwon + WhatsApp po prawej. Telefon: same ikony 40 px, tekst tylko dla czytnikow. */
.head-cta { display: flex; gap: 0.4rem; }
.head-cta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-width: 40px; min-height: 40px; padding: 0 0.6rem; border-radius: var(--r-s);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line); color: var(--ink); background: var(--card);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.head-cta__btn:hover { border-color: var(--ink-muted); }
.head-cta__btn--wa { background: #1F7A4D; border-color: #1F7A4D; color: #FFF; }   /* zielen WhatsApp przyciemniona pod kontrast AA z bialym */
.head-cta__btn--wa:hover { background: #17633E; border-color: #17633E; }
.head-cta__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-head__in { column-gap: 0.75rem; }
/* telefon: rzad 1 = logo + Zadzwon/WhatsApp, rzad 2 = menu (przewijane) + jezyk */
.head-cta { order: 2; }
.site-nav { flex: 1 1 calc(100% - 7rem); width: auto; min-width: 0; }
.langsw { order: 4; }
@media (max-width: 26rem) { .brand__name { font-size: 1.05rem; } .head-cta { gap: 0.3rem; } }
@media (max-width: 23.5rem) { .brand__mark { width: 40px; height: auto; } .brand__name { font-size: 0.95rem; } .brand { gap: 0.4rem; } }
/* pasek szerszy niz tresc: menu + jezyk + 2 przyciski w jednym rzedzie na laptopie */
@media (min-width: 52rem) { .site-head .wrap { max-width: 96rem; } }
@media (min-width: 52rem) {
  .site-nav { flex: 0 1 auto; }
  .langsw, .head-cta { order: 0; }
  .site-nav__list a { padding-inline: 0.55rem; }
}
/* napisy przy ikonach dopiero, gdy caly pasek miesci sie w jednym rzedzie */
@media (min-width: 90rem) {
  .head-cta__btn { padding: 0 0.85rem; }
  .head-cta__txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

@media (min-width: 52rem) {
  .site-nav { order: 0; width: auto; padding-top: 0; overflow: visible; }
  .site-head__in { padding-block: 0.85rem; gap: 1.25rem; }
}

/* --- hero: zdjecie prawdziwej oferty + neutralne przyciemnienie ---------- */
.hero { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 3rem); }
.kicker {
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 0.85rem; font-weight: 600;
}
.hero__h {
  font-size: var(--fs-hero); font-weight: 560; letter-spacing: -0.02em;
  max-width: 16ch; margin: 0 0 0.45em;
}
.hero__lead { font-size: var(--fs-lg); max-width: 50ch; color: var(--ink-muted); margin-bottom: 1.75rem; }
.hero__count { margin: 1.1rem 0 0; font-size: var(--fs-sm); }
.hero__count strong { font-family: var(--ff-num); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.hero--photo {
  position: relative; isolation: isolate; color: #FFF;
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2rem, 5vw, 3.5rem);
  min-height: clamp(30rem, 72vh, 42rem);
  display: flex; align-items: flex-end;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* slajdy jeden na drugim; widoczny ma .is-on, zmiana = przenikanie opacity (site.js) */
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
.hero__slide.is-on { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
/* niebieska nakladka nad kazdym slajdem (::after rysuje sie za wszystkimi dziecmi) */
.hero__bg::after { content: ''; position: absolute; inset: 0; background: var(--hero-tint); }
/* 25.09: trzy poziomy niebieskiego (HERO_TINT / selektor podgladu). Jasniejsze = slabszy tint
   i mniej granatowe przyciemnienie (kanaly zblizone do neutralnych, jasnosc jak granat - kontrast
   bialego tekstu zostaje; policzony najgorszy przypadek w DESIGN.md 2b). */
[data-tint="medium"] { --hero-tint: rgba(34, 84, 150, 0.14); --hero-shade: 16 25 38; }
[data-tint="soft"]   { --hero-tint: rgba(34, 84, 150, 0.04); --hero-shade: 20 22 26; }
/* 25.09: strefy klikniecia (lewa = poprzednie, prawa = nastepne) i kropki. Strefy leza pod
   trescia (.hero__in z-index 1), wiec tekst i wyszukiwarka klikaja sie normalnie. */
.hero--photo .hero__in { position: relative; z-index: 1; }
.hero__zone {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 0;
  border: 0; padding: 0; background: transparent; cursor: pointer;
}
.hero__zone--prev { left: 0; cursor: w-resize; }
.hero__zone--next { right: 0; cursor: e-resize; }
.hero__dots {
  position: absolute; left: 50%; bottom: 1rem; z-index: 1; transform: translateX(-50%);
  display: flex; gap: 0.25rem;
}
.hero__dot {
  width: 32px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.hero__dot::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid #FFF; background: transparent; transition: background-color 0.2s;
}
.hero__dot[aria-current="true"]::before { background: #FFF; }
.hero__dot:hover::before { background: rgba(255, 255, 255, 0.6); }
.hero__dot:focus-visible { outline-color: #FFF; }
/* telefon: przycisk pauzy zajmuje prawy dol - kropki ida do lewej, zeby na siebie nie wchodzily */
@media (max-width: 40rem) { .hero__dots { left: 0.75rem; transform: none; } }

/* pauza slidera (site.js tworzy przycisk tylko, gdy slajdow jest > 1); cel dotykowy 44 px */
.hero__pause {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 1;
  min-height: 44px; padding: 0 1rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7); background: rgb(var(--hero-shade) / 0.55);
  color: #FFF; font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.hero__pause:hover { background: rgb(var(--hero-shade) / 0.8); }
.hero__pause:focus-visible { outline-color: #FFF; }
/* waski ekran: tresc hero siega dolu - rezerwujemy pas na przycisk, zeby nie nachodzil na link licznika */
@media (max-width: 60rem) { .hero--photo.hero--has-pause { padding-bottom: calc(44px + 2rem); } }
/* przyciemnienie pod tekstem (--hero-shade) - czytelnosc bialego tekstu na kazdym zdjeciu.
   Telefon: tekst idzie przez cala szerokosc, wiec rowno na calym kadrze. Od 46rem tekst stoi
   z lewej: gradient do prawie zera z prawej, zeby niebieski kadr oddychal.
   Progi sprawdzone pomiarem na najjasniejszych kadrach (DESIGN.md 2b). */
.hero--photo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgb(var(--hero-shade) / 0.45) 0%, rgb(var(--hero-shade) / 0) 40%),
    rgb(var(--hero-shade) / 0.62);
}
@media (min-width: 46rem) {
  .hero--photo::before {
    background:
      linear-gradient(90deg, rgb(var(--hero-shade) / 0.8) 0%, rgb(var(--hero-shade) / 0.66) 50%, rgb(var(--hero-shade) / 0.12) 100%),
      linear-gradient(0deg, rgb(var(--hero-shade) / 0.45) 0%, rgb(var(--hero-shade) / 0) 40%);
  }
}
.hero--photo .hero__in { width: 100%; }
.hero--photo .kicker { color: rgba(255, 255, 255, 0.94); }
.hero--photo .hero__lead { color: rgba(255, 255, 255, 0.94); }
.hero--photo .hero__count a { color: #FFF; }
.hero--photo .hsearch { color: var(--ink); }

/* --- pasek zaufania pod hero -------------------------------------------- */
.trust { background: var(--surface); }
.trust__list {
  display: grid; gap: 0.75rem 2rem; grid-template-columns: 1fr;
  padding-block: 1.1rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
@media (min-width: 46rem) { .trust__list { grid-template-columns: repeat(3, auto); justify-content: start; } }
.trust__item { display: flex; align-items: center; gap: 0.6rem; }
.trust__ico {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--card); color: var(--brick);
}
.trust__item a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.trust__item a:hover { border-color: currentColor; }

/* --- pola i formularze --------------------------------------------------- */
.field { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.field__lab { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-muted); letter-spacing: 0.01em; }
.field__in {
  font: inherit; font-size: var(--fs-base);
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--r-s);
  padding: 0.65rem 0.8rem; min-height: 2.9rem; width: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field__in:hover { border-color: var(--ink-muted); }
.field__in:focus-visible { outline: none; border-color: var(--brick); box-shadow: 0 0 0 3px var(--brick-soft); }
select.field__in { appearance: none; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23675D54' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 12px 8px;
}
.field--act { justify-content: flex-end; }
.field--act .btn { width: 100%; min-height: 2.9rem; }

.hsearch, .filters {
  background: var(--card); border-radius: var(--r); box-shadow: var(--sh-2);
  padding: 1.1rem; display: grid; gap: 0.9rem;
}
.hsearch { grid-template-columns: 1fr; max-width: 52rem; }
@media (min-width: 40rem) {
  .hsearch { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.25rem; }
  .hsearch .field--act { grid-column: 1 / -1; }
}
@media (min-width: 58rem) {
  .hsearch { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
  .hsearch .field--act { grid-column: auto; }
}

.filters { margin-bottom: 1.75rem; box-shadow: var(--sh-1); }
.filters__h { font-size: var(--fs-h3); margin: 0; }
.filters__row { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .filters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .filters__row { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; } }
.filters__act { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.filters__clear { font-size: var(--fs-sm); }

/* --- siatka kart --------------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 38rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* strona glowna: jedna siatka - duza karta 2 kolumny x 2 rzedy, reszta obok i pod nia.
   Wysokosc duzej = 2 male karty niezaleznie od liczby wyroznionych (1-6). Nie wracac do "duza = wysokosc kolumny":
   przy 5 kartach obok zdjecie mialo ~2000 px (20.10). */
.feat { display: grid; gap: 1.5rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 38rem) {
  .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat__lead { grid-column: 1 / -1; }
}
@media (min-width: 68rem) {
  .feat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feat__lead { grid-column: span 2; }
  .feat--tall .feat__lead { grid-row: span 2; }
  .feat--tall .card--big .card__media { flex: 1 1 auto; min-height: 22rem; }
  .feat--tall .card--big .card__ph, .feat--tall .card--big .card__ph img { height: 100%; }
  .feat--tall .card--big .card__ph img { aspect-ratio: auto; }
}

/* --- karta oferty -------------------------------------------------------- */
.card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--card); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh-1);
  transition: box-shadow 260ms var(--ease), transform 260ms var(--ease);
}
.card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.card__media { position: relative; background: var(--surface); overflow: hidden; }
.card__ph { display: block; }
.card__ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 600ms var(--ease); }
.card:hover .card__ph img { transform: scale(1.03); }
.card--big .card__ph img { aspect-ratio: 16 / 10; }
.card--big .card__title { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); }
.card--big .card__body { padding: 1.35rem 1.5rem 1.5rem; }

.ph--empty {
  display: grid; place-items: center; aspect-ratio: 3 / 2;
  background: var(--surface); color: var(--line-strong);
}
.card__flags { position: absolute; left: 0; top: 0; display: flex; gap: 0.35rem; padding: 0.75rem; }

.card__body { padding: var(--pad-card) var(--pad-card) 1.25rem; display: flex; flex-direction: column; }
.card__type {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--brick); margin: 0 0 0.35rem; font-weight: 700;
}
.card__title { font-size: var(--fs-h3); margin: 0 0 0.45rem; font-weight: 580; line-height: 1.25; }
.card__link { color: var(--ink); text-decoration: none; }
.card__link::after { content: ''; position: absolute; inset: 0; }
.card__link:hover { color: var(--brick-strong); }
.card__place {
  font-size: var(--fs-sm); color: var(--ink-muted); margin: 0 0 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem;
}
.card__district { font-weight: 600; color: var(--ink); }
.card__meta {
  font-size: var(--fs-sm); color: var(--ink-muted); margin: 0.6rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem;
}
.card .price { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--line); }

/* --- cena ---------------------------------------------------------------- */
.price { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.price__num {
  font-family: var(--ff-num); font-weight: 700; font-size: 1.45rem;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.price__per { font-size: var(--fs-sm); color: var(--ink-muted); }
.price__split { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0.2rem 0 0; }
.price--big .price__num { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem); }

/* --- badge --------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.01em;
  padding: 0.35rem 0.7rem; border-radius: var(--r-s);
  box-shadow: 0 2px 8px rgba(20, 16, 12, 0.12);
}
.badge--now    { background: var(--moss);  color: #FFF; }
.badge--now::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #BFE3C8; }
.badge--soon   { background: var(--card);  color: var(--ink); }
.badge--rented { background: var(--surface); color: var(--ink-muted); box-shadow: none; }
.badge--cut    { background: var(--brick); color: #FFF; }

/* --- skroty i listy linkow ---------------------------------------------- */
.shortcuts { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shortcuts__col { background: var(--card); border-radius: var(--r); padding: 1.4rem 1.5rem; box-shadow: var(--sh-1); }
.shortcuts__col .h-sec { font-size: var(--fs-h3); }
.linklist li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border-bottom: 1px solid var(--line);
}
.linklist li:last-child { border-bottom: 0; }
.linklist a {
  flex: 1; padding: 0.7rem 0; text-decoration: none; font-weight: 600; color: var(--ink);
  transition: color 160ms ease, padding-left 200ms var(--ease);
}
.linklist a::after { content: ' \2192'; color: var(--brick); opacity: 0; transition: opacity 160ms ease; }
.linklist a:hover { color: var(--brick-strong); padding-left: 0.25rem; }
.linklist a:hover::after { opacity: 1; }
.linklist__n {
  color: var(--ink-muted); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface); border-radius: 6px; padding: 0.15rem 0.5rem;
}

.about-short {
  background: var(--card); border-radius: var(--r); box-shadow: var(--sh-1);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.about-short__p { max-width: 60ch; font-size: var(--fs-lg); color: var(--ink-muted); }

/* --- katalog ------------------------------------------------------------- */
.cat { padding-block: clamp(1.75rem, 4vw, 3rem); }
.cat__count { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0 0 1.25rem; }
.cat__count strong { font-family: var(--ff-num); font-weight: 700; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.empty { background: var(--card); border-radius: var(--r); box-shadow: var(--sh-1); padding: 1.75rem; max-width: 46rem; }

.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2.25rem; font-size: var(--fs-sm);
}
.pager__side {
  font-weight: 600; text-decoration: none; padding: 0.55rem 0.95rem;
  background: var(--card); border-radius: var(--r-s); box-shadow: var(--sh-1);
}
.pager__side:hover { box-shadow: var(--sh-2); }
.pager__side--off { visibility: hidden; }
.pager__pos { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* --- oferta -------------------------------------------------------------- */
.offer { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.offer__head { margin-bottom: 1.25rem; }
.offer__type {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--brick); font-weight: 700; margin: 0 0 0.4rem;
}
.offer__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; }
.offer__flags .badge { box-shadow: none; border: 1px solid var(--line); }
.offer__flags .badge--now { border-color: var(--moss); }
.offer__district { font-size: var(--fs-sm); color: var(--ink-muted); font-weight: 600; }

.offer__cols { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1.75rem; }
.offer__main > section { padding-block: 1.75rem; border-top: 1px solid var(--line); }
.offer__main > section:first-child { padding-top: 0; border-top: 0; }
.offer__main h2 { font-size: var(--fs-h3); }
@media (min-width: 62rem) {
  .offer__cols { grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 1fr); gap: 3rem; }
  .offer__side { position: sticky; top: 5.5rem; align-self: start; }
  .offer__main .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pricebox {
  background: var(--card); border-radius: var(--r); box-shadow: var(--sh-2);
  padding: 1.5rem;
}
.pricebox .h-sec { font-size: var(--fs-h3); }

.dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; margin: 0 0 1.25rem; }
.dl dt { color: var(--ink-muted); font-size: var(--fs-sm); }
.dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.dl--tight { gap: 0.4rem 1rem; }

.taglist { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.taglist li {
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(70, 48, 28, 0.04);
  padding: 0.4rem 0.8rem; font-size: var(--fs-sm); border-radius: var(--r-s);
}

/* udogodnienia w grupach (19.10): ikona w miekkim kolku + etykieta, 2 kolumny na telefonie */
.amen { display: grid; gap: 1.4rem; }
.amen__h { font-size: var(--fs-base); font-weight: 600; margin: 0 0 0.25rem; }
.amen__note { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0 0 0.6rem; }
.amen__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1rem; margin-top: 0.6rem; }
@media (min-width: 46rem) { .amen__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.amen__it { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); min-width: 0; }
.amen__ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--moss-soft); color: var(--moss);
}
.amen__grp--shared .amen__ico { background: var(--brick-soft); color: var(--brick-strong); }
.amen__grp--building .amen__ico { background: var(--surface); color: var(--ink-muted); }

/* Dojazd (19.10): pasek odleglosci (skala log), zielony = pieszo, granat = komunikacja */
.ga__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: var(--fs-xs); color: var(--ink-muted); margin: 0 0 0.8rem; }
.ga__key::before { content: ""; display: inline-block; width: 1.4rem; height: 0.35rem; border-radius: 999px; margin-right: 0.4rem; vertical-align: middle; }
.ga__key--walk::before { background: var(--moss); }
.ga__key--transit::before { background: var(--bar-dark); }
.ga__list { display: grid; gap: 0.15rem; }
.ga__it {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; align-items: center;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line);
}
.ga__ico {
  grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--moss-soft); color: var(--moss);
}
.ga__it--transit .ga__ico { background: var(--surface); color: var(--bar-dark); }
.ga__body { display: grid; gap: 0.3rem; min-width: 0; }
.ga__name { font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ga__bar { display: block; width: 100%; height: 6px; }
.ga__bar-bg { fill: var(--surface); }
.ga__bar-fg { fill: var(--moss); }
.ga__it--transit .ga__bar-fg { fill: var(--bar-dark); opacity: 0.75; }
.ga__meta { font-size: var(--fs-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ga__meta strong { color: var(--ink); font-weight: 600; }
.ga__route {
  grid-column: 2; justify-self: start; font-size: var(--fs-sm); color: var(--brick-strong); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; padding: 0.35rem 0; min-height: 2.75rem; display: inline-flex; align-items: center;
}
@media (min-width: 46rem) {
  .ga__it { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ga__ico { grid-row: auto; }
  .ga__route { grid-column: auto; justify-self: end; }
}
.ga__it--stop .ga__ico { background: var(--brick-soft); color: var(--brick-strong); }
.ga__it--stop .ga__bar-fg { fill: var(--moss); }
.ga__it--far .ga__name, .ga__it--far .ga__meta { color: var(--ink-muted); }
.ga__lines { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: var(--fs-sm); }
.ga__ln { display: inline-grid; place-items: center; min-width: 1.9rem; padding: 0.05rem 0.4rem; border-radius: 4px;
  font-weight: 700; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: #fff; }
.ga__ln--tram { background: #B4232C; }   /* czerwien tramwajow warszawskich; bialy tekst 6,5:1 */
.ga__ln--bus { background: #375A7F; }    /* 7,2:1 */
.ga__to { color: var(--ink); font-weight: 600; }
.ga__ride { font-size: var(--fs-sm); color: var(--ink-muted); }
.ga__sub { font-size: var(--fs-base); font-weight: 600; margin: 1.4rem 0 0.2rem; }
.ga__more summary { cursor: pointer; padding: 0.8rem 0; font-size: var(--fs-sm); font-weight: 600; color: var(--brick-strong); min-height: 2.75rem; }
/* 19.10 runda 4: piktogramy komunikacji w kolorystyce WTP (biale na #EE3124, kontrast grafiki 4,1:1 >= 3:1), pieszo = Material */
.ga__ico--badge { background: none; }
.tico { display: block; width: 2.4rem; height: 2.4rem; }
.tico__bg { fill: #EE3124; }
.tico__fg { fill: #fff; }
.tico__ln { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }
.tico__ln--wheel { stroke-width: 1.8; }
.tico__m { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tico__m--red { stroke: #E5261E; stroke-width: 2.4; }
.tico__y { fill: #FFDC00; stroke: #E5261E; stroke-width: 2; }
.ico-walk { width: 1em; height: 1em; fill: currentColor; color: var(--ink); vertical-align: -0.12em; margin-right: 0.2rem; }
.ga__ln--metro { background: var(--bar-dark); }
.ga__src strong { color: var(--ink); font-weight: 600; }
.ga__src { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 0.9rem; }
.ga__src a { color: inherit; }

/* galeria: bez JS pionowa lista, z JS przewijana pozioma tasma */
.gal__list { display: grid; gap: 0.6rem; }
.gal__ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.gal--js .gal__list {
  display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.gal--js .gal__list::-webkit-scrollbar { display: none; }
.gal--js .gal__item { flex: 0 0 88%; scroll-snap-align: start; }
@media (min-width: 46rem) { .gal--js .gal__item { flex-basis: 62%; } }
@media (min-width: 62rem) { .gal--js .gal__item { flex-basis: 48%; } }
/* 19.10: strzalki na krawedziach zdjecia + licznik na zdjeciu (bez paska pod galeria).
   Biale kolko z cieniem = czytelne na jasnym i ciemnym kadrze; 40 px telefon, 44 px mysz. */
.gal__stage { position: relative; }
.gal__btn {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; cursor: pointer;
  background: rgba(255, 252, 247, 0.94); color: #2B2621;
  border: 0; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.gal__btn--prev { left: 0.5rem; }
.gal__btn--next { right: 0.5rem; }
.gal__btn:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); transform: translateY(-50%) scale(1.06); }
.gal__btn:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .gal__btn { width: 2.75rem; height: 2.75rem; }
  .gal__stage .gal__btn:not(:disabled) { opacity: 0.82; }
  .gal__stage:hover .gal__btn:not(:disabled), .gal__btn:focus-visible { opacity: 1; }
}
.gal__count {
  position: absolute; left: 0.6rem; bottom: 0.6rem; z-index: 2; pointer-events: none;
  padding: 0.2rem 0.55rem; border-radius: 999px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  background: rgba(22, 38, 61, 0.72); color: #fff;
}

/* miniatury pod galeria (19.10) - przewijane poziomo, aktywna z obwodka */
.gal__thumbs { display: flex; gap: 0.4rem; margin-top: 0.6rem; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.gal__thumbs::-webkit-scrollbar { display: none; }
.gal__thumb { flex: 0 0 auto; width: 4.5rem; height: 3rem; padding: 0; border: 0; border-radius: var(--r-s); overflow: hidden;
  cursor: pointer; opacity: 0.65; outline: 2px solid transparent; outline-offset: 1px; background: var(--surface);
  transition: opacity 150ms var(--ease); }
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal__thumb:hover, .gal__thumb.is-on { opacity: 1; }
.gal__thumb.is-on { outline-color: var(--brick); }
.gal__ph.is-zoom { cursor: zoom-in; }

/* pelny ekran zdjec (<dialog>) */
.lbx { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(12, 16, 24, 0.96); color: #fff; }
.lbx::backdrop { background: rgba(12, 16, 24, 0.96); }
.lbx[open] { display: grid; place-items: center; }
.lbx__img { max-width: 100vw; max-height: 100dvh; width: auto; height: auto; object-fit: contain; touch-action: pan-y; user-select: none; }
.lbx__x { position: absolute; top: 0.5rem; right: 0.5rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
  font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; background: rgba(255, 252, 247, 0.94); color: #2B2621; }
.lbx__count { position: absolute; left: 50%; bottom: 0.8rem; transform: translateX(-50%); padding: 0.2rem 0.6rem;
  border-radius: 999px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.5); }
.lbx .gal__btn--prev { left: 0.6rem; }
.lbx .gal__btn--next { right: 0.6rem; }
html.is-lbx { overflow: hidden; }

/* Ken Burns: wolny najazd na zdjecie widoczne w tasmie (klase .is-on daje JS).
   Sam transform - bez udawania glebi, wiec obraz nie ma sie gdzie rozjechac.
   4 kierunki na zmiane, zeby kolejne zdjecia nie jechaly identycznie. */
.gal--js .gal__ph { display: block; overflow: hidden; border-radius: var(--r); }
.gal--js .gal__ph img { transform-origin: 50% 50%; will-change: transform; }
.gal--js .gal__item.is-on .gal__ph img { animation: kb-a 16s ease-in-out infinite alternate; }
.gal--js .gal__item.is-on:nth-child(4n+2) .gal__ph img { animation-name: kb-b; }
.gal--js .gal__item.is-on:nth-child(4n+3) .gal__ph img { animation-name: kb-c; }
.gal--js .gal__item.is-on:nth-child(4n+4) .gal__ph img { animation-name: kb-d; }
@keyframes kb-a { from { transform: scale(1.02) translate(0, 0); }      to { transform: scale(1.12) translate(-2.5%, -1.5%); } }
@keyframes kb-b { from { transform: scale(1.12) translate(2%, 1%); }     to { transform: scale(1.02) translate(0, 0); } }
@keyframes kb-c { from { transform: scale(1.05) translate(1.5%, -1%); }  to { transform: scale(1.12) translate(-1%, 2%); } }
@keyframes kb-d { from { transform: scale(1.12) translate(-2%, 1.5%); }  to { transform: scale(1.05) translate(1.5%, 0); } }

/* 25.09: Ken Burns takze w hero. Ruch leci stale na kazdym slajdzie (tez niewidocznym), inaczej
   gasnacy kadr przeskakiwalby do skali 1 w trakcie przenikania. Kierunki jak w galerii.
   Kadr LCP (pierwszy) rusza od razu; prefers-reduced-motion - blok nizej wylacza. */
.hero__slide img { transform-origin: 50% 50%; will-change: transform; animation: kb-a 14s ease-in-out infinite alternate; }
.hero__slide:nth-child(4n+2) img { animation-name: kb-b; }
.hero__slide:nth-child(4n+3) img { animation-name: kb-c; }
.hero__slide:nth-child(4n+4) img { animation-name: kb-d; }
/* panel: Ustawienia -> Animacja zdjec wylaczona = <html data-motion="off"> */
[data-motion="off"] .hero__slide img,
[data-motion="off"] .gal--js .gal__item.is-on .gal__ph img { animation: none; transform: none; }
/* pauza (WCAG 2.2.2) zatrzymuje tez ruch kamery, nie tylko zmiane slajdow */
.hero__bg.is-paused .hero__slide img { animation-play-state: paused; }

.vid { width: 100%; height: auto; background: var(--ink); border-radius: var(--r); }

/* mapa: nic nie leci do Google przed kliknieciem */
.map { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
/* mapa: zrzut Google w tle (pelny, z atrybucja Google), baner u gory - pinezka (srodek kadru) zostaje widoczna */
.map__frame { position: relative; flex: 1 0 100%; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line);
  aspect-ratio: 16 / 9; background: var(--surface); }
.map__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.map__panel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  padding: 1.1rem 1rem; pointer-events: none; }
.map__panel[hidden] { display: none; }
.map__txt { max-width: 44ch; margin: 0; padding: 0.75rem 1rem; text-align: center; font-size: var(--fs-sm); line-height: 1.45;
  background: rgba(255, 252, 247, 0.95); color: var(--ink); border-radius: var(--r-s); box-shadow: 0 6px 22px rgba(22, 38, 61, 0.25); }
.map__go { pointer-events: auto; box-shadow: 0 4px 14px rgba(22, 38, 61, 0.3); }
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* telefon: wyzszy kadr, zeby baner nie zjadal mapy i pinezka zostala widoczna pod nim */
@media (max-width: 45rem) {
  .map__frame { aspect-ratio: 4 / 5; }
  .map__txt { font-size: var(--fs-xs); padding: 0.6rem 0.8rem; }
}

.share { padding-block: 1.75rem; border-top: 1px solid var(--line); }
.share__list { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.share__copy { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.75rem 0 0; }
.share__url {
  font: inherit; font-size: var(--fs-sm); padding: 0.6rem 0.75rem; width: min(34rem, 100%);
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink);
}
.share__done { font-size: var(--fs-sm); color: var(--moss); font-weight: 600; }
.share__hint { margin: 0.25rem 0 0.9rem; font-size: var(--fs-sm); color: var(--ink-muted); }
/* 20.10 "Udostepnij" przy tytule: natywny arkusz telefonu albo skok do sekcji #udostepnij */
.sharebtn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; }
.sharebtn[hidden] { display: none; }
.sharebtn__ic { flex: none; }

/* sticky CTA - tylko mobile; pinuje sie przy scrollu, nie zaslania stopki */
.stickycta {
  position: sticky; bottom: 0.75rem; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin: 1rem 0; padding: 0.6rem 0.6rem 0.6rem 1rem;
  background: var(--card); border-radius: var(--r); box-shadow: var(--sh-2);
}
.stickycta__price {
  font-family: var(--ff-num); font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (min-width: 62rem) { .stickycta { display: none; } }

/* --- mieszkanie, strony tekstowe ---------------------------------------- */
.estate { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.estate > section { padding-block: 1.75rem; border-top: 1px solid var(--line); }
.estate__place { display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; color: var(--ink-muted); font-size: var(--fs-sm); }
.page-txt { padding-block: clamp(2rem, 5vw, 3.5rem); max-width: 52rem; }
.contact { display: grid; gap: 0.9rem; margin: 1.5rem 0; background: var(--card); border-radius: var(--r); box-shadow: var(--sh-1); padding: 1.5rem; }
.contact__lab { color: var(--ink-muted); font-size: var(--fs-sm); margin-right: 0.5rem; }
.page-404 { min-height: 40vh; }

/* --- stopka -------------------------------------------------------------- */
.site-foot { background: var(--surface); margin-top: clamp(2.5rem, 7vw, 5rem); }
.site-foot__in {
  display: grid; gap: 1.5rem 3rem; grid-template-columns: 1fr;
  padding-block: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 46rem) { .site-foot__in { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot__brand { font-family: var(--ff-head); font-weight: 600; font-size: 1.2rem; margin: 0 0 0.4rem; }
.site-foot__note { color: var(--ink-muted); font-size: var(--fs-sm); max-width: 40ch; margin: 0; }
.site-foot__h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); margin: 0 0 0.6rem; font-family: var(--ff-text); font-weight: 700; }
.site-foot__links li { padding: 0.2rem 0; font-size: var(--fs-sm); }
.site-foot__links a { color: var(--ink); text-decoration: none; }
.site-foot__links a:hover { color: var(--brick-strong); text-decoration: underline; }
.site-foot__mail { font-size: var(--fs-sm); margin: 0.75rem 0 0; }
.site-foot__mail a { color: var(--ink); }
.site-foot__credit { font-size: var(--fs-xs); color: var(--ink-muted); margin-block: 0; padding-block: 0 1.25rem; }
.site-foot__credit a { color: inherit; }

/* --- ruch: tylko celowy, i zawsze wylaczalny ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__slide img { animation: none !important; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .btn--solid:hover { transform: none; }
  .card:hover .card__ph img { transform: none; }
  .gal--js .gal__list { scroll-snap-type: none; }
  .gal--js .gal__item.is-on .gal__ph img { animation: none !important; transform: none; }
  .hero__slide { transition: none; }
}

/* --- druk: karta oferty na kartce dla ogladajacego ---------------------- */
@media print {
  .site-nav, .langsw, .head-cta, .stickycta, .share, .map__panel, .site-foot { display: none; }
  .site-head { position: static; }
  body { background: #fff; }
  .card, .pricebox { box-shadow: none; border: 1px solid #ccc; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 0.75em; word-break: break-all; }
}


/* --- pasek gorny i stopka: wersja ciemna (html[data-header="dark"]) ------
   Jasna = reguly wyzej. Tu tylko roznice; kolory wylacznie z tokenow --bar-*. */
html[data-header="dark"] .site-head { background: var(--bar-dark); border-bottom-color: transparent; }
@supports (backdrop-filter: blur(6px)) and (background: color-mix(in srgb, red 50%, transparent)) {
  html[data-header="dark"] .site-head { background: color-mix(in srgb, var(--bar-dark) 94%, transparent); }
}
html[data-header="dark"] .brand { color: var(--bar-ink); }
html[data-header="dark"] .brand__mark { color: var(--bar-accent); }
html[data-header="dark"] .brand__city { color: var(--bar-ink-muted); }
html[data-header="dark"] .site-nav__list a { color: var(--bar-ink-muted); }
html[data-header="dark"] .site-nav__list a:hover { color: var(--bar-ink); background: var(--bar-hover); }
html[data-header="dark"] .langsw__list { background: var(--bar-hover); }
html[data-header="dark"] .langsw__list a { color: var(--bar-ink-muted); }
html[data-header="dark"] .langsw__list a:hover { color: var(--bar-ink); }
html[data-header="dark"] .head-cta__btn--call { background: transparent; border-color: var(--bar-ink-muted); color: var(--bar-ink); }
html[data-header="dark"] .head-cta__btn--call:hover { background: var(--bar-hover); }
html[data-header="dark"] :is(.site-head, .site-foot) :focus-visible { outline-color: var(--bar-accent); }

html[data-header="dark"] .site-foot { background: var(--bar-dark); color: var(--bar-ink); }
html[data-header="dark"] :is(.site-foot__note, .site-foot__h, .site-foot__credit) { color: var(--bar-ink-muted); }
html[data-header="dark"] :is(.site-foot__links a, .site-foot__mail a) { color: var(--bar-ink); }
html[data-header="dark"] .site-foot__links a:hover { color: #FFF; }
html[data-header="dark"] .site-foot .btn--ghost { border-color: var(--card); }

/* --- selektor paska light/dark (tylko podglad, THEME_PICKER) ------------ */
.tpick {
  position: fixed; right: 0.75rem; bottom: 0.75rem; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; max-width: calc(100vw - 1.5rem);
  padding: 0.4rem; background: #1F1B17; color: #FFF; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); font-family: system-ui, sans-serif; font-size: 0.8125rem;
}
.tpick__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem; }
.tpick__lab { padding: 0 0.4rem; opacity: 0.7; }
.tpick__btn {
  font: inherit; color: #FFF; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px; padding: 0.4rem 0.7rem; cursor: pointer;
}
.tpick__btn[aria-pressed="true"] { background: #FFF; color: #1F1B17; border-color: #FFF; }
/* telefon: bez etykiety (zostaje aria-label grupy), zeby nie zaslanial przyciskow strony */
@media (max-width: 40rem) {
  .tpick { right: 0.5rem; bottom: 0.5rem; padding: 0.3rem; }
  .tpick__lab { display: none; }
  .tpick__btn { padding: 0.3rem 0.55rem; }
}
@media print { .tpick { display: none; } }

/* --- F2/F3 (24.09): dojazd i ikony wyposazenia na karcie, drugi przycisk w pasku ---------- */
.ico { width: 1.15rem; height: 1.15rem; flex: none; color: var(--brick-strong); }
.card__place:empty { display: none; }
.card__go { margin: -0.4rem 0 0.8rem; display: grid; gap: 0.3rem; font-size: var(--fs-sm); color: var(--ink); }
.card__go li { display: flex; align-items: center; gap: 0.45rem; }
.card__icons { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.2rem; }
.card__icons li {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: var(--r-s); background: var(--surface);
}
.card__icons .ico { width: 1.2rem; height: 1.2rem; color: var(--ink); }
.taglist li { display: inline-flex; align-items: center; gap: 0.4rem; }
.stickycta { flex-wrap: wrap; }
.stickycta .btn { padding-inline: 0.9rem; }
.stickycta__nv { font-size: var(--fs-sm); }
@media (max-width: 26rem) {
  .stickycta { padding: 0.6rem; }
  .stickycta__price { flex-basis: 100%; }
  .stickycta .btn { flex: 1 1 0; text-align: center; }
}

/* podglad ukrytej oferty dla zalogowanego zespolu (18.10) */
.preview-bar { margin: 0; padding: 0.75rem 1rem; text-align: center; font-weight: 700; background: #F6EBD3; color: #5E420C; }

/* warunki najmu (21.10): zwykla lista z kropka w kolorze marki */
.terms { display: grid; gap: 0.45rem; }
.terms li { position: relative; padding-left: 1.1rem; }
.terms li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--brick);
}

/* --- 22.10 STRONA: poprawki po audycie ------------------------------------------------------ */
/* Z-12: menu na telefonie zawija sie do kolejnego rzedu zamiast ucinac slowo ("Availa...") */
@media (max-width: 51.99rem) {
  .site-nav { overflow-x: visible; }
  .site-nav__list { flex-wrap: wrap; row-gap: 0.1rem; }
  .site-nav__list a { padding: 0.35rem 0.55rem; }
}
/* Z-01: fakty pod tytulem oferty - tylko telefon/tablet (desktop ma boks ceny obok, bez zmian) */
.offer__facts { margin-top: 0.9rem; font-size: var(--fs-sm); color: var(--ink); }
.offer__facts p { margin: 0; }
.offer__facts-line strong { font-family: var(--ff-num); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.offer__dot { color: var(--ink-muted); }
@media (min-width: 62rem) { .offer__facts { display: none; } }
.stickycta__per { font-family: var(--ff-text); font-weight: 500; font-size: var(--fs-xs); color: var(--ink-muted); margin-left: 0.2rem; }
/* Z-02: pusty wynik - komunikat + WhatsApp */
.empty .h-sec { margin-top: 0; }
.empty__wa { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.empty__wa p { margin: 0 0 0.6rem; }
/* Z-04: dojazd do metra na karcie - przystanek w drugiej linii */
.card__metro { align-items: flex-start !important; }
.card__metro > span { display: grid; }
.card__metro .tico { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.1rem; }
.card__metro .ico { margin-top: 0.1rem; }
.card__metro-sub { font-size: var(--fs-xs); color: var(--ink-muted); }
/* selektor wariantow (THEME_PICKER, demo): zwiniety do malej zakladki przy prawej krawedzi - nie zaslania ceny ani tresci */
.tpick { top: 45%; bottom: auto; right: 0; padding: 0; gap: 0; border-radius: 10px 0 0 10px; max-width: calc(100vw - 1rem); }
.tpick__toggle {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 1rem; height: 2.75rem; color: #FFF;   /* 16 px = margines strony na telefonie - zakladka nie wchodzi na tresc */
}
.tpick__toggle::-webkit-details-marker { display: none; }
.tpick[open] .tpick__toggle { width: 100%; justify-content: flex-end; padding-right: 0.5rem; height: 2rem; }
.tpick__panel { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; padding: 0 0.4rem 0.4rem; }
.tpick:not([open]) .tpick__panel { display: none; }
@media (max-width: 40rem) {
  .tpick { right: 0; bottom: auto; padding: 0; }
  .tpick__panel { padding: 0 0.3rem 0.3rem; }
}
.tpick__toggle svg { width: 12px; height: 12px; }
.tpick[open] .tpick__toggle svg { width: 18px; height: 18px; }

/* --- 22.10 STRONA-2: druga runda po re-audycie ---------------------------------------------- */
/* R1-N4: menu na telefonie w JEDNYM rzedzie, przewijane w bok (Z-12 zawijalo do 2 rzedow, naglowek ~147 px).
   Slowa sie nie lamia; prawa krawedz wygasa, gdy jest co przewinac (site.js: .site-nav--more) */
@media (max-width: 51.99rem) {
  .site-nav { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-top: 0; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav__list { flex-wrap: nowrap; }
  .site-nav--more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
}
/* R2-N4: filtry katalogu zwiniete do "Filtry (n)" na telefonie; szerzej przycisk ukryty, filtry otwarte (site.js) */
.fbox { margin-bottom: 1.75rem; }
.fbox > .filters { margin-bottom: 0; }
.fbox__sum {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--sh-1);
}
.fbox__sum::-webkit-details-marker { display: none; }
.fbox[open] > .fbox__sum { margin-bottom: 0.75rem; }
@media (min-width: 40rem) { .fbox__sum { display: none; } }

/* --- 22.10 RUNDA-3 (R1b-N-b1): menu telefonu bez ucietych slow ------------------------------ */
/* site.js przenosi pozycje, ktore sie nie mieszcza, do "Wiecej"; bez JS dziala przewijanie w bok (STRONA-2) */
.site-nav__more { display: none; }
@media (max-width: 51.99rem) {
  .site-nav--prio { display: flex; align-items: center; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .site-nav--prio .site-nav__list { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .site-nav--prio .site-nav__more:not([hidden]) { display: block; position: relative; flex: none; }
  .site-nav__more > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.55rem; border-radius: var(--r-s); font-size: var(--fs-sm); font-weight: 600;
    color: var(--ink); white-space: nowrap;
  }
  .site-nav__more > summary::-webkit-details-marker { display: none; }
  .site-nav__more > summary::after {
    content: ""; width: 0.4rem; height: 0.4rem; border: solid currentColor; border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg); transition: transform 160ms ease;
  }
  .site-nav__more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
  .site-nav__more > summary:hover, .site-nav__more[open] > summary { background: var(--surface); }
  .site-nav__morelist {
    position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 60; min-width: 12rem;
    margin: 0; padding: 0.35rem; list-style: none; background: var(--card); border-radius: var(--r-s); box-shadow: var(--sh-2);
    font-size: var(--fs-sm); white-space: nowrap;
  }
  .site-nav__morelist a { display: block; padding: 0.6rem 0.75rem; border-radius: 6px; color: var(--ink); text-decoration: none; }
  .site-nav__morelist a:hover { background: var(--surface); }
  html[data-header="dark"] .site-nav__more > summary { color: var(--bar-ink); }
  html[data-header="dark"] .site-nav__more > summary:hover, html[data-header="dark"] .site-nav__more[open] > summary { background: var(--bar-hover); }
}

/* --- 22.10 PASKI: naglowek o polowe nizszy po przewinieciu + PL/EN obok telefonu --------------- */
/* Telefon: przelacznik jezyka w pierwszym rzedzie, przed sluchawka (PL/EN, telefon, WhatsApp).
   Obok logo miesci sie tylko jeden przycisk 40 px: pokazuje jezyk, na ktory mozna przejsc. */
@media (max-width: 51.99rem) {
  .langsw { order: 1; }
  .langsw__list { padding: 0; background: none; }
  .langsw__list li:has(.langsw__cur) { display: none; }
  .langsw__list a {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 0.4rem;
    border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); color: var(--ink);
  }
  html[data-header="dark"] .langsw__list a { background: transparent; border-color: var(--bar-ink-muted); color: var(--bar-ink); }
}
/* Z JS naglowek jest fixed, a w jego miejscu stoi rozporka o zmierzonej wysokosci (site.js) - zmiana wysokosci
   paska nie przesuwa tresci. Bez JS zostaje sticky jak dotad. */
.hd-spacer { height: var(--hd-full, 0px); }
.hd-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: calc(var(--hd-full, 110px) - var(--hd-c)); pointer-events: none; }
:root { --hd-c: 56px; }
@media (min-width: 52rem) { :root { --hd-c: 40px; } }
.site-head--fixed { position: fixed; left: 0; right: 0; top: 0; height: var(--hd-full); transition: height 220ms ease; }
.site-head--fixed > .site-head__in { height: 100%; align-content: center; }
.site-head--anim { overflow: clip; }
.brand { transform-origin: left center; transition: transform 220ms ease; }
.site-head--compact { height: var(--hd-c); }
.site-head--compact .site-head__in { flex-wrap: nowrap; padding-block: 0; column-gap: 0.5rem; }
.site-head--compact .site-nav { order: 1; flex: 1 1 auto; min-width: 0; width: auto; }
.site-head--compact .site-nav__list { justify-content: center; font-size: var(--fs-xs); }
.site-head--compact .site-nav--prio { justify-content: center; }
.site-head--compact .site-nav__list a { padding: 0.3rem 0.45rem; }
.site-head--compact .langsw { order: 2; }
.site-head--compact .head-cta { order: 3; }
.site-head--compact .head-cta__btn, .site-head--compact .langsw__list a { min-width: 36px; min-height: 36px; }
@media (max-width: 51.99rem) {
  .site-head--compact .brand { margin-right: 0; }
  .site-head--compact .brand__txt { display: none; }
  .site-head--compact .brand__mark { width: 34px; height: auto; }   /* szerokosc, nie scale: scale nie zwalnia miejsca dla menu */
  .site-head--compact .head-cta { gap: 0.3rem; }
  .site-head--compact .site-nav__more > summary { font-size: var(--fs-xs); padding-inline: 0.45rem; }
}
@media (min-width: 52rem) {
  .site-head--compact .site-nav { flex: 0 1 auto; margin-left: auto; }
  .site-head--compact .brand { transform: scale(0.72); }
  .site-head--compact .head-cta__btn { min-width: 30px; min-height: 30px; }
  .site-head--compact .langsw__list { padding: 0.1rem; }
  .site-head--compact .langsw__list a, .site-head--compact .langsw__cur { padding: 0.1rem 0.45rem; }
  .site-head--compact .site-nav__list a { padding-block: 0.2rem; }
}
/* waskie telefony (360 px): "Wszystkie pokoje" + "Wiecej" musza sie zmiescic obok 3 przyciskow */
@media (max-width: 23.99rem) {
  .site-head--compact .site-head__in { column-gap: 0.35rem; }
  .site-head--compact .brand__mark { width: 30px; }
  .site-head--compact .site-nav__list { font-size: 0.75rem; }
  .site-head--compact .site-nav__list a, .site-head--compact .site-nav__more > summary { padding-inline: 0.3rem; font-size: 0.75rem; }
  .site-head--compact .head-cta__btn, .site-head--compact .langsw__list a { min-width: 34px; min-height: 34px; padding-inline: 0.3rem; }
}
@media (prefers-reduced-motion: reduce) { .site-head--fixed, .brand { transition: none; } }
@media print { .hd-spacer, .hd-sentinel { display: none; } .site-head--fixed { position: static; height: auto; } }

/* --- 22.10 PASKI: dolny pasek oferty (telefon) o polowe nizszy ----------------------------------- */
/* Bez bialego tla: cenowka (chorągiewka) + dwa przyciski w jednym rzedzie. Brak tla pod spodem, wiec kazdy
   element ma wlasne tlo i cien - czytelny na zdjeciu i na jasnym tle. Cel dotyku >= 44 px. */
.stickycta {
  flex-wrap: nowrap; align-items: stretch; gap: 0.4rem;
  margin: 1rem 0; padding: 0; background: none; box-shadow: none; border-radius: 0;
}
.stickycta__price {
  position: relative; z-index: 0; flex: none; margin: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0.3rem 0.7rem 0.3rem 1.05rem; min-height: 2.75rem; line-height: 1.1;
  color: #FFF; filter: drop-shadow(0 2px 5px rgba(20, 16, 12, 0.3));
}
/* ksztalt metki: szpic po lewej; tlo w ::before, bo clip-path na samym elemencie ucialby cien */
.stickycta__price::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bar-dark, #1E2B3C);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  clip-path: polygon(0.55rem 0, 100% 0, 100% 100%, 0.55rem 100%, 0 50%);
}
.stickycta__num { font-family: var(--ff-num); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stickycta__price .stickycta__per { margin: 0; font-family: var(--ff-text); font-weight: 500; font-size: 0.7rem; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.stickycta .btn {
  flex: 1 1 0; min-width: 0; min-height: 2.75rem; padding: 0.3rem 0.5rem;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-size: var(--fs-xs); line-height: 1.15; box-shadow: 0 2px 6px rgba(20, 16, 12, 0.25);
}
.stickycta .stickycta__nv { background: var(--card); border-color: var(--line-strong); }
@media (max-width: 26rem) {
  .stickycta { padding: 0; }
  .stickycta__price { flex-basis: auto; }
}
@media (max-width: 23.99rem) {
  .stickycta { gap: 0.3rem; }
  .stickycta__price { padding-right: 0.55rem; }
  .stickycta__num { font-size: 1.05rem; }
  .stickycta .btn { padding-inline: 0.3rem; font-size: 0.75rem; }
}

/* --- 25.10 KASIA (UX): pigulki w hero, wieksze "od zaraz", kaucja w warunkach, oba przelaczniki w pasku ---------------- */
/* hero: dwie pigulki zamiast bloku tekstu. Glowna = cena calkowita (pelne tlo), druga spokojniej (obrys). */
.hero__pills { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hpill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.95rem; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
  border: 1.5px solid var(--line-strong); color: var(--ink);
}
.hpill svg { flex: none; }
.hpill--main { font-size: 1.05rem; font-weight: 700; padding: 0.6rem 1.1rem; background: var(--ink); border-color: var(--ink); color: #FFF; }
.hero--photo .hpill { border-color: rgba(255, 255, 255, 0.7); color: #FFF; }
.hero--photo .hpill--main { background: #FFF; border-color: #FFF; color: var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.hero--photo .hpill--main svg { color: var(--brick); }

/* "Dostepny od zaraz" wiekszy i wyrazniejszy - karty i strona oferty (Kasia: "ginie") */
.badge--now { font-size: var(--fs-sm); padding: 0.45rem 0.85rem; }
.badge--now::before { width: 0.55rem; height: 0.55rem; }

/* kaucja i koszt wejscia (z linii faktow) na gorze listy "Warunki najmu" */
.terms .terms__money { font-weight: 600; }

/* zwiniety pasek na telefonie: "Wszystkie pokoje" i "Dostepne od zaraz" zawsze widoczne; gdy brak miejsca - krotkie etykiety (site.js) */
.site-nav__short { display: none; }
.site-nav--short .site-nav__long { display: none; }
.site-nav--short .site-nav__short { display: inline; }