/* ==========================================================================
   GreenVille — green-ville.waw.pl
   Arkusz stylow. Mobile-first (od 375 px w gore).
   Kolejnosc: zmienne, reset, typografia, elementy wspolne, sekcje, komponenty.
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   2. ZMIENNE — paleta i skala. Tu zmieniasz kolorystyke calej strony.
   -------------------------------------------------------------------------- */
:root {
  --green-dark: #1B4332;   /* naglowki, sekcje kontrastowe */
  --green:      #2D6A4F;   /* akcenty */
  --gold:       #B7935B;   /* CTA, wyroznienia (tlo) */
  --gold-deep:  #856539;   /* zloty do TEKSTU na jasnym tle — przyciemniony tak, zeby spelnial
                              WCAG AA na bieli (5,4:1) i na piaskowym tle (4,9:1) */
  --gold-jasny: #D4B483;   /* zloty do TEKSTU na ciemnozielonym tle (5,6:1) */
                           /* --gold uzywaj wylacznie do teł, obramowan i elementow dekoracyjnych */
  --sand:       #F7F5F0;   /* tla sekcji */
  --ink:        #1A1A1A;
  --muted:      #5F6B66;
  --line:       #E3E0D8;
  --white:      #FFFFFF;
  --wa:         #25D366;   /* zielen WhatsApp */
  --wa-dark:    #075E54;

  --radius:     4px;
  --radius-lg:  8px;
  --shadow-sm:  0 1px 2px rgba(27, 67, 50, .06), 0 2px 8px rgba(27, 67, 50, .05);
  --shadow-md:  0 4px 16px rgba(27, 67, 50, .09), 0 12px 32px rgba(27, 67, 50, .07);
  --shadow-lg:  0 8px 24px rgba(27, 67, 50, .12), 0 24px 60px rgba(27, 67, 50, .14);

  --wrap:       1200px;
  --gutter:     20px;
  --header-h:   62px;
  --sekcja-y:   clamp(56px, 8vw, 104px);
}

/* --------------------------------------------------------------------------
   3. RESET / PODSTAWY
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
/* Uwaga: swiadomie NIE ustawiamy tu `overflow-x: hidden` — zrobiloby z <body>
   kontener przewijania i zepsulo `position: sticky` w naglowku oraz w tabeli lokali.
   Szerokie elementy (tabela porownawcza, tabele w polityce) przewijaja sie
   we wlasnych kontenerach z `overflow-x: auto`. */
body.blokada-scrolla { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Pomijanie nawigacji dla klawiatury / czytnikow ekranu */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--green-dark); color: #fff; padding: 10px 16px;
  border-radius: var(--radius); text-decoration: none; font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--green-dark);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 7.2vw, 4rem); }
h2 { font-size: clamp(1.55rem, 4.2vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.3; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.nadtytul {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.lead {
  font-size: clamp(1.02rem, 1.9vw, 1.2rem);
  color: var(--muted);
  max-width: 62ch;
}
.malo { font-size: .8125rem; line-height: 1.55; color: var(--muted); }

/* --------------------------------------------------------------------------
   5. UKLAD
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 32px; } }

.sekcja { padding-block: var(--sekcja-y); }
.sekcja--sand { background: var(--sand); }
.sekcja--dark { background: var(--green-dark); color: var(--sand); }
.sekcja--dark h2, .sekcja--dark h3 { color: #fff; }
.sekcja--dark .nadtytul { color: var(--gold-jasny); }
.sekcja--dark .lead, .sekcja--dark .malo { color: rgba(255, 255, 255, .8); }

.sekcja-naglowek { max-width: 68ch; margin-bottom: clamp(28px, 4vw, 48px); }

/* Kotwice nie chowaja sie pod sticky headerem */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* --------------------------------------------------------------------------
   6. PRZYCISKI
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: .95rem; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Zloty CTA — ciemny tekst zapewnia kontrast WCAG AA (6.1:1) */
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #a37f48; color: var(--ink); }

.btn--dark { background: var(--green-dark); color: #fff; }
.btn--dark:hover { background: #143528; color: #fff; }

.btn--outline { background: transparent; color: var(--green-dark); border-color: var(--line); }
.btn--outline:hover { background: var(--sand); border-color: var(--green); color: var(--green-dark); }

.btn--jasny { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(4px); }
.btn--jasny:hover { background: rgba(255, 255, 255, .22); color: #fff; }

.btn--wa { background: var(--wa); color: #05261c; }
.btn--wa:hover { background: #1fbb59; color: #05261c; }

.btn--blok { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header__in {
  display: flex; align-items: center; gap: 12px;
  height: var(--header-h);
}
.logo { display: flex; flex-direction: column; text-decoration: none; margin-right: auto; line-height: 1.05; }
.logo__nazwa { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.03em; color: var(--green-dark); }
.logo__nazwa b { font-weight: 600; color: var(--gold-deep); }
.logo__pod { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

.nav { display: none; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 8px 12px; border-radius: var(--radius);
  font-size: .9rem; font-weight: 500; color: var(--ink); text-decoration: none;
}
.nav a:hover { background: var(--sand); color: var(--green-dark); }

.header__tel {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font-weight: 600; font-size: .9rem; color: var(--green-dark); text-decoration: none;
  white-space: nowrap;
}
.header__tel:hover { border-color: var(--green); background: var(--sand); }
.header__tel svg { width: 16px; height: 16px; }
.header__tel span { display: none; }
.header .btn { display: none; }

/* Hamburger */
.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.hamburger span { position: relative; display: block; width: 18px; height: 2px; background: var(--green-dark); }
.hamburger span::before, .hamburger span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--green-dark);
  transition: transform .2s ease, top .2s ease;
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }
.hamburger[aria-expanded="true"] span { background: transparent; }
.hamburger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.menu-mobilne {
  display: none;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 12px var(--gutter) 20px;
}
.menu-mobilne.otwarte { display: block; }
.menu-mobilne ul { list-style: none; margin: 0 0 14px; padding: 0; }
.menu-mobilne a {
  display: block; padding: 13px 4px; border-bottom: 1px solid var(--line);
  font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: none;
}

@media (min-width: 1000px) {
  :root { --header-h: 74px; }
  .nav { display: block; }
  .hamburger { display: none; }
  .menu-mobilne { display: none !important; }
  .header .btn { display: inline-flex; }
  .header__tel span { display: inline; }
  .logo__nazwa { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero { position: relative; min-height: 90vh; display: flex; align-items: flex-end; isolation: isolate; }
.hero__tlo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__tlo img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.hero__tlo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 30, 22, .58) 0%, rgba(10, 30, 22, .42) 42%, rgba(10, 30, 22, .80) 100%);
}
.hero__in { width: 100%; padding-block: clamp(96px, 14vh, 140px) clamp(28px, 5vw, 56px); color: #fff; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 100px;
  background: rgba(255, 255, 255, .12); backdrop-filter: blur(4px);
  font-size: .78rem; font-weight: 500; letter-spacing: .01em; color: #fff;
}
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }

.hero h1 { color: #fff; max-width: 15ch; margin-bottom: 12px; text-shadow: 0 2px 24px rgba(0, 0, 0, .3); }

/* Linia lokalizacyjna pod H1 — pierwsza rzecz, ktora ma zobaczyc zimny ruch */
.hero__gdzie {
  display: inline-block; margin: 0 0 16px;
  padding: 6px 0; font-size: clamp(.95rem, 2.2vw, 1.08rem); font-weight: 600;
  letter-spacing: -0.01em; color: #fff;
  border-bottom: 2px solid var(--gold);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.hero__lead { font-size: clamp(1rem, 2.1vw, 1.2rem); color: rgba(255, 255, 255, .93); max-width: 54ch; margin-bottom: 28px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(32px, 6vw, 52px); }
.hero__cta .btn { flex: 1 1 auto; min-width: 200px; }

.liczby {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-lg);
  overflow: hidden;
}
.liczby > div { background: rgba(12, 33, 24, .55); backdrop-filter: blur(6px); padding: 16px 14px; }
.liczby dt { font-size: clamp(1.15rem, 3.4vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.liczby dd { margin: 4px 0 0; font-size: .78rem; line-height: 1.4; color: rgba(255, 255, 255, .82); }
@media (min-width: 860px) { .liczby { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   9. ATUTY — 6 kafelkow
   -------------------------------------------------------------------------- */
.kafelki { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .kafelki { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .kafelki { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.kafel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 22px 24px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.kafel:hover { border-color: #cfd8d1; box-shadow: var(--shadow-sm); }
.kafel__ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: 50%; background: var(--sand); color: var(--green);
}
.kafel__ikona svg { width: 24px; height: 24px; }
.kafel h3 { margin-bottom: 8px; }
.kafel p { color: var(--muted); font-size: .95rem; margin: 0; }

/* --------------------------------------------------------------------------
   10. PORÓWNANIE blok vs parter
   -------------------------------------------------------------------------- */
.porownanie { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.porownanie table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }

/* Na telefonie tabela MUSI zmiescic sie w calosci — kolumna „Parter w GreenVille"
   to pointa tej sekcji i nie moze chowac sie poza ekranem. Zwezamy typografie
   i odstepy zamiast przewijac w poziomie. */
@media (max-width: 719px) {
  /* table-layout: fixed sprawia, ze procenty sa respektowane, a dlugie etykiety
     zawijaja sie zamiast rozpychac kolumne */
  .porownanie table { min-width: 0; width: 100%; table-layout: fixed; }
  .porownanie th, .porownanie td { padding: 12px 6px; font-size: .8125rem; line-height: 1.4; }
  .porownanie th:first-child, .porownanie td:first-child { padding-left: 0; }
  .porownanie thead th { font-size: .65rem; letter-spacing: .04em; }
  .porownanie tbody th { width: 32%; }
  .porownanie caption { font-size: .78rem; }
}
.porownanie caption { text-align: left; color: rgba(255, 255, 255, .78); font-size: .85rem; padding-bottom: 14px; }
.porownanie th, .porownanie td {
  padding: 15px 14px; border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: .95rem; vertical-align: top;
}
.porownanie thead th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, .7); }
.porownanie thead th:last-child { color: var(--gold-jasny); }
.porownanie tbody th { font-weight: 500; color: rgba(255, 255, 255, .82); width: 34%; }
.porownanie td { color: rgba(255, 255, 255, .88); }
.porownanie td:last-child { color: #fff; font-weight: 600; background: rgba(255, 255, 255, .06); }
.porownanie tbody tr:last-child th, .porownanie tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   11. LOKALE — para wyrozniona + filtry + tabela + karty
   -------------------------------------------------------------------------- */
/* Wprowadzenie nad para kart. Niesie glowny argument cenowy (roznica 2068 zl),
   wiec ma byc czytelne, ale nie krzykliwe. Kwota wyrozniona przez <strong>,
   z zakazem lamania, zeby "2 068 zl" nie rozjechalo sie na dwie linie. */
.para-wstep { max-width: 62ch; margin: 0 0 18px; }
.para-wstep strong { white-space: nowrap; }

.para { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 18px; }
@media (min-width: 760px) { .para { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

.para-karta {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: var(--shadow-sm);
}
.para-karta--wyroz { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-md); }
.para-karta__tag {
  display: inline-block; padding: 4px 10px; margin-bottom: 14px;
  border-radius: 100px; background: var(--sand); color: var(--gold-deep);
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.para-karta h3 { font-size: 1.5rem; margin-bottom: 14px; }
.para-karta dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0 0 20px; }
.para-karta dt { color: var(--muted); font-size: .9rem; }
.para-karta dd { margin: 0; text-align: right; font-weight: 600; font-size: .95rem; color: var(--green-dark); }
.para-karta dd.duza { font-size: 1.22rem; letter-spacing: -0.02em; }
.para-karta .akcje { display: flex; gap: 10px; flex-wrap: wrap; }
.para-karta .akcje .btn { flex: 1 1 140px; }

.para-podsum {
  margin: 0 0 clamp(36px, 5vw, 56px);
  padding: 18px 20px; border-left: 3px solid var(--gold); background: var(--sand);
  font-size: clamp(1rem, 2.2vw, 1.15rem); font-weight: 500; color: var(--green-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Panel sterowania tabela */
.sterowanie {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  justify-content: space-between; margin-bottom: 18px;
}
.filtry { display: flex; flex-wrap: wrap; gap: 8px; }
.filtry button {
  padding: 9px 15px; min-height: 42px;
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  font-size: .875rem; font-weight: 500; color: var(--ink); cursor: pointer;
  transition: all .16s ease;
}
.filtry button:hover { border-color: var(--green); }
.filtry button[aria-pressed="true"] { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.sortowanie { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted); }
.sortowanie select {
  min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); font-size: .875rem; font-family: inherit;
}

.licznik { font-size: .875rem; color: var(--muted); margin-bottom: 14px; }

/* --- plan osiedla nad filtrami ---
   Obraz i SVG maja ten sam uklad wspolrzednych (1600 x 1006), SVG lezy na obrazie.
   Bez JS wielokaty sa przezroczyste, zostaje sam widok osiedla. */
.plan { margin: 0 0 clamp(36px, 5vw, 56px); }
.plan h3 { margin-bottom: 6px; }
.plan__wstep { max-width: 70ch; margin: 0 0 16px; color: var(--muted); font-size: .95rem; }
.plan__ramka {
  position: relative; overflow: hidden; background: var(--sand);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.plan__ramka img { display: block; width: 100%; height: auto; }
.plan__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Na telefonie plan jest szerszy niz ekran i przewija sie w bok, zeby lokale mialy
   wielkosc palca (przy 335 px szerokosci lokal ma ok. 20 px i nie da sie w niego trafic) */
.plan__wskazowka { display: none; margin: 0 0 8px; font-size: .82rem; color: var(--muted); }
@media (max-width: 720px) {
  .plan__wskazowka { display: block; }
  .plan__przewijanie { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: var(--radius-lg); }
  .plan__przewijanie .plan__ramka { width: 900px; }
}
.plan-lokal { fill: transparent; stroke: none; transition: fill .15s ease, stroke .15s ease; }
.plan-lokal--sprzedany { fill: rgba(26, 26, 26, .55); }
.plan-lokal--wolny { fill: rgba(45, 106, 79, .45); stroke: #fff; stroke-width: 1.6; cursor: pointer; outline: none; }
.plan-lokal--wolny:hover,
.plan-lokal--wolny:focus-visible,
.plan-lokal--wolny.jest-aktywny { fill: rgba(183, 147, 91, .85); stroke: var(--green-dark); stroke-width: 2.4; }
.plan-lokal--wolny.jest-poza-filtrem { fill: rgba(26, 26, 26, .22); stroke: none; cursor: default; pointer-events: none; }

.plan__dymek {
  position: absolute; z-index: 3; min-width: 210px; max-width: 280px;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--green-dark); color: rgba(255, 255, 255, .88);
  font-size: .85rem; line-height: 1.45; box-shadow: var(--shadow-lg);
  transform: translate(-50%, calc(-100% - 10px)); pointer-events: none;
}
.plan__dymek strong { display: block; margin-bottom: 2px; color: #fff; font-size: 1.05rem; }
.plan__dymek-cena { display: block; margin-top: 6px; color: var(--gold-jasny); font-weight: 600; font-size: 1rem; white-space: nowrap; }
/* Na ekranie dotykowym dane pokazuje karta pod planem */
@media (hover: none) { .plan__dymek { display: none !important; } }

.plan__legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: .82rem; color: var(--muted); }
.plan__l::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px;
  border-radius: 2px; vertical-align: -1px;
}
.plan__l--wolny::before { background: rgba(45, 106, 79, .8); }
.plan__l--sprzedany::before { background: rgba(26, 26, 26, .55); }
.plan__l--wybrany::before { background: rgba(183, 147, 91, .9); }

.plan__wybrany {
  display: grid; gap: 12px 20px; align-items: center; margin-top: 14px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--gold); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--gold), var(--shadow-sm);
}
.plan__wybrany[hidden] { display: none; }
/* Na telefonie dolny pasek Zadzwon / WhatsApp zaslania dol ekranu:
   przewiniecie do karty zostawia nad nim miejsce */
.plan__wybrany { scroll-margin: calc(var(--header-h) + 12px) 0 120px; }
.plan__wybrany-nr { display: block; font-size: 1.22rem; font-weight: 600; color: var(--green-dark); letter-spacing: -0.02em; }
.plan__wybrany-opis { display: block; margin-top: 2px; font-size: .9rem; color: var(--muted); }
.plan__wybrany-plakietki { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plan__wybrany .hit {
  display: inline-block; padding: 2px 8px; border-radius: 100px;
  background: var(--sand); color: var(--gold-deep); font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.plan__wybrany-cena { font-size: 1.22rem; font-weight: 600; color: var(--green-dark); white-space: nowrap; }
.plan__wybrany-akcje { display: flex; flex-wrap: wrap; gap: 10px; }
.plan__wybrany-akcje .btn { flex: 1 1 150px; }
@media (min-width: 860px) {
  .plan__wybrany { grid-template-columns: 1fr auto auto; }
  .plan__wybrany-akcje .btn { flex: 0 0 auto; }
}

/* --- widok tabeli (>= 760 px) --- */
.lokale-tabela { display: none; }
.lokale-tabela table { width: 100%; border-collapse: collapse; background: #fff; }
.lokale-tabela th, .lokale-tabela td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: right; font-size: .93rem; }
.lokale-tabela th:first-child, .lokale-tabela td:first-child { text-align: left; }
.lokale-tabela td:last-child, .lokale-tabela th:last-child { text-align: center; }
.lokale-tabela thead th {
  position: sticky; top: var(--header-h); z-index: 2;
  background: var(--green-dark); color: #fff; border-bottom: 0;
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
  padding: 0;
}
.lokale-tabela thead th .th-in { display: block; padding: 13px 12px; }
.lokale-tabela thead th button {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 13px 12px;
  background: none; border: 0; cursor: pointer; color: #fff;
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
  justify-content: flex-end;
}
.lokale-tabela thead th:first-child button { justify-content: flex-start; }
.lokale-tabela thead th button:hover { color: var(--gold-jasny); }
.lokale-tabela thead th button .strzalka { opacity: .35; font-size: .8em; }
.lokale-tabela thead th[aria-sort] button .strzalka { opacity: 1; color: var(--gold-jasny); }
.lokale-tabela tbody tr:hover { background: var(--sand); }
.lokale-tabela .nr { font-weight: 600; color: var(--green-dark); font-size: 1rem; }
.lokale-tabela .cena { font-weight: 600; color: var(--green-dark); white-space: nowrap; }
.lokale-tabela .hit {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 100px;
  background: var(--sand); color: var(--gold-deep); font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: middle;
}
.lokale-tabela .btn-rzut {
  padding: 7px 14px; min-height: 38px; white-space: nowrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .82rem; font-weight: 600; color: var(--green-dark); cursor: pointer;
}
.lokale-tabela .btn-rzut:hover { border-color: var(--green); background: var(--sand); }

/* --- widok kart (< 760 px) --- */
.lokale-karty { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lokal-karta { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; }
.lokal-karta__gora { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
/* display:block jest konieczny — to sa <span>-y, ktore musza ukladac sie jeden pod drugim */
.lokal-karta__nr { display: block; font-size: 1.22rem; font-weight: 600; color: var(--green-dark); letter-spacing: -0.02em; line-height: 1.2; }
.lokal-karta__typ { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.lokal-karta__cena { display: block; font-size: 1.16rem; font-weight: 600; color: var(--green-dark); letter-spacing: -0.02em; white-space: nowrap; text-align: right; line-height: 1.2; }
.lokal-karta__cenamp { display: block; font-size: .74rem; color: var(--muted); font-weight: 400; text-align: right; margin-top: 2px; white-space: nowrap; }
.lokal-karta dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.lokal-karta dt { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lokal-karta dd { margin: 2px 0 0; font-size: .95rem; font-weight: 600; color: var(--ink); }
.lokal-karta .hit {
  display: inline-block; margin-bottom: 10px; padding: 3px 9px; border-radius: 100px;
  background: var(--sand); color: var(--gold-deep); font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.lokal-karta .btn { width: 100%; }

/* Tabela ma 9 kolumn i potrzebuje ok. 900 px — ponizej tej szerokosci
   pokazujemy karty, zeby strona nigdy nie przewijala sie w poziomie. */
@media (min-width: 620px) and (max-width: 999px) {
  .lokale-karty { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 1000px) {
  .lokale-tabela { display: block; }
  .lokale-karty { display: none; }
}

.brak-wynikow { padding: 32px 20px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: var(--radius-lg); }

.adnotacja { margin-top: 18px; }

/* --------------------------------------------------------------------------
   12. STANDARD I TECHNOLOGIA
   -------------------------------------------------------------------------- */
.standard-lista { display: grid; gap: 12px; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px)  { .standard-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .standard-lista { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.standard-lista li {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  font-size: .95rem; font-weight: 500;
}
.standard-lista svg { width: 22px; height: 22px; flex: none; color: var(--green); }

.standard-uklad { display: grid; gap: clamp(24px, 4vw, 44px); align-items: center; }
@media (min-width: 900px) { .standard-uklad { grid-template-columns: 1fr 1fr; } }
.standard-foto { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.standard-foto img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   13. LOKALIZACJA
   -------------------------------------------------------------------------- */
.lokalizacja-siatka { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0 0 clamp(28px, 4vw, 44px); padding: 0; }
@media (min-width: 720px)  { .lokalizacja-siatka { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1040px) { .lokalizacja-siatka { grid-template-columns: repeat(4, 1fr); } }
.lok-kafel { padding: 18px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.lok-kafel svg { width: 24px; height: 24px; color: var(--green); margin-bottom: 12px; }
.lok-kafel .dyst { display: block; font-size: 1.32rem; font-weight: 600; letter-spacing: -0.02em; color: var(--green-dark); line-height: 1.1; }
.lok-kafel .opis { display: block; margin-top: 5px; font-size: .85rem; color: var(--muted); line-height: 1.45; }

.mapa { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--sand); }
.mapa iframe { display: block; width: 100%; height: 340px; border: 0; }
@media (min-width: 768px) { .mapa iframe { height: 440px; } }

/* --------------------------------------------------------------------------
   14. GALERIA + LIGHTBOX
   -------------------------------------------------------------------------- */
.galeria { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .galeria { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.galeria__el {
  position: relative; margin: 0; padding: 0; overflow: hidden;
  border: 0; border-radius: var(--radius-lg); background: var(--sand); cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.galeria__el img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.galeria__el:hover img { transform: scale(1.04); }
@media (min-width: 700px) {
  .galeria__el:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 130;
  display: none; align-items: center; justify-content: center;
  background: rgba(9, 22, 16, .95); padding: 12px;
}
.lightbox.otwarty { display: flex; }
.lightbox__obraz { max-width: min(1200px, 96vw); max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); }
.lightbox__podpis { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .85); font-size: .85rem; padding-inline: 60px; }
.lightbox button {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%; color: #fff;
}
.lightbox button:hover { background: rgba(255, 255, 255, .26); }
.lightbox button svg { width: 20px; height: 20px; }
.lightbox__zamknij { top: 14px; right: 14px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   15. KONTAKT
   -------------------------------------------------------------------------- */
.kontakt-uklad { display: grid; gap: clamp(30px, 5vw, 56px); }
@media (min-width: 940px) { .kontakt-uklad { grid-template-columns: 1fr 1.15fr; } }

.kontakt-dane ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 4px; }
.kontakt-dane li { border-bottom: 1px solid var(--line); }
.kontakt-dane a, .kontakt-dane .stat {
  display: flex; align-items: center; gap: 14px; padding: 14px 2px;
  text-decoration: none; color: var(--ink);
}
.kontakt-dane a:hover { color: var(--green-dark); }
.kontakt-dane svg { width: 20px; height: 20px; color: var(--green); flex: none; }
.kontakt-dane .etyk { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kontakt-dane .wart { display: block; font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.kontakt-osoba { margin-bottom: 22px; }
.kontakt-osoba .imie { display: block; font-size: 1.3rem; font-weight: 600; color: var(--green-dark); letter-spacing: -0.02em; line-height: 1.2; }
.kontakt-osoba .rola { display: block; color: var(--muted); font-size: .95rem; margin-top: 2px; }
.kontakt-nota { padding: 18px 20px; background: var(--sand); border-radius: var(--radius-lg); }

/* Formularz */
.formularz { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3.4vw, 34px); box-shadow: var(--shadow-sm); }
.pole { margin-bottom: 16px; }
.pole label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 500; color: var(--ink); }
.pole .wym { color: #B3261E; }
.pole input, .pole select, .pole textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.pole textarea { min-height: 104px; resize: vertical; }
.pole select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235F6B66' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  padding-right: 38px;
}
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(45, 106, 79, .16);
}
.pole input[aria-invalid="true"], .pole select[aria-invalid="true"], .pole textarea[aria-invalid="true"] { border-color: #B3261E; }
.blad { display: none; margin-top: 6px; font-size: .82rem; color: #B3261E; font-weight: 500; }
.blad.widoczny { display: block; }

@media (min-width: 560px) { .pole-para { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } }

.zgoda { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; cursor: pointer; }
.zgoda input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--green); cursor: pointer; }
.zgoda span { font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.zgoda a { color: var(--green); font-weight: 500; }

/* Honeypot — ukryty przed uzytkownikiem, widoczny dla botow */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.form-status { margin-top: 14px; padding: 13px 16px; border-radius: var(--radius); font-size: .9rem; font-weight: 500; display: none; }
.form-status.widoczny { display: block; }
.form-status.blad-glob { background: #FDECEA; color: #8C1D18; border: 1px solid #F3C6C1; }
.form-status.ok { background: #E8F3ED; color: #14432F; border: 1px solid #BFDFCE; }

.btn.laduje { position: relative; color: transparent !important; pointer-events: none; }
.btn.laduje::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  border: 2px solid rgba(26, 26, 26, .3); border-top-color: var(--ink); border-radius: 50%;
  animation: obrot .7s linear infinite;
}
@keyframes obrot { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   16. STOPKA
   -------------------------------------------------------------------------- */
.stopka { background: var(--green-dark); color: rgba(255, 255, 255, .78); padding-block: clamp(40px, 6vw, 64px) 28px; font-size: .9rem; }
.stopka a { color: rgba(255, 255, 255, .88); }
.stopka a:hover { color: #fff; }
.stopka__gora { display: grid; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 760px) { .stopka__gora { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } }
.stopka h2, .stopka h3 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.stopka__marka .nazwa { font-size: 1.3rem; font-weight: 600; color: #fff; letter-spacing: -0.03em; display: block; margin-bottom: 4px; }
.stopka__marka .pod { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-jasny); }
.stopka__dol { padding-top: 24px; }
.disclaimer { font-size: .72rem; line-height: 1.6; color: rgba(255, 255, 255, .55); margin-bottom: 18px; text-align: justify; }
.stopka__prawa { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: .78rem; color: rgba(255, 255, 255, .55); }
.uzupelnij { color: var(--gold-jasny); }

/* --------------------------------------------------------------------------
   17. MODAL (karta lokalu) — wspolny szkielet
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 140; display: none; align-items: center; justify-content: center; padding: 16px; }
.modal.otwarty { display: flex; }
.modal__tlo { position: absolute; inset: 0; background: rgba(9, 22, 16, .72); backdrop-filter: blur(3px); }
.modal__panel {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: var(--radius-lg); padding: 26px 22px 24px; box-shadow: var(--shadow-lg);
}
.modal__zamknij {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; color: var(--muted);
}
.modal__zamknij:hover { background: var(--sand); color: var(--ink); }
.modal__zamknij svg { width: 16px; height: 16px; }
.modal h2 { font-size: 1.3rem; margin-bottom: 6px; padding-right: 40px; }
.modal__opis { font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.modal__lokal {
  display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 14px; margin-bottom: 18px;
  background: var(--sand); border-radius: var(--radius); font-size: .85rem; color: var(--green-dark);
}
.modal__lokal b { font-weight: 600; }

/* --------------------------------------------------------------------------
   18. WHATSAPP — przycisk plywajacy + pop-up
   -------------------------------------------------------------------------- */
.wa-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 100;
  width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--wa); border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  transition: transform .18s ease, opacity .2s ease;
}
.wa-fab svg { width: 30px; height: 30px; color: #fff; }
.wa-fab:hover { transform: scale(1.06); }
.wa-fab::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--wa); opacity: .55; z-index: -1;
  animation: puls 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes puls { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-fab::before { animation: none; opacity: 0; } }

.wa-pop {
  position: fixed; right: 16px; bottom: 84px; z-index: 101;
  width: min(340px, calc(100vw - 32px));
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: none;
}
.wa-pop.otwarty { display: block; animation: wjazd .25s ease; }
@keyframes wjazd { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wa-pop__head { display: flex; align-items: center; gap: 12px; padding: 14px 44px 14px 16px; background: var(--wa-dark); color: #fff; position: relative; }
.wa-pop__awatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--gold); color: #1A1A1A;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .95rem; letter-spacing: -0.02em;
}
.wa-pop__imie { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.wa-pop__pod { font-size: .72rem; color: rgba(255, 255, 255, .78); line-height: 1.3; margin-top: 2px; }
.wa-pop__zamknij {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); border: 0; border-radius: 50%; color: #fff; cursor: pointer;
}
.wa-pop__zamknij:hover { background: rgba(255, 255, 255, .28); }
.wa-pop__zamknij svg { width: 13px; height: 13px; }
.wa-pop__body { padding: 18px 16px; background: #ECE5DD; }
.wa-pop__dymek {
  position: relative; background: #fff; border-radius: 0 8px 8px 8px;
  padding: 12px 14px; font-size: .875rem; line-height: 1.5; color: #1A1A1A;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1); margin-bottom: 14px;
}
.wa-pop__dymek::before { content: ''; position: absolute; top: 0; left: -7px; border: 7px solid transparent; border-top-color: #fff; border-right: 0; }
.wa-pop__czas { display: block; margin-top: 6px; font-size: .68rem; color: var(--muted); text-align: right; }
.wa-pop .btn { width: 100%; }

/* Ukryty przycisk/pop-up WhatsApp znika takze z kolejnosci tabulacji */
.wa-ukryty {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .2s ease, visibility 0s linear .2s !important;
}

/* --------------------------------------------------------------------------
   19. STICKY CTA (mobile)
   -------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
  transition: transform .25s ease;
}
.mobile-cta .btn { min-height: 46px; font-size: .9rem; }
/* Schowany pasek nie moze byc osiagalny tabulatorem — stad visibility */
.mobile-cta.schowany { transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
@media (min-width: 760px) { .mobile-cta { display: none; } }
/* Pasek CTA nie moze zaslaniac tresci ani przycisku WhatsApp.
   Wysokosc paska = linia z lokalizacja + przyciski + padding (~98 px). */
@media (max-width: 759px) {
  body { padding-bottom: 102px; }
  .wa-fab { bottom: 112px; }
  .wa-pop { bottom: 180px; }
}

/* --------------------------------------------------------------------------
   20. BANER COOKIES
   -------------------------------------------------------------------------- */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: none; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: var(--green-dark); color: rgba(255, 255, 255, .86); border-top: 1px solid rgba(255, 255, 255, .16);
}
.cookies.widoczny { display: block; }
.cookies__in { max-width: var(--wrap); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cookies p { flex: 1 1 300px; margin: 0; font-size: .82rem; line-height: 1.5; }
.cookies a { color: #fff; }
.cookies__akcje { display: flex; gap: 8px; flex: 0 0 auto; }
.cookies .btn { min-height: 42px; padding: 9px 18px; font-size: .85rem; }

/* --------------------------------------------------------------------------
   21. STRONY POMOCNICZE (dziekujemy / polityka)
   -------------------------------------------------------------------------- */
.strona-prosta { min-height: 70vh; display: flex; align-items: center; padding-block: clamp(48px, 8vw, 96px); }
.podziekowanie { max-width: 640px; margin-inline: auto; text-align: center; }
.podziekowanie__ikona {
  width: 68px; height: 68px; margin: 0 auto 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #E8F3ED; color: var(--green);
}
.podziekowanie__ikona svg { width: 32px; height: 32px; }
.podziekowanie .btn-grupa { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block: 28px; }
.podziekowanie .btn-grupa .btn { flex: 1 1 200px; }
.pobierz-karte {
  display: none; align-items: center; gap: 14px; text-align: left;
  padding: 18px 20px; margin-bottom: 26px;
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.pobierz-karte.widoczna { display: flex; }
.pobierz-karte svg { width: 30px; height: 30px; color: var(--green); flex: none; }
.pobierz-karte .tyt { font-weight: 600; color: var(--green-dark); }

.tresc-prawna { max-width: 76ch; padding-block: clamp(40px, 7vw, 80px); }
.tresc-prawna h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin-top: 2em; }
.tresc-prawna h3 { font-size: 1.05rem; margin-top: 1.6em; }
.tresc-prawna ul, .tresc-prawna ol { padding-left: 1.3em; }
.tresc-prawna li { margin-bottom: .5em; }
.tresc-prawna table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .9rem; }
.tresc-prawna th, .tresc-prawna td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.tresc-prawna th { background: var(--sand); font-weight: 600; }
/* Geste tabele prawne nie zmieszcza sie na telefonie — przewijaja sie w poziomie
   we wlasnym kontenerze. Cien po prawej sygnalizuje, ze jest tam dalszy ciag. */
/* --------------------------------------------------------------------------
   22. INFOGRAFIKA LOKALIZACYJNA — sekcja „Dojazd"
   -------------------------------------------------------------------------- */
.infografika { margin: 0 0 clamp(24px, 4vw, 40px); }

/* Cała grafika jest przyciskiem — kliknięcie otwiera powiększenie,
   bo drobny tekst mapy jest nieczytelny w skali strony na telefonie. */
.infografika__ramka {
  position: relative; display: block; width: 100%; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--sand); overflow: hidden; cursor: zoom-in;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.infografika__ramka:hover { border-color: var(--gold); box-shadow: var(--shadow-md); }
.infografika__ramka img { width: 100%; height: auto; display: block; }

.infografika__lupa {
  position: absolute; right: 12px; bottom: 12px;
  padding: 7px 14px; border-radius: 100px;
  background: rgba(27, 67, 50, .88); color: #fff;
  font-size: .78rem; font-weight: 600; letter-spacing: -0.01em;
  backdrop-filter: blur(4px); pointer-events: none;
}
@media (max-width: 560px) {
  .infografika__lupa { right: 8px; bottom: 8px; font-size: .72rem; padding: 6px 11px; }
}

/* Pasek liczb w wersji na jasnym tle (w hero jest wariant na zdjęciu) */
.liczby--jasne { background: var(--line); border-color: var(--line); }
.liczby--jasne > div { background: var(--sand); backdrop-filter: none; }
.liczby--jasne dt { color: var(--green-dark); }
.liczby--jasne dd { color: var(--muted); }

.dojazd__puenta {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding-left: 16px; border-left: 3px solid var(--gold);
  font-size: clamp(1.02rem, 2.2vw, 1.2rem); font-weight: 500; color: var(--green-dark);
}

/* --------------------------------------------------------------------------
   23. FAQ — akordeon
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__el { border-bottom: 1px solid var(--line); }
.faq__el h3 { margin: 0; font-size: 1rem; }
.faq__pyt {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  width: 100%; padding: 20px 2px; min-height: 56px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: clamp(1rem, 2.1vw, 1.1rem); font-weight: 600; letter-spacing: -0.015em;
  color: var(--green-dark); line-height: 1.35;
}
.faq__pyt:hover { color: var(--green); }
.faq__pyt::after {
  content: ''; flex: none; width: 12px; height: 12px; margin-top: 5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq__pyt[aria-expanded="true"]::after { transform: rotate(-135deg); }
.faq__odp { padding: 0 2px 22px; max-width: 76ch; }
.faq__odp p { color: var(--muted); font-size: .97rem; margin: 0; }

/* --------------------------------------------------------------------------
   24. DNI OTWARTE
   -------------------------------------------------------------------------- */
.dni-otwarte {
  display: grid; gap: clamp(20px, 3vw, 36px); align-items: center;
  padding: clamp(26px, 4vw, 40px);
  background: #fff; border: 1px solid var(--gold); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 860px) { .dni-otwarte { grid-template-columns: 1fr auto; } }
.dni-otwarte h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin-bottom: 10px; }
.dni-otwarte p { color: var(--muted); margin: 0; max-width: 64ch; }
/* [hidden] musi wygrac z display:inline-block — inaczej przy pustej stalej
   NAJBLIZSZY_DZIEN_OTWARTY zostaje pusty szary prostokat */
.dni-otwarte__data[hidden] { display: none !important; }
.dni-otwarte__data {
  display: inline-block; margin: 0 0 12px !important;
  padding: 7px 14px; border-radius: 100px;
  background: var(--sand); color: var(--green-dark) !important;
  font-size: .85rem; font-weight: 600;
}
.dni-otwarte__akcja .btn { width: 100%; white-space: nowrap; }
@media (min-width: 860px) { .dni-otwarte__akcja .btn { width: auto; } }

/* --------------------------------------------------------------------------
   25. FORMULARZ — pola radio i mikrokopia
   -------------------------------------------------------------------------- */
.pole-radio { margin: 0 0 16px; padding: 0; border: 0; }
.pole-radio legend {
  padding: 0; margin-bottom: 10px;
  font-size: .875rem; font-weight: 500; color: var(--ink);
}
.radio-lista { display: grid; gap: 8px; }
.radio {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: border-color .16s ease, background-color .16s ease;
}
.radio:hover { border-color: var(--green); background: var(--sand); }
.radio input[type="radio"] {
  width: 20px; height: 20px; min-height: 0; margin: 0; flex: none;
  accent-color: var(--green); cursor: pointer;
}
.radio span { font-size: .95rem; }
.radio:has(input:checked) { border-color: var(--green); background: var(--sand); }
.pole-radio input[aria-invalid="true"] ~ span { color: #8C1D18; }

.mikrokopia {
  margin: 12px 0 0; text-align: center;
  font-size: .8125rem; line-height: 1.5; color: var(--muted);
}

/* Pasek CTA na mobile — linia z lokalizacją nad przyciskami */
.mobile-cta__gdzie {
  grid-column: 1 / -1; margin: 0 0 2px; text-align: center;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

.tabela-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-scroll table { min-width: 560px; }
.tabela-scroll::after {
  content: ''; position: sticky; top: 0; right: 0; float: right;
  width: 26px; height: 100%; margin-left: -26px; pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
}
.tabela-scroll:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.przewin-info { display: none; }
@media (max-width: 719px) {
  .przewin-info {
    display: block; margin: 0 0 6px;
    font-size: .78rem; color: var(--muted);
  }
  .tabela-scroll th, .tabela-scroll td { font-size: .82rem; padding: 9px 10px; }
}

/* ==========================================================================
   PLAKIETKI LOKALI (promocja / gotowe pod klucz / drugie miejsce postojowe)
   Dopisane 01.09.2026 razem z cennikiem "Wrzesien 2026 V2".
   Bazuja na .hit, ktore juz definiuje ksztalt pigulki w tabeli i w kartach.
   ========================================================================== */
/* Selektory musza byc prefiksowane .lokale-tabela / .lokal-karta, bo obie te
   reguly definiuja juz kolor dla .hit i wygralyby specyficznoscia. */
.plakietka--promo,
.lokale-tabela .plakietka--promo,
.lokal-karta   .plakietka--promo  { background: #fdeee2; color: #9a4b12; }
.plakietka--gotowy,
.lokale-tabela .plakietka--gotowy,
.lokal-karta   .plakietka--gotowy { background: #e6f0e8; color: var(--green-dark); }
.plakietka--mp2,
.lokale-tabela .plakietka--mp2,
.lokal-karta   .plakietka--mp2    { background: #eaeef5; color: #33507d; }

/* W tabeli plakietki stoja obok siebie w jednej komorce, wiec potrzebuja
   wlasnego odstepu z gory, gdy zawinie sie do drugiej linii. */
.lokale-tabela .plakietka--promo,
.lokale-tabela .plakietka--gotowy,
.lokale-tabela .plakietka--mp2 { margin-top: 4px; }

/* W kartach plakietki sa sklejone w jednym ciagu HTML, wiec bez marginesu
   z prawej dotykalyby sie bokami. */
.lokal-karta .hit { margin-right: 6px; }

/* Pasek z data waznosci cennika nad tabela lokali */
.cennik-do {
  margin: 0 0 14px; padding: 12px 16px;
  background: var(--sand); border-radius: var(--radius);
  font-size: .88rem; line-height: 1.55; color: var(--ink);
}
.cennik-do strong { color: var(--green-dark); }
.cennik-do .hit { vertical-align: baseline; }