/* Paleta i podstawy (zielono-złota) */
:root{
  --bg:#F5F7F6;          /* jasne, neutralne tło */
  --surface:#FFFFFF;     /* karty, nawigacja */
  --ink:#1F2320;         /* ciemny, czytelny tekst */
  --muted:#5F6661;       /* opis/teksty drugorzędne */

  --brand:#1E7F5C;       /* ZIELEŃ – kolor główny (CTA) */
  --brand-600:#166648;   /* hover (ciemniejsza zieleń) */

  --accent:#C8A24A;      /* ZŁOTO – akcent premium */
  --accent-700:#A88333;  /* złoto na hover/ciemniejsze */
  --line:#E5E7E4;        /* delikatne separatory */

  --gold-wash:#FBF8F0;   /* bardzo jasne złote „wash” */
  --green-wash:#EFF6F3;  /* bardzo jasne zielone „wash” */
}

html { scroll-behavior: smooth; }

body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden; /* brak poziomego scrolla */
}

.display { 
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.15;
}

/* ====== ELEMENTY DOSTOJEŃSTWA (złoto) ====== */

/* Cienka złota linia pod nagłówkiem */
.h-decor {
  position: relative;
  padding-bottom: .5rem;
}
.h-decor::after{
  content:"";
  display:block;
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
  margin-top: .75rem;
}

/* Złote „kropki” przed listą */
.gold-bullets li{
  position: relative;
  padding-left: 1rem;
}
.gold-bullets li::before{
  content:"";
  position:absolute;
  left:.25rem;
  top: .7em;
  width: .5rem;
  height: .5rem;
  border-radius: 9999px;
  background: var(--accent);
}

/* Header – delikatna złota kreska na dole */
.app-header{
  position: sticky;
}
.app-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px; height:2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 35%, var(--accent) 65%, transparent 100%);
  pointer-events:none;
}

/* Karty z lekką złotą ramką na hover */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: 0 10px 24px rgba(31,35,32,.06);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  border-color: var(--accent);
  box-shadow: 0 14px 28px rgba(31,35,32,.10);
  transform: translateY(-2px);
}

/* Przyciski */
.btn {
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:.5rem; 
  border-radius: 9999px; 
  padding:.875rem 1.25rem; 
  font-weight:600; 
  transition: all .2s ease;
  text-decoration: none;
}

/* Primary = zielony z subtelną złotą obwódką */
.btn-primary {
  background: var(--brand); 
  color: #F5FFFA;
  border: 1px solid var(--accent);
  box-shadow: 0 1px 0 0 var(--accent) inset;
}
.btn-primary:hover { 
  background: var(--brand-600); 
  border-color: var(--accent-700);
  transform: translateY(-1px); 
}

/* Ghost = złota ramka, jasne tło na hover */
.btn-ghost { 
  background: transparent; 
  border: 1px solid var(--accent); 
  color: var(--ink); 
}
.btn-ghost:hover { 
  background: var(--gold-wash); 
}

/* Link ozdobny = złoto */
.link { 
  color: var(--ink); 
  border-bottom: 1px solid var(--accent); 
  text-decoration: none;
}
.link:hover { 
  color:#171A17; 
  border-bottom-color: var(--accent-700); 
}

/* Drobne akcenty złote */
.eyebrow{
  color: var(--accent);
  letter-spacing: .08em;
}

/* Focus widoczny (złoto) */
:focus-visible { 
  outline: 2px solid var(--accent); 
  outline-offset: 2px; 
  border-radius:.75rem; 
}

/* Obrazy responsywne */
img { 
  max-width: 100%; 
  height: auto; 
  display:block; 
}

/* Zawijanie długich fragmentów tekstu */
h1,h2,h3,p,li { 
  overflow-wrap: anywhere; 
}


/* Statusy (badge) – wyraźne, ale eleganckie */
.badge{
  display:inline-block;
  padding: .35rem .6rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Na sprzedaż – solid green z lekką złotą obwódką */
.badge-sale{
  color: #ffffff;
  background: var(--brand);
  border: 1px solid var(--accent);
  box-shadow: 0 1px 0 0 var(--accent) inset;
}

/* W przygotowaniu – jasne złote tło, ciemniejszy tekst */
.badge-planned{
  color: #4A3C17;
  background: var(--gold-wash);
  border: 1px solid var(--accent);
}

/* Rezerwacja – bursztynowy (na przyszłość) */
.badge-reserved{
  color: #3A2A00;
  background: #FFE9B8;
  border: 1px solid #E0BB64;
}

/* Sprzedane – neutralne szaro-zielone (na przyszłość) */
.badge-sold{
  color: #39403C;
  background: #E8ECEA;
  border: 1px solid #D2D8D5;
}

/* ===================================================== */
/* ==================== HERO (cinematic) ================ */
/* ===================================================== */

/* HERO image (duży, ostre rogi, złota ramka TYLKO na hover) */

/* 1) Nadpisujemy zachowanie .card w tym jednym miejscu */
.hero-compact-media.card{
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 46vh;     /* DUŻY obraz – możesz zwiększyć np. do 60vh/70vh */
  max-height: 70vh;
  border: none;         /* żadnej stałej ramki */
  border-radius: 0 !important;   /* ostre rogi (nadpisuje .card) */
  box-shadow: none;              /* bez cienia karty */
}

/* 2) Sam obraz – pełna szerokość, cover, ostre rogi */
.hero-compact-media.card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* wypełnia pojemnik */
  object-position: center;       /* przesuń np. 'center 40%' jeśli chcesz inny kadr */
  border-radius: 0 !important;   /* ostre rogi */
}

/* 3) Złota obwódka na hover (ostre rogi, bez zmiany rozmiaru) */
.hero-compact-media.card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0;              /* ostre rogi */
  box-shadow: inset 0 0 0 0 var(--accent);
  transition: box-shadow .25s ease;
}
.hero-compact-media.card:hover::after{
  box-shadow: inset 0 0 0 2px var(--accent); /* złota ramka na hover */
}


/* ==== RYTM PIONOWY (global) – równo i -1/3 względem py-16/lg:py-24 ==== */
:root{
  --section-py: 2.25rem;   /* ~42.7px = 2/3 z 64px (py-16) */
  --section-py-lg: 3.25rem;    /* 64px   = 2/3 z 96px (lg:py-24) */
  --kicker-top: 0.25rem;       /* oddech nad „Kameralna inwestycja” */
}

/* Każda główna sekcja ma identyczny odstęp u góry i dołu */
main > section{
  padding-top: var(--section-py) !important;
  padding-bottom: var(--section-py) !important;
}
@media (min-width: 1024px){
  main > section{
    padding-top: var(--section-py-lg) !important;
    padding-bottom: var(--section-py-lg) !important;
  }
}

/* HERO też trzyma ten sam rytm (nie fullscreen) */
.hero-compact{
  padding-top: var(--section-py) !important;
  padding-bottom: var(--section-py) !important;
}
@media (min-width: 1024px){
  .hero-compact{
    padding-top: var(--section-py-lg) !important;
    padding-bottom: var(--section-py-lg) !important;
  }
}

/* Pierwszy nagłówek w sekcji bez dodatkowego marginesu do góry */
main > section h2:first-of-type,
main > section .display:first-of-type{
  margin-top: 0;
}

/* Kicker w HERO – pewny margines nad napisem */
.hero-kicker{
  margin-top: var(--kicker-top);
}


/* ===== O INWESTYCJI — układ: lewa kolumna karty, prawa kolumna media ===== */
.oi-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-areas:
    "left"
    "media";                  /* mobile: media POD kartami */
}
.oi-left{ grid-area: left; }
.oi-media{
  grid-area: media;
  display: flex;
  gap: .75rem;
  overflow-x: auto;           /* jeden wiersz obrazków na mobile */
  padding-bottom: .25rem;     /* mały oddech pod scroll */
  scroll-snap-type: x mandatory;
}
.oi-media::-webkit-scrollbar{ height: 8px; }
.oi-media::-webkit-scrollbar-thumb{
  background: #d8dcd9; border-radius: 9999px;
}

/* Desktop: kolumny obok siebie, media w kolumnie (jedno pod drugim) */
@media (min-width: 1024px){
  .oi-grid{
    grid-template-columns: 1.15fr .85fr;
    grid-template-areas: "left media";
    align-items: start;
    gap: 2rem;
  }
  .oi-media{
    flex-direction: column;    /* kolumna zdjęć */
    overflow: visible;         /* brak poziomego scrolla */
  }
}

/* Mini-komponent obrazka z ramką na hover */
.media-thumb{
  position: relative;
  border-radius: 1rem;         /* spójne z .card */
  overflow: hidden;
  background: var(--surface);
  scroll-snap-align: start;
  /* rozmiary: na mobile to „kafelek”, na desktop 100% szerokości kolumny */
  flex: 0 0 clamp(240px, 42vw, 320px);
  aspect-ratio: 3 / 2;
}
@media (min-width:1024px){
  .media-thumb{
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
}
.media-thumb img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .32s ease;
  display: block;
}
.media-thumb::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 var(--accent);
  transition: box-shadow .2s ease;
}
.media-thumb:hover::after{
  box-shadow: inset 0 0 0 2px var(--accent); /* złota ramka na hover */
}
.media-thumb:hover img{ transform: scale(1.015); }

.media-cap{
  font-size: .75rem;
  color: var(--muted);
  padding: .5rem .25rem 0;
}

/* ===== LOKALIZACJA — nagłówek na pełną szerokość, lista + mapa niżej ===== */
.loc-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-areas:
    "head"
    "left"
    "map";                 /* mobile: mapa pod całym tekstem */
}
.loc-head{ grid-area: head; }
.loc-left{ grid-area: left; }
.loc-map{ grid-area: map; }

/* Desktop: head zajmuje 2 kolumny; niżej: po lewej tekst, po prawej mapa */
@media (min-width:1024px){
  .loc-grid{
    grid-template-columns: 1.15fr .85fr; /* tekst szerzej, mapa trochę węższa */
    grid-template-areas:
      "head head"
      "left map";
    gap: 2rem;
    align-items: start;
  }
}

/* Kafelek mapy — złota ramka na hover + subtelny zoom */
.media-map{
  position: relative;
  border-radius: 1rem;          /* spójne z kartami */
  overflow: hidden;
  background: var(--surface);
}
.media-map img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;          /* stabilne proporcje mapy */
  transition: transform .28s ease;
}
.media-map::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 var(--accent);
  transition: box-shadow .2s ease;
}
.media-map:hover::after{ box-shadow: inset 0 0 0 2px var(--accent); }
.media-map:hover img{ transform: scale(1.01); }

.map-cap{
  font-size: .75rem;
  color: var(--muted);
  padding-top: .5rem;
}

/* ===== GALERIA — prosto i duże zdjęcia ===== */

/* Pełna szerokość dla poziomych ujęć */
.gal-full{
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--surface);
  margin-top: 1rem;               /* rytm */
}
.gal-full img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;           /* duży, kinowy kadr */
  transition: transform .28s ease;
}
/* mniej nieba – przesunięcie kadru w dół */
.focus-ground{ object-position: 50% 65%; }

/* Dwa pionowe obok siebie (desktop), jeden pod drugim (mobile) */
.gal-halves{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 768px){
  .gal-halves{ grid-template-columns: 1fr 1fr; }
}
.gal-half{
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--surface);
}
.gal-half img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 3 / 4;            /* pion: smukły kadr */
  transition: transform .28s ease;
}

/* Złota ramka na hover + delikatny zoom (spójnie z resztą) */
.gal-full::after,
.gal-half::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 var(--accent);
  transition: box-shadow .2s ease;
}
.gal-full:hover::after,
.gal-half:hover::after{
  box-shadow: inset 0 0 0 2px var(--accent);
}
.gal-full:hover img,
.gal-half:hover img{
  transform: scale(1.015);
}

/* GALERIA: ramka TAK, zoom NIE */
.gal-full:hover img,
.gal-half:hover img{
  transform: none !important;   /* zero przybliżenia */
}

/* (opcjonalnie) bez animacji obrazków w galerii */
.gal-full img,
.gal-half img{
  transition: none !important;
}


/* Formularz – spójne inputy */
.inp{
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: .75rem 1rem;
  border-radius: 1rem;
}
.inp:focus{ outline: 2px solid var(--accent); outline-offset: 2px; }

.form-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px){
  .form-row{ grid-template-columns: 1fr 1fr; }
}
.form-col{ display:flex; flex-direction:column; }

.consents{ display: grid; gap: .5rem; margin-top: .5rem; }
.consent{ display:flex; align-items:flex-start; gap:.6rem; font-size:.9rem; color:var(--muted); }
.consent input{ margin-top:.2rem; }

.err{ color:#B3261E; font-size:.8rem; min-height:1em; }
.hp{ position:absolute; left:-9999px; top:-9999px; opacity:0; }


/* ===== KONTAKT – makeover (układ, typografia, formularz) ===== */

/* Siatka: równe kolumny, start wyrównany, sensowna przerwa */
#kontakt .grid{
  align-items: start;
  gap: 1.5rem;
}
@media (min-width:1024px){
  #kontakt .grid{
    grid-template-columns: 1.1fr .9fr;  /* lewa minimalnie szersza */
    gap: 2rem;
  }
}

/* Karty w kontakcie – delikatniej i czyściej */
#kontakt .card{
  border-radius: 1rem;
  box-shadow: 0 10px 24px rgba(31,35,32,.06);
}

/* Wstęp pod nagłówkiem – krótsza linia, łagodniejszy kolor */
#kontakt .card h2 + p{
  margin-top: .5rem;
  color: var(--muted);
  max-width: 60ch;
}

/* Ograniczamy szerokość techniczną formularza, żeby był „trzymany” */
#kontakt form{
  max-width: 560px;
}

/* Pola formularza – bardziej „premium” */
.inp{
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: .75rem 1rem;
  border-radius: .875rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.inp:hover{ border-color: #D7DBD8; }
.inp::placeholder{ color:#9aa19c; }
.inp:focus{
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(200,162,74,.14);
}

/* Dwie kolumny e-mail/telefon – równo na desktopie */
#kontakt .form-row{ gap: .875rem; }
@media (min-width:768px){
  #kontakt .form-row{ grid-template-columns: 1fr 1fr; }
}

/* Zgody – czytelne „płytki” z lekkim tłem */
.consents{ gap: .6rem; margin-top:.25rem; }
.consent{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.92rem; color:var(--muted);
  background: var(--gold-wash);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: .6rem .75rem;
}
.consent input{ margin-top:.15rem; accent-color: var(--brand); }

/* Przycisk i stan formularza – bliżej siebie */
#kontakt .btn-primary{ padding:.9rem 1.25rem; }
#kontakt #formState{ margin-left:.25rem; }

/* Prawa karta – porządek w listach i odstępach */
#kontakt .card h3{ margin:.25rem 0 .25rem; }
#kontakt .card h3 + ul{ margin-top:.75rem; }
#kontakt .card ul{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.35rem;
}
#kontakt .card li{
  display:flex; align-items:baseline; gap:.5rem;
  padding:.25rem 0; line-height:1.5; color:var(--muted);
}
#kontakt .card li > strong{
  flex:0 0 12ch; color:var(--ink); font-weight:600;
}
@media (max-width:380px){
  #kontakt .card li > strong{ flex-basis:10ch; }
}

/* Separator w prawej karcie subtelniejszy */
#kontakt .card hr{
  margin: 1rem 0 1.25rem;
  border:0; border-top:1px solid var(--line);
}

/* (opcjonalnie) „przyklej” prawą kartę na desktopie, jeśli chcesz
#kontakt .grid > .card:last-child{
  position: sticky; top: 84px;
}
*/

/* Stopka – drobna kosmetyka */
footer .link{ padding-bottom: 1px; }
footer nav a + a{ margin-left: .25rem; }

/* Ładne łamanie wąskich numerów (NIP) */
footer p{ word-break: keep-all; }


input, select, textarea { font-size: 16px; }     /* brak auto-zoomu iOS */
.btn, .link { touch-action: manipulation; }      /* lepsza responsywność tapu */
@media (hover: none) {
  .media-thumb:hover::after,
  .hero-compact-media.card:hover::after,
  .gal-full:hover::after,
  .gal-half:hover::after { box-shadow: none; }
}
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 480px){
  main > section { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .card { border-radius: 1rem; }
  .display { font-size: clamp(1.5rem, 6vw, 2.25rem); }
}
footer nav { flex-wrap: wrap; row-gap: .25rem; }
footer nav a { white-space: nowrap; }


/* --- HERO: stabilna ramka i brak „pustej” przestrzeni przy zwężaniu okna --- */

/* 1) Domyślnie (mobile/tablet/desktopy < 1024px) trzymamy proporcje 16:9 */
.hero-compact-media.card{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;   /* trzyma ramkę i nie ma „białego” dołu */
  height: auto;           /* nie wymuszaj wysokości */
  min-height: auto;
  max-height: none;
  overflow: hidden;
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  background: var(--surface);
}

/* obraz zawsze wypełnia pojemnik */
.hero-compact-media.card img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 0 !important;
}

/* złota ramka na hover – bez wpływu na layout */
.hero-compact-media.card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  border-radius:0;
  box-shadow: inset 0 0 0 0 var(--accent);
  transition: box-shadow .25s ease;
}
.hero-compact-media.card:hover::after{
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* 2) Na dużych ekranach możemy pozwolić sobie na „wysoki” kadr */
@media (min-width: 1024px){
  .hero-compact-media.card{
    aspect-ratio: auto;   /* oddajemy kontrolę wysokości */
    min-height: 52vh;
    max-height: 70vh;
  }
}

/* 3) Pewne „sr-only”, aby figcaption nie zajmował miejsca */
.sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}


/* Stopka: klauzula prawna – FULL WIDTH na desktopie */
.legal-note{
  font-size: .85rem;
  line-height: 1.6;
  color: var(--muted);
  background: var(--gold-wash);
  border: 1px solid var(--accent);
  border-radius: .75rem;
  padding: .875rem 1rem;
  width: 100%;          /* ← pełna szerokość wiersza */
  max-width: none;      /* ← usuwa ograniczenie 80ch */
}
@media (min-width: 768px){
  .legal-note{ padding: 1rem 1.25rem; }
}