@charset "UTF-8";
/* ============================================================
   Osiedle Sterowców — Budynek S19
   Paleta wg briefu: granat i błękity jako baza, oliwka jako akcent
   Typografia: Inter Tight (tekst) + Barlow Semi Condensed
   (webowy zamiennik Bahnschrift Bold Condensed z broszury)
   ------------------------------------------------------------
   Tokeny są semantyczne (--ink / --accent / --panel …), nie
   nazwane po kolorze — żeby przethemowanie kolejnej inwestycji
   sprowadzało się do podmiany wartości w tym bloku.
   ============================================================ */

:root {
  /* Baza */
  --ink:      #12314A;   /* granat przygaszony — tekst i ciemne sekcje (baza) */
  --deep:     #012540;   /* granat — bloki, badge, przyciski */
  --deep-2:   #0A1C2B;   /* najciemniejszy granat — warstwa pod ink */
  --tint:     #8BAECD;   /* błękit z logo — akcent na jasnym */
  --panel:    #C7D9E6;   /* błękitny panel — jasne sekcje */
  --paper:    #F2F5F7;   /* chłodna biel — tło strony */
  --paper-lt: #FFFFFF;   /* czysta biel — sekcja mieszkań */
  /* Akcenty */
  --accent:      #979840; /* oliwka — akcent wiodący / liczby */
  --accent-dark: #7C7D34;
  --hi:      #8A8B3A; /* oliwka przyciemniona — eyebrow na jasnym tle */
  --hi-2:    #B4B54E; /* oliwka rozjaśniona — eyebrow na ciemnym tle */
  --btn:     #012540; /* granat — przyciski */
  --btn-h:   #0A3A5E;
  --btn-ink: #FFFFFF; /* tekst na przycisku */
  --marka:   #004f9f;  /* firmowy niebieski z logo osiedla */
  --grey:    #9AAAB8;
  --muted:   #5B6F80;
  --hair:    rgba(18,49,74,.15);

  --maxw: 1920px;
  --gutter: clamp(20px, 4vw, 40px);
  /* wcięcie treści hero do bloku max 1920px (min. 40px od krawędzi) */
  --edge: max(40px, calc((100vw - 1920px) / 2 + 40px));
  --ease: cubic-bezier(.22,.61,.36,1);
  /* Inter Tight - font tekstowy broszury (Host Grotesk jest tam tylko
     w stopce, przy adresie). Waga 400 jak w druku. */
  --font: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  /* Barlow Semi Condensed (Google Fonts) — nagłówki, bold */
  --display: "Barlow Semi Condensed", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 70px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-weight: 400; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased;
  transition: background-color .7s var(--ease);
}
body.no-scroll { overflow: hidden; }

/* Lenis (smooth scroll) — klasy dodaje sam skrypt */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Wersaliki jak w broszurze - tam wszystkie naglowki sa Bahnschriftem
   w kapitalikach. Ujemny tracking byl liczony pod male litery; przy
   kapitalikach litery musza dostac odrobine powietrza. */
/* Bold tylko w h1 i h2. Nizsze naglowki i wyroznienia liczbowe ida
   Barlowem 600 - bold poza wersalikami robi sie ciezki. */
h1, h2, h3, .display { font-family: var(--display); text-transform: uppercase; letter-spacing: .005em; line-height: 1.08; margin: 0; }
h1, h2, .display { font-weight: 700; }
h3 { font-weight: 600; }
/* token h2 — rozmiar jak lead w manifeście */
h2 { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.15; text-wrap: balance; }
p { margin: 0 0 1.1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
iframe { border: 0; }
::selection { background: var(--accent); color: var(--panel); }

/* treść ograniczona do 1920px; TŁA sekcji pełnej szerokości (bg nie capujemy) */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font-family: var(--font); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.eyebrow--hi { color: var(--hi); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 9px; background: var(--btn); color: var(--btn-ink);
  padding: 13px 26px; border-radius: 999px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; cursor: pointer; border: 1px solid var(--btn); transition: .25s var(--ease);
}
.btn:hover { background: var(--btn-h); border-color: var(--btn-h); transform: translateY(-1px); }
/* Domyślnie ghost stoi na jasnym tle - stąd ciemniejsza oliwka.
   Na ciemnych sekcjach nadpisujemy go w szablon.css. */
.btn--ghost { background: transparent; color: var(--hi); border-color: rgba(138,139,58,.5); }
.btn--ghost:hover { background: rgba(138,139,58,.1); color: var(--accent-dark); border-color: rgba(138,139,58,.8); }


/* ===== Header ===== */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; color: #fff; transition: transform .4s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s; }
.topbar.is-stuck { background: rgba(255,255,255,.97); backdrop-filter: blur(12px) saturate(140%); color: var(--ink); box-shadow: 0 10px 34px -20px rgba(18,49,74,.3); }
.topbar.is-hidden { transform: translateY(-100%); background: transparent; backdrop-filter: none; box-shadow: none; transition: transform .4s var(--ease); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--naglowek-h, 90px); max-width: 1920px; margin: 0 auto; padding: 14px clamp(20px, 4vw, 48px); }
.brand { display: flex; align-items: center; }
.brand__logo { height: 62px; width: auto; display: block; color: #fff; transition: color .35s; }
.topbar.is-stuck .brand__logo { color: var(--marka); }
.topnav { display: flex; align-items: center; gap: 22px; }
.topnav a { font-size: 15px; letter-spacing: .01em; color: currentColor; opacity: .82; transition: opacity .2s; }
.topnav a:hover { opacity: 1; }
.topnav .btn { position: relative; margin-left: 20px; background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.topnav .btn:hover { background: var(--btn-h); border-color: var(--btn-h); }
.topnav .btn::before { content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 1px; height: 24px; background: rgba(245,239,226,.5); }
.topbar.is-stuck .topnav .btn { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.topbar.is-stuck .topnav .btn:hover { background: var(--btn-h); border-color: var(--btn-h); }
.topbar.is-stuck .topnav .btn::before { background: rgba(18,49,74,.14); }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; z-index: 60; }
.burger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: .3s var(--ease); }
.topbar.is-stuck .burger span { background: var(--ink); box-shadow: none; }

/* ===== Hero (100vh, tekst maskowany za budynkiem) ===== */
/* hero pełną szerokością ekranu (wyłamane z cap 1920px strony) */
.hero { position: relative; height: 100vh; height: 100dvh; min-height: 640px; background: var(--ink); width: 100vw; margin-left: calc(50% - 50vw); }
/* razem z resztą: nakładka hero przekolorowuje się (czerń → krem), gdy odsłania się mapa */
body.map-lit .hero__stage::after { background-color: var(--paper); }
@keyframes heroWmRise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } }
body.map-lit .hero__caption { color: var(--ink); text-shadow: none; }

/* Quick search — pływająca biała karta, 40px od krawędzi */
.qsearch { position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; width: calc(100% - 80px); max-width: 1920px; z-index: 6; display: flex; align-items: stretch;
  background: #fff; border-radius: 999px; box-shadow: 0 26px 60px -22px rgba(18,49,74,.5); overflow: hidden; }
.qsearch__field { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 17px clamp(18px, 2vw, 30px); border-right: 1px solid var(--hair); min-width: 0; }
.qsearch__field:first-child { padding-left: clamp(34px, 3vw, 52px); }
.qsearch__field label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.qsearch__field select { appearance: none; -webkit-appearance: none; border: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; padding: 2px 24px 2px 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B6F80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center; }
.qsearch__field select:focus { outline: none; color: var(--accent); }
.qsearch__btn { flex: 0 0 auto; margin: 9px; border: 0; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 0 clamp(26px, 3vw, 46px); cursor: pointer; transition: background .2s; }
.qsearch__btn .qs-m { display: none; }
.qsearch__btn:hover { background: var(--btn-h); }

/* Custom select (ostylowany dropdown) */
.qsearch__field.cs { position: relative; }
.cs__btn { appearance: none; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; width: 100%; padding: 2px 26px 2px 0; position: relative; }
.cs__btn::after { content: ""; position: absolute; right: 0; top: 50%; width: 12px; height: 8px; transform: translateY(-50%); transition: transform .25s var(--ease);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B6F80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 8px; }
.cs.is-open .cs__btn::after { transform: translateY(-50%) rotate(180deg); }
.cs__list { position: fixed; z-index: 200; min-width: 190px; background: #fff; border: 1px solid var(--hair); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(18,49,74,.55); padding: 8px; margin: 0; list-style: none; max-height: 300px; overflow-y: auto; display: none; }
.cs__list.is-open { display: block; animation: csIn .16s var(--ease); }
@keyframes csIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cs__opt { padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background .12s; }
.cs__opt:hover { background: var(--panel); }
.cs__opt[aria-selected="true"] { background: var(--ink); color: var(--panel); }

/* ===== Section base ===== */
/* rytm sekcji: patrz --rytm w szablon.css (96 px desktop, 48 px telefon) */
section { padding: var(--rytm, 96px) 0; }
.sec-head .eyebrow { display: block; margin-bottom: 14px; }
.manifest__lead .w { display: inline-block; color: var(--mf-on); opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease) var(--d, 0ms), transform .5s var(--ease) var(--d, 0ms), color .5s var(--ease); }
.manifest__lead.is-on .w { opacity: 1; transform: none; }
.narrative .eyebrow { color: var(--hi); }

/* Mapa lokalizacji — full width, piny */
.locmap { position: relative; width: 100vw; margin-left: calc(50% - 50vw); background: var(--ink); padding: 0; }
.locmap__stage { position: relative; line-height: 0; }
.locmap__img { width: 100%; height: auto; display: block; }
.locmap__pins { position: absolute; inset: 0; z-index: 2; }
.locmap__scrim { position: absolute; inset: 0 0 auto 0; height: 55%; z-index: 1; background: linear-gradient(rgba(18,49,74,1), transparent); pointer-events: none; opacity: 1; transition: opacity .8s var(--ease); }
.locmap.is-revealed .locmap__scrim { opacity: 0; }
.locmap.is-revealed .locmap__wm svg { animation: wmRise 2s var(--ease) .6s both; }
@keyframes wmRise { from { opacity: 0; transform: translate(-50%, calc(var(--loc-sink, 42%) + 46px)); } to { opacity: 1; transform: translate(-50%, var(--loc-sink, 42%)); } }
@media (prefers-reduced-motion: reduce) { .locmap.is-revealed .locmap__wm svg { animation: none; opacity: 1; }}
.locmap.is-sandbox .locmap__stage { cursor: crosshair; }
.locmap__toggle { display: none; position: absolute; top: 16px; right: 16px; z-index: 4; background: rgba(18,49,74,.85); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; padding: 8px 16px; cursor: pointer; }
.locmap__toggle:hover { background: var(--ink); }
.locmap.is-sandbox .locmap__toggle { background: var(--btn); color: var(--ink); border-color: var(--btn); }
/* jeden biały pasek (flex): ikona w środku; rozwija się tylko część z tekstem */
.pin { position: absolute; z-index: 2; cursor: pointer; transform: translate(-20px, -50%); }
.pin:hover { z-index: 6; }
.pin__card { display: flex; align-items: center; height: 40px; background: #fff; border-radius: 999px; box-shadow: 0 8px 22px rgba(18,49,74,.28); overflow: hidden; }
.pin__ic { flex: 0 0 auto; box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%; background: var(--btn); border: 2px solid #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.pin__ic svg { width: 21px; height: 21px; display: block; }
.pin__txt { flex: 0 0 auto; min-width: 0; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; font-family: var(--font); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; color: var(--ink); padding: 0; transition: max-width 1.1s var(--ease), padding 1.1s var(--ease), opacity .8s var(--ease) .15s; }
.pin:hover .pin__txt { max-width: 460px; opacity: 1; padding: 0 16px 0 6px; }
/* markery kierunkowe przy krawędzi — kółko przy krawędzi, tekst rozwija się do wnętrza mapy */
.pin--edge { z-index: 3; }
.pin--edge.pin--left { left: 22px; transform: translateY(-50%); }
.pin--edge.pin--right { left: auto; right: 22px; transform: translateY(-50%); }
.pin--edge.pin--right .pin__card { flex-direction: row-reverse; }
.pin--edge.pin--right:hover .pin__txt { padding: 0 6px 0 16px; }
/* Osiedle Leśna — logo (wersja ciemna) w okręgu + pulsujący sonar */
.pin--logo { transform: translate(-50%, -50%); pointer-events: none; }
.pin--logo .pin__ic--logo { position: relative; width: 84px; height: 84px; padding: 0; border-radius: 50%; background: var(--paper); box-shadow: 0 10px 28px rgba(18,49,74,.35); display: flex; align-items: center; justify-content: center; }
.pin--logo .pin__ic--logo img { position: relative; z-index: 1; width: 62%; height: auto; filter: brightness(0); display: block; }
.pin--logo .pin__ic--logo::before, .pin--logo .pin__ic--logo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--btn); opacity: 0; animation: sonar 3s var(--ease) infinite; }
.pin--logo .pin__ic--logo::after { animation-delay: 1.5s; }
@keyframes sonar { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(4.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin--logo .pin__ic--logo::before, .pin--logo .pin__ic--logo::after { animation: none; }}
/* stagger: piny pojawiają się jeden po drugim przy wejściu sekcji w viewport */
.locmap .pin__card, .locmap .pin__ic--logo { opacity: 0; transform: scale(.3); transition: opacity .4s var(--ease) var(--pin-delay, 0ms), transform .5s cubic-bezier(.34, 1.56, .64, 1) var(--pin-delay, 0ms); }
.locmap.pins-in .pin__card, .locmap.pins-in .pin__ic--logo { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .locmap .pin__card, .locmap .pin__ic--logo { opacity: 1; transform: none; transition: none; }}
/* sandbox */
.locmap__sandbox { max-width: 1920px; margin: 0 auto; padding: 16px var(--gutter) 22px; color: var(--paper); display: grid; gap: 10px; }
.locmap__sbhead { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.locmap__sbhead strong { font-size: 14px; }
.locmap__sbhead span { font-size: 12px; color: var(--grey); }
#locOut { width: 100%; min-height: 120px; resize: vertical; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: #0f1516; color: #d7f0ec; }
.locmap__sbbtns { display: flex; gap: 10px; }
.locmap__sbbtns .btn { padding: 10px 18px; }
.locdist__title .w { transition: opacity .5s var(--ease) var(--d, 0ms), transform .5s var(--ease) var(--d, 0ms), color .7s var(--ease); }
.locdist__title .w { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) var(--d, 0ms), transform .5s var(--ease) var(--d, 0ms); }
.locdist__title.is-on .w { opacity: 1; transform: none; }
.locdist__list li.is-active, .locdist__list li:hover { background: rgba(1,37,64,.08); }
.locdist__list li.is-active span, .locdist__list li:hover span { color: var(--accent); }
.locdist__list.is-in li { opacity: 1; transform: none; }
.locdist__list.is-in li:nth-child(2) { transition-delay: .06s; }
.locdist__list.is-in li:nth-child(3) { transition-delay: .12s; }
.locdist__list.is-in li:nth-child(4) { transition-delay: .18s; }
.locdist__list.is-in li:nth-child(5) { transition-delay: .24s; }
.locdist__list.is-in li:nth-child(6) { transition-delay: .30s; }
.locdist__list.is-in li:nth-child(7) { transition-delay: .36s; }
.locdist__cards.is-in .locdist__card { opacity: 1; transform: none; }
.locdist__cards.is-in .locdist__card:nth-child(2) { transition-delay: .13s; }
.locdist__cards.is-in .locdist__card:nth-child(3) { transition-delay: .26s; }
.locdist__preview.is-on { opacity: 1; transform: translate(18px, 18px) scale(1); }

/* Etap IV w skrócie — zielona sekcja z liczbami */
.brief { background: var(--accent); color: var(--panel); position: relative; overflow: hidden; }
.premium > .container, .stats > .container { position: relative; z-index: 1; }
.premium__title .w { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) var(--d, 0ms), transform .5s var(--ease) var(--d, 0ms); }
.premium__title.is-on .w { opacity: 1; transform: none; }
.premium .slider__seg.is-active { background: var(--btn); }
.slider__seg.is-active { background: var(--accent); }
.cell .n { font-size: 30px; font-weight: 600; color: var(--accent); letter-spacing: -.01em; }
.cell .u { font-size: 12px; letter-spacing: .04em; color: var(--muted); margin-top: 3px; text-transform: lowercase; }
.cell .d { font-size: 14px; margin-top: 14px; color: var(--muted); }
.amencell .t { font-weight: 600; font-size: 18px; color: var(--ink); }
.amencell .x { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.stats .eyebrow { color: var(--hi); display: block; margin-bottom: 14px; }
.stat .n { font-family: var(--display); font-weight: 600; letter-spacing: 0; font-size: clamp(30px, 3.2vw, 52px); color: var(--btn); letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.premium__facts .stat .n { font-size: clamp(34px, 3.4vw, 50px); }
.premium__facts .stat .l { font-size: clamp(12px, 1vw, 14px); letter-spacing: .01em; color: #b9c4bb; line-height: 1.4; margin-top: 8px; max-width: 24ch; }
.premium__facts .stat .l b { color: var(--panel); font-weight: 700; }
.stat .l { font-family: var(--font); font-size: clamp(11px, 1vw, 13px); letter-spacing: .04em; color: var(--grey); margin-top: 9px; line-height: 1.35; }

/* Mieszkania — wyszukiwarka */
/* kremowy odcień strony, tylko maksymalnie rozjaśniony — nie czysta biel */
.finder-wrap { background: var(--paper-lt); }
.finder-head .eyebrow { display: block; margin-bottom: 12px; }
.finder { display: block; }
.finder__toggle { display: none; }
.finder__filters { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 16px 0; padding-block: 28px; margin-bottom: 0; border-bottom: 1px solid var(--hair); }
.finder__group { display: flex; flex-direction: column; gap: 10px; padding: 2px clamp(12px, 1.4vw, 22px); border-right: 1px solid var(--hair); flex: 0 0 auto; }
.finder__group:first-of-type { padding-left: 0; }
.finder__group:last-of-type { border-right: 0; }
.finder__group .pills { flex-wrap: nowrap; }
.finder__group:has(.range) { flex: 1 1 130px; min-width: 118px; }
@media (max-width: 1200px) { .finder__filters { flex-wrap: wrap; } .finder__group:has(.range) { flex: 1 1 220px; min-width: 200px; }}
.finder__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.finder__out { color: var(--accent); }
/* etykiety w przyciskach i przycisk zakresu są tylko na szerokim ekranie
   (reguły w bloku min-width: 981px) - na telefonie etykieta stoi nad
   polem, a suwak metrażu i ceny jest zawsze widoczny */
.ms__pre, .zakres .zakres__btn, .zakres__t { display: none; }
.zakres .zakres__pop { position: static; display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
/* budynek do wyboru dopiero, gdy w ofercie jest więcej niż jeden */
.finder__group:has(#buildingPills .pill-btn:only-child) { display: none; }
.finder__reset { display: block; width: fit-content; margin: 14px 0 26px auto; background: none; border: 0; padding: 4px 0; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; font-weight: 600; }
.finder__reset:hover { color: var(--accent); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--hair); background: #fff; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; transition: .2s var(--ease); }
.pill-btn svg { width: 14px; height: 14px; }
.pill-btn:hover { border-color: var(--deep); color: var(--deep); }
.pill-btn.is-active { background: var(--deep); border-color: var(--deep); color: #fff; }
/* multi-select dropdown (Cecha) */
.ms { position: relative; }
.ms__btn { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid var(--hair); background: #fff; border-radius: 999px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; transition: .2s var(--ease); }
.ms__btn:hover { border-color: var(--accent); }
/* wybór w filtrze granatowy jak aktywne pigułki - oliwka z jasnym
   tekstem miała za słaby kontrast */
.ms.has-sel .ms__btn { background: var(--deep); border-color: var(--deep); color: #fff; }
.ms__btn svg { width: 11px; height: 8px; transition: transform .2s var(--ease); }
.ms.is-open .ms__btn svg { transform: rotate(180deg); }
.ms__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 230px; background: #fff; border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 20px 46px -20px rgba(18,49,74,.5); padding: 8px; display: grid; gap: 2px; }
.ms__panel[hidden] { display: none; }
.ms__opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; font-size: 14px; cursor: pointer; }
.ms__opt:hover { background: rgba(1,37,64,.08); }
.ms__opt input { accent-color: var(--deep); width: 16px; height: 16px; flex: 0 0 auto; }
.ms__opt svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--deep); }
.range { position: relative; height: 30px; display: flex; align-items: center; }
.range::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 999px; background: var(--hair); z-index: 0; }
.range::after { content: ""; position: absolute; height: 4px; border-radius: 999px; background: var(--deep); left: var(--from, 0%); right: calc(100% - var(--to, 100%)); z-index: 1; pointer-events: none; }
.range input[type="range"] { position: absolute; left: 0; width: 100%; height: 30px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 2; }
.range input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.range input[type="range"]::-moz-range-track { height: 4px; background: transparent; }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--deep); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(18,49,74,.3); cursor: pointer; }
.range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--deep); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(18,49,74,.3); cursor: pointer; }

.finder__results { min-width: 0; }
.finder__count { font-family: var(--display); font-weight: 600; letter-spacing: 0; font-size: 19px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.finder__tablewrap { overflow-x: auto; }
/* Sticky nagłówek tabeli.
   Warunek: kontener nie może tworzyć własnego kontekstu przewijania — przy
   overflow-x:auto przeglądarka wymusza też overflow-y i sticky przykleiłby się
   do kontenera zamiast do ekranu. Dlatego włączamy go dopiero tam, gdzie
   tabela mieści się bez poziomego scrolla.
   Offset --sticky-top ustawia js/main.js: wysokość menu, gdy jest widoczne,
   0 gdy uciekło w górę. Transition dopasowuje się do animacji menu (.4s). */
@media (min-width: 1100px) {
  .finder__tablewrap { overflow: visible; }
  .finder__table thead th {
    position: sticky;
    top: var(--sticky-top, 0px);
    z-index: 6;
    transition: top .4s var(--ease);
  }}
.finder__table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* Obramowanie obejmuje wyłącznie treść tabeli. Ramka na całym <table>
   obiegała także ciemny nagłówek, rysując wokół niego jasną obwódkę.
   Nagłówek niesie własne wypełnienie i nie potrzebuje żadnych linii. */
.finder__table tbody td:not(:last-child) { border-right: 1px solid var(--hair); }
.finder__table tbody td:first-child { border-left: 1px solid var(--hair); }
.finder__table tbody td:last-child { border-right: 1px solid var(--hair); }
.finder__table tbody tr:last-child td { border-bottom: 1px solid var(--hair); }
.finder__table th, .finder__table td { padding: 14px; text-align: left; white-space: nowrap; }
.finder__table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--panel); background: var(--ink); cursor: pointer; user-select: none; font-weight: 600; }
.finder__table thead th:first-child { border-top-left-radius: 10px; }
.finder__table thead th:last-child { border-top-right-radius: 10px; }
.finder__table thead th:hover { background: var(--deep-2); }
.finder__table thead th[data-dir="asc"]::after { content: " ↑"; }
.finder__table thead th[data-dir="desc"]::after { content: " ↓"; }
/* zebra w bieli: parzyste ledwie odcieniowane, bez zielonego przebarwienia */
.finder__table tbody tr { background: #fff; border-top: 1px solid var(--hair); cursor: pointer; transition: background .2s; }
.finder__table tbody tr:nth-child(even) { background: #F7FAFB; }
.finder__table tbody tr:hover { background: rgba(1,37,64,.09); box-shadow: inset 3px 0 0 var(--accent); }
.finder__table tbody tr:focus { outline: none; background: rgba(151,152,64,.12); box-shadow: inset 3px 0 0 var(--hi); }
.row--sprzedane { color: var(--grey); }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; border: 1px solid var(--hair); padding: 4px 11px 4px 9px; border-radius: 999px; color: var(--deep-2); }
.tag svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--accent); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; font-weight: 600; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--dostepne { background: rgba(47,133,90,.13); color: #22683F; }
.badge--rezerwacja { background: rgba(183,134,15,.18); color: #8A6510; }
.badge--sprzedane { background: rgba(181,68,60,.12); color: #97352E; }
.finder__empty { text-align: center; color: var(--muted); padding: 30px 0 6px; }
.finder__hint { font-size: 12px; color: var(--muted); margin-top: 14px; }
.gal > .container { position: relative; z-index: 1; }
.gal-head .eyebrow { display: block; margin-bottom: 12px; color: var(--btn); }
.shot { position: relative; aspect-ratio: 4/3; border: 0; padding: 0; overflow: hidden; cursor: pointer; background: var(--paper); border-radius: 12px; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.shot:hover img { transform: scale(1.05); }
.shot span { position: absolute; left: 14px; bottom: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #fff; background: rgba(18,49,74,.6); padding: 5px 10px; border-radius: 2px; }
.shot:focus { outline: 2px solid var(--hi); outline-offset: 3px; }

/* CTA / Kontakt */
.cta { position: relative; overflow: hidden; background: var(--ink); color: var(--panel); text-align: center; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../assets/img/galeria.svg") no-repeat center / cover; opacity: .08; pointer-events: none; }
.cta > .container { position: relative; z-index: 1; }
.cta .eyebrow { color: var(--hi); display: block; margin-bottom: 14px; }
.cta h2 { margin: 0 0 18px; color: #fff; }
.cta__p { color: rgba(255,255,255,.8); max-width: 560px; margin: 0 auto 30px; font-size: 17px; }
.contactcard { margin: 36px auto 0; max-width: 560px; padding: 0; text-align: left; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 24px; }
.contactcard .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hi); margin-bottom: 5px; }
.contactcard .v { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); }
.contactcard .v a:hover { color: #fff; }
/* kontakt — 2 kolumny + formularz */
.cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; text-align: left; }
.cta__grid .cta__p { margin: 0 0 28px; max-width: none; }
.cta__grid .contactcard { margin: 28px 0 0; max-width: none; }
.cta__form { display: grid; gap: 16px; }
.cta__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cta__form .field { display: grid; gap: 6px; }
.cta__form .field label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--hi); }
.cta__form input:not([type=checkbox]), .cta__form textarea { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(233,212,195,.28); border-radius: 6px; padding: 12px 14px; color: #fff; font: inherit; font-size: 15px; transition: border-color .2s var(--ease); }
.cta__form input:focus, .cta__form textarea:focus { outline: none; border-color: var(--hi-2); }
.cta__form textarea { resize: vertical; min-height: 96px; }
.cta__form ::placeholder { color: rgba(255,255,255,.4); }
.cta__form .cta__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,.8); text-transform: none; letter-spacing: 0; cursor: pointer; }
.cta__form .cta__consent input { accent-color: var(--hi-2); width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.cta__form .cta__rodo { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.6); }
.cta__form .cta__rodo a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Formularz stoi na granacie, a --btn to też granat - przycisk znikał.
   Na ciemnym tle przyciski są w serwisie oliwkowe (jak w belce etapu). */
.cta__form .btn { justify-self: start; margin-top: 4px; border: 0; background: var(--hi-2); color: var(--deep); }
.cta__form .btn:hover { background: #c6c75e; }
.cta__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cta__form .btn:disabled { opacity: .6; cursor: wait; }
.cta__note { margin: 4px 0 0; font-size: 14px; color: var(--btn); min-height: 1em; }
@media (max-width: 820px) { .cta__grid { grid-template-columns: 1fr; } .cta__row { grid-template-columns: 1fr; }}

/* Okno „Zapytaj o ten lokal" (/mieszkania): ten sam formularz co w sekcji
   kontaktu, więc to samo granatowe tło, na którym jest zaprojektowany. */
.zapyt { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 10px; background: var(--ink); color: var(--panel); box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: auto; overscroll-behavior: contain; }
.zapyt::backdrop { background: rgba(1,37,64,.55); }
.zapyt__in { position: relative; padding: 28px 28px 24px; }
.zapyt .eyebrow { color: var(--hi); display: block; margin-bottom: 8px; }
.zapyt__h { margin: 0 44px 6px 0; color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); }
.zapyt__opis { margin: 0 0 20px; font-size: 14px; color: rgba(255,255,255,.75); }
.zapyt__x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .2s var(--ease); }
.zapyt__x:hover { background: rgba(255,255,255,.12); }
@media (max-width: 560px) { .zapyt__in { padding: 22px 18px 18px; } }

/* Footer */
/* Kreska u góry: belka etapu i formularz stoją na granacie tuż nad stopką
   i bez niej zlewały się w jedną plamę. Nad jasną sekcją jej nie widać. */
.foot { background: var(--deep); color: var(--grey); padding: 48px 0 34px; font-size: 13px; border-top: 1px solid rgba(255,255,255,.12); }
.foot__top { display: grid; gap: 40px; padding-bottom: 34px; border-bottom: 1px solid rgba(233,212,195,.18); }
.foot__logo { height: 46px; width: auto; display: block; color: #fff; }
.foot__arbet { height: 24px; width: auto; display: block; margin: 26px auto 0 0; opacity: .9; }
.foot__bottom { margin-top: 22px; font-size: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot__bottom .note { color: rgba(255,255,255,.55); text-align: right; }

/* ===== Lightbox ===== */
.lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 28px; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(15,13,11,.94); }
.lightbox img { position: relative; max-width: 92vw; max-height: 88vh; border-radius: 2px; }
.lightbox__close { position: absolute; top: 20px; right: 26px; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: .85; }
.lightbox__close:hover { opacity: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: 0; color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; }
.lightbox__nav:hover { background: rgba(255,255,255,.25); }
.lightbox__nav--prev { left: 24px; } .lightbox__nav--next { right: 24px; }

/* ===== Modal: karta lokalu ===== */
.modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 1.8vw, 28px); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15,13,11,.7); backdrop-filter: blur(3px); }
/* karta lokalu jest prawie pełnoekranowa — mieści komplet danych z voxCRM
   (powierzchnie, świadectwo energetyczne, historia cen) bez ciasnego scrolla */
.modal__dialog { position: relative; width: 100%; max-width: min(2100px, calc(100vw - 168px)); height: min(96vh, 1250px); max-height: 96vh; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }
.modal__close { position: absolute; top: 14px; right: 16px; z-index: 2; width: 40px; height: 40px; border: 1px solid var(--hair); border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.modal__close:hover { background: var(--ink); color: #fff; }
/* kolumna z danymi ma stałą, czytelną szerokość — resztę zabiera podgląd */
.modal__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 30%, 580px); height: 100%; }
.modal__media { background: #FFFFFF; padding: clamp(20px, 2.5vw, 32px); overflow-y: auto; display: flex; flex-direction: column; }
.modal__info { padding: clamp(24px, 3vw, 40px); overflow-y: auto; display: flex; flex-direction: column; border-left: 1px solid var(--hair); }
.modal__head { padding-right: 44px; }
.modal__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin: 0 0 6px; font-weight: 700; }
.modal__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.modal__price { font-family: var(--display); font-weight: 600; letter-spacing: 0; font-size: clamp(2.2rem, 3.6vw, 2.9rem); color: var(--accent); letter-spacing: -.01em; white-space: nowrap; margin: 14px 0 2px; }
.modal__feats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.modal__specs { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 12px 18px; padding: 0; margin: 24px 0; }
/* cztery parametry (z terminem odbioru) w siatce 2 × 2 zamiast 3 + 1 */
.modal__specs:has(li:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.modal__specs li { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--hair); padding-top: 11px; }
.modal__specs span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.modal__specs strong { font-weight: 600; font-size: 15px; }
.modal__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hair); margin-bottom: 16px; flex-wrap: wrap; }
.mtab { background: none; border: 0; padding: 10px 14px; font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.mtab:hover { color: var(--ink); }
.mtab.is-active { color: var(--ink); border-bottom-color: var(--btn); }
.mtab[hidden] { display: none; }
.modal__panels { flex: 1; min-height: 0; background: #fff; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mpanel { display: none; width: 100%; height: 100%; } .mpanel.is-active { display: flex; align-items: center; justify-content: center; }
.mpanel img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: transparent; border-radius: 10px; }
/* Widok 3D z voxCRM ma własne tło: chłodny szary gradient, u góry ~#DAE1E9,
   na dole ~#E8EDF2 (próbki z brzegów renderów S19). Panel dostaje to samo
   tło, a obrazek traci zaokrąglenie - render zlewa się z panelem zamiast
   siedzieć w białej ramce. Rzut, galeria i spacer zostają na bieli. */
.mpanel[data-panel="view3d"] { background: var(--tlo-renderu); }
.mpanel[data-panel="view3d"] img { border-radius: 0;
  /* brzegi renderu nie są jednolite (górna krawędź z lewej ciemniejsza niż
     z prawej), więc zamiast ostrego szwu wtapiamy je w tło panelu; rzut
     lokalu stoi na renderze z dużym marginesem, więc tracimy tylko tło */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent), linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent), linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect; }
.mpanel__video { position: relative; width: 100%; max-height: 100%; aspect-ratio: 16/9; }
.mpanel__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
/* przewijanie oferty: poza kartą, na przyciemnieniu — w środku karty
   strzałki albo zasłaniały dane, albo tłoczyły się przy przycisku zamknięcia */
.modal__side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hair); background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.16); transition: background .2s var(--ease), color .2s var(--ease), opacity .2s; }
.modal__side--prev { left: 26px; }
.modal__side--next { right: 26px; }
.modal__side svg { width: 20px; height: 20px; }
.modal__side:hover:not(:disabled) { background: var(--ink); color: #fff; }
.modal__side:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 1000px) {
  .modal__side { display: none; }
  .modal__dialog { max-width: 96vw; }}
.modal__foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 24px; }
.modal__foot .btn { width: 100%; justify-content: center; text-align: center; }

/* ===== Przełącznik widoku: tabela / kafelki ===== */
.viewtog { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; background: #fff; margin-left: auto; }
.viewtog__btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.viewtog__btn svg { width: 15px; height: 15px; }
.viewtog__btn:hover { color: var(--ink); }
.viewtog__btn.is-active { background: var(--ink); color: #fff; }

/* ===== Kafelki lokali ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 4px; }
.cards[hidden] { display: none; }
.card { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: #fff; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.card:hover, .card:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px -16px rgba(0,0,0,.32); outline: none; }   /* wyciszone, ale badge musi zostać czytelny */
/* Rzuty przychodza jako JPG z niemal bialym tlem (rgb 254,250,247), wiec
   przezroczystosci nie maja i miec nie moga. mix-blend-mode: multiply wtapia
   to tlo w biala karte - prostokat znika, a sam rysunek zostaje nietkniety. */
/* Widoki 3D z voxCRM mają własne szare tło, więc obrazek wypełnia kafelek
   do krawędzi - z odstępem (po Leśnej, gdzie rendery były na bieli)
   wokół szarego kadru zostawała biała ramka */
.card__img { position: relative; height: 220px; background: var(--tlo-renderu); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__noimg { color: var(--grey); font-size: 12px; }
/* nagłówek karty: numer lokalu + status obok siebie, poza obszarem rzutu */
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card__top .badge { flex: none; }
.card__body { display: flex; flex-direction: column; gap: 7px; padding: 15px 17px 17px; flex: 1; }
.card__title { font-family: var(--display); font-weight: 600; letter-spacing: 0; font-size: 20px; margin: 0; }
.card__sub { margin: 0; font-size: 12px; color: var(--muted); }
.card__specs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 2px 0 0; }
/* białe z obrysem — kremowe wypełnienie rywalizowało kolorem z badge rezerwacji */
.card__specs li { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--hair); font-size: 12px; }
.card__price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.card__price strong { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 600; letter-spacing: 0; font-size: 20px; color: var(--accent); }
.card__price span { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ===== Ceny pomieszczeń przynależnych (wymóg ustawowy) ===== */
.ancillary { margin-top: 26px; border: 1px solid var(--hair); border-radius: 12px; background: #fff; }
.ancillary[hidden] { display: none; }
.ancillary__sum { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.ancillary__sum::-webkit-details-marker { display: none; }
.ancillary__sum::after { content: '⌄'; margin-left: auto; font-size: 18px; line-height: 1; color: var(--muted); transition: transform .2s var(--ease); }
.ancillary[open] .ancillary__sum::after { transform: rotate(180deg); }
.ancillary__count { color: var(--muted); font-weight: 400; font-size: 12.5px; }
/* wewnętrzny scroll — pozycji bywa kilkaset, nie chcemy rozpychać strony */
.ancillary__wrap { max-height: 60vh; overflow: auto; border-top: 1px solid var(--hair); }
.ancillary__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ancillary__table th { position: sticky; top: 0; z-index: 1; background: var(--panel); text-align: left; padding: 10px 20px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ancillary__table td { padding: 10px 20px; border-top: 1px solid var(--hair); }
.ancillary__note { margin: 0; padding: 14px 20px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--hair); }

/* ===== Informacje wymagane ustawą ===== */
.legal { background: var(--panel); }
.legal__h { font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 10px; }
.legal__lead { max-width: 900px; color: var(--muted); font-size: 14px; margin: 0 0 30px; }
/* Sześć pozycji w auto-fit układało się w pięć kolumn i jedną sierotę
   pod pierwszą. Trzy równe kolumny dają dwa pełne wiersze. */
.legal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; }
@media (max-width: 900px) { .legal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 560px) { .legal__grid { grid-template-columns: 1fr; }}
.legal__item h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; margin: 0 0 7px; }
.legal__item p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.legal__item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal__mut { color: var(--muted); font-size: 13px; }
.legal__todo { color: var(--muted); font-style: italic; }
.legal__note { margin: 34px 0 0; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--muted); max-width: 1000px; }

/* ===== Podgląd rzutu przy najechaniu na wiersz (tylko mysz) ===== */
.rowpeek { position: fixed; z-index: 120; width: 300px; pointer-events: none; background: #fff; border: 1px solid var(--hair); border-radius: 12px; box-shadow: 0 18px 44px -14px rgba(0,0,0,.4); padding: 0; overflow: hidden; opacity: 0; transform: translateY(6px); transition: opacity .16s var(--ease), transform .16s var(--ease); }
.rowpeek.is-on { opacity: 1; transform: none; }
.rowpeek[hidden] { display: none; }
/* widok 3D do krawędzi, jak w kafelku - rendery mają własne szare tło */
.rowpeek__img, .rowpeek__none { width: 100%; height: 200px; border-radius: 0; background: var(--tlo-renderu); display: block; }
.rowpeek__img { object-fit: cover; }
.rowpeek__none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
.rowpeek__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 12px 10px; font-size: 12px; }
.rowpeek__nr { font-weight: 600; }
.rowpeek__sub { color: var(--muted); }
.rowpeek__price { color: var(--accent); font-weight: 600; white-space: nowrap; }
/* karta bez obrazka (piętro na zdjęciu budynku) */
.rowpeek--tekst { width: auto; min-width: 230px; max-width: 300px; padding: 10px 12px; }
.rowpeek--tekst .rowpeek__meta { padding: 0; }
/* nazwa piętra w karcie większa, krojem nagłówków - to ona odpowiada
   na pytanie „co wskazuję" */
.rowpeek--tekst .rowpeek__nr { display: inline-block; margin-bottom: 2px; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.1; text-transform: uppercase; color: var(--deep); }
.rowpeek--tekst .rowpeek__price { font-size: 13px; }
/* karta piętra pojawia się od razu, bez wjazdu */
.rowpeek--tekst, .rowpeek--tekst.is-on { transition: none; transform: none; }
/* rozbicie piętra według liczby pokoi */
.rowpeek__typy { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.rowpeek__typy th, .rowpeek__typy td { padding: 4px 0; border-top: 1px solid var(--hair); text-align: right; white-space: nowrap; }
.rowpeek__typy th { text-align: left; font-weight: 600; color: var(--deep); padding-right: 12px; }
.rowpeek__typy td { color: var(--muted); padding-left: 10px; }
.rowpeek__typy .rowpeek__w { color: var(--st-dostepne); font-weight: 600; }
@media (hover: none), (pointer: coarse) { .rowpeek { display: none !important; }}

/* ===== Paginacja wyników ===== */
.finder__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 22px 0 4px; }
.finder__pager button { min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.finder__pager button:hover:not(:disabled):not(.is-active) { background: var(--panel); }
.finder__pager button:disabled { opacity: .35; cursor: default; }
.finder__pager .pager__num.is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.finder__pager .pager__gap { padding: 0 2px; color: var(--muted); }

/* ===== Karta lokalu — dane z voxCRM ===== */
/* wiersz pod ceną: cena za m², cena katalogowa, netto */
/* cena za m² większa i ciemna (klient, 25.09.2026), cena netto zniknęła */
.modal__pricemeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--deep); }
.modal__pricemeta .was { text-decoration: line-through; }
.modal__pricemeta .net { font-size: 12px; }
.promo-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 20px; background: var(--btn); color: var(--ink); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; }

/* galeria zdjęć lokalu w panelu mediów */
.mpanel__gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; width: 100%; max-height: 100%; overflow-y: auto; align-content: start; }
.mpanel__gal img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; }

/* bloki danych: powierzchnie, lokal, energia, pomieszczenia */
/* flex:none — .modal__info jest kolumną flex, bez tego bloki rozciągają się
   i robi się pusta przerwa przed historią cen */
.modal__extra, .modal__history { flex: 0 0 auto; }
.mblock { margin-top: 22px; }
.mblock h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; margin: 0 0 9px; padding-bottom: 7px; border-bottom: 1px solid var(--hair); }
.mblock dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 18px; margin: 0; }
.mblock dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.mblock dt { color: var(--muted); }
.mblock dd { margin: 0; font-weight: 600; text-align: right; }
.mblock p { font-size: 13px; line-height: 1.6; margin: 0; }
.mlist { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.mlist li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--hair); }

/* historia zmian ceny (wymóg ustawy o jawności cen) */
.mhist { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
/* bloki zwijane (historia cen): nagłówek jak h4 bloku, z liczbą i strzałką */
.mzwin summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; padding-bottom: 7px; border-bottom: 1px solid var(--hair); }
.mzwin summary::-webkit-details-marker { display: none; }
.mzwin summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease); }
.mzwin[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.mzwin summary:hover { color: var(--deep); }
.mzwin__ile { min-width: 18px; height: 18px; border-radius: 9px; background: rgba(1,37,64,.08); color: var(--deep); display: inline-grid; place-items: center; font-size: 10px; letter-spacing: 0; padding: 0 5px; }
.mzwin[open] .mhist { margin-top: 2px; }
/* status w karcie lokalu: pełny kolor, żeby był widać od razu */
.modal__specs strong.mstatus { display: inline-block; align-self: flex-start; padding: 4px 12px; border-radius: 999px; color: #fff; font-size: 13px; }
/* przynależności z CRM: komórka lokatorska z numerem i powierzchnią */
.mprzyn { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.mprzyn li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.mprzyn span { color: var(--muted); }
.mprzyn b { font-weight: 600; white-space: nowrap; }
.mprzyn b small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); text-align: right; }
.mstatus--dostepne { background: var(--st-dostepne); }
.mstatus--rezerwacja { background: var(--st-rezerwacja); }
.mstatus--sprzedane { background: var(--st-sprzedane); }
.mhist li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--hair); }
.mhist__d { color: var(--muted); font-variant-numeric: tabular-nums; }
.mhist__t { color: var(--muted); }
.mhist__p { text-align: right; white-space: nowrap; }
.mhist__p s { color: var(--grey); }
.mhist__p b { color: var(--accent); font-weight: 600; }
.mloading { color: var(--muted); font-size: 12.5px; }

/* kolumna ceny za m² w tabeli */
.price-cell--m2 { color: var(--muted); white-space: nowrap; }

@media (max-width: 640px) {
  .mblock dl { grid-template-columns: 1fr; }
  .mhist li { grid-template-columns: 1fr auto; }
  .mhist__t { grid-column: 1 / -1; order: 3; }}

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 980px) {
  /* Filtry jako plywajacy pasek u dolu, a nie pigulka nad lista. Lista
     mieszkan na telefonie jest dluga: przy przycisku na gorze trzeba bylo
     wracac na sam poczatek, zeby zmienic filtr. Przy okazji pasek caly czas
     pokazuje, ile lokali zostalo - to jest argument sam w sobie. */
  .finder__toggle {
    position: fixed; left: var(--gutter); right: var(--gutter); bottom: 16px; z-index: 45;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 12px 12px 22px; border: 0; border-radius: 999px;
    background: var(--deep); color: #fff; font: inherit; text-align: left; cursor: pointer;
    box-shadow: 0 18px 40px -18px rgba(1,37,64,.85);
  }
  .finder__toggle-l { display: grid; gap: 3px; min-width: 0; }
  .ft__ile { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ft__opis { font-size: 12px; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ft__pill {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    background: var(--hi-2); color: var(--deep); border-radius: 999px; padding: 11px 18px;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  }
  .finder__toggle.is-open .ft__pill { background: #fff; }
  .finder__toggle-ic { width: 16px; height: 16px; }
  /* miejsce na pasek, zeby nie zaslanial konca listy */
  .finder-wrap { padding-bottom: 96px; }
  .finder__toggle { transition: transform .3s var(--ease), opacity .3s var(--ease); }
  .finder__toggle.is-schowany { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .finder__filters { display: none; grid-template-columns: repeat(6, 1fr); gap: 22px 16px; margin-top: 0; padding-bottom: 24px; }
  .finder__filters.is-open { display: grid; }
  .finder__group { grid-column: span 2; border-right: 0; padding: 0; min-width: 0; }
  .finder__group:has(.range) { grid-column: span 3; min-width: 0; }
  .finder__group:has(#statusMs), .finder__group:has(#featureMs) { grid-column: span 3; }
  #roomPills .pw { display: none; }
  .finder__reset { display: none; margin: 4px 0 24px auto; }
  .finder__reset.is-open { display: block; }}
@media (max-width: 480px) {
  .finder__filters { grid-template-columns: 1fr 1fr; }
  .finder__group { grid-column: span 1; }
  .finder__group:has(.range), .finder__group:has(#statusMs), .finder__group:has(#featureMs) { grid-column: span 2; }}
@media (max-width: 860px) {
  /* Menu zsuwa sie spod naglowka zamiast zakrywac caly ekran: strona zostaje
     widoczna, wiec widac, gdzie sie jest, a lista czyta sie od lewej jak
     kazda inna lista, nie jak plansza tytulowa. */
  .topnav {
    /* Pozycja liczona wzgledem samego paska, nie ekranu. Przy `fixed`
       panel raz laczyl sie z paskiem, a raz zostawial szpare: `.topbar`
       po przyklejeniu dostaje `backdrop-filter`, a ten robi z paska blok
       zawierajacy dla potomkow `fixed`. `absolute` + `top: 100%` trzyma
       sie dolnej krawedzi paska niezaleznie od tego. */
    position: absolute; left: 0; right: 0; top: 100%;
    display: block; height: auto; gap: 0;
    background: #fff; color: var(--ink);
    box-shadow: 0 24px 50px -30px rgba(1,37,64,.7);
    max-height: calc(100dvh - var(--pasek-h) - var(--naglowek-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform .3s var(--ease), opacity .3s var(--ease), visibility .3s;
  }
  .topnav.is-open { transform: none; opacity: 1; visibility: visible; }
  .topnav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px var(--gutter); border-bottom: 1px solid var(--hair);
    font-size: 16px; opacity: 1; color: var(--ink);
  }
  .topnav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .topnav a::after { content: "›"; color: var(--muted); font-size: 18px; }
  .topnav .btn {
    margin: 16px var(--gutter) 20px; justify-content: center;
    background: var(--deep); color: #fff; border-color: var(--deep);
  }
  .topnav .btn::before, .topnav .btn::after { display: none; }
  .burger { display: flex; }
  /* Pasek jest przezroczysty dopoki strona nie ruszy, wiec przy otwartym
     menu logo i hamburger zostawaly na zdjeciu nad bialym panelem.
     Na czas otwarcia pasek dostaje to samo tlo co po przyklejeniu. */
  .topbar:has(.topnav.is-open) {
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px) saturate(140%);
    color: var(--ink); box-shadow: 0 10px 34px -20px rgba(18,49,74,.3);
  }
  .topbar:has(.topnav.is-open) .brand__logo { color: var(--marka); }
  /* Logo w pelnej wysokosci rozpychalo pasek do 90 px i zostawialo szpare
     miedzy paskiem a rozwinietym menu. 44 px to nadal ~2,9x gestosc pliku. */
  .brand__logo { height: 44px; }
  /* Wiersze tabeli: 14 px z gory i z dolu dawalo na telefonie 60 px wysokosci,
     czyli piec lokali na ekran. */
  .finder__table { font-size: 13px; }
  .finder__table th, .finder__table td { padding: 9px 12px; }
  .finder__count { font-size: 17px; }
  .contactcard { grid-template-columns: 1fr; }
  .foot__arbet { margin-left: 0; }
  .foot__bottom { flex-direction: column; }
  .foot__bottom .note { text-align: left; }}
@media (max-width: 380px) {
  .modal__specs { grid-template-columns: repeat(2,1fr); }}
@media (max-width: 720px) {
  .pin__card { height: 32px; }
  .pin__ic { width: 32px; height: 32px; }
  .pin__ic svg { width: 17px; height: 17px; }
  .pin__txt { font-size: 12px; }
  .pin--logo .pin__ic--logo { width: 56px; height: 56px; }
  .modal__dialog { height: auto; max-height: 92vh; overflow-y: auto; }
  .modal__grid { grid-template-columns: 1fr; height: auto; }
  .modal__info { border-left: 0; border-top: 1px solid var(--hair); overflow: visible; }
  .modal__media { overflow: visible; }
  .modal__panels { min-height: 260px; }
  /* mobile: zamiast filtrów sama pigułka z przyciskiem */
  .qsearch { left: 16px; right: 16px; transform: none; width: auto; max-width: none; bottom: 18px; background: transparent; box-shadow: none; border-radius: 999px; }
  .qsearch__field { display: none; }
  .qsearch__btn { flex: 1 1 100%; margin: 0; padding: 17px; border-radius: 999px; font-size: 14px; }
  .qsearch__btn .qs-d { display: none; }
  .qsearch__btn .qs-m { display: inline; }}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto; }}


/* ════════════════════════════════════════════════════════════
   WARSTWA STEROWCÓW
   ------------------------------------------------------------
   Do tego miejsca idzie rdzeń przejęty z Osiedla Leśna: reset,
   tokeny, nagłówek, hero, wyszukiwarka mieszkań, modal, stopka.
   Niżej wszystko, czego Leśna nie miała, bo była jedną stroną:
   pasek etapu, nagłówki podstron, rytm sekcji, wzorce treści
   (dwie kolumny, kafle liczb, pasma, oś czasu, galeria, ikony).

   Kolejność nie jest przypadkowa i nie wolno jej mieszać:
   przy równej specyficzności wygrywa reguła późniejsza, a ta
   warstwa celowo nadpisuje rdzeń. Do 2026-09-22 były to dwa
   osobne pliki (style.css i szablon.css) wpinane w tej samej
   kolejności - scalenie niczego w wyglądzie nie zmieniło.
   ════════════════════════════════════════════════════════════ */

/* ── Pasek etapu bieżącego ─────────────────────────────────────
   Wariant F: belka na całą szerokość nad menu, na oliwce. Granatowy pasek
   zlewał się z granatowym menu na podstronach i wyglądał jak część chromu
   przeglądarki; oliwka robi z niego komunikat, który widać od razu.

   To jedyne miejsce w serwisie, gdzie oliwka jest tłem dużej płaszczyzny,
   a nie akcentem - świadome odstępstwo od reguły z briefu, w zamian za to,
   że jedyna informacja o aktualnym etapie nie ginie. */
:root { --pasek-h: 38px; --naglowek-h: 90px; --rytm: 96px;
  /* tło widoków 3D z voxCRM - panel karty, kafelek i podgląd pod nie się dopasowują */
  --tlo-renderu: linear-gradient(180deg, #DAE1E9, #E8EDF2);
  /* kolory statusów lokali - jeden zestaw dla rzutu, legend, tabeli,
     kafelków i karty lokalu (klient, 25.09.2026: statusy mają być widać) */
  --st-dostepne: #2F855A; --st-rezerwacja: #B7860F; --st-sprzedane: #B5443C; }

.pasek {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--pasek-h);
  /* treść od lewej krawędzi, w jednym pionie z logo; CTA dociśnięte
     do prawej, tak jak przycisk w menu nad nim */
  display: flex; align-items: center; gap: 8px 22px;
  padding: 0 var(--gutter);
  background: var(--hi-2); color: var(--deep);
  font-size: 13px; line-height: 1;
  text-decoration: none; white-space: nowrap; overflow: hidden;
  transition: background .25s var(--ease), transform .4s var(--ease);
}
/* Przy przewijaniu w dół pasek ucieka razem z menu (klient, 23.09.2026).
   Menu stoi pod paskiem, więc musi przejechać o swoją wysokość i o pasek -
   samo -100% zostawiało je schowane tylko pod paskiem. */
.naglowek-schowany .pasek { transform: translateY(-100%); }
.naglowek-schowany .topbar.is-hidden { transform: translateY(calc(-100% - var(--pasek-h))); }
.pasek:hover { background: #C3C45C; }
.pasek__co { font-weight: 600; }
/* Na telefonie pasek nie miesci pelnego zdania, a przyciecie wielokropkiem
   gubilo wlasnie to, co pasek ma powiedziec - numer budynku. Stad dwa
   warianty tekstu zamiast jednego przycietego. */
.pasek__krotki { display: none; }
/* Fakty leza na sobie w jednej komorce gridu: pasek ma szerokosc
   najdluzszego, wiec przy zmianie nic nie skacze. */
.pasek__det { display: inline-grid; color: rgba(1,37,64,.68); }
.pasek__fakt {
  grid-area: 1 / 1; opacity: 0; transform: translateY(5px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.pasek__fakt.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pasek__fakt { transition: none; }}
.pasek__cta {
  margin-left: auto;
  color: var(--deep); font-weight: 700;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.pasek__cta::after { content: " →"; }
/* nagłówek schodzi pod pasek */
.topbar { top: var(--pasek-h); }
html { scroll-padding-top: calc(var(--naglowek-h) + var(--pasek-h)); }

@media (max-width: 860px) {
  :root { --pasek-h: 34px; --naglowek-h: 72px; --rytm: 48px; }
  .pasek { font-size: 12px; gap: 12px; justify-content: space-between; }
  .pasek__det { display: none; }
  .pasek__dlugi { display: none; }
  .pasek__krotki { display: inline; }
  .pasek__cta { font-size: 11px; }}
@media (max-width: 460px) {
  .pasek { padding: 0 14px; gap: 10px; }
  .pasek__co { overflow: hidden; text-overflow: ellipsis; }}

/* ── Nagłówek na podstronach bez hero ──────────────────────────
   .topbar jest przezroczysty z jasnym tekstem, bo na Leśnej zawsze
   leżał na ciemnym zdjęciu. Podstrona zaczyna się od jasnego tła,
   więc nagłówek od razu wygląda jak ten „przyklejony". */
body:not(:has(.hero)) .topbar {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px) saturate(140%);
  color: var(--ink);
  box-shadow: 0 10px 34px -20px rgba(18, 49, 74, .3);
}
/* Na podstronach nagłówek jest jasny od pierwszego piksela, więc logo
   od razu idzie w firmowy niebieski. Na stronie głównej leży na ciemnym
   zdjęciu i zostaje białe aż do przyklejenia paska. */
body:not(:has(.hero)) .brand__logo { color: var(--marka); }
/* to samo dotyczy hamburgera: bialy na bialym pasku byl niewidoczny */
body:not(:has(.hero)) .burger span { background: var(--ink); box-shadow: none; }
/* po otwarciu menu pasek jest bialy takze na stronie glownej */
.topnav.is-open ~ .burger span, .burger[aria-expanded="true"] span { background: var(--ink); box-shadow: none; }

/* pierwsza sekcja musi zejść spod paska etapu i nagłówka */
body:not(:has(.hero)) > .section:first-of-type,
body:not(:has(.hero)) main > .section:first-of-type { padding-top: calc(var(--pasek-h) + var(--naglowek-h) + clamp(34px, 4vw, 64px)); }

.topnav a[aria-current="page"] { color: var(--accent); }

/* ── Sekcja treści ─────────────────────────────────────────── */
/* Jeden rytm dla całego serwisu: --rytm góra i dół, bez skalowania.
   96 px na desktopie, połowa tego na telefonie - ta sama pustka, która
   na dużym ekranie robi oddech, na telefonie zjada pół widoku.
   Gdy dwie sekcje o tym samym tle się stykają, granicę rysuje kreska
   przez całą szerokość ekranu - inaczej zlewają się w jedną plamę,
   a ich paddingi sumują się do dwóch rytmów pustki. */
.section { padding: var(--rytm) 0; }
.section:not(.pasmo--panel) + .section:not(.pasmo--panel) { border-top: 1px solid var(--hair); }
.section.pasmo--panel + .section.pasmo--panel { border-top: 1px solid rgba(1,37,64,.2); }
/* Ręczny wariant dla sąsiedztwa, którego selektor rodzeństwa nie widzi
   (np. sekcja opakowana w dodatkowy kontener jak #gallery). */
.section--kreska { border-top: 1px solid var(--hair); }
.pasmo--panel.section--kreska { border-top-color: rgba(1,37,64,.2); }
.section > .container > h1 { margin-bottom: .4em; }
.section > .container > h2 { margin: 1.6em 0 .5em; }
/* pierwszy nagłówek w sekcji nie dokłada marginesu do paddingu sekcji */
.section > .container > h2:first-child { margin-top: 0; }

.lead {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  max-width: 62ch;
  color: var(--muted);
}

.note { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 80ch; }

/* ── Nawigacja w stopce ────────────────────────────────────── */
/* Stopka na cztery kolumny: marka, mapa serwisu, informacje, biuro.
   Wcześniej były dwa bloki dociśnięte do krawędzi i pas pustki między nimi,
   a całe menu nie miało w stopce swojego miejsca. */
.foot__top { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; align-items: start; }
@media (max-width: 1000px) { .foot__top { grid-template-columns: 1fr 1fr; gap: 34px; }}
/* Na telefonie marka i biuro idą przez całą szerokość, a dwie krótkie
   listy linków stają obok siebie - jedna pod drugą dawały 600 px listy. */
@media (max-width: 600px) {
  .foot__top { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .foot__marka, .foot__kol--kontakt { grid-column: 1 / -1; }
  nav.foot__kol { gap: 0; }
  nav.foot__kol .foot__kol-h { margin-bottom: 6px; }
  /* cel dotyku: 22 px tekstu to za mało pod kciuk. Tylko listy linków -
     w bloku biura linki stoją w wierszach z tekstem i rozjechałyby rytm. */
  nav.foot__kol a { padding: 7px 0; }}
.foot__opis { margin: 20px 0 0; max-width: 32ch; line-height: 1.65; color: var(--grey); }
.foot__kol { display: grid; gap: 10px; align-content: start; }
.foot__kol-h {
  margin: 0 0 4px; font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; font-size: 15px; color: #fff;
}
.foot__kol a { font-size: 14px; opacity: .82; }
.foot__kol a:hover { opacity: 1; color: var(--hi-2); }

/* ── Hero ze zdjęciem (bez maskowania napisu) ──────────────────
   Brief: „nie kopiujemy premium, mniej pustki, więcej zdjęć i danych”.
   Zamiast sceny 100vh z napisem chowanym za budynkiem — jeden kadr
   z parterem usługowym, treść wprost na nim i wyszukiwarka u dołu.
   Nadpisujemy .hero z style.css, które jest jeszcze z Leśnej. */
.hero--photo {
  /* pierwszy ekran = dokładnie jeden widok; dvh, żeby pasek adresu
     na telefonie nie ucinał wyszukiwarki */
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  background: var(--deep);
  /* wariant E: na kadrze zostaje sam nagłówek i przyciski, wysoko,
     żeby bryła budynku i parter zostały odsłonięte */
  display: flex;
  align-items: flex-start;
}
.hero--photo .hero__media { position: absolute; inset: 0; z-index: 0; }
.hero--photo .hero__media picture { display: block; height: 100%; }
.hero--photo .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }

/* Trzy warstwy: pod nagłówek i menu (góra), pod wyszukiwarkę (dół) i pod
   blok treści (lewa). Bez tej trzeciej lead ginie na rozjaśnionym niebie. */
/* Nakładka tylko tam, gdzie musi być: pod paskiem i menu u góry oraz pod
   wyszukiwarką u dołu. Kadr zostaje odsłonięty, nagłówek trzyma się na
   własnym cieniu. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1,37,64,.52) 0%, rgba(1,37,64,.14) 32%, rgba(1,37,64,0) 54%),
    linear-gradient(0deg, rgba(1,37,64,.46) 0%, rgba(1,37,64,0) 24%);
}

/* górne wcięcie: pod paskiem etapu i menu */
.hero__body { position: relative; width: 100%; z-index: 2; padding-top: calc(var(--pasek-h) + clamp(150px, 22vh, 260px)); }
.hero--photo .hero__eyebrow {
  position: static; margin: 0 0 14px; text-align: left;
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--hi-2); font-weight: 700;
}
.hero__title {
  margin: 0; color: #fff; max-width: 17ch; text-wrap: balance;
  font-size: clamp(34px, 5vw, 76px); line-height: 1.04;
  /* bez plachty pod spodem cień musi unieść nagłówek sam */
  text-shadow: 0 2px 26px rgba(1,37,64,.72), 0 1px 3px rgba(1,37,64,.5);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.7em 0 0; }
.hero__cta .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.7);
  background: rgba(1,37,64,.28); backdrop-filter: blur(3px);
}
.hero__cta .btn--ghost:hover { background: rgba(1,37,64,.5); color: #fff; }

/* Na telefonie hero dzieli się na dwa wiersze: kadr z treścią na nim
   i wyszukiwarka pod spodem. Zdjęcie kończy się tuż za przyciskami, a nie
   dopiero na dole ekranu, więc kadr nie musi walczyć o miejsce z kartą
   wyszukiwarki. Wysokość pasa zdjęcia wyznacza padding `.hero__body`.

   Wszystko siedzi w jednej komórce gridu (`grid-area: 1 / 1`), bo tylko tak
   treść leży NA zdjęciu bez pozycjonowania absolutnego, które zabrałoby
   wysokość wierszowi. Wyszukiwarka idzie do wiersza drugiego. */
@media (max-width: 860px) {
  .hero--photo {
    height: auto; min-height: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto;
    align-items: stretch;
    background: var(--deep);
  }
  .hero--photo .hero__media,
  .hero--photo .hero__scrim,
  .hero--photo .hero__body { grid-area: 1 / 1; }

  .hero--photo .hero__media { position: relative; overflow: hidden; }
  .hero--photo .hero__media picture { position: absolute; inset: 0; display: block; height: 100%; }
  /* Na telefonie leci osobny, pionowy kadr (patrz HeroObraz.astro). */
  .hero--photo .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

  /* Gradient tylko tam, gdzie leży tekst: pod paskiem i menu u góry oraz
     pod nagłówkiem i przyciskami u dołu kadru. */
  .hero--photo .hero__scrim {
    display: block; position: relative; z-index: 1;
    background:
      linear-gradient(180deg, rgba(1,37,64,.6) 0%, rgba(1,37,64,0) 26%),
      linear-gradient(0deg, rgba(1,37,64,.92) 0%, rgba(1,37,64,.7) 26%, rgba(1,37,64,0) 58%);
  }

  .hero__body {
    position: relative; z-index: 2; width: 100%; align-self: end;
    /* górny padding robi miejsce na pasek, menu i sam kadr */
    padding: calc(var(--pasek-h) + var(--naglowek-h) + 30vh) 0 26px;
  }
  /* style.css chowa .hero__eyebrow poniżej 720px — tu jest częścią nagłówka */
  .hero--photo .hero__eyebrow { display: block; }
  .hero__title { max-width: none; font-size: clamp(34px, 10.4vw, 50px); }
  .hero__cta { gap: 10px; margin-top: 1.4em; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
  /* --btn to granat, czyli kolor gradientu pod spodem — przycisk dostaje oliwkę */
  .hero__cta .btn:not(.btn--ghost) { background: var(--hi-2); border-color: var(--hi-2); color: var(--deep); }
  .hero__cta .btn--ghost { background: rgba(1,37,64,.35); backdrop-filter: blur(3px); }

  /* Wyszukiwarka na samym dole, już poza kadrem. style.css zwija ją do
     jednej pigułki — tutaj pokazujemy pola. */
  .hero--photo .qsearch {
    grid-area: 2 / 1; position: static; transform: none; width: auto; max-width: none;
    margin: 0 var(--gutter) 26px;
    display: grid; grid-template-columns: 1fr 1fr;
    background: #fff; border-radius: 18px; box-shadow: 0 18px 48px -26px rgba(1,37,64,.55);
  }
  .hero--photo .qsearch__field {
    display: flex; padding: 13px 16px;
    border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  }
  .hero--photo .qsearch__field:nth-child(2n) { border-right: 0; }
  .hero--photo .qsearch__btn { grid-column: 1 / -1; margin: 12px; padding: 16px; }}

/* ── Belka etapu bieżącego ─────────────────────────────────────
   Element szablonu: przy kolejnym etapie zmienia się treść, nie layout. */
/* style.css daje globalnie `section { padding: 88px 0 }` — belka ma własne
   wcięcie na gridzie, więc to globalne trzeba tu skasować */
.etapbar { background: var(--deep); color: #fff; padding-block: 0; }
.etapbar__grid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 48px;
  /* tylko pion — poziome wcięcie należy do .container, skrót `padding` by je skasował */
  padding-block: clamp(26px, 3vw, 42px);
}
.etapbar__title { margin: 0 0 .4em; font-size: clamp(22px, 2.4vw, 34px); color: #fff; }
.etapbar__lead { margin: 0; max-width: 62ch; color: rgba(255,255,255,.82); }
.etapbar__cta { margin: 0; }
/* --btn to granat, czyli kolor tła tej belki — przycisk dostaje oliwkę */
.etapbar .btn { background: var(--hi-2); border-color: var(--hi-2); color: var(--deep); }
.etapbar .btn:hover { background: #c6c75e; border-color: #c6c75e; }

/* ── Listy na stronach rusztowania ─────────────────────────── */
/* Reguła dotyczy list prozatorskich, czyli tych BEZ klasy. Wcześniej była
   listą wyjątków i każdy nowy komponent trzeba było do niej dopisywać -
   zapomniany `.projekty` dostawał max-width 80ch i wcięcie, przez co
   logotypy siedziały na połowie szerokości. */
.section ul:not([class]) { max-width: 80ch; padding-left: 1.2em; }
.section ul:not([class]) li { margin-bottom: .45em; }

/* ════════════════════════════════════════════════════════════
   Typografia i bloki treści podstron
   ════════════════════════════════════════════════════════════ */



.tyt { max-width: 20ch; text-wrap: balance; margin-bottom: .55em; }

/* ── Wstęp na dwie kolumny ─────────────────────────────────────
   Nagłówek po lewej, tekst i CTA po prawej. Bez tego duży nagłówek
   zostawiał pół ekranu pustego, a brief prosi wprost o mniej pustki. */
/* Podział na pół, z tym samym odstępem kolumn co kafle liczb (40 px).
   Przy czterech kaflach krawędź kolumn wypada dokładnie tam, gdzie zaczyna
   się trzeci kafel, więc obie siatki stoją w jednym pionie. Wcześniej lewa
   kolumna była szersza (1.12fr) i linie się rozjeżdżały. */
.dwukol { display: grid; gap: clamp(18px, 3vw, 40px); align-items: start; }
@media (min-width: 900px) {
  .dwukol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  /* Optyczne wyrównanie, ale tylko gdy lewa kolumna otwiera się nagłówkiem:
     duży krój ma nad wersalikami więcej pustego miejsca niż tekst, więc bez
     tego prawa kolumna startowała wyżej niż litery nagłówka. Gdy po lewej
     stoi akapit, oba teksty zaczynają się już na tej samej wysokości
     i przesunięcie tylko spychało prawą kolumnę o 8 px w dół. */
  .dwukol:has(> :first-child > .tyt:first-child) .dwukol__prawa { padding-top: .5em; }}
/* łamanie sterowane <br> w treści, więc balance tylko by przeszkadzał */
.dwukol .tyt { margin-bottom: 0; max-width: none; text-wrap: normal;
  font-size: clamp(27px, 3.05vw, 44px); }
/* Zerowy margines jest dla nagłówka, który stoi sam w kolumnie. Gdy pod
   nim w tej samej kolumnie idzie tekst (np. /deweloper), przyklejał się. */
.dwukol .tyt:not(:last-child) { margin-bottom: .55em; }
.dwukol .proza { max-width: 54ch; }
.dwukol .proza p:last-child { margin-bottom: 0; }

/* Kolumna tekstu. Szerokość wiersza to czytelność, nie ozdoba - przy
   tabelach cen i długich opisach to zaczyna mieć znaczenie. */
.proza { max-width: 68ch; }
.proza p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; }
.proza--lead p:first-child { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; color: var(--ink); }

.podpis { font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 80ch; margin: 14px 0 0; }
/* podpis na dole zdjęcia na całą szerokość (plan na /osiedle): biały tekst
   na przyciemnionym dole kadru - osobny pasek pod zdjęciem wyglądał jak
   zgubiony przypis */
.locmap__podpis { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; line-height: 1.5;
  padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(14px, 1.6vw, 22px); font-size: clamp(11px, calc(.95vw - 1px), 13px); color: rgba(255,255,255,.6); text-align: center;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.55)); text-shadow: 0 1px 2px rgba(0,0,0,.35); pointer-events: none; }
/* na telefonie zdjęcie jest niskie i podpis zasłaniał opisy rzeki i lasu -
   schodzi pod zdjęcie, na granatowe tło sekcji */
@media (max-width: 700px) { .locmap__podpis { position: static; padding: 12px var(--gutter) 14px; background: none; text-shadow: none; line-height: 1.5; } }

/* ── Kafle liczb ───────────────────────────────────────────── */
.liczby {
  list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0;
  display: grid; gap: 26px 40px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.liczby li { border-top: 1px solid var(--hair); padding-top: 15px; }
.liczby b {
  display: block; font-family: var(--display); font-weight: 600; letter-spacing: 0;
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1.02; color: var(--accent);
}
.liczby span { display: block; margin-top: 7px; font-size: 15px; line-height: 1.4; color: var(--muted); }
/* wariant pionowy: kafle jako kolumna obok tekstu */
.liczby--kolumna { grid-template-columns: 1fr; gap: 20px; margin-top: 0; }
.liczby--ciemny li { border-color: rgba(255,255,255,.22); }
.liczby--ciemny b { color: var(--hi-2); }
.liczby--ciemny span { color: rgba(255,255,255,.75); }
/* Na telefonie kafle liczb idą parami: jeden pod drugim zajmowały po sto
   pikseli każdy, a to krótkie hasła, nie akapity. */
@media (max-width: 860px) {
  .liczby, .liczby--kolumna { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .liczby b { font-size: 26px; }
  .liczby span { font-size: 14px; }}

/* ── Pasmo: tekst obok zdjęcia ───────────────────────────────
   Zdjęcie wypełnia swoją połowę pasma bez reszty: dochodzi do górnej,
   dolnej i zewnętrznej krawędzi sekcji. Oddech daje wyłącznie kolumna
   z tekstem, a jej wcięcie od zewnątrz równa się marginesowi kontenera,
   więc tekst nadal stoi w jednym pionie z resztą strony.
   Stąd zdjęte `padding` sekcji i `max-width` kontenera - pasmo jest
   pełnej szerokości, podział robią same kolumny gridu. */
.pasmo--panel { background: var(--panel); }
.pasmo { padding-block: 0; overflow: hidden; }
.pasmo__grid {
  --wciecie: calc(var(--gutter) + max(0px, (100vw - var(--maxw)) / 2));
  --oddech: clamp(40px, 5vw, 80px);
  display: grid; gap: 0; align-items: stretch; grid-template-columns: 1fr;
  max-width: none; padding: 0;
}
@media (min-width: 900px) { .pasmo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }}
.pasmo__txt {
  align-self: center;
  padding-block: clamp(56px, 7vw, 104px);
  padding-inline: var(--wciecie) var(--oddech);
}
.pasmo--odwrotne .pasmo__txt { order: 2; padding-inline: var(--oddech) var(--wciecie); }
.pasmo--odwrotne .pasmo__fig { order: 1; }
@media (max-width: 899px) {
  .pasmo--odwrotne .pasmo__txt, .pasmo--odwrotne .pasmo__fig { order: 0; }
  .pasmo__txt, .pasmo--odwrotne .pasmo__txt { padding-inline: var(--gutter); }}
.pasmo__txt h2 { margin: .15em 0 .55em; max-width: 18ch; text-wrap: balance; }
.pasmo__txt p { max-width: 56ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.62; }
.pasmo__cta { margin-top: 1.6em; }
/* figure wypełnia komórkę gridu: obraz na absolucie, żeby wysokość brała
   się z wiersza (czyli z tekstu), a nie z proporcji zdjęcia */
.pasmo__fig { margin: 0; position: relative; min-height: clamp(280px, 34vw, 620px); }
.pasmo__fig picture { position: absolute; inset: 0; display: block; }
.pasmo__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* nota poglądowa kładzie się na dolnej krawędzi zdjęcia - inaczej zdjęcie
   musiałoby jej ustąpić miejsca i znów przestałoby dochodzić do krawędzi */
.pasmo__fig .podpis {
  position: absolute; z-index: 1; inset: auto 0 0 0; margin: 0;
  padding: 34px var(--gutter) 12px; max-width: none;
  font-size: 11px; line-height: 1.4; color: rgba(255,255,255,.72);
  background: linear-gradient(0deg, rgba(1,37,64,.6) 0%, rgba(1,37,64,0) 100%);
}

/* ── Pełnoekranowe pasmo ───────────────────────────────────────
   Zdjęcie na cały ekran, treść położona na nim. Kadr sterowany przez
   --kadr (desktop) i --kadr-m (telefon), bo te same wizualizacje przycięte
   w pionie i w poziomie pokazują zupełnie co innego. */
.pelne {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  min-height: 100dvh;
  display: flex; align-items: center;
  padding: 0; overflow: hidden;
  background: var(--deep);
}
.pelne__media { position: absolute; inset: 0; z-index: 0; }
.pelne__media picture { display: block; height: 100%; }
.pelne__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--kadr, center 55%); }

.pelne__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pelne--lewo .pelne__scrim {
  background:
    linear-gradient(90deg, rgba(1,37,64,.82) 0%, rgba(1,37,64,.5) 38%, rgba(1,37,64,0) 68%),
    linear-gradient(180deg, rgba(1,37,64,.45) 0%, rgba(1,37,64,0) 26%);
}
.pelne--prawo .pelne__scrim {
  background:
    linear-gradient(270deg, rgba(1,37,64,.82) 0%, rgba(1,37,64,.5) 38%, rgba(1,37,64,0) 68%),
    linear-gradient(180deg, rgba(1,37,64,.45) 0%, rgba(1,37,64,0) 26%);
}

.pelne__body { position: relative; z-index: 2; width: 100%; }
.pelne__txt { max-width: 46ch; color: #fff; }
.pelne--prawo .pelne__txt { margin-left: auto; }
.pelne__txt h2 { color: #fff; margin: 0 0 .55em; max-width: 15ch; }
.pelne__txt p { color: rgba(255,255,255,.9); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; }
.pelne__txt p:last-of-type { margin-bottom: 0; }
.pelne__txt .btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.pelne__txt .btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.pelne__txt .pasmo__cta, .pelne__txt .etaphero__cta { margin-top: 1.7em; }

.pelne__nota {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 14px;
  margin: 0; padding: 0 var(--gutter);
  font-size: 11px; line-height: 1.4; color: rgba(255,255,255,.55);
}

@media (max-width: 860px) {
  /* na telefonie scrim idzie od dołu, bo tekst siada nad dolną krawędzią */
  .pelne { align-items: flex-end; min-height: 100dvh; }
  .pelne__media img { object-position: var(--kadr-m, center 55%); }
  .pelne--lewo .pelne__scrim, .pelne--prawo .pelne__scrim {
    background: linear-gradient(0deg, rgba(1,37,64,.9) 0%, rgba(1,37,64,.5) 40%, rgba(1,37,64,0) 78%);
  }
  .pelne__body { padding-bottom: clamp(56px, 12vh, 110px); }
  .pelne__txt, .pelne--prawo .pelne__txt { max-width: none; margin-left: 0; }}

/* ── Historia: świadomie mały blok, to smaczek ─────────────── */
.historia { background: var(--ink); color: #fff; }

/* ── Plan osiedla ──────────────────────────────────────────── */
.plan { background: var(--ink); }
/* Na mapie lokalizacji piny rozwijają podpis dopiero pod kursorem. Na planie
   podpisy muszą być widoczne od razu - to orientacja w terenie, nie zabawka,
   a na telefonie hover i tak nie istnieje. */
.plan .pin__txt { max-width: 22ch; opacity: 1; padding: 0 16px 0 6px; }
/* piny przy prawej krawędzi rozwijają podpis w lewo, żeby nie uciekał z kadru */
.plan .pin--nalewo { transform: translate(calc(-100% + 20px), -50%); }
.plan .pin--nalewo .pin__card { flex-direction: row-reverse; }
.plan .pin--nalewo .pin__txt { padding: 0 6px 0 16px; }

/* ════════════════════════════════════════════════════════════
   Szablon etapu
   ════════════════════════════════════════════════════════════ */
.etaphero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: clamp(440px, 66vh, 720px); display: flex; align-items: flex-end; overflow: hidden; background: var(--deep); padding: 0; }
.etaphero__media { position: absolute; inset: 0; z-index: 0; }
.etaphero__media picture { display: block; height: 100%; }
.etaphero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--kadr, center 78%); }
.etaphero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1,37,64,.6) 0%, rgba(1,37,64,.15) 34%, rgba(1,37,64,0) 55%),
    linear-gradient(0deg, rgba(1,37,64,.9) 0%, rgba(1,37,64,.45) 34%, rgba(1,37,64,0) 72%);
}
/* górne wcięcie trzyma etykietę pod przyklejonym paskiem i menu,
   nawet gdy tytuł rozbije się na cztery wiersze */
.etaphero__body { position: relative; z-index: 2; width: 100%; padding: calc(var(--pasek-h) + 80px) 0 clamp(30px, 4vw, 56px); }
.etaphero__tyt {
  margin: 0; color: #fff; max-width: 20ch; text-wrap: balance;
  font-size: clamp(30px, 4.4vw, 66px); line-height: 1.05;
  text-shadow: 0 2px 26px rgba(1,37,64,.4);
}
.etaphero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(30px, 3.5vw, 46px) 0 0; }


/* punkty o standardzie budynku */
.standard { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: 12px 34px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* w węższej kolumnie punkty idą jeden pod drugim */
.standard--stos { grid-template-columns: 1fr; }
.standard li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; }
/* punkt z ikoną nie potrzebuje ptaszka rysowanego na krawędziach */
.standard li:has(.ikona) { padding-left: 0; display: flex; align-items: baseline; gap: 11px; }
.standard li:has(.ikona)::before { content: none; }
.standard .ikona { font-size: 19px; color: var(--accent); vertical-align: -.18em; }
.standard li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 16px; height: 9px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* galeria etapu: co trzeci kadr na pełną szerokość, żeby rytm nie był tabelą */
.etapgal { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 1.8em 0 0; }
/* Stałe proporcje kafelków: bez nich pełnowymiarowy kadr 4:3 rozpycha
   wiersz na pół ekranu i rytm galerii się rozjeżdża. */
.etapgal__it { margin: 0; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; }
.etapgal__it--szeroka { aspect-ratio: 2 / 1; }
.etapgal__it img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .etapgal { grid-template-columns: 1fr 1fr; } .etapgal__it--szeroka { grid-column: 1 / -1; }}

/* ── Logotypy innych projektów ─────────────────────────────── */
/* Cztery równe kafle zamiast auto-fit, który rozsypywał logotypy po lewej
   i zrzucał czwarty do drugiego rzędu. Wysokość kafla jest stała, a logotyp
   ograniczany WYSOKOŚCIĄ, nie szerokością: inaczej szeroki i niski W99
   wygląda na dwa razy większy niż wysoki Plater House. */
.projekty {
  list-style: none; margin: 2em 0 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* bez tego na szerokim ekranie kafle rozciagaja sie na pol metra
     i logotypy zaczynaja konkurowac z naglowkiem sekcji */
  max-width: 940px;
}
@media (max-width: 860px) { .projekty { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
.projekty__it {
  display: flex; align-items: center; justify-content: center;
  height: 96px; padding: 20px 26px;
  background: rgba(255,255,255,.62); border-radius: 4px;
  transition: background .3s var(--ease);
}
.projekty__it:hover { background: #fff; }
.projekty__it a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* logotypy są białe na przezroczystym, a kafel jest jasny - stąd inwersja */
.projekty__it img {
  width: auto; max-width: 100%; height: auto; max-height: 42px; object-fit: contain;
  filter: brightness(0); opacity: .72; transition: opacity .25s var(--ease);
}
.projekty__it a:hover img { opacity: 1; }

/* ── Dwa adresy na stronie kontaktu ────────────────────────── */
.adresy { display: grid; gap: clamp(28px, 4vw, 60px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.adresy__it { display: flex; flex-direction: column; align-items: flex-start; }
.adresy__adr { margin: .4em 0 .5em; font-family: var(--display); font-weight: 600; letter-spacing: 0; font-size: clamp(20px, 2vw, 27px); line-height: 1.25; }
.adresy__kontakt { margin: 0 0 1.4em; line-height: 1.7; max-width: 42ch; }
.adresy__kontakt a { text-decoration: underline; text-underline-offset: 3px; }
.pobliz__karta .ikona {
  position: absolute; z-index: -1; right: -14px; top: -10px;
  font-size: 104px; color: var(--deep); opacity: .085;
}

/* ── Dojazd: wiersze z pigułkami czasu ──────────────────────
   Tabela z nagłówkiem kolumn wyglądała jak arkusz. Teraz cel jest
   nagłówkiem wiersza, a pigułki same się opisują, więc nagłówek kolumn
   jest zbędny. */
.dojazd { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; display: grid; }
.dojazd__poz {
  display: grid; gap: 14px 28px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--hair);
}
.dojazd__poz:first-child { border-top: 1px solid var(--hair); }
@media (min-width: 820px) { .dojazd__poz { grid-template-columns: minmax(0, 1fr) auto; }}
.dojazd__cel { min-width: 0; }
.dojazd__nazwa {
  margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: 0;
  text-transform: uppercase; color: var(--deep); font-size: clamp(19px, 1.8vw, 25px); line-height: 1.1;
}
.dojazd__km { margin: 3px 0 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.dojazd__czasy { display: flex; flex-wrap: wrap; gap: 8px; }
.dojazd__pig {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  /* tlo strony to juz --paper, wiec pigulka musi byc jasniejsza od niej */
  background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 10px 18px;
  font-size: 15px; color: var(--ink);
}
.dojazd__pig i { font-style: normal; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.dojazd__pig .ikona { font-size: 17px; color: var(--deep); opacity: .6; }
.pasmo--panel .dojazd__pig { background: rgba(255,255,255,.6); }
/* Na telefonie pigułka z podpisem („komunikacją 23 minuty") nie mieściła
   się po dwie w rzędzie, więc każda stała w osobnej linii i pięć celów
   zajmowało tysiąc pikseli. Ikona mówi sama, podpis zostaje dla czytnika. */
@media (max-width: 600px) {
  .dojazd__czasy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .dojazd__pig { justify-content: center; gap: 6px; padding: 9px 6px; font-size: 14px; }
  .dojazd__pig i {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }}

.dokumenty { list-style: none; margin: 1.4em 0 0; padding: 0; display: grid; gap: 10px; }
.dokumenty a { text-decoration: underline; text-underline-offset: 3px; color: var(--accent); }

/* ── Oś czasu (/etapy) ─────────────────────────────────────────
   Szyna z kropkami, karty na przemian po obu stronach. Zdjęcie siedzi
   przy górnej krawędzi karty bez marginesu - tak samo jak w pasmach.
   Na telefonie szyna schodzi do lewej krawędzi, karty idą w jedną
   kolumnę: układ naprzemienny na 390 px robi się nieczytelny. */
/* sekcja trzyma zwykly rytm 96 px, zeby kreska separatora nie przyklejala
   sie do pierwszej karty */
.os__lista { list-style: none; margin: 0; padding: 0; position: relative; }
.os__lista::before {
  content: ''; position: absolute; top: 10px; bottom: 10px; left: 10px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--tint) 5%, var(--tint) 95%, transparent);
}
.os__punkt { position: relative; padding: 0 0 clamp(38px, 5vw, 64px) 44px; }
.os__punkt::before {
  content: ''; position: absolute; left: 3px; top: 7px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--paper); border: 3px solid var(--accent);
}
.os__punkt--wyroznione::before { background: var(--accent); box-shadow: 0 0 0 5px rgba(151,152,64,.2); }

.os__rok { margin: 0 0 14px; line-height: 1; }
.os__rok b {
  font-family: var(--display); font-weight: 600; letter-spacing: 0;
  font-size: clamp(32px, 4vw, 56px); line-height: .9; color: var(--accent); display: block;
}
.os__rok-brak {
  display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); border: 1px dashed var(--hair); border-radius: 999px; padding: 6px 12px;
}

.os__karta { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 2px rgba(1,37,64,.07), 0 12px 30px rgba(1,37,64,.06); }
.os__fig { margin: 0; }
.os__fig picture { display: block; }
.os__fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.os__podpis { font-size: 11px; line-height: 1.4; color: var(--muted); padding: 10px clamp(20px, 2.4vw, 32px) 0; }
.os__tresc { padding: clamp(20px, 2.4vw, 32px); }
.os__tyt { font-size: clamp(19px, 1.9vw, 26px); margin: 0 0 .5em; }
.os__tresc p { margin: 0; font-size: clamp(15px, 1.15vw, 16px); line-height: 1.62; color: var(--muted); }
/* .os__tresc p zeruje marginesy akapitow, a przycisk tez jest akapitem,
   wiec musi wygrac specyficznoscia */
.os__tresc .os__cta { margin: 1.7em 0 0; }

/* Ostatni punkt to S19 - granatowa karta, żeby oś kończyła się akcentem,
   a nie kolejnym wierszem. */
.os__punkt--wyroznione .os__karta { background: var(--deep); }
.os__punkt--wyroznione .os__tyt { color: #fff; }
.os__punkt--wyroznione .os__tresc p { color: rgba(255,255,255,.82); }
.os__punkt--wyroznione .os__podpis { color: rgba(255,255,255,.55); }
.os__punkt--wyroznione .btn { background: var(--hi-2); color: var(--deep); }
.os__punkt--wyroznione .btn:hover { background: #fff; }

@media (min-width: 900px) {
  .os__lista::before { left: 50%; transform: translateX(-1px); }
  .os__punkt {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(56px, 7vw, 120px);
    align-items: start; padding: 0 0 clamp(52px, 6vw, 92px);
  }
  .os__punkt::before { left: 50%; transform: translateX(-50%); top: 6px; }
  .os__karta { grid-column: 1; grid-row: 1; }
  /* rok siada w jednej linii z nagłówkiem karty, nie nad nią */
  .os__rok { grid-column: 2; grid-row: 1; margin: 22px 0 0; }
  .os__punkt:nth-child(even) .os__karta { grid-column: 2; }
  .os__punkt:nth-child(even) .os__rok { grid-column: 1; text-align: right; }}

/* ── Galeria ───────────────────────────────────────────────────
   Jeden kontener `#gallery` na wszystkie kategorie, bo lightbox z main.js
   indeksuje `.shot` globalnie - strzałkami przechodzi się przez cały
   materiał, a nie przez pojedynczą sekcję. */
/* Kategorie jako pasek pigułek pod leadem. W kolumnie obok tekstu robiły
   z prostego spisu drugą, konkurencyjną treść. */

.galkat { display: flex; flex-wrap: wrap; gap: 10px; }
/* wstęp galerii to sam pasek kategorii - bez pełnego rytmu sekcji */
.section.galwstep { padding: clamp(22px, 2.6vw, 34px) 0; }
.galkat__poz {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border: 1px solid var(--hair); border-radius: 999px;
  font-family: var(--display); font-weight: 600; letter-spacing: .02em;
  font-size: 15px; text-transform: uppercase; color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.galkat__poz span { font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--muted); }
.galkat__poz:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
.galkat__poz:hover span { color: rgba(255,255,255,.7); }

/* Sekcje galerii stoją jedna na drugiej, więc pełny rytm sekcji treściowej
   robiłby między siatkami dwieście pikseli pustki. */

.galsek__opis { margin: .5em 0 0; font-size: clamp(15px, 1.2vw, 17px); }
.galsiatka {
  display: grid; gap: 12px; margin-top: clamp(26px, 3vw, 40px);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* .shot przyszedł z Leśnej z zaokrągleniem 12px - tu wszystko ma 4px */
.galsiatka .shot { border-radius: 4px; aspect-ratio: 4 / 3; }
/* duży kadr bierze dwie kolumny i dwa wiersze, inaczej pod sąsiednimi
   kafelkami zostaje dziura na pół ich wysokości */
.galsiatka .shot--szeroka { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.galsiatka .shot span {
  background: rgba(1,37,64,.72); border-radius: 3px;
  font-family: var(--font); letter-spacing: .1em;
}
/* Na telefonie dwie kolumny miniatur - jedna kolumna robiła z 37 kadrów
   13 000 px przewijania, a pełny kadr i tak otwiera lightbox. Szeroki kadr
   zostaje szeroki (na całą linię), więc rytm z desktopu przechodzi dalej. */
@media (max-width: 640px) {
  .galsiatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .galsiatka .shot--szeroka { grid-column: 1 / -1; grid-row: span 1; aspect-ratio: 4 / 3; }
  .galsiatka .shot span {
    left: 6px; bottom: 6px; right: 6px; width: max-content; max-width: calc(100% - 12px);
    padding: 4px 7px; font-size: 9.5px; letter-spacing: .06em; line-height: 1.3; white-space: normal;
  }}

/* ── Ikony ─────────────────────────────────────────────────────
   Phosphor Light, wstawiane inline (patrz components/Ikona.astro).
   Rozmiar bierze się z font-size rodzica, kolor z currentColor, więc ta
   sama ikona działa na jasnym tle i na granatowym paśmie. */
.ikona { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.13em; }
.pobliz dt .ikona { font-size: 1.5em; color: var(--deep); opacity: .72; }

/* nagłówki tabeli dojazdu */
.dojazd thead th { white-space: nowrap; }
.dojazd thead th .ikona { font-size: 15px; margin-right: 8px; vertical-align: -.2em; }

/* Pasmo na ciemnym tle: ten sam układ co jasne, tylko kolory tekstu. */
.historia.pasmo .pasmo__txt h2 { color: #fff; }
.historia.pasmo .pasmo__txt p { color: rgba(255,255,255,.85); }

/* adresy na /kontakt */
.adresy__adr { display: flex; align-items: baseline; gap: 11px; }
.adresy__adr .ikona { font-size: 20px; color: var(--deep); opacity: .7; vertical-align: -.16em; }
.adresy__kontakt { display: grid; gap: 7px; }
.adresy__kontakt span { display: flex; align-items: center; gap: 11px; }
.adresy__kontakt .ikona { font-size: 18px; color: var(--deep); opacity: .7; }
.historia h2 { color: #fff; margin-bottom: .5em; }

/* ikona typu punktu na osi czasu: budynek, usługa, rekreacja */
.os__tyt { display: flex; align-items: center; gap: 16px; }
.os__tyt .ikona { font-size: 1.15em; color: var(--accent); flex: none; }
.os__punkt--wyroznione .os__tyt .ikona { color: var(--hi-2); }

/* ── Ikony w pozostałych miejscach ────────────────────────────── */
/* filtry wyszukiwarki */
.finder__label { display: flex; align-items: center; gap: 8px; }
.finder__label .ikona { font-size: 16px; color: var(--deep); opacity: .6; }

/* dane kontaktowe w stopce */
.foot__dane { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.foot__dane li { display: flex; align-items: center; gap: 11px; }
.foot__dane .ikona { font-size: 18px; color: var(--hi-2); opacity: .85; flex: none; }

/* pigułki i nagłówki kategorii w galerii */
.galkat__poz .ikona { font-size: 19px; color: var(--accent); }
.galkat__poz:hover .ikona { color: var(--hi-2); }
.galsek__tyt { display: flex; align-items: center; gap: 14px; }
.galsek__tyt .ikona { font-size: .92em; color: var(--accent); flex: none; }

/* ── Pasmo przewijane: lista po lewej, jedno zdjęcie po prawej ──
   Prawa kolumna jest sticky i trzyma wszystkie kadry ułożone na sobie;
   aktywny ma klasę `is-on`, reszta siedzi na zerowej przezroczystości.
   Dzięki temu zmiana kadru to crossfade, a nie doładowanie obrazka.
   Bez JS-u widać pierwszy kadr i całą listę - treść nie znika. */
.przew__grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) {
  .przew__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }}
.przew__h { margin: 0 0 clamp(26px, 3vw, 44px); }

.przew__lista { list-style: none; margin: 0; padding: 0; }
.przew__poz {
  padding: clamp(26px, 3vw, 40px) 0;
  border-top: 1px solid var(--hair);
  display: grid; gap: 4px;
  /* nieaktywne pozycje przygasają, ale zostają czytelne */
  opacity: .48; transition: opacity .45s var(--ease);
}
.przew__poz:last-child { border-bottom: 1px solid var(--hair); }
.przew__poz.is-active { opacity: 1; }
.przew__ik { font-size: 30px; color: var(--deep); opacity: .8; margin-bottom: 10px; }
/* Akcent na miejscu, czas jako dopisek pod nim. */
.przew__co {
  margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: 0;
  text-transform: uppercase; color: var(--deep);
  font-size: clamp(23px, 2.5vw, 36px); line-height: 1.06;
}
.przew__ile {
  margin: 6px 0 0; display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.przew__ile .ikona { font-size: 16px; opacity: .85; }
.przew__opis { margin: .5em 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 46ch; }

.przew__media { position: sticky; top: calc(var(--pasek-h) + var(--naglowek-h) + 24px); }
.przew__ramka {
  position: relative; overflow: hidden; border-radius: 4px;
  height: min(72vh, 620px); background: var(--deep);
}
.przew__fig {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .6s var(--ease);
}
.przew__fig.is-on { opacity: 1; }
.przew__fig picture { display: block; height: 100%; }
.przew__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Zdjęcie przy pozycji - tylko na telefonie, patrz PasmoScroll.astro. */
.przew__fot { display: none; }

/* Na telefonie nie ma dwóch kolumn, więc nie ma czego synchronizować:
   kolumna sticky znika, a każda pozycja dostaje własny kadr nad tekstem.
   Przyklejone u góry zdjęcie zabierało 40% ekranu i zmieniało się w trakcie
   czytania pozycji, zamiast towarzyszyć jej z boku. */
@media (max-width: 899px) {
  .przew__media { display: none; }
  .przew__fot {
    display: block; margin: 0 0 16px; border-radius: 4px; overflow: hidden;
    aspect-ratio: 4 / 3; background: var(--deep);
  }
  .przew__fot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* przygaszanie nieaktywnych miało sens tylko przy jednym wspólnym kadrze */
  .przew__poz { opacity: 1; }
  .przew__ik { display: none; }}
@media (prefers-reduced-motion: reduce) {
  .przew__fig, .przew__poz { transition: none; }}

/* Nagłówek hero na osi pionowej kadru. Wariant E zostawia na zdjęciu tylko
   nagłówek i przyciski, więc wyśrodkowane czytają się jak jedna plansza,
   a nie jak blok dosunięty do lewej krawędzi. */
.hero--photo .hero__body { text-align: center; }
.hero--photo .hero__title { margin-inline: auto; }
.hero--photo .hero__cta { justify-content: center; }

/* ── Sekcja o deweloperze na stronie głównej (wariant C) ───────
   Pas liczb u góry, pod nim nagłówek i tekst. Liczby są tu argumentem,
   więc czyta się je pierwsze; w akapicie ginęły. */
.dewsek .liczby { margin-top: 0; }
.dewsek__dol { margin-top: clamp(44px, 5vw, 76px); }

/* ślady przeszłości na /okolica - lista rzeczy, które można zobaczyć na miejscu */
.historia__slady { list-style: none; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0; display: grid; gap: 13px; }
.historia__slady li { display: flex; align-items: center; gap: 13px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.88); }
.historia__slady .ikona { font-size: 21px; color: var(--hi-2); flex: none; }

/* ── Dokumenty ─────────────────────────────────────────────────
   Pozycje bez pliku zostają na liście jako „w przygotowaniu", bo lista
   ma pokazywać komplet tego, co na stronie ma być, a nie tylko to, co
   akurat mamy. */
.dokinfo {
  background: var(--panel); border-radius: 4px; padding: clamp(22px, 2.6vw, 30px);
  font-size: 15px; line-height: 1.6;
}
.dokinfo__h {
  margin: 0 0 10px; display: flex; align-items: center; gap: 11px;
  font-family: var(--display); font-weight: 600; letter-spacing: 0;
  text-transform: uppercase; font-size: 19px; color: var(--deep);
}
.dokinfo__h .ikona { font-size: 22px; opacity: .75; }
.dokinfo p { margin: 0; color: var(--ink); }
.dokinfo__kontakt { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px !important; }
.dokinfo__kontakt a { font-weight: 600; color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }

.dok { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; display: grid; }
.dok__poz {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 18px;
  align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hair);
}
.dok__poz:first-child { border-top: 1px solid var(--hair); }
.pasmo--panel .dok__poz { border-color: rgba(1,37,64,.2); }
.dok__poz > .ikona { font-size: 22px; color: var(--accent); }
.dok__poz--czeka > .ikona { color: var(--muted); opacity: .7; }
.dok__nazwa {
  margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: 0;
  text-transform: uppercase; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.15; color: var(--deep);
}
.dok__nazwa a { color: inherit; }
.dok__nazwa a:hover { color: var(--accent); }
.dok__opis { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.dok__stan {
  margin: 0; white-space: nowrap;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.dok__poz:not(.dok__poz--czeka) .dok__stan { color: var(--accent); font-weight: 600; }
@media (max-width: 600px) {
  .dok__poz { grid-template-columns: auto minmax(0, 1fr); }
  .dok__stan { grid-column: 2; }}

/* ── Aktualności ───────────────────────────────────────────── */
.akt { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.akt__poz { border-bottom: 1px solid var(--hair); }
.akt__poz:first-child { border-top: 1px solid var(--hair); }
.akt__link {
  display: grid; gap: 10px 32px; align-items: center; padding: 26px 0;
  color: inherit;
}
@media (min-width: 760px) { .akt__link { grid-template-columns: 280px minmax(0, 1fr); }}
.akt__foto { border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--panel); }
.akt__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.akt__data {
  margin: 0 0 8px; display: flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.akt__data .ikona { font-size: 16px; }
.akt__tyt { margin: 0; font-size: clamp(21px, 2.1vw, 30px); }
.akt__link:hover .akt__tyt { color: var(--accent); }
.akt__lead { margin: .6em 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 62ch; }

/* stan zerowy: co się tu pojawi */
.akt__zapowiedz { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.akt__zapowiedz li { display: flex; align-items: center; gap: 13px; font-size: 16px; line-height: 1.45; }
.akt__zapowiedz .ikona { font-size: 23px; color: var(--accent); flex: none; }

.aktwpis__data {
  margin: 0 0 12px; display: flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.aktwpis__data .ikona { font-size: 16px; }
.aktwpis__foto { margin: clamp(28px, 3vw, 42px) 0 0; border-radius: 4px; overflow: hidden; }
.aktwpis__foto img { width: 100%; height: auto; display: block; }
.aktwpis .proza { max-width: 68ch; margin-top: clamp(26px, 3vw, 38px); }

/* ── Atuty osiedla („Poznaj osiedle") ──────────────────────────
   Panele rozwijane (wariant E z sandboxa, klient 25.09.2026): pięć pasów
   ze zdjęciami obok siebie, aktywny (.is-on, przełącza main.js) rośnie
   i pokazuje tekst na zdjęciu, pozostałe - numer i pionowy tytuł.
   Zastąpiły jednakowe karty z ikonami, które wyglądały jak szablon. */
.atuty { list-style: none; margin: clamp(22px, 2.6vw, 36px) 0 0; padding: 0; display: flex; gap: 10px; height: clamp(520px, 44vw, 640px); }
.atuty__pan { position: relative; flex: 1 1 0; min-width: 0; border-radius: 10px; overflow: hidden; cursor: pointer; outline: none;
  background: var(--deep); transition: flex-grow .6s var(--ease); }
.atuty__foto, .atuty__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.atuty__pan::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(1,24,42,.92) 0%, rgba(1,24,42,.55) 45%, rgba(1,24,42,.15) 100%); }
.atuty__pan.is-on { flex-grow: 4.2; cursor: default; }
.atuty__pan.is-on::before { background: linear-gradient(to top, rgba(1,24,42,.92) 0%, rgba(1,24,42,.6) 42%, rgba(1,24,42,0) 75%); }
.atuty__pan:focus-visible { box-shadow: inset 0 0 0 3px var(--hi-2); }
.atuty__nr { position: absolute; left: 20px; top: 18px; z-index: 2; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .06em;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.atuty__pion { position: absolute; left: 20px; bottom: 22px; z-index: 2; writing-mode: vertical-rl; transform: rotate(180deg); max-height: calc(100% - 80px);
  font-family: var(--display); font-weight: 600; font-size: 19px; text-transform: uppercase; color: #fff; line-height: 1.1; transition: opacity .3s var(--ease); }
.atuty__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(24px, 2.6vw, 40px); max-width: 680px;
  opacity: 0; transform: translateY(14px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.atuty__tyt { margin: 0 0 .55em; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; color: #fff; }
.atuty__txt p { margin: 0; font-size: 15px; line-height: 1.62; color: rgba(255,255,255,.88); }
.atuty__txt p + p { margin-top: .8em; }
.atuty__pan.is-on .atuty__pion { opacity: 0; }
.atuty__pan.is-on .atuty__txt { opacity: 1; transform: none; transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .atuty__pan, .atuty__txt { transition: none; } }
/* telefon: panele jeden pod drugim, zdjęcie u góry, tekst pod nim na granacie */
@media (max-width: 860px) {
  .atuty { flex-direction: column; height: auto; }
  .atuty__pan, .atuty__pan.is-on { flex: none; cursor: default; padding-top: 220px; }
  .atuty__foto, .atuty__foto img { bottom: auto; height: 220px; }
  .atuty__pan::before, .atuty__pan.is-on::before { bottom: auto; height: 220px; background: linear-gradient(to bottom, rgba(1,24,42,.45), rgba(1,24,42,0) 40%); }
  .atuty__pion { display: none; }
  .atuty__txt { position: static; opacity: 1; transform: none; padding: 22px 20px 26px; }
  .atuty__tyt { font-size: 22px; }
}

/* ── Quick-search na telefonie: pigułki i suwak ────────────────
   Pierwszy ekran ma pokazywać ofertę, a nie cztery puste selekty. Blok
   jest ukryty w HTML i włącza go JS, więc bez skryptu zostają zwykłe
   selekty i formularz dalej działa jako GET. */
/* .qsearch jest gridem 2-kolumnowym, wiec blok musi wziac oba tory.
   [hidden] samo nie wystarczy, bo .qsearch__field ma display: flex. */
.qsm { grid-column: 1 / -1; display: grid; gap: 18px; padding: 20px 20px 4px; }
.qsm[hidden], .qsearch__field[hidden] { display: none !important; }
.qsm__grupa { display: grid; gap: 10px; }
.qsm__label {
  margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.qsm__pig { display: flex; flex-wrap: wrap; gap: 7px; }
.qsm__pig button {
  font: 400 14px/1 var(--font); color: var(--ink);
  background: none; border: 1px solid var(--hair); border-radius: 999px;
  padding: 10px 16px; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.qsm__pig button.is-on { background: var(--deep); border-color: var(--deep); color: #fff; }

.qsm__suwak { width: 100%; margin: 6px 0 0; accent-color: var(--deep); }
.qsm__zakres {
  margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: 0;
  font-size: 18px; color: var(--accent);
}

/* ── Nagłówki podstron na telefonie ────────────────────────────
   Na desktopie nagłówek ma stałą wysokość liczoną z vh, bo kadr jest
   szeroki. Na telefonie ta sama wartość robi z niego pół ekranu pustego
   zdjęcia, zanim w ogóle zacznie się treść. Tutaj wysokość bierze się
   z proporcji kadru (3:2), a nie z wysokości okna; gdy tytuł jest długi,
   blok po prostu urośnie, bo `aspect-ratio` przy wysokości auto działa
   jak wartość preferowana, nie sztywna. */
@media (max-width: 860px) {
  .etaphero { min-height: 0; aspect-ratio: 4 / 3; }
  .etaphero__body { padding: calc(var(--pasek-h) + var(--naglowek-h)) 0 20px; }
  .etaphero__tyt { font-size: clamp(28px, 8.6vw, 44px); }
  /* Łamanie wpisane w treść jest dobrane pod szeroki kadr; na 390 px robi
     z trzywierszowego tytułu czterowierszowy i zjada całe zdjęcie. */
  .etaphero__tyt br { display: none; }
}
/* ── Wybór lokalu z planu (/mieszkania) ───────────────────────
   Piętro na wizualizacji S19 -> lokal na rzucie kondygnacji
   (public/js/plan-wyboru.js). Kolory statusów te same co plakietki
   w tabeli: granat = dostępne, oliwka = rezerwacja, szarość = sprzedane. */
.planwyb { margin-bottom: clamp(22px, 2.4vw, 34px); }
.planwyb__h { margin: 0 0 clamp(18px, 2vw, 26px); font-size: clamp(26px, 2.6vw, 38px); }
/* /mieszkania nie ma nagłówka ze zdjęciem - wyszukiwarka sama schodzi spod
   paska etapu i menu, z mniejszym oddechem niż zwykła sekcja */
main > .finder-wrap:first-of-type { padding-top: calc(var(--pasek-h) + var(--naglowek-h) + clamp(24px, 3vw, 44px)); }

.pw-plan { display: grid; gap: 12px; }
/* Nawigacja na obrazie: powrót do budynku w lewym górnym rogu,
   przełącznik pięter w prawym (wariant 5 z sandboxa, klient 23.09.2026) */
.pw__nav { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 5; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.pw__nav > * { pointer-events: auto; }
.pw__wroc { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 42px; border: 1px solid var(--hair); background: rgba(255,255,255,.96); color: var(--deep); border-radius: 999px; padding: 0 17px 0 14px;
  font: 600 16px/1 var(--display); text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 20px -12px rgba(1,37,64,.5); transition: background .2s var(--ease); }
/* ten sam wygląd co pigułka pięter po prawej: wysokość, krój, tło po najechaniu */
.pw__wroc::before { content: "←"; font-family: var(--font); font-size: 15px; }
.pw__wroc:hover { background: var(--paper); }
/* obrót budynku: stała szerokość napisu, żeby pigułka nie skakała */
.pw-obrot__b { font-family: var(--font); font-size: 22px; line-height: 1; padding-bottom: 3px; }
.pw-obrot__n { min-width: 150px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--deep); text-transform: uppercase; letter-spacing: .02em; }
.pw-seg { display: flex; align-items: center; background: rgba(255,255,255,.96); border: 1px solid var(--hair); border-radius: 999px; padding: 3px; box-shadow: 0 8px 20px -12px rgba(1,37,64,.5); }
.pw-seg__lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 8px 0 11px; }
.pw-seg__f { border: 0; background: none; border-radius: 999px; min-width: 38px; height: 34px; padding: 0 10px; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--deep); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.pw-seg__f:hover, .pw-seg__f.is-hl { background: var(--paper); }
.pw-seg__f.is-on { background: var(--deep); color: #fff; cursor: default; }
.pw__legenda { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.pw__legenda li { display: flex; align-items: center; gap: 6px; }
.pw__legenda b { color: var(--deep); font-weight: 600; margin-left: 2px; }
.pw-sw { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.pw-sw--dostepne { background: var(--st-dostepne); }
.pw-sw--rezerwacja { background: var(--st-rezerwacja); }
.pw-sw--sprzedane { background: var(--st-sprzedane); }
/* legenda na rzucie: lewy dolny róg ramki */
.pw-leg { position: absolute; left: 10px; bottom: 10px; z-index: 4; display: flex; gap: 14px; list-style: none; margin: 0; padding: 8px 14px;
  background: rgba(255,255,255,.96); border: 1px solid var(--hair); border-radius: 999px; box-shadow: 0 8px 20px -12px rgba(1,37,64,.5); font-size: 12px; color: var(--deep); }
.pw-leg li { display: flex; align-items: center; gap: 6px; }
/* na telefonie rzut jest niski, legenda zasłaniała lokale - te same kolory
   z liczbami są w legendzie nad listą, tuż pod rzutem */
@media (max-width: 700px) { .pw-rzut__ramka .pw-leg { display: none; } }
.pw__cialo, .pw__scena { display: grid; gap: 12px; }
/* minmax(0, 1fr) i min-width: 0 - inaczej przewijany rzut (900 px na
   telefonie) rozpycha kolumnę siatki, a z nią całą stronę */
.pw__cialo { position: relative; }
.pw__cialo, .pw__scena { min-width: 0; grid-template-columns: minmax(0, 1fr); }
/* przejście zdjęcie <-> rzut bez animacji (klient, 23.09.2026) - ta zostaje
   tylko przy otwieraniu powiększenia */
@keyframes pwWejscie { from { opacity: 0; transform: translateY(8px); } }
.pw__podpowiedz { margin: 0; font-size: 13px; color: var(--muted); }
/* Pod planem bez podpowiedzi (klient, 23.09.2026) - linijka tylko pod
   rzutem zmieniałaby wysokość planu przy wejściu na piętro. Tekst rzutu
   zostaje w nagłówku powiększenia, które bierze go z tego elementu. */
.pw-plan .pw__podpowiedz { display: none; }

/* krok 1: wizualizacja z pasmami pięter */
.pw-widok { border-radius: 6px; overflow: hidden; background: var(--panel); }
.pw-svg { display: block; width: 100%; height: auto; }
.pw-pietro { fill: rgba(255,255,255,0); stroke: rgba(255,255,255,0); stroke-width: 2; cursor: pointer; outline: none; transition: fill .2s var(--ease), stroke .2s var(--ease); }
/* granat, nie oliwka - oliwka to na planie kolor rezerwacji */
.pw-pietro:hover, .pw-pietro:focus-visible, .pw-pietro.is-hl { fill: rgba(1,37,64,.42); stroke: #fff; }
.pw-pietro.is-uslugi:hover, .pw-pietro.is-uslugi:focus-visible, .pw-pietro.is-uslugi.is-hl { fill: rgba(139,174,205,.55); }
.pw-pietro.is-bez:hover, .pw-pietro.is-bez.is-hl { fill: rgba(214,221,227,.55); }
.pw-pietra { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pw-pietra__poz { display: grid; gap: 2px; text-align: left; border: 1px solid var(--hair); background: #fff; border-radius: 8px; padding: 9px 11px; cursor: pointer; font: inherit; transition: border-color .2s var(--ease), background .2s var(--ease); }
.pw-pietra__poz b { font-family: var(--display); font-weight: 600; font-size: 16px; text-transform: uppercase; color: var(--deep); }
.pw-pietra__poz span { font-size: 12px; color: var(--muted); }
.pw-pietra__poz:hover, .pw-pietra__poz.is-hl { border-color: var(--deep); background: var(--paper); }
.pw-pietra__poz.is-bez span { color: var(--grey); }
.pw-pietra__poz.is-uslugi { background: var(--paper); }

/* krok 2: rzut kondygnacji z pinezkami lokali */
.pw-rzut__przewin { overflow-x: auto; border-radius: 6px; background: #fff; border: 1px solid var(--hair); }
/* Na szerokim ekranie ramka rzutu ma proporcje zdjęcia budynku (zmienna
   ustawiana w krokRzut), rzut stoi w niej na środku w pionie - zdjęcie
   i rzut mają tę samą wysokość, więc nic pod nimi nie skacze. Na telefonie
   rzut przewija się w bok i ma własną wysokość. */
@media (min-width: 701px) {
  .pw-rzut__ramka .pw-rzut__przewin { aspect-ratio: var(--kadr-widoku, auto); box-sizing: border-box; }
  /* Lista pięter pod zdjęciem dokładała ~80 px, których pod rzutem nie ma,
     więc tabela skakała przy każdym wejściu na piętro. Na szerokim ekranie
     te same piętra są w pigułce na zdjęciu, a liczby w karcie pod kursorem;
     na telefonie lista zostaje - tam pigułki na zdjęciu nie ma. */
  .pw-pietra { display: none; }
}
.pw-rzut { position: relative; width: 100%; }
/* róża wiatrów w pustym miejscu przy skrzydle B (to samo na parterze);
   rzut jest obrócony o 180°, więc miejsce to lustro dawnego left/top */
.pw-roza { position: absolute; right: 24%; bottom: 5%; width: 58px; height: 58px; pointer-events: none; z-index: 1; }
.pw-roza svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pw-roza circle { fill: rgba(255,255,255,.9); stroke: var(--hair); stroke-width: 1; }
.pw-roza__n { fill: var(--deep); }
.pw-roza__s { fill: #C9D2DA; }
.pw-roza text { font: 700 11px/1 var(--font); fill: var(--deep); text-anchor: middle; dominant-baseline: central; }
.pw-rzut img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pw-rzut__cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--deep); color: #fff; border-radius: 999px; padding: 12px 20px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 14px 30px -14px rgba(1,37,64,.7); }
.pw-rzut__cta:hover { background: var(--hi-2); color: var(--deep); }
.pw-lokal { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; border: 2px solid var(--deep); background: #fff; color: var(--deep); border-radius: 999px; padding: 3px; cursor: pointer; font: inherit; box-shadow: 0 8px 18px -10px rgba(1,37,64,.6); transition: background .2s var(--ease), border-color .2s var(--ease); z-index: 1; }
.pw-lokal__nr { min-width: 24px; height: 24px; border-radius: 12px; display: inline-grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 14px; padding: 0 4px; }
/* opis rozwija się po najechaniu, żeby pinezki nie zasłaniały rzutu */
.pw-lokal__opis { display: none; font-size: 12px; white-space: nowrap; padding-right: 8px; }
.pw-lokal:hover, .pw-lokal:focus-visible, .pw-lokal.is-hl { z-index: 3; }
/* przy myszy opis pokazuje podgląd pod kursorem (jak w tabeli), więc pinezka
   rozwija się tylko z klawiatury i przy podświetleniu z listy */
.pw-lokal:focus-visible .pw-lokal__opis, .pw-lokal.is-hl .pw-lokal__opis { display: inline; }
@media (hover: none), (pointer: coarse) { .pw-lokal:hover .pw-lokal__opis { display: inline; }}
/* pinezka w pełnym kolorze statusu, numer na biało, biały obrys odcina
   ją od rysunku; najechanie / podświetlenie z listy - granatowy obrys */
.pw-lokal.is-dostepne, .pw-lokal.is-rezerwacja, .pw-lokal.is-sprzedane { border-color: #fff; color: #fff; }
.pw-lokal.is-dostepne { background: var(--st-dostepne); }
.pw-lokal.is-rezerwacja { background: var(--st-rezerwacja); }
.pw-lokal.is-sprzedane { background: var(--st-sprzedane); }
.pw-lokal:hover, .pw-lokal.is-hl { box-shadow: 0 0 0 3px var(--deep), 0 8px 18px -10px rgba(1,37,64,.6); }
.pw-lokal.is-poza { opacity: .35; }
.pw-lokal.is-wybrany { background: var(--deep); border-color: var(--deep); color: #fff; }
/* Przybliżanie rzutu na miejscu, w ramce planu (klient, 25.09.2026 -
   wcześniej osobne okno „Powiększ rzut"). Rzut ma szerokość w px
   ustawianą przez ustawSkale() (od całości do 100% pliku), a ramka go
   przewija. margin: auto trzyma mniejszy rzut na środku i nie ucina
   większego (flex + align-items: center uciąłby górę). */
.pw-rzut__ramka { position: relative; }
.pw-rzut__przewin.is-zoom { overflow: auto; display: flex; cursor: grab; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.pw-rzut__przewin.is-zoom.is-ciagniety { cursor: grabbing; user-select: none; }
.pw-rzut__przewin.is-zoom.is-calosc { cursor: zoom-in; }
.pw-rzut__przewin.is-zoom { background: #fff; }
.pw-stol { flex: none; margin: auto; box-sizing: content-box; }

.pw-rzut__przewin.is-zoom img { -webkit-user-drag: none; user-select: none; }
@media (max-width: 700px) {
  /* Na telefonie rzut jest niski i przewijany w poziomie - nakładka
     zasłaniałaby lokale, więc nawigacja stoi nad nim jako zwykły rząd.
     Na zdjęciu budynku jej nie ma: piętra są w liście pod zdjęciem. */
  .pw__nav { position: static; flex-wrap: wrap; gap: 8px; }
  /* na zdjęciu budynku z nawigacji zostaje tylko obrót - piętra są
     w liście pod zdjęciem */
  .pw-plan:not(.pw--pietro) .pw__nav .pw-seg:not(.pw-obrot) { display: none; }
  .pw-obrot { margin-left: 0; }
  .pw__wroc { height: 40px; padding: 0 14px 0 12px; font-size: 15px; }
  .pw-seg { margin-left: auto; }
  .pw-seg__lbl { display: none; }
  .pw-seg__f { min-width: 34px; height: 32px; padding: 0 8px; }
  /* Ramka rzutu ma stałą wysokość, a rzut startuje w 1100 px szerokości
     (poniżej 1000 px pinezki robią się kropkami bez numerów, @container)
     i przewija się w bok; stuknięcie przybliża, szczypanie też działa. */
  .pw-rzut__przewin.is-zoom { height: 300px; }
  .pw-pietra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-pietra__poz:first-child { grid-column: 1 / -1; }
  .pw__legenda { gap: 10px; font-size: 11px; }
}

/* ── Plan z panelem (/mieszkania) ─────────────────────────────
   Kierunek 1 z sandboxa (wzór: wyszukiwarka 3D Atala). Na szerokim ekranie
   plan przyklejony po lewej, a filtry i wyniki w panelu po prawej, więc
   wybór na planie i lista zawsze stoją obok siebie. Wybór budynku i piętra
   zawęża listę, filtry przygaszają lokale na planie, a najechanie na wiersz
   albo kafelek podświetla go na planie (i odwrotnie). */

/* pasek kontekstu: zakres z planu, aktywne filtry, licznik, widok, filtry */
.kontekst { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 0 0 16px; margin: 0 0 18px; border-bottom: 1px solid var(--hair); }
.kontekst__lewo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; }
.kontekst__prawo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kontekst .viewtog { margin-left: 0; }
.kontekst__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 13px; border-radius: 999px; background: rgba(151,152,64,.16); color: var(--ink); font-size: 13px; }
.kontekst__chip button { border: 0; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; }
.kontekst__chip button { background: #fff; color: var(--deep); }
.kontekst__wyczysc { border: 0; background: none; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer; padding: 6px 4px; }
.kontekst__wyczysc:hover { color: var(--accent); }
.kontekst__filtry { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--deep); background: #fff; color: var(--deep); border-radius: 999px;
  padding: 9px 16px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.kontekst__filtry:hover, .kontekst__filtry.is-open { background: var(--deep); color: #fff; }
.kontekst__filtry i { font-style: normal; min-width: 20px; height: 20px; border-radius: 10px; background: var(--hi-2); color: var(--deep); display: inline-grid; place-items: center; font-size: 11px; padding: 0 5px; }
.kontekst__filtry i:empty { display: none; }


/* podświetlenia plan <-> lista */
.finder__table tbody tr.is-hl { background: rgba(151,152,64,.16); box-shadow: inset 3px 0 0 var(--accent); }
.card.is-hl { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* Filtry zwinięte w panelu i rozwijane przyciskiem „Filtry". Poniżej 981 px
   robi to pływający pasek (reguły wyżej), tu - szeroki ekran. */
@media (min-width: 981px) {
  .finder__filters { display: none; }
  /* Jeden niski rząd pigułek z etykietą w środku (wariant B z sandboxa,
     klient 23.09.2026): „Pokoje 1 2 3 4", „Piętro: Wszystkie ▾" ...,
     a metraż i cena jako przyciski z suwakiem w rozwijanym panelu.
     Wcześniej filtry zajmowały ok. 410 px wysokości, teraz ok. 70. */
  .finder__filters.is-open {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 12px 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--hair);
  }
  .finder__filters.is-open .finder__group { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 0; padding: 0; border-right: 0; min-width: 0; }
  .finder__filters.is-open .finder__label { display: none; }
  #roomPills { flex-wrap: nowrap; gap: 2px; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; background: #fff; }
  #roomPills::before { content: "Pokoje"; align-self: center; font-size: 13px; color: var(--muted); padding: 0 6px 0 11px; }
  #roomPills .pw { display: none; }
  #roomPills .pill-btn { border: 0; min-width: 32px; justify-content: center; padding: 6px 10px; }
  .finder__filters .ms__btn { height: 40px; }
  .ms__pre { display: inline; color: var(--muted); margin-right: -3px; }
  .ms.has-sel .ms__pre { color: inherit; opacity: .75; }
  .zakres__v { font-weight: 600; color: var(--deep); }
  .zakres.has-sel .zakres__v { color: inherit; }
  .zakres .zakres__btn { display: inline-flex; }
  .zakres .zakres__pop { position: absolute; display: none; width: 300px; padding: 14px 18px 16px; gap: 8px;
    background: #fff; border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 20px 46px -20px rgba(18,49,74,.5); }
  .zakres.is-open .zakres__pop { display: grid; }
  /* cena stoi na końcu rzędu - panel otwiera się w lewo, żeby nie wyjść za ekran */
  #zakresPrice .zakres__pop { left: auto; right: 0; }
  .zakres__t { display: block; }
  .zakres__t { font-size: 12px; color: var(--muted); }
  .zakres__t b { color: var(--deep); font-weight: 600; margin-left: 4px; }
  .finder__reset { display: none; }
  .finder__reset.is-open { display: block; margin: -4px 0 18px auto; }
}
/* na telefonie filtry otwiera pływający pasek, drugi przycisk byłby dublem */
@media (max-width: 980px) { .kontekst__filtry { display: none; } }

/* Plan i lista w rzędach, nie w kolumnach: zdjęcie albo rzut na pełną
   szerokość, pod nim pasek z przełącznikami i legendą, niżej tabela albo
   kafelki w pełnym układzie. Wcześniejszy układ „plan z panelem" (plan
   przyklejony po lewej) ściskał tabelę do sześciu kolumn. */
/* Stary „Wyczyść filtry" pod panelem filtrów znika: ten sam przycisk jest w pasku
   kontekstu, a stary czyścił też budynek i piętro, rozjeżdżając listę z planem.
   Zostaje w znaczniku, bo search.js wiąże się z nim po ID. */
.wybor .finder__reset { display: none !important; }
/* Licznik wyników nie stoi w pasku - widać go w pływającym pasku na telefonie,
   który go przepisuje, więc element zostaje, tylko dla czytnika ekranu. */
.kontekst .finder__count {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* widok i filtry dociśnięte do prawej krawędzi panelu */
.kontekst__prawo { margin-left: auto; justify-content: flex-end; }
/* rząd pod przełącznikami: pigułki zakresu i filtrów po lewej, legenda planu po prawej */
.kontekst__lewo { justify-content: space-between; }
.kontekst__chipy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.kontekst__chipy:empty { display: none; }
.kontekst__legenda { margin-left: auto; }
.kontekst__legenda:empty { display: none; }
/* poniżej 1100 px pasek to zwykły wiersz flex - przełączniki pierwsze, legenda pod nimi */
.kontekst__prawo { order: -1; }
/* Rząd z legendą ma stałą wysokość (pigułki filtra, 36 px) - bez tego
   pigułka filtra podnosiła rząd i tabela skakała o kilkanaście pikseli. */
.kontekst__lewo { min-height: 36px; }

/* Udostępnianie pod tytułem karty - adres zawiera ?lokal=<id> */
.udost { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.udost__lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); margin-right: 4px; }
.udost__b { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--hair); border-radius: 50%;
  background: #fff; color: var(--deep); font: inherit; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.udost__b[hidden] { display: none; }
.udost__b svg { width: 16px; height: 16px; }
.udost__b:hover { border-color: var(--deep); background: var(--deep); color: #fff; }
.udost__b--link { display: inline-flex; align-items: center; gap: 7px; width: auto; padding: 0 12px 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.udost__b--link svg { width: 15px; height: 15px; }
.udost__b--link.is-ok, .udost__b--link.is-ok:hover { background: rgba(151,152,64,.16); border-color: var(--accent); color: var(--deep); }
/* na wąskim telefonie bez napisu „Udostępnij", żeby ikony i „Kopiuj link" zmieściły się w jednym rzędzie */
@media (max-width: 420px) { .udost__lbl { display: none; } }

/* Rzut węższy niż ~1000 px (kolumna obok listy, telefon) mieści 36 lokali
   piętra tylko jako kropki - numery nachodziły na siebie. Numer i opis
   pokazują się po najechaniu albo fokusie, a pełne pinezki z numerami są
   w powiększeniu. */
.pw-rzut { container-type: inline-size; }
@container (max-width: 1000px) {
  .pw-lokal { padding: 0; gap: 0; }
  .pw-lokal__nr { min-width: 13px; height: 13px; border-radius: 50%; padding: 0; font-size: 0; transition: min-width .15s var(--ease), font-size .15s var(--ease); }
  .pw-lokal:hover, .pw-lokal:focus-visible, .pw-lokal.is-hl, .pw-lokal.is-wybrany { padding: 3px; gap: 8px; }
  .pw-lokal:hover .pw-lokal__nr, .pw-lokal:focus-visible .pw-lokal__nr, .pw-lokal.is-hl .pw-lokal__nr, .pw-lokal.is-wybrany .pw-lokal__nr { min-width: 24px; height: 24px; border-radius: 12px; padding: 0 4px; font-size: 14px; }

}
/* Pasek nad listą w jednym rzędzie: przełączniki po lewej, legenda na tej
   samej wysokości po prawej. Pigułki aktywnych filtrów, gdy są, schodzą do
   drugiego rzędu na całą szerokość. .kontekst__lewo nie ma własnego pudełka,
   więc pigułki i legenda układają się jako osobne elementy paska. */
.kontekst__lewo { display: contents; }
.kontekst__prawo { order: 1; margin-left: 0; justify-content: flex-start; }
.kontekst__legenda { order: 2; margin-left: auto; }
.kontekst__chipy { order: 3; flex: 1 1 100%; }

/* Karta lokalu, zakładka „Na piętrze": rzut piętra z zaznaczonym lokalem */
.mpanel[data-panel="polozenie"] { background: #fff; }
/* min-width: 0 - inaczej rzut (min. 760 px) rozpycha kolumnę karty na telefonie */
.modal__media, .modal__panels, .mpanel[data-panel="polozenie"], .mpanel__pol { min-width: 0; }
.mpanel__pol { width: 100%; }
.pw-pol__przewin { width: 100%; overflow-x: auto; }
.pw-pol { position: relative; width: 100%; min-width: 760px; }
.pw-pol img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pw-pol__kropka { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(1,37,64,.22); }
.pw-pol__ten { position: absolute; transform: translate(-50%, -50%); z-index: 2; min-width: 34px; height: 34px; padding: 0 7px; border-radius: 17px;
  display: grid; place-items: center; background: var(--deep); color: #fff; border: 2px solid #fff;
  font-family: var(--display); font-weight: 600; font-size: 16px; box-shadow: 0 0 0 6px rgba(151,152,64,.45), 0 10px 22px -10px rgba(1,37,64,.7); }
.pw-pol .pw-roza { width: 46px; height: 46px; }
/* trzy zakładki karty muszą się zmieścić przed krzyżykiem zamykania */
@media (max-width: 460px) { .modal__tabs { padding-right: 46px; gap: 0; } .mtab { padding: 10px 8px; letter-spacing: .03em; font-size: 11.5px; } }

/* /mieszkania bez danych z voxCRM: sam komunikat, bez pustych kontrolek */
.finder.is-bez-danych > :not(.finder__blad) { display: none !important; }
.finder__blad { padding: 22px 24px; background: #fff; border: 1px solid var(--hair); border-left: 3px solid var(--deep); border-radius: 6px; color: var(--deep); }
.finder__blad p { margin: 0; }
.finder__blad a { font-weight: 600; white-space: nowrap; }

/* tekst tylko dla czytników ekranu (i hierarchii nagłówków) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Komunikat etapu (przedsprzedaż, rachunki powiernicze) - komponent Komunikat */
.komunikat { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 clamp(18px, 2vw, 26px); padding: 12px 16px; max-width: 760px;
  background: #fff; border: 1px solid var(--hair); border-left: 3px solid var(--deep); border-radius: 6px; font-size: 14.5px; line-height: 1.5; color: var(--deep); font-weight: 500; }
.komunikat .ikona { flex: none; font-size: 20px; margin-top: 1px; color: var(--deep); }
.komunikat--mieszkania { margin-top: -6px; }

/* ── Zakładki „Oś czasu | Kronika budowy" (/etapy, /kronika-budowy) ──────
   Pod wspólnym wstępem (EtapyWstep) na obu stronach w tym samym miejscu,
   żeby przejście między nimi niczego nie przesuwało. Wygląd przełącznika
   widoku z /mieszkania, tylko większy - pod leadem nie może ginąć. */
.etapy-wstep { padding-bottom: 0; }
.zakl { padding: clamp(28px, 3.2vw, 44px) 0 0; }
.zakl__tog { margin-left: 0; }
.zakl__tog .viewtog__btn { text-decoration: none; padding: 11px 22px; font-size: 13px; }
.zakl__n { opacity: .6; font-weight: 400; margin-left: 6px; }
/* sekcja pod zakładkami bez pełnego rytmu - zakładki już oddzielają ją od nagłówka */
.zakl + .section { padding-top: clamp(22px, 2.6vw, 34px); }

/* ── Kronika budowy (/kronika-budowy, public/js/kronika.js) ────────────── */
.kronika__wstep { margin: 0 0 18px; max-width: 62ch; color: var(--muted); font-size: 15px; }
.kronika__filtr { margin-bottom: 26px; }
.kronika__n { opacity: .6; margin-left: 2px; }
.kronika__siatka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; }
.kronika__rok { grid-column: 1 / -1; margin: 18px 0 -6px; font-size: clamp(22px, 2vw, 28px); }
.kronika__rok:first-child { margin-top: 0; }
.kronika__kafel { display: flex; flex-direction: column; gap: 7px; color: inherit; text-decoration: none; cursor: zoom-in; }
.kronika__kafel img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--panel); }
.kronika__kafel:hover img { filter: brightness(1.05); }
.kronika__meta { font-size: 12px; color: var(--muted); }
.kronika__meta b { font-weight: 600; color: var(--deep); }
.kronika__opis { font-size: 14px; line-height: 1.45; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kronika__wiecej { margin-top: 30px; }
/* elementy z display flex/grid nie chowają się same od atrybutu hidden */
.kronika__filtr[hidden], .kronika__kafel[hidden], .kronika__rok[hidden], .kronika__wiecej[hidden] { display: none; }

.kronika-lb__fig { position: relative; margin: 0; max-width: 92vw; }
.kronika-lb__fig img { display: block; max-width: 92vw; max-height: 80vh; margin: 0 auto; border-radius: 2px; }
.kronika-lb__fig figcaption { margin-top: 12px; color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.5; text-align: center; max-width: 80ch; margin-left: auto; margin-right: auto; }
.kronika-lb__fig figcaption b { font-weight: 600; color: #fff; margin-right: 4px; }
.kronika-lb__licz { opacity: .55; margin-left: 8px; white-space: nowrap; }

@media (max-width: 860px) {
  .kronika__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .kronika__opis { font-size: 13px; }
  .kronika-lb .lightbox__nav { width: 40px; height: 40px; }
  .kronika-lb .lightbox__nav--prev { left: 8px; } .kronika-lb .lightbox__nav--next { right: 8px; }
}