/* ==========================================================================
   Nowe Buszkowiczki — arkusz stylów

   Paleta marki przeniesiona z nowebuszkowiczki.pl:
   granat #093149 (pasy sekcji), piaskowe złoto #D4BD95 (akcenty i przyciski),
   kremy #FAF5E5 / #F0E6C5 oraz grafitowy tekst #2E2D29.

   Każdy kolor zapisujemy raz, funkcją light-dark(jasny, ciemny). Motyw
   przełącza się samym ustawieniem color-scheme, więc nie ma drugiej kopii
   palety, która mogłaby się rozjechać z pierwszą.
   ========================================================================== */

/* Fonty z własnego serwera (wcześniej z fonts.googleapis.com). Pliki to te same
   zmienne fonty Inter i Newsreader co w Google Fonts, tylko podzbiory latin
   i latin-ext, które pokrywają polski. Deklaracje przeniesione 1:1, z tymi
   samymi grubościami — ciężar 650 z arkusza dalej renderuje się jak dotąd. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/inter-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: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/inter-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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/inter-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: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/inter-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: "Newsreader"; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/newsreader-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/newsreader-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: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/newsreader-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; }

:root{
  color-scheme: light dark;

  --cream:      light-dark(#fdfbf4, #0a2230);   /* tło strony */
  --surface:    light-dark(#ffffff, #0e2c3d);   /* karty i tabele */
  --alt:        light-dark(#f7efdb, #103349);   /* pasy przeplatające sekcje */
  --ink:        light-dark(#2e2d29, #f3ede1);
  --ink-2:      light-dark(#575550, #cbc5b8);
  /* Trzeci stopien szarosci na jasnym tle mial 3,9-4,5:1 — ponizej progu AA
     dla drobnego tekstu, a siedzi wlasnie pod podpisami, etykietami dt
     i notkami. Przyciemniony do #6b6963 daje min. 4,8:1 takze na pasie --alt. */
  --ink-3:      light-dark(#6b6963, #a3b1bb);
  --ink-mocny:  light-dark(#093149, #f3ede1);   /* duże liczby i wyróżnienia */
  --line:       light-dark(#ece2c9, #1b4257);
  --line-2:     light-dark(#d8caa6, #2a5b74);

  --navy:       light-dark(#093149, #061a26);   /* ciemne pasy, stopka, przyciski */
  --navy-deep:  light-dark(#072436, #04131c);
  --gold:       #d4bd95;                         /* akcent marki — ten sam w obu motywach */
  --gold-deep:  light-dark(#c0a374, #e2d0ae);
  --gold-ink:   light-dark(#86653a, #e2cca4);   /* złoto przyciemnione do roli tekstu */
  --gold-soft:  light-dark(#f6eeda, #15364a);

  --ok:         light-dark(#2f6646, #7fc39a);
  --ok-soft:    light-dark(#e3efe8, #10332a);
  --warn:       light-dark(#8c5220, #e0a468);
  --warn-soft:  light-dark(#f8e9d6, #3a2a18);
  --off:        light-dark(#4d6070, #9ab0be);
  --off-soft:   light-dark(#e9e5d9, #123146);

  /* Dostępność lokalu — zielony „wolny", różany „zarezerwowany". Osobne tokeny
     od --ok/--warn, bo tamte niosą inne znaczenie (status formularza, etap prac). */
  --stan-ok:        light-dark(#1f6b45, #74cfa0);
  --stan-ok-soft:   light-dark(#e2f2e8, #10352a);
  --stan-ok-linia:  light-dark(#2f8f5f, #58b98c);
  --stan-rez:       light-dark(#a8405a, #f0a0b0);
  --stan-rez-soft:  light-dark(#fceaee, #3d1c26);
  --stan-rez-linia: light-dark(#c9607a, #d97f95);
  --focus:      light-dark(#1f5fd0, #8fc0ff);

  --solid-bg:   light-dark(#093149, #d4bd95);
  --solid-fg:   light-dark(#fdfbf4, #08222f);
  /* Przycisk pełny ma w każdym motywie inną barwę, więc i najechanie musi iść
     w inną stronę: w jasnym ciemniejemy granat, w ciemnym przygaszamy złoto.
     Wspólny --navy-deep dawał w ciemnym motywie granat na granacie (1,15:1). */
  --solid-hov:  light-dark(#072436, #c3a878);

  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;
  --sh-s: 0 1px 2px light-dark(rgba(9,49,73,.07), rgba(0,0,0,.5));
  --sh-m: 0 10px 30px light-dark(rgba(9,49,73,.10), rgba(0,0,0,.5));
  --sh-l: 0 28px 70px light-dark(rgba(9,49,73,.20), rgba(0,0,0,.6));
  --sh-gold: 0 10px 30px light-dark(rgba(192,163,116,.35), rgba(0,0,0,.5));

  --wrap: 1200px;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Wybór użytkownika z przełącznika w nagłówku wygrywa z ustawieniem systemu. */
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"]{ color-scheme: dark; }

/* ==========================================================================
   Baza
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px;
  /* Zamknięta szuflada menu stoi poza ekranem po prawej i rozciągałaby obszar
     przewijania. „clip” przycina ją bez tworzenia kontenera przewijania,
     więc position:sticky w nagłówku działa dalej — z „hidden” by przestało. */
  overflow-x:clip;
}
/* Skala serwisu — jak powiększenie przeglądarki. zoom zmienia wszystko
   naraz: tekst, odstępy, zdjęcia, pasek nawigacji. Samo zmniejszenie rem
   ruszało tylko tekst, a odstępy w pikselach zostawały duże.
     telefon (do 600 px)                      100%
     tablet i wąskie okno komputera           80%
     laptop (mysz, 1024–1599 px)              90%
     monitor komputera (mysz, od 1600 px)     100%
   Zmiana którejś z tych wartości wymaga przeliczenia progów paska nawigacji
   (sekcja „Nagłówek strony”) i rozmiaru pól formularza na telefonie
   (sekcja „Kontakt i formularze”). */
html{ zoom:.8; }
/* Na telefonie przy .8 tekst akapitu miał na ekranie 13,6 px — za drobno do
   czytania z ręki. Przy 100% ma 17 px. Telefon nie potrzebuje rozróżnienia
   na mysz i dotyk: wąskie okno komputera i tak dostaje ten sam układ. */
@media (max-width:600px){
  html{ zoom:1; }
}
/* Laptop dostaje 90%. Przy .8 tekst był drobny, a przy 100% wszystko było za
   duże — 1366 px okna mieściło wtedy mniej niż ekran 1100 px przy .8.
   Próg 1600 px oddziela laptopy od monitorów: laptop 13–15" widzi
   1280–1536 px (system powiększa ekran o 125–150%), monitor 22–27" — 1680 px
   i więcej. Wymagamy też myszy, a nie samej szerokości: duży tablet
   w poziomie ma wskaźnik dotykowy (pointer:coarse), więc zostaje przy .8. */
@media (min-width:1024px) and (max-width:1599px) and (hover:hover) and (pointer:fine){
  html{ zoom:.9; }
}
/* Na monitorze komputera skala wraca do 100%. Przy .8 kontener 1200 px
   zajmował na ekranie 1920 px tylko 960 px — pół ekranu, z drobnym tekstem
   pośrodku. Przy zoomie 1 od 1600 px pasek nawigacji ma ponad 1300 px — tyle,
   ile pierwotnie potrzebował z numerem telefonu — więc progi nagłówka liczone
   dla .8 nie wymagają tu żadnej poprawki. */
@media (min-width:1600px) and (hover:hover) and (pointer:fine){
  html{ zoom:1; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  /* 1.0625rem to dokładnie 17 px przy domyślnych ustawieniach przeglądarki,
     ale w odróżnieniu od zapisu „17px” rośnie razem z powiększeniem czcionki
     wybranym przez użytkownika. Przy sztywnych pikselach nagłówki (liczone
     w rem) powiększały się, a tekst akapitów zostawał — strona skalowała się
     połowicznie. Dotyczy to zwłaszcza telefonów, gdzie powiększona czcionka
     systemowa jest częstym ustawieniem. */
  font-size:1.0625rem;
  line-height:1.65;
  /* Siatka bezpieczeństwa dla długich ciągów bez spacji — adresów e-mail,
     adresów stron, numerów ksiąg wieczystych. Łamie wyłącznie te słowa,
     które inaczej wystawałyby poza kontener; reszty tekstu nie rusza. */
  overflow-wrap:break-word;
  font-feature-settings:"cv05" 1;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); text-underline-offset:3px; }
a:hover{ text-decoration-color:currentColor; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:3px; }

h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.1; letter-spacing:-.015em; margin:0 0 .45em; color:var(--ink); }
h1{ font-size:clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem); }
h2{ font-size:clamp(1.85rem, 1.3rem + 2.1vw, 2.9rem); text-wrap:balance; }
h3{ font-size:1.22rem; font-family:var(--sans); font-weight:650; letter-spacing:-.01em; }
p{ margin:0 0 1.05em; color:var(--ink-2); }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
strong{ font-weight:650; color:var(--ink); }
time{ font-variant-numeric:tabular-nums; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
/* 48 px marginesow zabieralo 15% szerokosci ekranu 320 px — tyle, ze nazwie
   w pasku brakowalo miejsca. Wezsza rynna dotyczy calej strony, zeby pasek
   pozostal w jednej linii z trescia pod nim. */
@media (max-width:560px){ .wrap{ padding-inline:16px; } }
.wrap.narrow{ max-width:820px; }
/* Wąska kolumna wyrównana do lewej krawędzi treści, jak sąsiednie sekcje —
   .narrow stawia ją na środku strony. 772 px to treść .narrow bez marginesów. */
.wrap--lewa > *{ max-width:772px; }
.section{ padding:clamp(56px, 7vw, 104px) 0; }
.section--tight{ padding:clamp(40px, 5vw, 64px) 0; }
.section--alt{ background:var(--alt); }
.section--dark{ background:var(--navy-deep); color:#f3ede1; position:relative; }
.section--dark h2,.section--dark h3{ color:#fff; }
.section--dark p{ color:rgba(243,237,225,.78); }
.section--dark strong{ color:var(--gold); }
.section--dark .small{ color:rgba(243,237,225,.62); }
/* Złota nitka na styku z sekcją obok — oddziela pas i podkreśla markę. */
.section--dark::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent);
}
.section + .section--alt, .section--alt + .section{ border-top:1px solid var(--line); }

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 5vw, 72px); align-items:start; }
.split--wide{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
@media (max-width:900px){ .split,.split--wide{ grid-template-columns:minmax(0,1fr); } }

.skip{
  position:absolute; left:16px; top:-56px; z-index:500; background:var(--ink); color:var(--cream);
  padding:12px 18px; border-radius:var(--r-s); font-weight:600; transition:top .15s ease;
}
.skip:focus{ top:16px; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.small{ font-size:.87rem; color:var(--ink-3); line-height:1.55; }
.small a{ color:var(--gold-ink); }
.muted{ color:var(--ink-3); }
.mb-0{ margin-bottom:0!important; }
.linklike{
  background:none; border:none; padding:0; cursor:pointer; color:var(--gold-ink);
  font:inherit; text-decoration:underline; text-underline-offset:3px;
}

/* ==========================================================================
   Nagłówki sekcji
   ========================================================================== */
.eyebrow{
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
  font-family:var(--sans); font-size:.74rem; font-weight:650; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-ink);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); flex:none; }
.section--dark .eyebrow{ color:var(--gold); }
/* Kolumna nagłówka o 35% szersza niż dawne 44ch — w 44ch krótkie hasła
   łamały się na trzy linie. Akapit pod nagłówkiem zostaje przy dawnej
   szerokości: ma 1,08rem (17,28 px) wobec 17 px nagłówka, więc dawne 44ch
   rodzica to dla niego 43,3ch. */
.shead{ max-width:59ch; margin-bottom:clamp(28px,3.5vw,48px); }
/* Nagłówek tuż nad tabelą, która jest jego treścią — 60% zwykłego odstępu.
   Odstęp to suma marginesu tytułu (.45em) i całego nagłówka (kontener
   z container-type nie skleja marginesów), więc skracamy oba. */
.shead--ciasny{ margin-bottom:clamp(16.8px,2.1vw,28.8px); }
.shead--ciasny h2{ margin-bottom:.27em; }
.shead--center{ margin-inline:auto; text-align:center; }
.shead--center .eyebrow{ justify-content:center; }
.shead__lead{ font-size:1.08rem; color:var(--ink-2); max-width:43.3ch; }
/* Każdy nagłówek ma własną długość i najwyżej dwie linie. partials.mjs liczy
   z szerokości liter Newsreadera dwie wartości w em: --h2-linia (jaką linię
   nagłówek ma mieć) i --h2-dwie (najwęższa, przy której mieści się w dwóch).
   Gdy dwie linie nie mieszczą się w kolumnie (100cqi — wąski telefon),
   czcionka maleje akurat do jej szerokości. +.4em to zapas na kerning. */
.shead{ container-type:inline-size; }
.shead h2{
  max-width:calc((var(--h2-linia, 20) + .4) * 1em);
  font-size:min(clamp(1.85rem, 1.3rem + 2.1vw, 2.9rem), 100cqi / (var(--h2-dwie, 20) + .4));
}
.shead--center h2{ margin-inline:auto; }
.shead--center .shead__lead{ margin-inline:auto; }
/* Nagłówek nad elementem na całą szerokość — domyślne 44ch dławi tu także
   akapit wprowadzający, choć sam dopuszcza 60ch. */
.shead--szeroki{ max-width:none; }
.shead--szeroki .shead__lead{ max-width:78ch; }

/* ==========================================================================
   Przyciski
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 28px; border:1px solid transparent; border-radius:var(--r-s);
  font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.005em;
  cursor:pointer; text-decoration:none;
  /* Bez zawijania długa etykieta („Dojazd, sąsiedztwo i stan prawny terenu”)
     wypychała przycisk poza ekran telefonu. Na szerokim ekranie przyciski i tak
     mieszczą się w jednej linii, więc zmiana ich nie dotyczy. */
  white-space:normal; text-wrap:balance;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--solid-bg); color:var(--solid-fg); }
.btn--solid:hover{ background:var(--solid-hov); box-shadow:var(--sh-m); }
.btn--outline{ border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn--outline:hover{ border-color:var(--gold-deep); background:var(--gold-soft); color:var(--ink); }
.btn--ghost{ color:var(--gold-ink); background:transparent; padding-inline:14px; }
.btn--ghost:hover{ background:var(--gold-soft); }
.btn--light{ background:var(--gold); color:var(--navy); }
.btn--light:hover{ background:#e3d2ae; box-shadow:var(--sh-gold); }
/* Złoto jest jasne, więc napis na nim musi być granatowy — biały dawałby 1,9:1. */
.btn--gold{ background:var(--gold); color:var(--navy); }
.btn--gold:hover{ background:var(--gold-deep); box-shadow:var(--sh-gold); }
.btn--onmedia{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn--onmedia:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.btn--sm{ padding:10px 18px; font-size:.88rem; }
.btn--block{ width:100%; }
.btnrow{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* ==========================================================================
   Nagłówek strony
   ========================================================================== */
.hdr{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--line);
}
/* Rozmycie tła siedzi w osobnej warstwie, a nie na samym nagłówku.
   backdrop-filter czyni z elementu blok zawierający dla position:fixed —
   dopóki stał na .hdr, szuflada menu odnosiła swoje inset do paska zamiast
   do okna i otwierała się jako pasek wysokości 56 px z zerem widocznych
   pozycji. Pseudoelement nie ma potomków, więc niczego już nie przypina. */
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter:saturate(150%) blur(12px);
}
.hdr__inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:78px; }
/* Marka ustępuje miejsca, gdy pasek przestaje się mieścić. Przy flex:none nie
   mogła się skurczyć i na bardzo wąskim ekranie (280 px — Galaxy Fold złożony)
   wypychała hamburger 31 px poza ekran, czyli menu stawało się nieosiągalne.
   Teraz skraca się nazwa, a znak graficzny i przyciski zachowują rozmiar —
   układ radzi sobie sam, bez dokładania kolejnego progu w media queries. */
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 1 auto; }
.brand img{ height:42px; width:auto; flex:none; }
/* Bez min-width:0 najwezszym, na co moze scisnac sie nazwa, jest jej najdluzszy
   wyraz. Dzieki temu flexbox zamiast wycinac litery lamie napis na dwie linie
   — a poniewaz znak graficzny jest wyzszy niz dwa wiersze tekstu, pasek nie
   rosnie ani o piksel. */
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
/* Nazwa w pasku powtarza krój z samego znaku — rozstrzelona wersalikowa
   bezszeryfowa — żeby napis i logo czytały się jako jeden układ. Szeryfy
   zostają tam, gdzie mają sens, czyli w nagłówkach treści. */
.brand__text strong{
  font-family:var(--sans); font-weight:650; font-size:.88rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mocny);
  /* Nazwa inwestycji nie moze byc skracana — „NOWE BU…” nie identyfikuje
     niczego. Wolno jej sie zawinac, nie wolno jej zniknac. */
  text-wrap:balance;
}
/* Podtytul lamie sie tak samo. Gdyby zostal przy white-space:nowrap, to jego
   dlugosc — a nie dlugosc nazwy — wyznaczalaby, jak waska moze byc marka. */
.brand__text span{ font-size:.7rem; color:var(--ink-3); letter-spacing:.02em; }
.nav{ display:flex; align-items:center; gap:26px; margin-inline:auto; }
.nav__link{
  font-size:.92rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:4px 0; border-bottom:1.5px solid transparent; white-space:nowrap;
}
.nav__link:hover{ color:var(--ink); border-color:var(--gold); }
.nav__link[aria-current="page"]{ color:var(--gold-ink); border-color:var(--gold); font-weight:600; }
.hdr__actions{ display:flex; align-items:center; gap:14px; flex:none; }
/* Telefon w pasku to sama słuchawka w ramce jak przełącznik motywu. Przy
   ośmiu pozycjach menu pełny numer (118 px) nie mieścił się obok nazwy
   inwestycji. Numer pokazuje dymek po najechaniu i przy fokusie z klawiatury,
   a czytnik ekranu dostaje go z aria-label. */
.hdr__phone{
  position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:42px; height:42px; border:1px solid var(--line-2); border-radius:var(--r-s);
  color:var(--ink-2); text-decoration:none;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.hdr__phone:hover{ color:var(--ink); border-color:var(--gold-deep); background:var(--gold-soft); }
.hdr__phone svg{ width:18px; height:18px; color:var(--gold); }
.hdr__phone-nr{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%, -4px);
  padding:6px 10px; border-radius:var(--r-s); white-space:nowrap;
  background:var(--ink); color:var(--surface); box-shadow:var(--sh-m);
  font-size:.85rem; font-weight:600; font-variant-numeric:tabular-nums;
  opacity:0; pointer-events:none; transition:opacity .15s var(--ease), transform .15s var(--ease);
}
.hdr__phone:hover .hdr__phone-nr,
.hdr__phone:focus-visible .hdr__phone-nr{ opacity:1; transform:translate(-50%, 0); }
/* Przełącznik motywu — pokazujemy ikonę stanu docelowego. */
.motyw{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:42px; height:42px; padding:0; border:1px solid var(--line-2);
  border-radius:var(--r-s); background:transparent; color:var(--ink-2); cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.motyw:hover{ color:var(--ink); border-color:var(--gold-deep); background:var(--gold-soft); }
.motyw svg{ width:19px; height:19px; }
.motyw__ksiezyc{ display:none; }
:root[data-theme="dark"] .motyw__slonce{ display:none; }
:root[data-theme="dark"] .motyw__ksiezyc{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .motyw__slonce{ display:none; }
  :root:not([data-theme="light"]) .motyw__ksiezyc{ display:block; }
}
@media (max-width:560px){ .motyw{ width:38px; height:38px; } }

.burger{
  display:none; width:46px; height:46px; border:1px solid var(--line-2); border-radius:var(--r-s);
  background:var(--surface); cursor:pointer; padding:0; flex-direction:column; gap:5px;
  align-items:center; justify-content:center;
}
.burger span{ display:block; width:19px; height:1.5px; background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Nagłówek mieści markę, osiem pozycji menu, telefon, przełącznik motywu
   i przycisk akcji. Numer chowamy pierwszy — jest też w stopce i na pasku
   przyklejonym na mobile — a menu zwijamy wcześniej, żeby nic nie wystawało.

   Progi poniżej są przemnożone przez skalę serwisu (sekcja „Baza”): media
   queries liczą prawdziwą szerokość okna, a pasek przy zoomie .8 zajmuje 80%
   tego, co przy 100%, więc mieści się w oknie o 20% węższym. Pierwotne progi
   przy 100%: 1300, 1200, 1100, 760, 560, 380.
     zoom .8 (tablet):          1300 → 1040, 760 → 608; hamburger od 1040
                                (dawniej 1100 → 880, przy siedmiu pozycjach)
     zoom 1 (telefon, ≤600 px): 560 i 380 bez zmian; 760 i wyższe obejmują
                                każdy telefon tak samo jak progi dla .8
     zoom .9 (laptop):          1300 → 1170, 1200 → 1080 — osobne reguły
                                niżej; 1100 → 990 leży poniżej laptopów */
@media (max-width:1040px){ .hdr__phone{ display:none; } }
/* Powyzej 1300 px w pasku pojawia sie telefon, a kontener nadal ma
   1200 px — wiec to najgestszy wariant paska w calym serwisie. Po dodaniu
   „Dokumentow” brakowalo w nim 95 px: 76 px oddala sluchawka zamiast pelnego
   numeru, reszte ciasniejsze odstepy menu. Nazwa inwestycji zostaje w jednej
   linii. Wartosci musza byc stale, nie zalezne od vw: kontener jest przyciety
   do 1200 px, wiec szerszy ekran nie daje paskowi ani piksela wiecej. */
@media (min-width:1041px){
  .hdr__inner{ gap:16px; }
  .nav{ gap:13px; }
  .hdr__actions{ gap:8px; }
}
/* Laptop przy zoomie .9: telefon chowamy do 1170 px (1300 przy 100%).
   Osiem pozycji menu nie mieści się tu nawet bez niego — przy zwykłych
   odstępach brakowało 70 px przy 1170 px i 64 px przy 1024 px — więc menu
   dostaje mniejszą czcionkę i węższe odstępy, a najwęższe laptopy jeszcze
   ciaśniejsze. */
@media (min-width:1024px) and (max-width:1170px) and (hover:hover) and (pointer:fine){
  .hdr__phone{ display:none; }
  .hdr__inner{ gap:20px; }
  .nav{ gap:16px; }
  .nav__link{ font-size:.87rem; }
  .hdr__actions{ gap:14px; }
}
@media (min-width:1024px) and (max-width:1080px) and (hover:hover) and (pointer:fine){
  .nav{ gap:12px; }
  .nav__link{ font-size:.84rem; }
}
/* Szuflada z hamburgerem: wszystko do 1023 px i tablety do 1040 px. Przy
   ośmiu pozycjach menu na tablecie (zoom .8) brakowało w pasku 87–102 px.
   Laptop 1024–1040 px (mysz) zostaje przy menu w pasku — ma osobne reguły
   wyżej. */
@media (max-width:1023px), (max-width:1040px) and (hover:none), (max-width:1040px) and (pointer:coarse){
  .nav{
    position:fixed; inset:78px 0 0 auto; width:min(360px,86vw); background:var(--surface);
    flex-direction:column; align-items:stretch; gap:0; padding:16px 24px 40px; margin:0;
    border-left:1px solid var(--line); box-shadow:var(--sh-l);
    transform:translateX(101%); transition:transform .22s ease; overflow-y:auto;
    /* Szuflada musi leżeć nad przyciemnieniem. Oba elementy są fixed bez
       z-index, więc wygrywał późniejszy w HTML — przyciemnienie. Leżało na
       linkach: dotknięcie pozycji menu trafiało w tło, które tylko zamykało
       szufladę, i strona nigdzie nie przechodziła. */
    z-index:2;
  }
  .nav.is-open{ transform:none; }

  /* Przyciemnienie zaczyna się pod paskiem, żeby hamburger pozostał klikalny
     i mógł zamknąć menu tym samym przyciskiem, którym je otwarto. */
  .nav__scrim{
    position:fixed; inset:78px 0 0 0; background:rgba(9,49,73,.45); z-index:1;
    opacity:0; transition:opacity .22s ease; cursor:pointer;
  }
  .nav__scrim.is-open{ opacity:1; }

  /* Bez blokady tło przewijało się pod otwartą szufladą — wyglądało to,
     jakby dotknięcie menu przesuwało stronę. Reguła obowiązuje wyłącznie
     w zakresie, w którym szuflada w ogóle istnieje. */
  html.menu-otwarte{ overflow:hidden; }
  .nav__link{ padding:16px 0; border-bottom:1px solid var(--line); font-size:1.05rem; }
  .nav__link[aria-current="page"]{ border-color:var(--gold); }
  .burger{ display:flex; }
}
/* Rozstrzelone wersaliki są szersze od dawnego napisu szeryfowego. Od 760 px
   w dół w pasku stoją obok siebie znak, przycisk akcji, przełącznik motywu
   i hamburger — bez zbicia nazwy hamburger wychodzi poza ekran.
   (Próg tej reguły jest przemnożony przez zoom .8; dwie kolejne leżą już
   w zakresie telefonu, więc mają progi dla 100%.) */
@media (max-width:608px){
  .brand{ gap:9px; }
  .brand img{ height:38px; }
  .brand__text strong{ font-size:.78rem; letter-spacing:.06em; }
}
@media (max-width:560px){
  .hdr__actions .btn{ display:none; }
  .brand__text span{ display:none; }
}
/* Przy 320 px nawet zbity wariant nazwy wypychał hamburger poza ekran:
   znak i napis zajmowały 206 px, a na pasek zostawało 272 px po odjęciu
   marginesów. Na najwęższych telefonach nazwa i odstępy schodzą jeszcze niżej. */
@media (max-width:380px){
  .hdr__inner{ gap:10px; }
  .hdr__actions{ gap:8px; }
  .brand{ gap:8px; }
  .brand img{ height:34px; }
  .brand__text strong{ font-size:.68rem; letter-spacing:.04em; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Wysokość trzyma sekcja, nie zdjęcie, a tekst leży w normalnym przepływie.
   Gdy tekst jest wyższy niż kadr (niskie okna, telefony), sekcja rośnie w dół.
   Wcześniej warstwa tekstu była absolutna o wysokości zdjęcia, więc wyrównana
   do dołu treść wychodziła górą i chowała się pod przyklejonym nagłówkiem. */
.hero{ position:relative; display:flex; min-height:clamp(520px, 82vh, 800px); background:var(--navy); }
.hero__media{ position:absolute; inset:0; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__inner{
  position:relative; flex:1; display:flex; align-items:flex-end;
  padding:clamp(32px,5vw,56px) 0 clamp(40px,6vw,72px);
  /* Przyciemnienie tylko tam, gdzie leży tekst — góra kadru zostaje czytelna.
     Wcześniejszy jednolity cień zasłaniał całą wizualizację. */
  background:linear-gradient(180deg,
    rgba(6,26,38,.10) 0%,
    rgba(6,26,38,.06) 30%,
    rgba(6,26,38,.42) 62%,
    rgba(6,26,38,.80) 100%);
  color:#fff;
}
.hero__kicker{
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.92); margin:0 0 20px;
  text-shadow:0 1px 6px rgba(6,26,38,.85);
}
/* Nagłówek i lead też dostają cień — kadr pod nimi bywa jasny. */
.hero h1{ text-shadow:0 2px 18px rgba(6,26,38,.5); }
.hero__lead, .hero__price{ text-shadow:0 1px 10px rgba(6,26,38,.7); }
.hero h1{ color:#fff; margin-bottom:20px; text-wrap:balance; }
/* Tytuł będący samą nazwą osiedla gra rolę znaku: rośnie z szerokością
   treści, aż wypełni ją w jednej linii. Jednostka cqi liczy się od szerokości
   .wrap bez marginesów, więc działa tak samo przy każdej skali serwisu
   (sekcja „Baza”). Newsreader ma oś rozmiaru optycznego: „Nowe Buszkowiczki”
   ma 7,9em szerokości przy 32 px, ale już 8,49em od ok. 70 px. 11,3cqi liczy
   najszerszy wariant z 4% zapasu — przy 12,2cqi napis łamał się przy 600 px
   i dotykał krawędzi na tablecie. Przeglądarka bez cqi pomija deklarację
   i zostaje przy rozmiarze h1. */
.hero .wrap{ container-type:inline-size; }
.hero h1.hero__marka{ font-size:clamp(1.75rem, 11.3cqi, 6.5rem); line-height:1; letter-spacing:-.02em; margin-bottom:14px; }
/* Nadtytuł pod znakiem jest jego podpisem: przylega do nazwy, a od opisu
   odsuwa go większy odstęp. Rośnie razem ze znakiem — przy 0,78rem ginął pod
   nazwą wysoką na 100 px. */
.hero__marka + .hero__kicker{
  font-size:clamp(.78rem, .6rem + .5vw, 1.05rem);
  margin-bottom:clamp(18px, 2.4vw, 28px);
}
.hero__lead{ color:rgba(255,255,255,.88); font-size:clamp(1.02rem,.95rem + .4vw,1.2rem); max-width:54ch; }
.hero__price{
  margin:22px 0 0; font-size:1rem; color:rgba(255,255,255,.9);
  display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
}
.hero__price strong{ color:#fff; font-size:1.25rem; font-weight:650; font-variant-numeric:tabular-nums; }
.hero__price span{ color:rgba(255,255,255,.65); font-size:.92rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* Laptop (zoom .9, mysz): mniej ucięte zdjęcie. Na ekranie 1280×631 hero
   miało 2,7:1, a wizualizacja 16:9 — cover ze zbliżeniem ucinał ok. 40%
   wysokości: dachy górnego rzędu i prawie cały dolny rząd. Teraz hero
   sięga do dołu ekranu pod nagłówkiem (79 px), zbliżenie jest wyłączone,
   a kadr zsunięty w dół, żeby oba rzędy domów (y 180–945 z 1080 px
   zdjęcia) mieściły się w całości. Przy zoomie .9 100vh to 90% okna,
   stąd dzielenie przez .9. Limit 56,25vw to wysokość zdjęcia na całą
   szerokość — wyższe hero ucinałoby boki. Monitor i telefon bez zmian.
   Selektor z .hero, bo zbliżenie włącza reguła w sekcji „Złoty listek”
   niżej w pliku. */
@media (min-width:1024px) and (max-width:1599px) and (hover:hover) and (pointer:fine){
  .hero{ min-height:min(100vh / .9 - 79px, 56.25vw / .9); }
  .hero .hero__media img{ animation:none; object-position:50% 60%; }
}

/* Telefon: zdjęcie nad tekstem zamiast pod nim. Na wąskim ekranie tekst
   zakrywał cały kadr — osiedla nie było widać, a złoty nadtytuł i nagłówek
   trafiały na najjaśniejszą, najbardziej pstrą część wizualizacji. Teraz
   zdjęcie jest w pełni widoczne i przechodzi płynnie w granat, a tekst leży
   na jednolitym tle. */
@media (max-width:620px){
  .hero{ display:block; min-height:0; }
  .hero__media{ position:relative; height:clamp(200px, 32vh, 290px); }
  .hero__media::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(6,26,38,0) 50%, var(--navy) 100%);
  }
  .hero__inner{ display:block; background:none; padding:6px 0 36px; }
  .hero__kicker{ font-size:.75rem; letter-spacing:.1em; line-height:1.6; margin-bottom:12px; text-wrap:balance; }
  /* Kreska przed nadtytułem ma sens przy jednej linii; przy dwóch wisiała
     z przodu pierwszej i rozjeżdżała lewą krawędź tekstu. Selektor z .hero,
     bo kreskę rysuje reguła w sekcji „Złoty listek” niżej w pliku. */
  .hero .hero__kicker::before{ display:none; }
  .hero h1{ margin-bottom:14px; }
  .hero__lead{ font-size:1rem; line-height:1.6; }
  .hero__price{ margin-top:18px; }
  /* Szczegóły ceny w osobnej linii, bez kropki-separatora na jej początku. */
  .hero__price > span{ flex-basis:100%; }
  .hero__sep{ display:none; }
  .hero__cta{ flex-direction:column; gap:10px; margin-top:24px; }
  .hero__cta .btn{ width:100%; }
}

/* Pasek faktów */
.factbar{ background:var(--surface); border-bottom:1px solid var(--line); }
.factbar__inner{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.factbar__item{ padding:26px 20px; text-align:center; border-right:1px solid var(--line); }
.factbar__item:last-child{ border-right:none; }
.factbar__item strong{
  display:block; font-family:var(--serif); font-weight:400; font-size:1.7rem;
  letter-spacing:-.02em; line-height:1.1; margin-bottom:4px;
}
.factbar__item span{ font-size:.8rem; color:var(--ink-3); line-height:1.35; display:block; }
@media (max-width:860px){
  .factbar__inner{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .factbar__item{ border-bottom:1px solid var(--line); }
  .factbar__item:nth-child(2n){ border-right:none; }
  .factbar__item:last-child{ grid-column:1/-1; border-bottom:none; }
}

/* Nagłówek podstrony */
.pagehero{ padding:clamp(36px,5vw,64px) 0 clamp(32px,4vw,52px); background:var(--alt); border-bottom:1px solid var(--line); }
.pagehero h1{ margin-bottom:.3em; text-wrap:balance; }
.pagehero__lead{ font-size:1.08rem; max-width:66ch; }
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:.82rem; color:var(--ink-3); margin-bottom:20px; }
.crumbs li{ display:flex; gap:8px; align-items:center; }
.crumbs li+li::before{ content:"›"; color:var(--line-2); }
.crumbs a{ color:var(--ink-3); text-decoration:none; }
.crumbs a:hover{ color:var(--gold-ink); text-decoration:underline; }

/* ==========================================================================
   Lista kluczowych danych
   ========================================================================== */
.keyfacts{ margin:0; border-top:1px solid var(--line); }
.keyfacts > div{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.keyfacts dt{ font-size:.85rem; color:var(--ink-3); }
.keyfacts dd{ margin:0; font-weight:600; font-size:.95rem; }
.keyfacts dd span{ display:block; font-weight:400; font-size:.84rem; color:var(--ink-3); }

/* ==========================================================================
   Schemat budynków
   ========================================================================== */
.plan{ display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:clamp(24px,3vw,48px); align-items:start; }
@media (max-width:900px){ .plan{ grid-template-columns:minmax(0,1fr); } }
/* Interaktywny plan osiedla na wizualizacji z lotu ptaka.
   Obrysy leżą w SVG o tym samym układzie współrzędnych co oryginalny plik,
   więc skalują się razem ze zdjęciem — bez przeliczania w JavaScripcie. */
.mapa{ margin:0; }
.mapa__ramka{
  position:relative; border:1px solid var(--line); border-radius:var(--r-m);
  /* Tło przezroczyste: zdjęcie planu nie ma tła studia, więc wokół osiedla
     widać kolor sekcji — w jasnym i w ciemnym motywie. */
  overflow:hidden; background:transparent; line-height:0;
}
.mapa__ramka img{ width:100%; height:auto; }
.mapa__svg{ position:absolute; inset:0; width:100%; height:100%; }
.mapa__stopka{ font-size:.8rem; color:var(--ink-3); margin-top:10px; }

.mapa__lokal{ cursor:pointer; }

/* Klikalna jest cała działka — delikatnie zaznaczona, żeby nie zasłaniać
   wizualizacji. Obrys domu w środku jest mocniejszy, bo to on niesie
   informację o statusie. */
.mapa__dzialka{
  fill:rgba(9,49,73,.14); stroke:rgba(253,251,244,.45); stroke-width:1;
  stroke-dasharray:5 4;
  transition:fill .18s var(--ease), stroke .18s var(--ease);
}
.mapa__dom{
  fill:rgba(9,49,73,.42); stroke:rgba(253,251,244,.7); stroke-width:1.5;
  pointer-events:none;
  transition:fill .18s var(--ease), stroke .18s var(--ease);
}
.mapa__lokal.is-ok .mapa__dzialka{ fill:color-mix(in srgb, var(--stan-ok-linia) 22%, transparent); stroke:var(--stan-ok-linia); }
.mapa__lokal.is-ok .mapa__dom{ fill:color-mix(in srgb, var(--stan-ok-linia) 66%, transparent); stroke:var(--stan-ok-linia); stroke-width:2; }
.mapa__lokal.is-warn .mapa__dzialka{ fill:color-mix(in srgb, var(--stan-rez-linia) 22%, transparent); stroke:var(--stan-rez-linia); }
.mapa__lokal.is-warn .mapa__dom{ fill:color-mix(in srgb, var(--stan-rez-linia) 62%, transparent); stroke:var(--stan-rez-linia); stroke-width:2; }

/* Po najechaniu obrys się wzmacnia, ale nie zmienia barwy — kolor niesie
   status, więc podmiana na złoty gubiłaby informację. */
.mapa__lokal:hover .mapa__dzialka,
.mapa__lokal:focus-visible .mapa__dzialka{
  fill:rgba(212,189,149,.42); stroke:#fff; stroke-width:2; stroke-dasharray:none;
}
.mapa__lokal:hover .mapa__dom,
.mapa__lokal:focus-visible .mapa__dom{
  fill:rgba(212,189,149,.92); stroke:#fff; stroke-width:2.5;
}
.mapa__lokal.is-ok:hover .mapa__dzialka,
.mapa__lokal.is-ok:focus-visible .mapa__dzialka{ fill:color-mix(in srgb, var(--stan-ok-linia) 44%, transparent); }
.mapa__lokal.is-ok:hover .mapa__dom,
.mapa__lokal.is-ok:focus-visible .mapa__dom{ fill:color-mix(in srgb, var(--stan-ok-linia) 94%, transparent); }
.mapa__lokal.is-warn:hover .mapa__dzialka,
.mapa__lokal.is-warn:focus-visible .mapa__dzialka{ fill:color-mix(in srgb, var(--stan-rez-linia) 44%, transparent); }
.mapa__lokal.is-warn:hover .mapa__dom,
.mapa__lokal.is-warn:focus-visible .mapa__dom{ fill:color-mix(in srgb, var(--stan-rez-linia) 94%, transparent); }
.mapa__lokal:focus-visible{ outline:none; }
.mapa__etykieta{
  fill:#fff; font-family:var(--sans); font-size:15px; font-weight:700;
  text-anchor:middle; pointer-events:none;
  paint-order:stroke; stroke:rgba(6,26,38,.85); stroke-width:4; stroke-linejoin:round;
}
.mapa__lokal:hover .mapa__etykieta,
.mapa__lokal:focus-visible .mapa__etykieta{ stroke-width:5; }

/* Na wąskich ekranach obrysy są za małe na palec, więc plan schodzi na drugi
   plan — pierwszeństwo ma lista kart i tabela pod spodem. */
@media (max-width:620px){
  .mapa__etykieta{ font-size:20px; stroke-width:5; }
}

.plan__info{
  position:sticky; top:100px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); padding:22px;
}
.plan__hint{ font-size:.88rem; color:var(--ink-3); margin:0; }
.plan__detailbox h3{ margin:0 0 4px; font-size:1.3rem; font-family:var(--serif); font-weight:400; }
.plan__price{ font-weight:650; font-size:1.05rem; margin:0 0 14px; color:var(--ink); font-variant-numeric:tabular-nums; }
.plan__dl{ margin:0 0 14px; }
.plan__dl > div{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line); font-size:.88rem; }
.plan__dl dt{ color:var(--ink-3); }
.plan__dl dd{ margin:0; font-weight:600; }
.plan__go{ font-size:.85rem; font-weight:600; color:var(--gold-ink); }
.plan__legend{ display:flex; flex-direction:column; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.plan__legend li{ display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--ink-3); }
.dot{ width:11px; height:11px; border-radius:2px; flex:none; border:1.5px solid var(--line-2); background:var(--off-soft); }
.dot.is-ok{ background:var(--stan-ok-linia); border-color:var(--stan-ok); }
.dot.is-warn{ background:var(--stan-rez-linia); border-color:var(--stan-rez); }

/* ==========================================================================
   Tabele
   ========================================================================== */
.tablewrap{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--surface); -webkit-overflow-scrolling:touch;
}
table{ width:100%; border-collapse:collapse; font-size:.93rem; }
.utable{ min-width:820px; }
.spectable{ min-width:520px; }
th,td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
thead th{
  background:color-mix(in srgb, var(--alt) 60%, var(--surface));
  font-size:.73rem; font-weight:650; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-3); white-space:nowrap;
}
tbody th{ font-weight:600; }
tbody tr:last-child td, tbody tr:last-child th{ border-bottom:none; }
tbody tr:hover{ background:color-mix(in srgb, var(--gold) 4%, transparent); }
.num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.spectable th{ width:34%; color:var(--ink); background:none; text-transform:none; letter-spacing:0; font-size:.93rem; }
/* Odnośnik do lokalu jest w tabeli głównym celem kliknięcia — musi mieć 24 px. */
.utable a{ display:inline-block; padding-block:4px; font-weight:650; text-decoration:none; }
.utable a:hover{ text-decoration:underline; }
/* Cena za m² pod ceną — tylko na telefonie (reguła niżej). */
.utable__m2{ display:none; }

/* Telefon: ciaśniejsze tabele, a tabela lokali bez przewijania w bok — przy
   min-width 820 px widać było mniej niż połowę, a ceny w ogóle nie mieściły
   się na ekranie. Chowamy kolumny jednakowe dla wszystkich lokali (powierzchnia,
   pokoje — podane w tekście obok tabeli) oraz etap (jest na stronie lokalu).
   Zostają lokal, działka, status i obie ceny, których wymaga ustawa
   o jawności cen, oraz karta PDF. */
@media (max-width:620px){
  table{ font-size:.85rem; }
  th, td{ padding:9px 7px; }
  thead th{ letter-spacing:.04em; white-space:normal; }
  .utable{ min-width:0; }
  .utable .utable__opt{ display:none; }
  /* „Poza ofertą sprzedaży” i „nie w ofercie” łamią się na dwie linie —
     w jednej rozpychały tabelę szerzej niż ekran. */
  .utable .badge{ white-space:normal; padding:3px 8px; gap:5px; border-radius:10px; line-height:1.25; }
  .utable .muted{ white-space:normal; }
  /* Cena za m² schodzi pod cenę brutto, a jej osobna kolumna znika. */
  .utable__m2{ display:block; font-size:.86em; font-weight:500; color:var(--ink-3); }
}

.tableblock{ margin-top:clamp(32px,4vw,56px); }
.tableblock__head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:18px; flex-wrap:wrap; }
.tableblock__head h3{ margin:0; }
.tableblock .small{ margin-top:14px; }

.badge{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:100px;
  font-size:.76rem; font-weight:650; white-space:nowrap; background:var(--off-soft); color:var(--off);
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge.is-ok{ background:var(--stan-ok-soft); color:var(--stan-ok); }
.badge.is-warn{ background:var(--stan-rez-soft); color:var(--stan-rez); }
.badge.is-off{ background:var(--off-soft); color:var(--off); }

/* Lokal w trwającej promocji (wyróżnienie dokłada generator, gdy promocja
   z panelu obniżyła cenę): złota etykieta obok statusu, wiersz lekko
   podświetlony ze złotą kreską przy oznaczeniu, cena sprzed obniżki
   przekreślona nad nową. */
.badge.is-promo{ background:var(--gold-soft); color:var(--gold-ink); }
.utable__stany{ display:inline-flex; flex-wrap:wrap; gap:6px; }
.utable tbody .utable__promo{ background:color-mix(in srgb, var(--gold) 10%, transparent); }
.utable tbody .utable__promo:hover{ background:color-mix(in srgb, var(--gold) 15%, transparent); }
.utable__promo th{ box-shadow:inset 3px 0 0 var(--gold); }
.utable__promo td strong{ color:var(--gold-ink); }
.utable__stara{ display:block; font-size:.82em; font-weight:500; color:var(--ink-3); }

/* ==========================================================================
   Standard — kafle
   ========================================================================== */
/* 8 kafli: 4×2 na komputerze, 2 kolumny niżej. Przy 3 kolumnach ostatni
   rząd miałby dziurę w kolorze linii (tło siatki widać przez pustą komórkę). */
.features{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
@media (max-width:1023px){ .features{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .features{ grid-template-columns:minmax(0,1fr); } }
.feature{ background:var(--surface); padding:26px 24px; }
.feature__icon{
  display:flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:var(--r-s); background:var(--navy); margin-bottom:16px;
}
.feature__icon img{ width:26px; height:26px; }
.feature h3{ margin:0 0 6px; font-size:1.02rem; }
.feature p{ margin:0; font-size:.9rem; }

.optbox{
  display:grid; grid-template-columns:minmax(0,1fr) 1.2fr auto; gap:28px; align-items:center;
  margin-top:32px; padding:26px 28px; border:1px solid var(--line-2); border-radius:var(--r-m);
  background:var(--surface);
}
@media (max-width:860px){ .optbox{ grid-template-columns:minmax(0,1fr); gap:18px; } }
.optbox h3{ margin:0 0 4px; }
.optbox__list{ display:flex; flex-direction:column; gap:2px; }
.optbox__list li{
  display:flex; justify-content:space-between; gap:16px; padding:8px 0;
  border-bottom:1px dotted var(--line-2); font-size:.92rem;
}
.optbox__list li:last-child{ border-bottom:none; }
.optbox__list strong{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   Kalkulator
   ========================================================================== */
.est{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,3vw,44px); align-items:start; }
@media (max-width:860px){ .est{ grid-template-columns:minmax(0,1fr); } }
.est__controls{ display:grid; gap:24px; }
.est__field label{ display:block; font-size:.9rem; font-weight:600; margin-bottom:10px; }
.est__field output{
  font-variant-numeric:tabular-nums; color:var(--gold-ink); font-weight:650;
  background:var(--gold-soft); padding:1px 8px; border-radius:4px;
}
.est__field .small{ margin:8px 0 0; }
/* Sam element suwaka musi mieć wysokość celu dotykowego — przy 4 px trafienie
   w niego palcem było loterią. Cienką kreskę toru rysujemy na pseudoelemencie,
   więc wygląd zostaje ten sam, a obszar dotyku rośnie do 24 px. */
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:24px;
  background:transparent; cursor:pointer;
}
/* Przebyta część toru jest złota. Chrome i Safari dostają jej długość
   z main.js jako --proc, Firefox rysuje ją sam (::-moz-range-progress). */
input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:100px;
  background:linear-gradient(to right, var(--gold) 0 var(--proc, 0%), var(--line-2) var(--proc, 0%) 100%);
}
input[type="range"]::-moz-range-track{
  height:4px; border-radius:100px; background:var(--line-2);
}
input[type="range"]::-moz-range-progress{
  height:4px; border-radius:100px; background:var(--gold);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--gold); border:3px solid var(--surface); box-shadow:var(--sh-s); cursor:grab;
  margin-top:-9px;   /* wyśrodkowanie uchwytu na czteropikselowym torze */
  transition:box-shadow .18s var(--ease), transform .18s var(--ease);
}
input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--gold);
  border:3px solid var(--surface); box-shadow:var(--sh-s); cursor:grab;
  transition:box-shadow .18s var(--ease), transform .18s var(--ease);
}
/* Uchwyt reaguje na najechanie i przeciąganie złotą poświatą. */
input[type="range"]:hover::-webkit-slider-thumb{ box-shadow:0 0 0 6px color-mix(in srgb, var(--gold) 22%, transparent); }
input[type="range"]:hover::-moz-range-thumb{ box-shadow:0 0 0 6px color-mix(in srgb, var(--gold) 22%, transparent); }
input[type="range"]:active::-webkit-slider-thumb{ cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 8px color-mix(in srgb, var(--gold) 28%, transparent); }
input[type="range"]:active::-moz-range-thumb{ cursor:grabbing; transform:scale(1.12); box-shadow:0 0 0 8px color-mix(in srgb, var(--gold) 28%, transparent); }
input[type="range"]:focus-visible{ outline:none; }
input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px var(--surface), 0 0 0 6px var(--focus); }
input[type="range"]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 3px var(--surface), 0 0 0 6px var(--focus); }
.est__result{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:30px; position:sticky; top:100px;
}
.est__label{ font-size:.78rem; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }
.est__big{
  font-family:var(--serif); font-size:clamp(2.2rem,1.6rem + 2vw,3.1rem); line-height:1;
  margin:0 0 10px; color:var(--ink); font-variant-numeric:tabular-nums;
}
.est__big em{ font-style:normal; font-size:1.1rem; font-family:var(--sans); color:var(--ink-3); font-weight:500; }
.est__sub{ font-size:.92rem; margin:0 0 16px; }
.est__sub strong{ font-variant-numeric:tabular-nums; }
.est__note{ font-size:.8rem; color:var(--ink-3); line-height:1.55; margin:0; padding-top:16px; border-top:1px solid var(--line); }

/* ==========================================================================
   Punkty w okolicy
   ========================================================================== */
.poi{ border-top:1px solid var(--line); margin-top:28px; }
.poi__row{ display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.poi__dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; }
.poi__name{ flex:1; font-weight:600; font-size:.98rem; display:flex; flex-direction:column; }
.poi__name span{ font-weight:400; font-size:.83rem; color:var(--ink-3); }
.poi__dist{
  text-align:right; font-weight:650; color:var(--gold-ink); white-space:nowrap;
  display:flex; flex-direction:column; font-variant-numeric:tabular-nums;
}
.poi__dist span{ font-weight:400; font-size:.78rem; color:var(--ink-3); }

/* Mapa */
.map{ border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; aspect-ratio:4/3; background:var(--alt); }
.map iframe{ width:100%; height:100%; border:0; display:block; }
.map__load{
  width:100%; height:100%; border:none; cursor:pointer; padding:32px; text-align:left;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:14px;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--gold) 14%, transparent) 0%, transparent 55%),
    repeating-linear-gradient(45deg, var(--alt) 0 14px, color-mix(in srgb, var(--alt) 82%, var(--line)) 14px 28px);
  color:var(--ink); transition:filter .2s ease;
}
.map__load:hover{ filter:brightness(.97); }
.map__load svg{ width:34px; height:34px; color:var(--gold); }
.map__load span{ font-size:.86rem; color:var(--ink-2); line-height:1.5; max-width:40ch; }
.map__load strong{ display:block; font-size:1.02rem; margin-bottom:4px; }
.mapwrap{ margin-top:24px; }

.infobox{ margin-top:24px; padding:24px 26px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); }
.infobox h3{ margin:0 0 10px; font-size:1.02rem; }
.infobox .speclist{ margin-bottom:14px; }

/* ==========================================================================
   Galeria
   ========================================================================== */
.gal{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:860px){ .gal{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.gal__item{
  position:relative; padding:0; border:none; background:var(--navy); cursor:zoom-in;
  border-radius:var(--r-m); overflow:hidden; aspect-ratio:4/3;
}
.gal__item--wide{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
@media (max-width:860px){ .gal__item--wide{ grid-column:span 2; aspect-ratio:4/3; } }
.gal__item img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease, opacity .2s ease; }
.gal__item:hover img{ transform:scale(1.04); }
.gal__cap{
  position:absolute; left:0; right:0; bottom:0; padding:26px 18px 14px; font-size:.83rem; color:#fff;
  text-align:left; background:linear-gradient(transparent, rgba(12,11,9,.8)); font-weight:500;
}
.galfoot{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(20px,3vw,40px); align-items:center; margin-top:20px; }
@media (max-width:860px){ .galfoot{ grid-template-columns:minmax(0,1fr); } }
.galfoot__thumbs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.galfoot__thumbs button{ padding:0; border:none; background:none; cursor:zoom-in; border-radius:var(--r-s); overflow:hidden; aspect-ratio:1; }
.galfoot__thumbs img{ width:100%; height:100%; object-fit:cover; opacity:.85; transition:opacity .2s ease; }
.galfoot__thumbs button:hover img{ opacity:1; }
.galfoot__cta p{ font-size:.92rem; }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:30px; flex-wrap:wrap; }
.tab{
  padding:14px 20px; border:none; background:none; cursor:pointer; font-weight:600; font-size:.94rem;
  color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab[aria-selected="true"]{ color:var(--ink); border-color:var(--gold); }
.photogrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width:900px){ .photogrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:620px){ .photogrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.photogrid__item{ margin:0; }
.photogrid__item button{ padding:0; border:none; background:var(--alt); cursor:zoom-in; border-radius:var(--r-s); overflow:hidden; aspect-ratio:4/3; width:100%; }
.photogrid__item img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.photogrid__item button:hover img{ transform:scale(1.05); }
.photogrid__item figcaption{ font-size:.79rem; color:var(--ink-3); margin-top:7px; }
.loadmore{ text-align:center; margin:30px 0 0; }

/* Lightbox */
.lb{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:28px; background:rgba(12,11,9,.94); }
.lb[hidden]{ display:none; }
.lb img{ max-width:min(1200px,92vw); max-height:84vh; object-fit:contain; border-radius:var(--r-s); }
.lb__btn{
  position:absolute; border:none; background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
  width:50px; height:50px; border-radius:50%; font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease;
}
.lb__btn:hover{ background:rgba(255,255,255,.24); }
.lb__close{ top:24px; right:24px; }
.lb__prev{ left:24px; top:50%; transform:translateY(-50%); }
.lb__next{ right:24px; top:50%; transform:translateY(-50%); }
.lb__caption{ position:absolute; bottom:26px; left:24px; right:24px; text-align:center; color:rgba(255,255,255,.78); font-size:.87rem; margin:0; }
@media (max-width:620px){
  .lb__prev{ left:10px; } .lb__next{ right:10px; }
  .lb__btn{ width:42px; height:42px; }
}

/* ==========================================================================
   Zaufanie / bloki informacyjne
   ========================================================================== */
.trust{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
@media (max-width:900px){ .trust{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .trust{ grid-template-columns:minmax(0,1fr); } }
.trust__item{ background:var(--surface); padding:28px 26px; }
.trust__item h3{ margin:0 0 10px; font-size:1rem; }
.trust__item p{ margin:0; font-size:.91rem; }

.callout{
  display:grid; grid-template-columns:minmax(0,1fr); gap:20px; padding:clamp(26px,3.5vw,40px);
  border-radius:var(--r-m); background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--gold);
}
.callout h2{ font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem); margin-bottom:.4em; }
.callout--warn{ border-left-color:var(--warn); background:color-mix(in srgb, var(--warn-soft) 45%, var(--surface)); }

.legalgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
@media (max-width:760px){ .legalgrid{ grid-template-columns:minmax(0,1fr); } }
.legalgrid article{ background:var(--surface); padding:28px; }
.legalgrid h2{ font-size:1.05rem; font-family:var(--sans); font-weight:650; margin-bottom:10px; }
.legalgrid p{ font-size:.91rem; }

.disclosures{ display:grid; gap:16px; margin-bottom:28px; }
.disclosures--rzad{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:18px; }
@media (max-width:860px){ .disclosures--rzad{ grid-template-columns:minmax(0,1fr); } }

/* --- Lokalizacja: otoczenie ------------------------------------------------
   Karty z miejscami wokół osiedla; wiersze to ta sama lista co pod mapą
   okolicy (.poi), żeby obie części strony czytały się tak samo. */
.otoczenie{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:860px){ .otoczenie{ grid-template-columns:minmax(0,1fr); } }
.otoczenie__grupa{ padding:24px 26px 10px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); }
.otoczenie__grupa h3{ margin:0 0 8px; font-size:1.08rem; }
.otoczenie__grupa p{ margin:0; font-size:.92rem; color:var(--ink-2); }
.poi--karta{ margin-top:16px; }
.poi--karta .poi__row:last-child{ border-bottom:0; }
.poi--karta .poi__name{ font-size:.93rem; font-weight:550; }
.otoczenie__warto{ margin:clamp(32px,4vw,48px) 0 14px; font-size:1.08rem; }
.disclosure{ padding:22px 24px; border:1px solid var(--line); border-left:3px solid var(--line-2); border-radius:var(--r-m); background:var(--surface); }
.disclosure h3{ margin:0 0 8px; font-size:1rem; }
.disclosure p{ margin:0; font-size:.92rem; }


.ticks, .crosses{ display:grid; gap:11px; margin-top:8px; }
.ticks li, .crosses li{ position:relative; padding-left:30px; font-size:.95rem; color:var(--ink-2); }
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em; width:16px; height:9px;
  border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg);
}
.crosses li::before{ content:"—"; position:absolute; left:2px; top:0; color:var(--warn); font-weight:700; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ border-top:1px solid var(--line-2); }
.faq__item{ border-bottom:1px solid var(--line-2); }
.faq__item h3{ margin:0; font-family:var(--sans); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; background:none; border:none; cursor:pointer; text-align:left;
  font-size:1.05rem; font-weight:600; color:var(--ink);
}
.faq__q:hover{ color:var(--gold-ink); }
.faq__plus{ font-size:1.5rem; font-weight:300; color:var(--gold); transition:transform .2s ease; flex:none; }
.faq__item[data-open="true"] .faq__plus{ transform:rotate(45deg); }
.faq__a{ display:none; padding:0 0 24px; max-width:72ch; }
.faq__item[data-open="true"] .faq__a{ display:block; }
.faq__a p{ font-size:.96rem; }
.faq__a a{ color:var(--gold-ink); }

/* Świadczenia dodatkowe: wiersz tabeli rozwija opis jak pytanie w FAQ.
   Klikalny jest cały wiersz (main.js); przycisk w nazwie niesie stan dla
   czytników ekranu i obsługę z klawiatury. Bez klasy js opisy są widoczne,
   a „+” znika — nie ma czego rozwijać. Linię oddzielającą pozycje rysuje
   wiersz opisu, a gdy opis jest zwinięty — wiersz z nazwą. */
.swiad__q{ padding:0; background:none; border:none; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.swiad .faq__plus{ display:none; }
.js .swiad .faq__plus{ display:inline-block; margin-left:14px; line-height:1; vertical-align:-2px; }
.swiad__row[data-open="true"] .faq__plus{ transform:rotate(45deg); }
.js .swiad__row{ cursor:pointer; }
.js .swiad__row:hover .swiad__q{ color:var(--gold-ink); }
.swiad__row > *{ border-bottom:none; }
.swiad__a td{ padding-top:0; max-width:60ch; color:var(--ink-2); font-size:.9rem; line-height:1.6; }
.js .swiad__a{ display:none; }
.js .swiad__row[data-open="true"] + .swiad__a{ display:table-row; }
.js .swiad__row:not([data-open="true"]) > *{ border-bottom:1px solid var(--line); }
.js .swiad tbody > .swiad__row:nth-last-child(2):not([data-open="true"]) > *{ border-bottom:none; }

/* ==========================================================================
   Lista domów
   ========================================================================== */
.filters{
  display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; padding:24px 26px;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); margin-bottom:22px;
}
.filters__field{ display:flex; flex-direction:column; gap:9px; min-width:190px; flex:1; }
.filters__field label{ font-size:.82rem; font-weight:650; color:var(--ink-2); }
.filters__field output{ color:var(--gold-ink); font-variant-numeric:tabular-nums; }
.filters select{
  padding:11px 13px; border:1px solid var(--line-2); border-radius:var(--r-s);
  background:var(--surface); color:var(--ink); font:inherit; font-size:.93rem;
}
.filters .btn{ flex:none; }
.results{ font-size:.9rem; color:var(--ink-3); margin:0 0 20px; }

.ucards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:960px){ .ucards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .ucards{ grid-template-columns:minmax(0,1fr); } }
.ucard{
  display:flex; flex-direction:column; gap:14px; padding:24px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.ucard:hover{ box-shadow:var(--sh-m); transform:translateY(-2px); border-color:var(--line-2); }
.ucard[hidden]{ display:none; }
.ucard__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ucard__head h3{ margin:0; font-family:var(--serif); font-weight:400; font-size:1.5rem; }
.ucard__head a{ text-decoration:none; }
.ucard__head a:hover{ color:var(--gold-ink); }
.ucard__price{ margin:0; font-size:1.45rem; font-weight:650; font-variant-numeric:tabular-nums; line-height:1.2; color:var(--ink); }
.ucard__price span{ display:block; font-size:.82rem; font-weight:500; color:var(--ink-3); }
.ucard__price--none{ font-size:.98rem; font-weight:600; color:var(--ink-2); }
.ucard__price--none span{ font-weight:400; }
.ucard__specs{ display:grid; gap:7px; font-size:.88rem; color:var(--ink-2); padding-top:14px; border-top:1px solid var(--line); }
.ucard__specs li{ display:flex; align-items:center; gap:9px; }
.ucard__specs li::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--gold); flex:none; }
.ucard__actions{ display:flex; gap:10px; margin-top:auto; padding-top:6px; }
.ucard__actions .btn{ flex:1; }
.noresults{ text-align:center; padding:56px 20px; color:var(--ink-3); }

/* ==========================================================================
   Karta lokalu
   ========================================================================== */
.unitpage{ padding:clamp(28px,4vw,48px) 0 clamp(40px,5vw,72px); }
.unithead{ display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; margin-bottom:clamp(24px,3vw,40px); }
.unithead h1{ margin:12px 0 10px; }
.unithead__lead{ max-width:62ch; font-size:1.02rem; }
.unitnav{ display:flex; gap:6px; align-items:center; font-size:.87rem; }
.unitnav a{ padding:9px 14px; border:1px solid var(--line-2); border-radius:var(--r-s); text-decoration:none; color:var(--ink-2); white-space:nowrap; }
.unitnav a:hover{ border-color:var(--ink); color:var(--ink); }

.unitgrid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(24px,3vw,44px); align-items:start; }
@media (max-width:960px){ .unitgrid{ grid-template-columns:minmax(0,1fr); } }
.unitshot{ display:block; width:100%; padding:0; border:none; background:var(--alt); cursor:zoom-in; border-radius:var(--r-m); overflow:hidden; aspect-ratio:16/10; }
.unitshot img{ width:100%; height:100%; object-fit:cover; }
.unitshot__row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.unitshot__row button{ padding:0; border:none; background:var(--alt); cursor:zoom-in; border-radius:var(--r-s); overflow:hidden; aspect-ratio:4/3; }
.unitshot__row img{ width:100%; height:100%; object-fit:cover; transition:opacity .2s ease; }
.unitshot__row button:hover img{ opacity:.85; }
.unitgrid__media .small{ margin-top:14px; }

.pricebox{ position:sticky; top:100px; padding:28px; border:1px solid var(--line-2); border-radius:var(--r-m); background:var(--surface); box-shadow:var(--sh-s); }
.pricebox__big{
  font-family:var(--serif); font-size:clamp(2.1rem,1.6rem + 1.8vw,2.8rem); line-height:1;
  margin:0 0 6px; color:var(--ink); font-variant-numeric:tabular-nums;
}
.pricebox__big span{ font-family:var(--sans); font-size:.95rem; color:var(--ink-3); margin-left:8px; font-weight:500; }
.pricebox__big--none{ font-size:1.35rem; }
.pricebox__m2{ font-size:.92rem; color:var(--ink-2); margin:0 0 20px; }
.pricebox__actions{ display:grid; gap:10px; margin:22px 0 16px; }

.speclist{ margin:0; border-top:1px solid var(--line); }
.speclist > div{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.speclist dt{ color:var(--ink-3); }
.speclist dd{ margin:0; font-weight:600; text-align:right; }
.speclist--wide > div{ padding:13px 0; }

/* ==========================================================================
   Standard — grupy
   ========================================================================== */
.specgroup{ margin-bottom:clamp(32px,4vw,52px); }
.specgroup h2{ font-size:1.5rem; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line-2); }

/* ==========================================================================
   Harmonogram i dziennik
   ========================================================================== */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1.5px; background:var(--line-2); }
.timeline__item{ position:relative; padding-bottom:34px; }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__item::before{
  content:""; position:absolute; left:-34px; top:5px; width:16px; height:16px; border-radius:50%;
  background:var(--cream); border:2px solid var(--line-2);
}
.timeline__item.is-done::before{ background:var(--ok); border-color:var(--ok); }
.timeline__item.is-current::before{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 5px color-mix(in srgb, var(--gold) 20%, transparent); }
.timeline__date{
  font-size:.78rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-ink); margin:0 0 4px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.timeline__state{
  font-size:.68rem; letter-spacing:.06em; padding:2px 8px; border-radius:100px;
  background:var(--off-soft); color:var(--off);
}
.timeline__item.is-done .timeline__state{ background:var(--ok-soft); color:var(--ok); }
.timeline__item.is-current .timeline__state{ background:var(--gold-soft); color:var(--gold-ink); }
.timeline__item h3{ margin:0 0 6px; font-size:1.1rem; }
.timeline__item p:last-child{ font-size:.93rem; margin:0; }
.timeline + .small{ margin-top:28px; }

/* Filmy z budowy — nagrania z telefonu są pionowe (9:16), więc stoją obok
   siebie w wąskich kolumnach, a nie rozciągają się na całą szerokość. */
.filmy{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 320px)); gap:clamp(20px,3vw,36px); }
.film{ margin:0; }
.film__ramka{
  position:relative; overflow:hidden; border-radius:var(--r-m);
  background:var(--navy-deep); box-shadow:var(--sh-s);
}
.film video{
  display:block; width:100%; height:auto; aspect-ratio:478 / 850; object-fit:contain;
  background:var(--navy-deep);
}
.film__ramka--wlasny video{ cursor:pointer; }

/* Własny odtwarzacz (main.js). Duży przycisk na środku znika w trakcie
   odtwarzania; pasek na dole stoi zawsze — także z pełnym ekranem. */
.film__duzy{
  position:absolute; left:50%; top:50%; width:68px; height:68px; margin:-34px 0 0 -34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,.55); border-radius:50%;
  background:rgba(6,26,38,.6); color:#fff; cursor:pointer;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.film__duzy:hover{ background:rgba(6,26,38,.82); transform:scale(1.06); }
.film__duzy .ik-pelna, .film__duzy .ik-linia{ width:30px; height:30px; }
.film__duzy .ik-pelna{ margin-left:3px; }   /* trójkąt optycznie na środku koła */
.film__ramka.gra .film__duzy{ opacity:0; transform:scale(.9); pointer-events:none; }
.film__pasek{
  position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:4px;
  padding:30px 8px 8px; color:#fff;
  background:linear-gradient(180deg, rgba(6,26,38,0), rgba(6,26,38,.86) 60%);
}
.film__btn{
  flex:none; width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--r-s); background:transparent; color:#fff; cursor:pointer;
  font:inherit; font-size:.76rem; font-weight:650; font-variant-numeric:tabular-nums;
  transition:background .15s var(--ease);
}
.film__btn:hover{ background:rgba(255,255,255,.16); }
.film__btn:focus-visible, .film__duzy:focus-visible{ outline:3px solid var(--gold); outline-offset:1px; }
.film__predkosc{ width:auto; min-width:34px; padding:0 6px; }
.ik-pelna{ width:20px; height:20px; fill:currentColor; }
.ik-linia{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.film__czas{ flex:none; padding:0 4px; font-size:.74rem; font-variant-numeric:tabular-nums; white-space:nowrap; opacity:.92; }
.film__postep{ flex:1; min-width:0; }
.film__postep::-webkit-slider-runnable-track{
  background:linear-gradient(to right, var(--gold) 0 var(--proc, 0%), rgba(255,255,255,.32) var(--proc, 0%) 100%);
}
.film__postep::-moz-range-track{ background:rgba(255,255,255,.32); }
.film__postep::-webkit-slider-thumb{ width:14px; height:14px; margin-top:-5px; border:2px solid #fff; }
.film__postep::-moz-range-thumb{ width:10px; height:10px; border:2px solid #fff; }
/* Oczekiwanie na dane — kółko w miejscu dużego przycisku. */
.film__ramka.laduje::after{
  content:""; position:absolute; left:50%; top:50%; width:42px; height:42px; margin:-21px 0 0 -21px;
  border:3px solid rgba(255,255,255,.3); border-top-color:var(--gold); border-radius:50%;
  animation:filmKolo .8s linear infinite; pointer-events:none;
}
@keyframes filmKolo{ to{ transform:rotate(360deg); } }
/* Pełny ekran obejmuje całą ramkę — z tymi samymi kontrolkami. */
.film__ramka:fullscreen{ border-radius:0; background:#000; display:flex; align-items:center; justify-content:center; }
.film__ramka:-webkit-full-screen{ border-radius:0; background:#000; display:flex; align-items:center; justify-content:center; }
.film__ramka:fullscreen video{ width:100%; height:100%; aspect-ratio:auto; background:#000; }
.film__ramka:-webkit-full-screen video{ width:100%; height:100%; aspect-ratio:auto; background:#000; }
.film__ramka:fullscreen .film__pasek{ padding:40px max(16px, 3vw) 18px; }
/* Na pełnym ekranie pionowy film stoi w całości, z pasami po bokach. Przy
   object-fit:cover wypełniał poziomy ekran i tracił górę i dół kadru. */
.film video:fullscreen{ object-fit:contain; aspect-ratio:auto; border-radius:0; background:#000; }
.film video:-webkit-full-screen{ object-fit:contain; aspect-ratio:auto; border-radius:0; background:#000; }
.film figcaption{ display:flex; flex-direction:column; gap:2px; margin-top:12px; font-size:.9rem; color:var(--ink-2); }
.film figcaption strong{ font-size:1rem; }
.film__meta{ font-size:.8rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.diary{ display:grid; gap:clamp(28px,3.5vw,46px); }
.diary__entry{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(20px,3vw,40px); align-items:start; padding-top:28px; border-top:1px solid var(--line-2); }
.diary__entry:first-child{ padding-top:0; border-top:none; }
@media (max-width:860px){ .diary__entry{ grid-template-columns:minmax(0,1fr); } }
.diary__head h3{ margin:0 0 10px; font-family:var(--serif); font-weight:400; font-size:1.7rem; }
.diary__head p{ font-size:.94rem; margin:0; }
.diary__photos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:620px){ .diary__photos{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.diary__photos button{ padding:0; border:none; background:var(--alt); cursor:zoom-in; border-radius:var(--r-s); overflow:hidden; aspect-ratio:1; }
.diary__photos img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.diary__photos button:hover img{ transform:scale(1.05); }

/* ==========================================================================
   Dokumenty
   ========================================================================== */
.doclist{ display:grid; gap:12px; margin-bottom:clamp(32px,4vw,52px); }
.doclist--grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:860px){ .doclist--grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .doclist--grid{ grid-template-columns:minmax(0,1fr); } }
.doc{
  display:flex; align-items:center; gap:16px; padding:18px 22px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m);
}
.doc--sm{ padding:14px 16px; gap:12px; }
.doc--off{ background:transparent; border-style:dashed; }
.doc__icon{
  display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none;
  border-radius:var(--r-s); background:var(--gold-soft); color:var(--gold-ink);
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
}
.doc--off .doc__icon{ background:var(--off-soft); color:var(--off); }
/* min-width:0 — bez tego najdluzszy wyraz tytulu wyznacza minimalna szerokosc
   calej karty i karta nie moze sie zwezic ponizej tej wartosci. */
.doc__meta{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.doc__meta strong{ font-size:.98rem; }
.doc__meta span{ font-size:.82rem; color:var(--ink-3); }
.doc__note{ font-size:.82rem; color:var(--ink-3); font-style:italic; text-align:right; }
/* Na najwezszych telefonach ikona, opis i „Pobierz” w jednym rzedzie
   potrzebowaly 311 px — przy ekranie 280 px o 63 px wiecej, niz bylo miejsca,
   i karta wychodzila za krawedz. Przycisk schodzi wiec pod opis; zyskuje przy
   tym pelna szerokosc, czyli wygodniejsze pole dotyku. */
@media (max-width:380px){
  .doc{ flex-wrap:wrap; }
  .doc__meta{ flex:1 1 100px; }
  .doc > .btn{ flex:1 0 100%; }
  .doc__note{ flex:1 0 100%; text-align:left; }
}

/* ==========================================================================
   Kontakt i formularze
   ========================================================================== */
/* Kolumny dobierają się do dostępnej szerokości — przy sztywnych trzech
   kolumnach numery telefonu łamały się w połowie. */
/* Kafle kontaktowe: ikona po lewej, treść po prawej — ten sam język graficzny
   co piny mapy i lista punktów w okolicy. Wcześniej każdy kafel miał złoty
   pasek u góry; pięć takich pasków jeden pod drugim rozbijało kolumnę na
   luźne strzępy o nierównych wysokościach. Teraz akcentem jest ikona, a kafle
   mają wspólny rytm. Dwie kolumny pojawiają się dopiero, gdy naprawdę jest
   miejsce — adres e-mail potrzebuje pełnej szerokości, żeby się nie łamał. */
/* min(260px,100%) zamiast samego 260px: na ekranie węższym niż 260 px kolumna
   zwęża się do szerokości kontenera, zamiast z niego wystawać. */
.contactcards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap:10px; align-items:stretch; }
.contactcard{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.contactcard:hover{ border-color:var(--gold); box-shadow:var(--sh-s); }
.contactcard__ikona{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:10px; background:var(--navy); color:var(--gold);
}
.contactcard__ikona svg{ width:19px; height:19px; }
.contactcard__tresc{ min-width:0; }
.contactcard h3{ font-size:.72rem; font-family:var(--sans); font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 5px; }
.contactcard p{ margin:0 0 4px; color:var(--ink); font-size:.95rem; line-height:1.45; }
.contactcard p:last-child{ margin-bottom:0; }
/* Adres e-mail bywa jednym długim ciągiem bez spacji i na wąskim telefonie
   nie ma gdzie się złamać — bez tego wychodzi poza kafelek i poza ekran. */
.contactcard__glowne{
  font-size:1.06rem; font-weight:650; letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
/* Adres pocztowy zasługuje na własny znacznik, ale bez domyślnej kursywy. */
.contactcard address{ font-style:normal; margin:0 0 4px; color:var(--ink); font-size:.95rem; line-height:1.45; }
/* .small przegrywało specyficznością z „.contactcard p", więc notatka
   o umawianiu prezentacji krzyczała tak samo głośno jak sam adres. */
.contactcard .small{ font-size:.84rem; color:var(--ink-3); line-height:1.5; }
.contactcard a{ font-weight:600; color:var(--ink); text-decoration:none; }
.contactcard a:hover{ color:var(--gold-ink); text-decoration:underline; }

/* Dane rejestrowe to drobny druk, nie kafel na równi z telefonem. */
.contactcard--firma{
  display:block; margin-top:10px; padding:14px 18px;
  background:var(--alt); border-style:dashed;
}
.contactcard--firma:hover{ border-color:var(--line); box-shadow:none; }
.contactcard--firma p{ font-size:.84rem; color:var(--ink-3); line-height:1.5; }

.linkstrzalka{ display:inline-flex; align-items:center; gap:5px; }
.linkstrzalka::after{ content:"→"; transition:transform .18s var(--ease); }
.linkstrzalka:hover::after{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){ .linkstrzalka::after{ transition:none; } }
/* Numer telefonu nie dzieli się na dwie linie — rozbity na pół przestaje być
   czytelny jako numer. Jest krótki, więc mieści się nawet na 320 px. */
.contactcard a[href^="tel:"],
.ftr a[href^="tel:"], .form__foot a[href^="tel:"]{
  white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* Adres e-mail przeciwnie: bywa długi i na wąskim telefonie musi mieć prawo
   się złamać. Wcześniej obowiązywał go ten sam zakaz co numeru telefonu, co
   przy dłuższym adresie wypychało kafelek poza ekran. Adres złamany na dwie
   linie czyta się normalnie — wystający poza ekran nie czyta się wcale. */
.contactcard a[href^="mailto:"], .ftr a[href^="mailto:"]{
  white-space:normal; overflow-wrap:anywhere;
}

.formcard{ padding:clamp(24px,3vw,36px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh-s); }
.formcard--sticky{ position:sticky; top:100px; }
.form__title{ margin:0 0 20px; font-size:1.25rem; font-family:var(--serif); font-weight:400; }
.form__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
@media (max-width:620px){ .form__grid{ grid-template-columns:minmax(0,1fr); } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1/-1; }
/* Ukrycie przez wycinek zamiast odsuwania w lewo — tamto powiększało
   szerokość dokumentu i dawało poziomy pasek przewijania. */
.field--hp{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; pointer-events:none;
}
.field label{ font-size:.84rem; font-weight:650; color:var(--ink-2); }
.field label span[aria-hidden]{ color:var(--gold); }
.field input, .field select, .field textarea{
  padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-s);
  background:var(--cream); color:var(--ink); font:inherit; font-size:.96rem; width:100%;
}
.field textarea{ resize:vertical; min-height:96px; }
/* iPhone przybliża stronę po dotknięciu pola z tekstem mniejszym niż 16 px
   i nie oddala jej po wyjściu z pola. Przy zoomie .8 (sekcja „Baza”) 1.25rem
   daje na ekranie dokładnie 16 px; na telefonie, przy zoomie 1, daje to 1rem. */
@media (max-width:620px){
  .field input, .field select, .field textarea, .filters select{ font-size:1.25rem; }
}
@media (max-width:600px){
  .field input, .field select, .field textarea, .filters select{ font-size:1rem; }
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); }
.field input[data-touched="true"]:invalid{ border-color:var(--warn); }
.field__err{ font-size:.79rem; color:var(--warn); margin:0; min-height:1.1em; }
.consent{
  display:flex; gap:12px; align-items:flex-start; margin-top:20px; padding:14px 16px;
  font-size:.85rem; line-height:1.55; color:var(--ink-2); cursor:pointer;
  background:var(--alt); border-radius:var(--r-s);
}
.consent:hover{ background:var(--gold-soft); }
/* Własne pole zaznaczenia: złoty kwadrat z granatowym ptaszkiem — złoto
   (--gold) jest takie samo w obu motywach, więc ptaszek zawsze ma kontrast. */
.consent input{
  -webkit-appearance:none; appearance:none; flex:none; margin:2px 0 0;
  width:20px; height:20px; border:1.5px solid var(--line-2); border-radius:5px;
  background:var(--surface) center / 14px 14px no-repeat; cursor:pointer;
  transition:background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.consent:hover input{ border-color:var(--gold-deep); }
.consent input:checked{
  background-color:var(--gold); border-color:var(--gold);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082232' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.consent input:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--focus); }

/* --- blok zgód ----------------------------------------------------------
   Zgody wymagane i dobrowolna stoją obok siebie, więc każda musi na pierwszy
   rzut oka mówić, którą jest — stąd etykieta przy treści, a nie gwiazdka. */
.zgody{ border:0; margin:22px 0 0; padding:0; min-width:0; }
.zgody__tytul{
  padding:0; margin:0 0 10px; font-size:.84rem; font-weight:650; color:var(--ink-2);
}
.zgoda-blok + .zgoda-blok{ margin-top:8px; }
.zgoda-blok .consent{ margin-top:0; font-weight:400; align-items:flex-start; }
.zgoda-blok .consent > span{ display:block; }
.zgoda-blok .field__err{ margin:4px 0 0 16px; min-height:0; }
.zgoda-blok .field__err:empty{ display:none; }
.zgoda-blok.ma-blad .consent{
  background:var(--warn-soft); box-shadow:inset 0 0 0 1px var(--warn);
}
.zgoda-blok.ma-blad .consent input:not(:checked){ border-color:var(--warn); }

/* ==========================================================================
   Lista rozwijana (main.js) — własny wygląd nad natywnym <select>
   ========================================================================== */
.wybor{ position:relative; }
/* Natywna lista zostaje w formularzu (niesie wartość), ale jej nie widać. */
.wybor__natywny{
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
  margin:0 !important; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0 !important; opacity:0;
}
.wybor__przycisk{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 13px; border:1px solid var(--line-2); border-radius:var(--r-s);
  background:var(--surface); color:var(--ink); font:inherit; font-size:.93rem; text-align:left; cursor:pointer;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field .wybor__przycisk{ padding:12px 14px; background:var(--cream); font-size:.96rem; }
.wybor__przycisk:hover{ border-color:var(--gold-deep); }
.wybor__przycisk[aria-expanded="true"]{ border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent); }
.wybor__wartosc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wybor__strzalka{
  flex:none; width:18px; height:18px; fill:none; stroke:var(--gold-ink); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ease);
}
.wybor__przycisk[aria-expanded="true"] .wybor__strzalka{ transform:rotate(180deg); }
/* Lista bywa szersza niż pole (opisy domów w formularzu) — do 20rem. Gdy
   pole jest szersze (telefon), min-width wygrywa i lista ma jego szerokość. */
.wybor__lista{
  position:absolute; left:0; top:calc(100% + 6px); z-index:60; margin:0; padding:6px;
  width:max-content; min-width:100%; max-width:20rem;
  list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--sh-m); max-height:300px; overflow-y:auto; overscroll-behavior:contain;
  animation:wyborRozwin .16s var(--ease);
}
.wybor--w-gore .wybor__lista{ top:auto; bottom:calc(100% + 6px); }
/* Tylko przesunięcie, bez przezroczystości — gdy przeglądarka wstrzyma
   animację (karta w tle), lista i tak jest w pełni widoczna. */
@keyframes wyborRozwin{ from{ transform:translateY(-4px); } }
.wybor__opcja{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:var(--r-s); font-size:.93rem; color:var(--ink-2); cursor:pointer;
}
.wybor__opcja.aktywna{ background:var(--gold-soft); color:var(--ink); }
.wybor__opcja[aria-selected="true"]{ color:var(--ink); font-weight:600; }
.wybor__opcja[aria-disabled="true"]{ opacity:.45; cursor:default; }
.wybor__ptaszek{
  flex:none; width:16px; height:16px; fill:none; stroke:var(--gold-ink); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; visibility:hidden;
}
.wybor__opcja[aria-selected="true"] .wybor__ptaszek{ visibility:visible; }
.consent__tag{
  display:inline-block; margin-right:7px; padding:1px 7px; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  vertical-align:1px; background:var(--line); color:var(--ink-2);
}
/* Plakietka jest drobna (10,9 px) i pogrubiona, więc obowiązuje ją próg 4,5:1
   jak zwykły tekst. Samo --gold-ink dawało 4,61:1 — na granicy, stąd własny,
   ciemniejszy odcień w motywie jasnym. */
.consent__tag--wym{ background:var(--gold-soft); color:light-dark(#6f5330, #e2cca4); }
.zgody__stopka{
  margin:12px 0 0; font-size:.78rem; line-height:1.55; color:var(--ink-3);
}
.rodo{ margin-top:14px; }
.rodo summary{
  cursor:pointer; font-size:.84rem; font-weight:600; color:var(--ink-2);
  padding:10px 0; list-style:none; display:flex; align-items:center; gap:8px;
}
.rodo summary::-webkit-details-marker{ display:none; }
.rodo summary::before{
  content:"+"; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border:1px solid var(--line-2); border-radius:4px;
  color:var(--gold-ink); font-weight:400; flex:none;
}
.rodo[open] summary::before{ content:"−"; }
.rodo summary:hover{ color:var(--gold-ink); }
.rodo p{ font-size:.8rem; color:var(--ink-3); margin:12px 0 0; line-height:1.55; }
.form__foot{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:24px;
  padding-top:20px; border-top:1px solid var(--line);
}
.form__foot .btn{ flex:0 0 auto; }
.form__foot .small{ margin:0; flex:1 1 240px; }
/* Na wąskim ekranie przycisk idzie na całą szerokość, a notka pod niego. */
@media (max-width:520px){
  .form__foot{ flex-direction:column; align-items:stretch; }
  .form__foot .btn{ width:100%; }
}
.form__status{ display:none; margin:18px 0 0; padding:13px 16px; border-radius:var(--r-s); font-size:.9rem; font-weight:550; }
.form__status.is-visible{ display:block; }
.form__status.is-ok{ background:var(--ok-soft); color:var(--ok); }
.form__status.is-err{ background:var(--warn-soft); color:var(--warn); }

/* ==========================================================================
   Treść prawna
   ========================================================================== */
.prose h2{ font-size:1.4rem; margin:2em 0 .6em; font-family:var(--sans); font-weight:650; scroll-margin-top:100px; }
.prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ font-size:.97rem; color:var(--ink-2); }
.prose ul, .prose ol{ display:grid; gap:9px; margin:0 0 1.2em; padding-left:22px; list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ padding-left:4px; }
.prose a{ color:var(--gold-ink); }
.prose .tablewrap{ margin-bottom:1.4em; }
.prose code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.86em;
  background:var(--alt); padding:2px 6px; border-radius:4px; word-break:break-word;
}

.pagehero__meta{ font-size:.82rem; color:var(--ink-3); margin:14px 0 0; }

/* Strona 404 */
.errcode{
  font-family:var(--serif); font-size:clamp(3rem,2rem + 5vw,5.5rem); line-height:1;
  /* Czyste złoto dawało na kremowym pasie 1,6:1 — numer błędu jest tekstem,
     więc bierzemy odcień przewidziany do pisania złotem. */
  color:var(--gold-ink); margin:0 0 8px; letter-spacing:-.02em;
}
.errlinks{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; margin-bottom:28px; }
@media (max-width:620px){ .errlinks{ grid-template-columns:minmax(0,1fr); } }
.errlink{ display:flex; flex-direction:column; gap:4px; padding:22px 24px; background:var(--surface); text-decoration:none; transition:background .15s ease; }
.errlink:hover{ background:var(--gold-soft); }
.errlink strong{ font-size:1rem; }
.errlink span{ font-size:.86rem; color:var(--ink-3); }

.tocbox{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--r-m); padding:24px 28px; margin-bottom:2.4em;
}
.tocbox h2{ font-size:.76rem!important; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); margin:0 0 14px!important; }
.tocbox ol{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 24px; margin:0; padding-left:20px; }
@media (max-width:620px){ .tocbox ol{ grid-template-columns:minmax(0,1fr); } }
.tocbox li{ font-size:.9rem; }
.tocbox a{ text-decoration:none; }
.tocbox a:hover{ text-decoration:underline; }

.addressblock{
  border-left:3px solid var(--line-2); padding:4px 0 4px 18px; margin:0 0 1.2em;
  font-size:.97rem; line-height:1.7;
}

.catlist{ margin:0 0 1.4em; }
.catlist > div{ padding:16px 0; border-top:1px solid var(--line); }
.catlist dt{ font-weight:650; color:var(--ink); margin-bottom:5px; }
.catlist dd{ margin:0; font-size:.94rem; color:var(--ink-2); }

.cookietable{ min-width:860px; font-size:.86rem; }
.cookietable th[scope="row"]{ white-space:nowrap; }
.cookietable td{ padding:12px 14px; }

/* Szerokie tabele w tekście prawnym wychodzą poza kolumnę czytelniczą —
   inaczej sześć kolumn ściska się do jednego słowa w wierszu. */
@media (min-width:1120px){
  .prose .tablewrap--wide{
    width:min(var(--wrap), calc(100vw - 48px));
    margin-left:50%;
    transform:translateX(-50%);
  }
}

/* ==========================================================================
   Pasek CTA na mobile
   ========================================================================== */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter:blur(10px); border-top:1px solid var(--line);
}
.stickybar .btn{ flex:1; }
@media (max-width:760px){
  .stickybar.is-active{ display:flex; }
  body:has(.stickybar.is-active){ padding-bottom:74px; }
}

/* ==========================================================================
   Stopka
   ========================================================================== */
.ftr{ background:var(--navy); color:rgba(242,239,233,.72); padding:clamp(48px,6vw,80px) 0 28px; }
.ftr__grid{ display:grid; grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); }
@media (max-width:900px){ .ftr__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media (max-width:560px){ .ftr__grid{ grid-template-columns:minmax(0,1fr); } }
.ftr__brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.ftr__brand img{ height:44px; width:auto; filter:brightness(0) invert(1); opacity:.92; }
.ftr__brand span{ font-family:var(--serif); font-size:1.25rem; color:#fff; }
.ftr__note{ font-size:.88rem; color:rgba(242,239,233,.66); max-width:46ch; line-height:1.6; }
.ftr__note--fine{ font-size:.78rem; color:rgba(242,239,233,.45); margin-top:14px; }
.ftr__note a{ color:rgba(242,239,233,.8); }
.ftr__h{ font-family:var(--sans); font-size:.72rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 16px; }
.ftr li{ font-size:.9rem; margin-bottom:11px; line-height:1.5; color:rgba(242,239,233,.72); }
.ftr a{ color:rgba(242,239,233,.72); text-decoration:none; }
.ftr a:hover{ color:#fff; text-decoration:underline; }
.ftr__fine{ font-size:.79rem!important; color:rgba(242,239,233,.48)!important; }
.ftr__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:clamp(36px,5vw,60px); padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.8rem; color:rgba(242,239,233,.45);
}
.ftr__legal{ display:flex; gap:20px; flex-wrap:wrap; }
.ftr__legal a, .ftr__legal .linklike{ display:inline-block; padding-block:3px; color:rgba(242,239,233,.55); font-size:.8rem; text-decoration:underline; }
.ftr__legal a:hover, .ftr__legal .linklike:hover{ color:#fff; }

/* ==========================================================================
   Baner zgód
   ========================================================================== */
/* Baner rośnie w górę od dolnej krawędzi — bez ograniczenia wysokości na
   niskim ekranie wychodził poza widok razem z nagłówkiem i przyciskami. */
.cc{ position:fixed; left:16px; bottom:16px; z-index:300; max-width:520px; max-height:calc(100dvh - 32px); }
.cc[hidden]{ display:none; }
.cc__panel{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-m); box-shadow:var(--sh-l); padding:26px; max-height:calc(100dvh - 32px); overflow-y:auto; }
.cc__panel h2{ font-size:1.2rem; margin-bottom:10px; }
.cc__panel p{ font-size:.88rem; margin-bottom:18px; }
.cc__panel a{ color:var(--gold-ink); }
.cc__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cc__actions .btn{ flex:1 1 auto; }
.cc__links{ display:flex; gap:18px; margin:16px 0 0; font-size:.8rem; }
.cc__links a{ color:var(--ink-3); }
.ccm__state{
  margin:16px 0 0; padding:10px 14px; border-radius:var(--r-s); background:var(--gold-soft);
  color:var(--gold-ink); font-size:.84rem; font-weight:550;
}
.ccm__foot{ margin-top:14px; }
@media (max-width:620px){ .cc{ left:10px; right:10px; bottom:10px; max-width:none; } }

.ccm{ position:fixed; inset:0; z-index:310; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(14,12,9,.6); }
.ccm[hidden]{ display:none; }
.ccm__box{ background:var(--surface); border-radius:var(--r-m); max-width:580px; width:100%; max-height:88vh; overflow-y:auto; padding:32px; box-shadow:var(--sh-l); }
.ccm__box h2{ font-size:1.4rem; margin-bottom:8px; }
.ccm__cat{ display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line); }
.ccm__cat h3{ font-size:.98rem; margin:0 0 4px; }
.ccm__cat p{ font-size:.85rem; margin:0; }
.ccm__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }

.switch{ position:relative; display:inline-block; width:48px; height:27px; flex:none; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch__track{ position:absolute; inset:0; background:var(--line-2); border-radius:100px; transition:background .18s ease; pointer-events:none; }
.switch__track::before{ content:""; position:absolute; width:21px; height:21px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .18s ease; }
.switch input:checked + .switch__track{ background:var(--gold); }
.switch input:checked + .switch__track::before{ transform:translateX(21px); }
.switch input:disabled + .switch__track{ opacity:.55; }
.switch input:focus-visible + .switch__track{ outline:3px solid var(--focus); outline-offset:3px; }

/* ==========================================================================
   Okienko promocji (src/promocja.mjs)

   Natywny <dialog>: showModal() daje tło, pułapkę fokusu i zamykanie Esc.
   Po lewej plan osiedla przybliża się do działki lokalu, reszta planu
   ciemnieje, a działkę obrysowuje złota linia — „wycięta” z kadru.
   „X” stoi w prawym dolnym rogu, na życzenie inwestora.
   ========================================================================== */
.promo{
  padding:0; border:none; background:none; color:var(--ink);
  width:min(860px, calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px);
}
.promo::backdrop{ background:rgba(6,26,38,.62); backdrop-filter:blur(3px); }
.promo[open]{ animation:promoWejscie .4s var(--ease); }
.promo__box{
  position:relative; display:grid; grid-template-columns:44% 1fr;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-l);
  box-shadow:var(--sh-l); overflow:hidden; max-height:calc(100dvh - 32px);
}
.promo__media{ position:relative; margin:0; min-height:420px; background:var(--navy); }
.promo__plan{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.promo__scena{ transform-box:view-box; transform-origin:0 0; }
.promo[open] .promo__scena{ animation:promoZoom 2.2s var(--ease) .5s both; }
.promo__cien{ fill:rgba(6,26,38,.55); opacity:0; }
.promo[open] .promo__cien{ animation:promoPojaw .6s ease 2.5s both; }
.promo__obrys{ fill:none; stroke:var(--gold); stroke-width:2.2; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; }
.promo[open] .promo__obrys{ animation:promoObrys 1s ease-out 2.5s both; }
/* Oznaczenia lokali przy dwóch lokalach: pojawiają się po narysowaniu obrysu.
   Wielkość czcionki ustawia main.js, żeby po przybliżeniu miała ok. 14 px. */
.promo__etykieta{
  fill:#fff; font-family:var(--sans); font-weight:700; text-anchor:middle; dominant-baseline:central;
  paint-order:stroke; stroke:rgba(6,26,38,.85); stroke-width:.24em; stroke-linejoin:round; opacity:0;
}
.promo[open] .promo__etykieta{ animation:promoPojaw .5s ease 3.1s both; }
.promo__media figcaption{
  position:absolute; left:16px; bottom:16px; padding:6px 12px; border-radius:100px;
  background:rgba(6,26,38,.78); color:#fff; font-size:.82rem; font-weight:600;
}
.promo__tresc{ padding:34px 34px 70px; overflow-y:auto; }
.promo__eyebrow{
  display:inline-block; margin:0 0 12px; padding:4px 12px; border-radius:100px;
  background:var(--gold-soft); color:var(--gold-ink);
  font-size:.74rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase;
}
.promo__tytul{ font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); margin:0 0 16px; }
.promo__ceny{ display:flex; align-items:center; gap:12px; margin:0 0 4px; color:var(--ink-3); font-size:1.05rem; }
.promo__nowa{ margin:0 0 10px; color:var(--ink-2); }
.promo__nowa strong{ font-family:var(--serif); font-weight:400; font-size:2.4rem; line-height:1.1; color:var(--ink-mocny); margin-right:4px; }
.promo__uwaga{ font-size:.84rem; color:var(--ink-3); margin:0 0 22px; }
/* Promocja na kilka lokali: wiersz na lokal zamiast jednej dużej ceny. */
.promo__lista{ list-style:none; margin:0 0 8px; padding:0; }
.promo__lista li{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:4px 12px;
  padding:9px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums;
}
.promo__lokal{ font-weight:700; }
.promo__lista s{ color:var(--ink-3); font-size:.88rem; justify-self:end; }
.promo__lista strong{ font-family:var(--serif); font-weight:400; font-size:1.3rem; color:var(--ink-mocny); }
.promo__nowa--lista{ font-size:.82rem; color:var(--ink-3); }
/* Odliczanie włączane w panelu — tekst wstawia main.js. */
.promo__odliczanie{ margin:-10px 0 20px; font-size:.86rem; font-weight:650; color:var(--gold-ink); }
.promo__kontakt{ padding-top:20px; border-top:1px solid var(--line); }
.promo__kontakt h3{ font-family:var(--sans); font-size:.98rem; margin:0 0 12px; }
.promo__dane{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:14px 0 0; font-size:.9rem; }
.promo__dane a{ color:var(--gold-ink); font-weight:550; }
.promo__x{
  position:absolute; right:16px; bottom:16px; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; padding:0 0 3px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink);
  font-size:1.6rem; line-height:1; transition:background .18s ease, color .18s ease;
}
.promo__x:hover{ background:var(--gold-soft); color:var(--gold-ink); }

@keyframes promoWejscie{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes promoZoom{
  from{ transform:translate(0px, 0px) scale(1); }
  to{ transform:translate(var(--promo-x), var(--promo-y)) scale(var(--promo-k)); }
}
@keyframes promoPojaw{ to{ opacity:1; } }
@keyframes promoObrys{ to{ stroke-dashoffset:0; } }

/* Telefon: zdjęcie nad treścią. */
@media (max-width:620px){
  .promo__box{ grid-template-columns:1fr; overflow-y:auto; }
  .promo__media{ min-height:190px; }
  .promo__tresc{ padding:24px 22px 72px; overflow:visible; }
  .promo__nowa strong{ font-size:2rem; }
}
/* Bez ruchu: od razu kadr końcowy. */
@media (prefers-reduced-motion: reduce){
  .promo[open], .promo[open] .promo__scena, .promo[open] .promo__cien, .promo[open] .promo__obrys,
  .promo[open] .promo__etykieta{ animation:none; }
  .promo__etykieta{ opacity:1; }
  .promo__scena{ transform:translate(var(--promo-x), var(--promo-y)) scale(var(--promo-k)); }
  .promo__cien{ opacity:1; }
  .promo__obrys{ stroke-dashoffset:0; }
}

/* ==========================================================================
   Druk
   ========================================================================== */
@media print{
  .hdr, .ftr, .stickybar, .cc, .ccm, .lb, .btn, .map, .burger{ display:none!important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .section{ padding:12pt 0; }
  .tablewrap{ border:none; overflow:visible; }
  table{ font-size:9pt; }
  a::after{ content:" (" attr(href) ")"; font-size:8pt; color:#555; }
  .utable a::after, .crumbs a::after{ content:""; }
}

/* ==========================================================================
   Ruch i ożywienie
   Wszystko poniżej wyłącza się przy prefers-reduced-motion (reguła u góry
   pliku skraca czasy trwania), a treść pozostaje widoczna bez JavaScriptu.
   ========================================================================== */

/* Wejście sekcji przy przewijaniu. Klasę .reveal nadaje skrypt dopiero
   po starcie, więc przy wyłączonym JS nic się nie chowa. */
.js .reveal{ opacity:0; transform:translateY(22px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal-stagger > *{ opacity:0; transform:translateY(18px); }
.js .reveal-stagger.is-in > *{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal-stagger.is-in > *:nth-child(2){ transition-delay:.06s; }
.js .reveal-stagger.is-in > *:nth-child(3){ transition-delay:.12s; }
.js .reveal-stagger.is-in > *:nth-child(4){ transition-delay:.18s; }
.js .reveal-stagger.is-in > *:nth-child(5){ transition-delay:.24s; }
.js .reveal-stagger.is-in > *:nth-child(6){ transition-delay:.30s; }
.js .reveal-stagger.is-in > *:nth-child(7){ transition-delay:.36s; }
.js .reveal-stagger.is-in > *:nth-child(8){ transition-delay:.42s; }
.js .reveal-stagger.is-in > *:nth-child(9){ transition-delay:.48s; }

@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .reveal-stagger > *{ opacity:1; transform:none; }
}

/* Hero: powolne zbliżenie kadru buduje wrażenie życia bez rozpraszania. */
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.hero__media img{ animation:heroZoom 26s var(--ease) forwards; }
@media (prefers-reduced-motion: reduce){ .hero__media img{ animation:none; } }

/* Złoty listek nad nagłówkiem hero */
.hero__kicker{ color:var(--gold); }
.hero__kicker::before{
  content:""; display:inline-block; width:30px; height:1px; background:var(--gold);
  margin-right:12px; vertical-align:middle;
}
.hero__price strong{ color:var(--gold); }

/* Pasek faktów: liczby wjeżdżają i podkreślają się złotem */
.factbar{ background:var(--surface); }
.factbar__item{ position:relative; transition:background .25s var(--ease); }
.factbar__item:hover{ background:var(--gold-soft); }
.factbar__item strong{ color:var(--ink-mocny); }
.factbar__item::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:2px;
  background:var(--gold); transform:translateX(-50%); transition:width .3s var(--ease);
}
.factbar__item:hover::after{ width:48px; }

/* Karty lokali i kafle: unoszenie ze złotą krawędzią */
.ucard{ position:relative; overflow:hidden; }
.ucard::after{
  content:""; position:absolute; left:0; top:0; width:3px; height:100%;
  background:var(--gold); transform:scaleY(0); transform-origin:top;
  transition:transform .3s var(--ease);
}
.ucard:hover::after{ transform:scaleY(1); }
.ucard:hover{ border-color:var(--gold-deep); }

.feature{ transition:background .25s var(--ease), transform .25s var(--ease); }
.feature:hover{ background:var(--gold-soft); }
/* Ikony są złote, więc przy najechaniu rozjaśniamy tło, a nie kolorujemy je
   na złoto — inaczej rysunek zlewałby się z podkładem. */
.feature:hover .feature__icon{ background:var(--navy-deep); transform:rotate(-4deg) scale(1.06); }
.feature:hover .feature__icon img{ filter:brightness(1.25); }
.feature__icon img{ transition:filter .25s var(--ease); }
.feature__icon{ transition:background .25s var(--ease), transform .25s var(--ease); }

.trust__item{ transition:background .25s var(--ease); }
.trust__item:hover{ background:var(--gold-soft); }

/* Wiersze tabeli i listy POI reagują na kursor */
.poi__row{ transition:padding-left .25s var(--ease); }
.poi__row:hover{ padding-left:8px; }
.poi__row:hover .poi__dot{ transform:scale(1.5); }
.poi__dot{ transition:transform .25s var(--ease); }

/* Nagłówek zmienia się po przewinięciu — sygnał, że strona żyje */
.hdr{ transition:box-shadow .25s var(--ease), background .25s var(--ease); }
.hdr.is-stuck{ box-shadow:0 4px 24px rgba(9,49,73,.10); }

/* Akcent na cenie w karcie lokalu */
.pricebox{ border-top:3px solid var(--gold); }
.pricebox__big{ color:var(--ink-mocny); }
.ucard__price{ color:var(--ink-mocny); }

/* Cytat sekcji „inwestycja” — złota linia zamiast szarej */
.keyfacts > div:hover{ background:var(--gold-soft); }
.keyfacts > div{ transition:background .2s var(--ease); padding-inline:8px; margin-inline:-8px; }

/* Galeria: delikatne złote obramowanie po najechaniu */
.gal__item, .photogrid__item button, .diary__photos button{ transition:box-shadow .25s var(--ease); }
.gal__item:hover, .photogrid__item button:hover, .diary__photos button:hover{
  box-shadow:0 0 0 3px var(--gold);
}

/* Oś czasu: bieżący etap pulsuje */
@keyframes pulseGold{
  0%,100%{ box-shadow:0 0 0 0 rgba(212,189,149,.65); }
  50%{ box-shadow:0 0 0 8px rgba(212,189,149,0); }
}
.timeline__item.is-current::before{ animation:pulseGold 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .timeline__item.is-current::before{ animation:none; } }

/* Formularz: złoty akcent na aktywnym polu */
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--gold-deep); box-shadow:0 0 0 3px var(--gold-soft);
}

/* Stopka na granacie marki */
.ftr{ background:var(--navy-deep); }
.ftr__brand span{ color:var(--gold); }
.ftr__h{ color:var(--gold); }

/* ==========================================================================
   Mapa okolicy — rysowana z geometrii, bez kafelków z zewnętrznego serwisu

   Układ mapy to metry od środka inwestycji, więc pierścienie 250/500/1000 m
   i podziałka wynikają wprost z danych. Zmienna --u to liczba jednostek mapy
   przypadająca na piksel ekranu; skrypt aktualizuje ją przy każdej zmianie
   powiększenia, dzięki czemu piny i podpisy zachowują stałą wielkość.
   ========================================================================== */
.okolica{
  --u: 1.33;
  --mapa-tlo:       light-dark(#f2eadb, #071d29);
  --mapa-pole:      light-dark(#f0e7d3, #0a2532);
  --mapa-laka:      light-dark(#e8eed8, #0b2c31);
  --mapa-las:       light-dark(#dce7ce, #0d3130);
  --mapa-sad:       light-dark(#e4ecd2, #0c2e31);
  --mapa-zabudowa:  light-dark(#ece3d2, #0c2836);
  --mapa-cmentarz:  light-dark(#e2e7d6, #0b2a30);
  --mapa-woda:      light-dark(#c6dae6, #0f3a4f);
  --mapa-obw:       light-dark(#c3b189, #041520);
  --mapa-droga:     light-dark(#fffdf8, #23506c);
  --mapa-polna:     light-dark(#ddcfae, #1b3d50);
  --mapa-pieszo:    light-dark(#bcab88, #2b5a76);
  --mapa-kolej:     light-dark(#aa9d82, #2f4d60);
  --mapa-okrag:     light-dark(rgba(9,49,73,.22), rgba(212,189,149,.20));
  --mapa-podpis:    light-dark(#3f4a52, #cfe0ea);
  --mapa-podpis-2:  light-dark(#6d6656, #91adbd);

  display:grid; gap:24px; grid-template-columns:minmax(0,1fr);
}
@media (min-width:940px){
  .okolica{ grid-template-columns:minmax(0,1fr) 332px; align-items:start; }
}

/* --- pasek sterowania ---------------------------------------------------- */
.okolica__pasek{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; }
.okolica__widoki{ display:inline-flex; background:var(--alt); border:1px solid var(--line); border-radius:100px; padding:3px; gap:2px; }
.okolica__widok{
  border:none; background:none; cursor:pointer; border-radius:100px;
  padding:7px 15px; font:inherit; font-size:.83rem; font-weight:600; color:var(--ink-2);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.okolica__widok:hover{ color:var(--ink-mocny); }
.okolica__widok[aria-pressed="true"]{ background:var(--solid-bg); color:var(--solid-fg); }
.okolica__zoom{ display:inline-flex; gap:6px; }
.okolica__lupa{
  width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink-2);
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.okolica__lupa svg{ width:16px; height:16px; }
.okolica__lupa:hover{ border-color:var(--gold); color:var(--ink-mocny); }

/* --- rama mapy ----------------------------------------------------------- */
.okolica__ramka{
  margin:0; position:relative; border:1px solid var(--line);
  border-radius:var(--r-m); overflow:hidden; background:var(--mapa-tlo);
}
.okolica__svg{
  display:block; width:100%; aspect-ratio:16/10; background:var(--mapa-tlo);
  /* Jednym palcem przewija się strona — mapę przesuwa się dwoma. */
  touch-action:pan-y;
}
.js .okolica__svg{ cursor:grab; }
.js .okolica__svg.is-ciagniety{ cursor:grabbing; }
@media (max-width:620px){
  .okolica{ --u: 2.7; }
  .okolica__svg{ aspect-ratio:4/3; }
  /* Na wąskim ekranie piny i podpisy w stałej wielkości zajmują za dużo mapy,
     przez co układ kolizyjny musiałby chować większość nazw. */
  .okolica{ --pin: .84; }
}

/* --- warstwy terenu ------------------------------------------------------ */
.mw{ fill:none; stroke:none; }
.mw--pole{ fill:var(--mapa-pole); }
.mw--laka{ fill:var(--mapa-laka); }
.mw--las{ fill:var(--mapa-las); }
.mw--sad{ fill:var(--mapa-sad); }
.mw--zabudowa{ fill:var(--mapa-zabudowa); }
.mw--miasto{ fill:light-dark(#e3d6bb, #0e2e3f); }
.mw--cmentarz{ fill:var(--mapa-cmentarz); }
.mw--jezioro{ fill:var(--mapa-woda); }
.mw--rzeka{ stroke:var(--mapa-woda); stroke-width:3px; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.mw--kolej{ stroke:var(--mapa-kolej); stroke-width:1.6px; stroke-dasharray:7 5; vector-effect:non-scaling-stroke; }

/* --- drogi: obwódka pod spodem, wypełnienie na wierzchu ------------------ */
.obw, .drg{ fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.obw{ stroke:var(--mapa-obw); }
.obw--glowna{ stroke-width:7px; }
.obw--drugorzedna{ stroke-width:5.5px; }
.obw--lokalna{ stroke-width:4.6px; }
.drg{ stroke:var(--mapa-droga); }
.drg--glowna{ stroke-width:5px; }
.drg--drugorzedna{ stroke-width:3.6px; }
.drg--lokalna{ stroke-width:2.8px; }
.drg--serwis{ stroke-width:1.5px; }
.drg--polna{ stroke:var(--mapa-polna); stroke-width:1.6px; stroke-dasharray:6 4; }
.drg--pieszo{ stroke:var(--mapa-pieszo); stroke-width:1.3px; stroke-dasharray:2 4; }

/* Przy dużym oddaleniu szczegóły wsi zlewają się w plamę, a przy zbliżeniu
   sieć dróg wojewódzkich niczego nie wnosi — każdy kadr pokazuje swoje. */
.okolica[data-skala="daleka"] .mgr--blisko{ display:none; }
.okolica[data-skala="daleka"] .okr{ display:none; }
.okolica:not([data-skala="daleka"]) .mgr--region{ display:none; }
.okolica[data-skala="srednia"] .drg--serwis,
.okolica[data-skala="srednia"] .drg--pieszo{ display:none; }

/* W kadrze regionalnym treść niesie sieć drogowa — to ona pokazuje, którędy
   jedzie się do miasta. Kolej i zabudowa schodzą wtedy do tła, inaczej gęsta
   kreska torów przykrywa drogi. */
.okolica[data-skala="daleka"] .drg--glowna{ stroke:light-dark(#f2d9a2, #c9a45f); stroke-width:4.4px; }
.okolica[data-skala="daleka"] .obw--glowna{ stroke:light-dark(#b4975c, #5d441a); stroke-width:6.4px; }
.okolica[data-skala="daleka"] .drg--drugorzedna{ stroke-width:2.4px; }
.okolica[data-skala="daleka"] .obw--drugorzedna{ stroke-width:3.8px; }
.okolica[data-skala="daleka"] .mw--kolej{ stroke-width:1px; opacity:.45; }
.okolica[data-skala="daleka"] .mw--rzeka{ stroke-width:2.4px; }
.okolica[data-skala="daleka"] .trasa--linia{ stroke-width:6px; }
.okolica[data-skala="daleka"] .trasa--obw{ stroke-width:10.5px; }

/* --- pierścienie odległości ---------------------------------------------- */
.okr__linia{ fill:none; stroke:var(--mapa-okrag); stroke-width:1.2px; stroke-dasharray:4 6; vector-effect:non-scaling-stroke; }
.okr__opis{
  fill:var(--mapa-podpis-2); font-family:var(--sans); font-weight:600;
  font-size:calc(10.5px * var(--u)); text-anchor:middle;
  paint-order:stroke; stroke:var(--mapa-tlo); stroke-width:3.5px; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

/* --- trasa drogą do punktu ------------------------------------------------
   Przebieg policzony przy generowaniu danych z sieci OpenStreetMap, więc
   strona niczego nie liczy w locie. pathLength="1" na ścieżce sprawia, że
   rysowanie linii trwa tyle samo niezależnie od długości trasy. */
.trasa{
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; opacity:0;
  transition:opacity .2s var(--ease);
  pointer-events:none;
}
/* Kolor trasy nie może być złoty: w kadrze regionalnym drogi główne same są
   złote i linia w nich ginęła. Granat w jasnym motywie i kremowa biel
   w ciemnym odcinają się od każdej warstwy mapy. */
.trasa--obw{ stroke:light-dark(rgba(255,253,248,.96), rgba(4,19,28,.94)); stroke-width:9px; }
/* Wzór kreski ustawia skrypt z rzeczywistej długości ścieżki: przy
   vector-effect:non-scaling-stroke normalizacja pathLength nie jest
   respektowana i kreska długości 1 znikała na trasie długiej na 400 jednostek. */
/* Trasa musi być wyraźniejsza od dróg, po których biegnie — przy 3,6 px ginęła
   między drogami głównymi, które w kadrze regionalnym mają 4,4–6,4 px. */
.trasa--linia{ stroke:light-dark(#093149, #fdfbf4); stroke-width:4.6px; }
.trasa.is-akt{ opacity:1; }
/* Obwódka rysuje się razem z linią. Gdy pojawiała się od razu w całości, biały
   korytarz zdradzał cały przebieg trasy i dorysowywanie granatu w środku było
   praktycznie niewidoczne. Czas trwania ustawia skrypt z długości trasy —
   krótkie dojście do przystanku i pięciokilometrowy dojazd do Rynku nie
   powinny rysować się tyle samo. */
.trasa--obw.is-akt,
.trasa--linia.is-akt{
  stroke-dashoffset:0;
  transition:opacity .18s var(--ease), stroke-dashoffset var(--czas-trasy, .6s) var(--ease);
}

/* Znacznik przebiegający trasę. Jedzie dokładnie po tej samej ścieżce co linia
   i w tym samym czasie, więc widać, że droga zaczyna się przy domach i biegnie
   do wybranego punktu. Na końcu gaśnie, żeby nie przykrywał pinu celu. */
@keyframes nb-trasa-przejazd{
  0%   { offset-distance:0%;   opacity:0; }
  10%  { opacity:1; }
  80%  { opacity:1; }
  100% { offset-distance:100%; opacity:0; }
}
.trasa__glowa{
  fill:var(--gold); stroke:light-dark(#093149, #08222f); stroke-width:3px;
  vector-effect:non-scaling-stroke; opacity:0; pointer-events:none;
  offset-rotate:0deg;
  filter:drop-shadow(0 0 4px light-dark(rgba(9,49,73,.55), rgba(0,0,0,.6)));
}

/* --- łączniki do punktów -------------------------------------------------- */
.lacz{
  stroke:var(--gold-deep); stroke-width:1.8px; stroke-dasharray:5 5;
  vector-effect:non-scaling-stroke; opacity:0;
  transition:opacity .2s var(--ease);
}
.lacz.is-akt{ opacity:.95; }

/* --- działki inwestycji --------------------------------------------------- */
.dzialka{
  fill:color-mix(in srgb, var(--gold) 55%, transparent);
  stroke:var(--gold-deep); stroke-width:1.6px; vector-effect:non-scaling-stroke;
}

/* --- piny ----------------------------------------------------------------- */
.pin{ cursor:pointer; }
.pin__skala{ transform:scale(calc(var(--u) * var(--pin, 1))); }
.pin__aura{ fill:var(--gold); opacity:0; transition:opacity .2s var(--ease); }
.pin__tlo{
  fill:light-dark(#fffdf8, #0d3348); stroke:var(--navy); stroke-width:1.6px;
  vector-effect:non-scaling-stroke; transition:fill .18s var(--ease), stroke .18s var(--ease);
}
.pin__ikona{ color:var(--navy); overflow:visible; transition:color .18s var(--ease); }
.pin__nazwa{
  fill:var(--mapa-podpis); font-family:var(--sans); font-size:12.5px; font-weight:650;
  text-anchor:middle; paint-order:stroke; stroke:var(--mapa-tlo); stroke-width:4px;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.pin__dist{
  fill:var(--mapa-podpis-2); font-family:var(--sans); font-size:11px; font-weight:600;
  text-anchor:middle; paint-order:stroke; stroke:var(--mapa-tlo); stroke-width:3.5px;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.pin__nazwa, .pin__dist{ transition:opacity .16s var(--ease); }
/* W locie kadru podpisy nie są przeliczane, więc na chwilę potrafiłyby na
   siebie nachodzić — wygaszamy je na czas przelotu. */
.okolica.is-leci .pin__nazwa,
.okolica.is-leci .pin__dist,
.okolica.is-leci .okr__opis{ opacity:0; }

.pin:hover .pin__tlo,
.pin.is-akt .pin__tlo,
.pin.is-nakursorze .pin__tlo{ fill:var(--gold); stroke:var(--navy); }
.pin.is-akt .pin__aura{ opacity:.28; }
/* Najechanie na pozycję listy podświetla odpowiadający jej pin na mapie. */
.pin.is-nakursorze .pin__aura{ opacity:.2; }
.pin--dom .pin__tlo{ fill:var(--navy); stroke:var(--gold); stroke-width:2px; }
.pin--dom .pin__ikona{ color:var(--gold); }
.pin--dom .pin__nazwa{ fill:var(--ink-mocny); font-size:13.5px; }
.pin--dom{ cursor:default; }

/* Układ kolizyjny może przerzucić podpis pod pin i wysunąć go w bok (--dx),
   żeby nie wystawał poza ramkę mapy. */
.pin__nazwa, .pin__dist{ transform:translateX(var(--dx, 0px)); }
.pin--dol .pin__nazwa{ transform:translate(var(--dx, 0px), 57px); }
.pin--dol .pin__dist{ transform:translate(var(--dx, 0px), 15px); }

/* Bez JavaScriptu widać tylko kadr pieszy, więc chowamy podpisy punktów, które
   i tak leżą poza nim. Gdy skrypt działa, rozmieszczeniem podpisów zajmuje się
   układ kolizyjny w main.js — reguły poniżej byłyby wtedy zgadywaniem. */
html:not(.js) .pin[data-pkt="sklep"] .pin__nazwa,
html:not(.js) .pin[data-pkt="sklep"] .pin__dist,
html:not(.js) .pin[data-pkt="galeria"],
html:not(.js) .pin[data-pkt="rynek"]{ display:none; }

/* --- nakładka: róża wiatrów i podziałka ----------------------------------
   Nakładka obejmuje samo płótno mapy, nie całą figurę — inaczej podziałka
   wchodziłaby na podpis ze źródłami danych pod spodem. */
.okolica__plotno{ position:relative; }
.okolica__naklad{ position:absolute; inset:0; pointer-events:none; }
.okolica__roza{
  position:absolute; top:12px; right:12px; display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%; color:var(--ink-2);
  background:color-mix(in srgb, var(--mapa-tlo) 82%, transparent);
  border:1px solid var(--line);
}
.okolica__roza svg{ width:17px; height:17px; margin-bottom:-3px; }
.okolica__roza span{ font-size:.58rem; font-weight:700; letter-spacing:.04em; }
.okolica__skala{
  position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:650; color:var(--mapa-podpis);
  background:color-mix(in srgb, var(--mapa-tlo) 82%, transparent);
  padding:5px 10px; border-radius:7px; border:1px solid var(--line);
}
.okolica__skalabar{ height:6px; border-bottom:2px solid currentColor; border-left:2px solid currentColor; border-right:2px solid currentColor; min-width:26px; }
.okolica__chwyt{
  position:absolute; right:12px; bottom:12px; margin:0; pointer-events:none;
  font-size:.72rem; color:var(--mapa-podpis-2); opacity:0;
  background:color-mix(in srgb, var(--mapa-tlo) 82%, transparent);
  padding:5px 10px; border-radius:7px; transition:opacity .3s var(--ease);
}
.js .okolica__ramka:hover .okolica__chwyt{ opacity:1; }
@media (max-width:620px){ .okolica__chwyt{ display:none; } }

.okolica__zrodla{
  font-size:.72rem; line-height:1.55; color:var(--ink-3);
  padding:11px 14px; border-top:1px solid var(--line); background:var(--surface);
}

/* --- lista punktów -------------------------------------------------------- */
.okolica__wstep{ font-size:.88rem; color:var(--ink-2); margin:0 0 14px; }
.okolica__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.poi2{
  width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid transparent; border-radius:var(--r-s);
  background:none; cursor:pointer; text-align:left; font:inherit; color:inherit;
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.poi2:hover{ background:var(--alt); }
.poi2[aria-pressed="true"]{ background:var(--gold-soft); border-color:var(--gold); }
.poi2__ikona{
  width:34px; height:34px; display:grid; place-items:center; border-radius:9px;
  background:var(--navy); color:var(--gold);
}
.poi2__ikona svg{ width:18px; height:18px; }
.poi2__tresc{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.poi2__nazwa{ font-size:.9rem; font-weight:620; color:var(--ink-mocny); }
.poi2__opis{ font-size:.76rem; color:var(--ink-3); }
.poi2__dist{
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  font-size:.85rem; font-weight:650; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.poi2__dist span{ font-size:.72rem; font-weight:500; color:var(--ink-3); }
.okolica__stopka{ font-size:.76rem; color:var(--ink-3); margin:14px 0 0; line-height:1.55; }

@media (prefers-reduced-motion:reduce){
  .lacz, .pin__aura, .pin__tlo, .okolica__chwyt{ transition:none; }
  /* Trasa pokazuje się od razu w całości, bez rysowania — dotyczy to także
     obwódki, która od teraz jest kreskowana tak samo jak linia. */
  .trasa{ stroke-dashoffset:0 !important; }
  .trasa, .trasa--obw.is-akt, .trasa--linia.is-akt{ transition:none; }
  .trasa__glowa{ display:none; }
}

/* Na wąskich ekranach drobne etykiety schodziły poniżej 12 px — na telefonie
   to już rozmiar, przy którym wersaliki z rozstrzeleniem przestają się czytać. */
@media (max-width:620px){
  .ftr__h{ font-size:.75rem; }
  .eyebrow{ font-size:.75rem; }
  .okolica__zrodla{ font-size:.75rem; }
  .contactcard h3{ font-size:.75rem; }
}

/* ==========================================================================
   Ekrany niskie — telefon w poziomie

   Przy 375 px wysokości sztywne minimum hero (520 px) zasłaniało cały ekran
   samym zdjęciem: użytkownik nie widział ani nagłówka, ani ceny, dopóki nie
   przewinął. To samo dotyczy mapy okolicy o proporcji 16:10.
   ========================================================================== */
@media (max-height:560px) and (orientation:landscape){
  .hero{ min-height:clamp(280px, 86vh, 460px); }
  .hero__inner{ padding-top:24px; padding-bottom:clamp(20px, 4vw, 40px); }
  .okolica__svg{ aspect-ratio:auto; height:min(76vh, 400px); }
  .plan__info{ position:static; }
  .est__result{ position:static; }
}
@media (max-height:560px){
  .cc__panel{ padding:18px; }
  .cc__panel h2{ font-size:1.05rem; margin-bottom:6px; }
  .cc__panel p{ font-size:.84rem; margin-bottom:12px; }
  .cc__links{ margin-top:10px; }
}