/* alejazamkowa.pl — arkusz wg wzoru operatora (Aleja Zamkowa.dc.html).
   Paleta i typografia przeniesione 1:1 ze wzoru:
   granat #16212a, złoto #B3924F, złoto jasne #d9c9a3, tła #ffffff/#faf8f4,
   linie #ece7de, tekst pomocniczy #5a6570/#8a939c, treść #3d4852.
   Kroje: Cormorant Garamond (nagłówki) + Jost (tekst). */

:root {
  --granat: #16212a;
  --granat-stopka: #10181f;
  --zloto: #B3924F;
  --zloto-jasne: #d9c9a3;
  --zloto-hover: #c7a662;
  --krem: #faf8f4;
  --linia: #ece7de;
  --linia-pola: #d8d2c6;
  --szary: #5a6570;
  --szary-jasny: #6b7480;  /* 2026-08-19: bylo #8a939c = 3,12:1 na bieli i 2,94:1
                              na kremie — ponizej progu WCAG AA 4,5:1 dla tekstu
                              drobnego (Lighthouse a11y: color-contrast). Teraz
                              4,74:1 / 4,46:1. Rola tokenu bez zmian: tekst
                              pomocniczy, nadal jasniejszy od --szary (#5a6570). */
  --tresc: #3d4852;
  --blad: #a4502e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Jost', sans-serif;
  color: var(--granat);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--granat); text-decoration: none; }
a:hover { color: var(--zloto); }
::selection { background: var(--zloto); color: #fff; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; }

.pas { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ── Nagłówek ── */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: #ffffff; border-bottom: 1px solid var(--linia);
}
.top .pas {
  height: 84px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
}
.logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.logo img { height: 40px; width: auto; }
.logo span {
  font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--granat); white-space: nowrap;
}
.logo span b { color: var(--zloto); font-weight: 600; }
.glowna { display: flex; align-items: center; gap: 32px; font-size: 17px; font-weight: 500; letter-spacing: 0.02em; }
.glowna .cta {
  background: var(--granat); color: #ffffff; padding: 12px 26px;
  letter-spacing: 0.06em; font-size: 15px;
}
.glowna .cta:hover { background: var(--zloto); color: #ffffff; }
.hamburger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; margin-left: auto;
}
.hamburger span, .hamburger::before, .hamburger::after {
  content: ''; display: block; height: 2px; background: var(--granat); margin: 5px 0;
}

/* ── Hero ── */
.hero { position: relative; height: 100vh; min-height: 680px; }
.hero .tlo { position: absolute; inset: 0; overflow: hidden; }
.hero .tlo img { width: 100%; height: 100%; object-fit: cover; }
/* Zasłona hero — przyciemnienie TŁA, nie tekstu.
   Trzy rzeczy, które muszą tu zostać tak, jak są:

   1. KOLEJNOŚĆ WARSTW. `.zaslona` jest RODZEŃSTWEM stojącym w kodzie PRZED
      `.tresc`. Obie są `position:absolute; inset:0`, żadna nie ma `z-index`,
      więc o tym, co jest na wierzchu, decyduje kolejność w dokumencie — i tekst
      wygrywa. Przeniesienie tego przyciemnienia do `::before` na `.tresc` albo
      dopisanie tu `z-index` położyłoby ciemną szybę NA napisach i przyciskach:
      przyciemniałaby wtedy treść zamiast zdjęcia, a na oko wygląda to podobnie.
      To był realny incydent floty — dlatego zasłona zostaje osobnym elementem.
   2. `pointer-events:none` — bez tego zasłona zjada kliknięcia w przyciski.
   3. ELIPSA, nie równomierna szyba. Napisy stoją na środku, na jasnej elewacji
      budynku (najjaśniejsze miejsce pod tekstem to ~rgb(165,168,162)); brzegi
      kadru — niebo, drzewa, trawnik — mają zostać widoczne. Elipsa dokłada
      przyciemnienie tylko pod blokiem treści i wygasa do zera przy krawędziach,
      więc zdjęcie dalej jest zdjęciem, a nie ciemnym tłem.
   Wartości nie są dobrane na oko: pochodzą z pomiaru najjaśniejszego bloku
   4×4 px pod prostokątem glifów przy 390 i 1440 px (patrz raport w commicie). */
.hero .zaslona {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 50%,
      rgba(9,14,19,0.42) 0%, rgba(9,14,19,0.38) 58%, rgba(9,14,19,0) 100%),
    linear-gradient(180deg,
      rgba(22,33,42,0.58) 0%, rgba(22,33,42,0.34) 50%, rgba(22,33,42,0.70) 100%);
}
.hero .tresc {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 120px 24px 24px;
}
.hero .herb { height: 72px; width: auto; filter: brightness(1.15); margin-bottom: 28px; }
.hero h1 {
  margin: 0; font-size: clamp(52px, 7vw, 96px); letter-spacing: 0.12em;
  color: #ffffff; line-height: 1.05;
}
/* Jasne złoto na zdjęciu nie dociągnie do 4,5:1 przy ŻADNYM realnym
   przyciemnieniu (przy tle rgb(112) wymagałoby tekstu o luminancji 0,90 —
   to już prawie biel, czyli rezygnacja z koloru marki). Dlatego podtytuł
   spełnia próg dla TEKSTU DUŻEGO (3:1), a warunkiem jest ≥24 px — stąd dolna
   granica clamp() podniesiona z 20 na 24 px. Napis skrócony do „ŻARÓW"
   mieści się w jednej linii nawet przy 360 px szerokości. */
.hero .podtytul {
  margin: 20px 0 0; font-size: clamp(24px, 2vw, 26px); font-weight: 400;
  letter-spacing: 0.22em; color: var(--zloto-jasne);
}
.hero .zajawka {
  margin: 26px 0 0; max-width: 560px; font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 300; color: rgba(255,255,255,0.92); line-height: 1.55;
}
.hero .przyciski { display: flex; gap: 18px; margin-top: 44px; flex-wrap: wrap; justify-content: center; }
.hero .odznaka {
  margin: 0 0 22px; font-size: 16px; letter-spacing: 0.32em; color: var(--zloto-jasne);
  border: 1px solid rgba(217,201,163,0.5); padding: 10px 24px;
}

/* Biel na złocie #B3924F daje 2,94:1 — poniżej progu 4,5:1 dla tekstu zwykłego,
   i to NIEZALEŻNIE od zasłony, bo tłem napisu jest kryjące złoto, nie zdjęcie.
   Przyciemnienie hero tego nie naprawia. Zamiast psuć kolor marki (żeby biel
   przeszła, złoto musiałoby zejść do ~#8E733D — inny odcień w całym serwisie)
   odwracamy napis na granat: 5,55:1 na złocie i 7,05:1 na złocie hover,
   przy nietkniętej palecie. */
.przycisk-zloty {
  display: inline-block; background: var(--zloto); color: var(--granat);
  padding: 18px 42px; font-size: 17px; font-weight: 600; letter-spacing: 0.12em;
}
.przycisk-zloty:hover { background: var(--zloto-hover); color: var(--granat); }
.przycisk-obrys {
  display: inline-block; border: 1px solid rgba(255,255,255,0.7); color: #ffffff;
  padding: 18px 42px; font-size: 17px; font-weight: 500; letter-spacing: 0.12em;
}
.przycisk-obrys:hover { background: rgba(255,255,255,0.12); color: #ffffff; }

/* ── Sekcje ── */
section { padding: 120px 32px; }
.sekcja-krem { background: var(--krem); }
.sekcja-granat { background: var(--granat); color: #ffffff; }
.srodek { max-width: 1240px; margin: 0 auto; }
.znacznik {
  margin: 0 0 14px; color: var(--zloto); letter-spacing: 0.28em;
  font-size: 15px; font-weight: 600;
}
.wysrodkowany { text-align: center; }
h2.tytul { margin: 0 0 28px; font-size: clamp(38px, 4vw, 54px); line-height: 1.12; }
h2.tytul-sekcji { margin: 0 0 64px; text-align: center; font-size: clamp(38px, 4vw, 54px); }
.sekcja-granat h2 { color: #ffffff; }

/* O inwestycji */
.o-inwestycji { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
.o-inwestycji .akapit { margin: 0 0 20px; font-size: 20px; font-weight: 300; line-height: 1.65; color: var(--tresc); }
.o-inwestycji .akapit:last-of-type { margin-bottom: 36px; }
.fakty { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; font-size: 18px; }
.fakty div, .lista-myslnikow div { display: flex; gap: 10px; }
.fakty span:first-child, .lista-myslnikow span:first-child { color: var(--zloto); }
.fakty strong { font-weight: 600; }
.o-inwestycji figure { margin: 0; height: 560px; }
.o-inwestycji figure img { width: 100%; height: 100%; object-fit: cover; }
.liczby {
  margin-top: 96px; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; text-align: center; border-top: 1px solid var(--linia); padding-top: 64px;
}
.liczby .liczba {
  font-family: 'Cormorant Garamond', serif; font-size: 64px; font-weight: 600;
  color: var(--zloto); line-height: 1;
}
.liczby .opis { margin-top: 10px; font-size: 17px; letter-spacing: 0.14em; color: var(--szary); }

/* Galeria */
.galeria {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 300px; gap: 20px;
}
.galeria .szeroki { grid-column: span 2; }
.galeria figure { margin: 0; overflow: hidden; }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria .zaslepka {
  height: 100%; display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; text-align: center;
  background: #ffffff; border: 1px dashed var(--linia-pola);
  color: var(--szary-jasny); font-size: 16px; letter-spacing: 0.08em; padding: 24px;
}
.galeria .zaslepka strong { color: var(--zloto); font-weight: 600; letter-spacing: 0.14em; }

/* Mieszkania */
.filtry { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center; }
.filtry label {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 15px; letter-spacing: 0.08em; color: var(--szary);
}
.filtry select {
  font-family: 'Jost', sans-serif; font-size: 17px; padding: 12px 16px;
  border: 1px solid var(--linia-pola); background: #ffffff; min-width: 180px; color: var(--granat);
}
.cennik { border-top: 1px solid var(--linia); }
.mieszkanie {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr 1fr 0.8fr;
  gap: 16px; align-items: center; padding: 26px 20px;
  border-bottom: 1px solid var(--linia);
}
.mieszkanie:hover { background: var(--krem); }
.mieszkanie[hidden] { display: none; }
.mieszkanie .nr { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; }
.mieszkanie .pod { font-size: 15px; color: var(--szary-jasny); }
.mieszkanie .metraz { font-size: 21px; font-weight: 500; }
.mieszkanie .cena-m2 { font-size: 19px; color: var(--tresc); }
.mieszkanie .cena { font-size: 21px; font-weight: 600; }
.mieszkanie .status span {
  display: inline-block; padding: 7px 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
}
.status-dostepne span { color: #3d6b3a; background: #e6efe2; }
.status-rezerwacja span { color: #8a6a2a; background: #f3ead6; }
.status-sprzedane span { color: #a4502e; background: #f0e2dc; }
.mieszkanie .zapytaj { text-align: right; }
.mieszkanie .zapytaj a {
  display: inline-block; border: 1px solid var(--granat); padding: 10px 22px;
  font-size: 14px; letter-spacing: 0.1em; font-weight: 500;
}
.mieszkanie .zapytaj a:hover { background: var(--granat); color: #ffffff; }
.brak-mieszkan { padding: 48px 20px; text-align: center; font-size: 19px; color: var(--szary-jasny); }
.dopisek { margin: 28px 0 0; text-align: center; font-size: 15px; color: var(--szary-jasny); }

/* Deweloper */
.deweloper { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.deweloper .akapit { margin: 0 0 20px; font-size: 20px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,0.82); }
.lista-myslnikow { display: flex; flex-direction: column; gap: 14px; font-size: 18px; color: rgba(255,255,255,0.82); }
.lista-myslnikow div { gap: 12px; }
.ustawa { border-left: 1px solid rgba(179,146,79,0.4); padding-left: 56px; }
.ustawa h3 { margin: 0 0 24px; font-size: 30px; color: var(--zloto-jasne); }
.ustawa .dane {
  display: flex; flex-direction: column; gap: 12px;
  font-size: 17px; font-weight: 300; color: rgba(255,255,255,0.75); line-height: 1.5;
}
.przycisk-zloty-obrys {
  display: inline-block; margin-top: 32px; border: 1px solid var(--zloto); color: var(--zloto-jasne);
  padding: 14px 32px; font-size: 15px; letter-spacing: 0.12em; font-weight: 500;
}
.przycisk-zloty-obrys:hover { background: var(--zloto); color: #ffffff; }

/* Kontakt */
.kontakt { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.karta-formularza { background: #ffffff; border: 1px solid var(--linia); padding: 48px; }
.pola { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pole { display: flex; flex-direction: column; gap: 8px; font-size: 15px; letter-spacing: 0.06em; color: var(--szary); }
.pole-szerokie { grid-column: span 2; }
.pole input, .pole textarea {
  font-family: 'Jost', sans-serif; font-size: 18px; padding: 14px 16px;
  border: 1px solid var(--linia-pola); color: var(--granat); width: 100%;
}
.pole textarea { resize: vertical; }
.zgoda {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 24px;
  font-size: 15px; color: var(--szary); line-height: 1.5; cursor: pointer;
}
.zgoda input { margin-top: 3px; accent-color: var(--zloto); }
.wyslij {
  margin-top: 28px; background: var(--granat); color: #ffffff; border: 0;
  padding: 17px 44px; font-family: 'Jost', sans-serif; font-size: 16px;
  font-weight: 600; letter-spacing: 0.12em; cursor: pointer;
}
.wyslij:hover { background: var(--zloto); }
.biuro { background: var(--granat); color: #ffffff; padding: 48px; }
.biuro h3 { margin: 0 0 28px; font-size: 30px; color: var(--zloto-jasne); }
.biuro .dane { display: flex; flex-direction: column; gap: 22px; font-size: 18px; font-weight: 300; line-height: 1.55; }
.biuro .etykieta { color: var(--zloto); font-size: 14px; letter-spacing: 0.16em; margin-bottom: 6px; }
.biuro a { color: #ffffff; }
.biuro a:hover { color: var(--zloto-jasne); }

/* Kafle kontaktu (wersja informacyjna) */
.kafle-kontaktu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kafle-kontaktu > div { background: #ffffff; border: 1px solid var(--linia); padding: 40px 28px; }
.kafle-kontaktu .etykieta { color: var(--zloto); font-size: 14px; letter-spacing: 0.16em; margin-bottom: 12px; }
.kafle-kontaktu a, .kafle-kontaktu span { font-size: 21px; font-weight: 500; }

/* Zapis na listę (wersja informacyjna) */
.zapis-formularz { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.zapis-formularz input {
  font-family: 'Jost', sans-serif; font-size: 18px; padding: 16px 20px;
  border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.06);
  color: #ffffff; min-width: 320px;
}
.zapis-formularz input::placeholder { color: rgba(255,255,255,0.55); }
.zapis-formularz button {
  background: var(--zloto); color: #ffffff; border: 0; padding: 16px 38px;
  font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 600;
  letter-spacing: 0.12em; cursor: pointer;
}
.zapis-formularz button:hover { background: var(--zloto-hover); }
.zapis-rodo { margin: 24px 0 0; font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1.5; }
.zapis-zgoda {
  display: flex; gap: 12px; align-items: flex-start; justify-content: center; margin-top: 24px;
  font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.7); line-height: 1.5;
  cursor: pointer; text-align: left; max-width: 560px; margin-left: auto; margin-right: auto;
}
.zapis-zgoda input { margin-top: 3px; accent-color: var(--zloto); }

/* ── Stopka ── */
.stopka { background: var(--granat-stopka); color: rgba(255,255,255,0.7); padding: 72px 32px 40px; }
.stopka .kolumny { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 56px; }
.stopka .marka { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.stopka .marka img { height: 34px; }
.stopka .marka span {
  font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--zloto-jasne);
}
.stopka .o-marce { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.6; }
.stopka .etykieta { color: var(--zloto); font-size: 14px; letter-spacing: 0.16em; margin-bottom: 16px; }
.stopka .linki { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.stopka a { color: rgba(255,255,255,0.7); }
.stopka a:hover { color: var(--zloto-jasne); }
.stopka .prawa {
  max-width: 1240px; margin: 48px auto 0; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12); text-align: center;
  font-size: 15px; font-weight: 300;
}

/* Strony pomocnicze (polityka, dziękujemy, 404) */
.strona-tekstowa { max-width: 760px; margin: 0 auto; padding: 160px 32px 120px; }
.strona-tekstowa h1 { font-size: clamp(38px, 4vw, 54px); margin: 0 0 28px; }
.strona-tekstowa p, .strona-tekstowa li { font-size: 19px; font-weight: 300; line-height: 1.65; color: var(--tresc); }
.do-uzupelnienia { background: #f3ead6; color: #8a6a2a; padding: 2px 8px; font-weight: 500; }
.blad-formularza { margin: 18px 0 0; color: var(--blad); font-size: 16px; }

/* ── RWD ── */
@media (max-width: 1080px) {
  .o-inwestycji, .deweloper, .kontakt { grid-template-columns: 1fr; gap: 48px; }
  .o-inwestycji figure { height: 420px; }
  .ustawa { border-left: 0; padding-left: 0; border-top: 1px solid rgba(179,146,79,0.4); padding-top: 40px; }
}
@media (max-width: 960px) {
  .hamburger { display: block; }
  .glowna {
    display: none; position: absolute; top: 84px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #ffffff; border-bottom: 1px solid var(--linia);
    padding: 8px 0 16px;
  }
  .glowna.otwarte { display: flex; }
  .glowna a { padding: 14px 32px; }
  .glowna .cta { margin: 10px 32px 0; text-align: center; }
}
@media (max-width: 900px) {
  section { padding: 88px 20px; }
  .pas { padding: 0 20px; }
  .liczby { grid-template-columns: 1fr 1fr; gap: 40px 24px; margin-top: 64px; padding-top: 48px; }
  .galeria { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .galeria .szeroki { grid-column: span 1; }
  .fakty { grid-template-columns: 1fr; }
  .mieszkanie {
    grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 22px 4px;
  }
  .mieszkanie .zapytaj { text-align: left; }
  .kafle-kontaktu { grid-template-columns: 1fr; }
  .stopka .kolumny { grid-template-columns: 1fr; gap: 40px; }
  .karta-formularza, .biuro { padding: 32px 24px; }
  .pola { grid-template-columns: 1fr; }
  .pole-szerokie { grid-column: span 1; }
  .filtry { gap: 16px; }
  .filtry label { flex: 1 1 160px; }
  .filtry select { min-width: 0; width: 100%; }
  .zapis-formularz input { min-width: 0; width: 100%; }
  .zapis-formularz button { width: 100%; }
  .hero { min-height: 560px; }
}

/* ── Baner zgody na statystyki ─────────────────────────────────────────────
   Stoi na dole i NIE zaslania tresci na stale: znika po decyzji, a decyzja
   zapisuje sie takze przy odmowie. Kontrast liczony wobec --granat-stopka
   (tlo banera), nie wobec tla strony.                                       */
.az-zgoda{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  background:var(--granat-stopka);color:#fff;border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:16px 18px;display:flex;gap:14px;align-items:center;
  flex-wrap:wrap;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:14.5px;line-height:1.5}
.az-zgoda p{margin:0;flex:1 1 320px;color:rgba(255,255,255,.86)}
.az-zgoda a{color:var(--zloto-jasne);text-decoration:underline}
.az-zgoda__akcje{display:flex;gap:10px;flex:0 0 auto}
.az-zgoda button{font:inherit;cursor:pointer;border-radius:10px;padding:10px 18px;border:1px solid transparent}
.az-zgoda__tak{background:var(--zloto);color:#14181f;font-weight:600}
.az-zgoda__nie{background:transparent;color:rgba(255,255,255,.86);border-color:rgba(255,255,255,.32)}
@media (max-width:520px){.az-zgoda{flex-direction:column;align-items:stretch}
  .az-zgoda__akcje{justify-content:stretch}.az-zgoda button{flex:1}}