/* ==========================
   U S T R O Ń — PALETA BARW
   ========================== */
:root{
  --bg:#212429;
  --panel:#262a30;
  --line:rgba(228,228,228,.10);

  --text:#E4E4E4;
  --muted:#CFCFCF;
  --accent:#7B6A58;
  --accent-2:#DFC7A2;

  --accent-fg:#1a1d22;
  --accent-veil:rgba(239,226,209,.10);
  --panel-shadow:0 12px 40px rgba(0,0,0,.40);
  --maxw:1100px;

  /* statusy klasyczne */
  --status-green-bg:rgba(16,185,129,.15);
  --status-green-bd:rgba(16,185,129,.45);
  --status-green-fg:#34d399;
  --status-orange-bg:rgba(245,158,11,.15);
  --status-orange-bd:rgba(245,158,11,.45);
  --status-orange-fg:#fbbf24;
  --status-gray-bg:rgba(107,114,128,.18);
  --status-gray-bd:rgba(107,114,128,.45);
  --status-gray-fg:#9ca3af;

  /* poświata beżowa */
  --beige-rgb:230,211,179; /* ≈ #E6D3B3 */
}

/* ===== baza ===== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--text); line-height:1.6;
  font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{ margin:0 0 .6rem }
h1,h2{ font-family:'Playfair Display',serif }
h2{ font-size:1.9rem; color:var(--accent-2); letter-spacing:.2px }
a{ color:var(--accent); text-decoration:none }
a:hover{ color:#8b7a65 }
::selection{ background:rgba(239,226,209,.28); color:var(--accent-fg) }
section{ padding:3rem 1rem }
.container{ max-width:var(--maxw); margin:0 auto }

/* ===== HERO ===== */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(280px,45vh,520px);
  display:grid; align-items:end; padding-block:3rem 1.25rem;
}
.hero-media,.hero-media img{ position:absolute; inset:0; width:100%; height:100% }
.hero-media img{
  object-fit:cover; object-position:var(--focus-x,50%) var(--focus-y,42%);
  filter:brightness(.75) contrast(1.05) saturate(.95);
}
.hero-overlay{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.40) 38%,rgba(0,0,0,.15) 68%,rgba(0,0,0,0) 100%);
}
.hero .hero-content{
  position:relative; z-index:2; color:#fff; text-shadow:0 3px 12px rgba(0,0,0,.65);
  max-width:var(--maxw); margin-inline:auto;
}
.hero h1{
  font-size:clamp(24px,3.8vw,42px); margin:0 0 .4rem 0; color:var(--accent-2);
  font-weight:700; letter-spacing:.3px;
  background:rgba(26,29,34,.45); display:inline-block; padding:.25em .6em; border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(239,226,209,.20);
}
.hero p{
  font-size:clamp(14px,2vw,18px); margin:0 0 .9rem 0; color:var(--text); opacity:.95;
  background:rgba(26,29,34,.35); display:inline-block; padding:.25em .6em; border-radius:6px;
}
.hero-nav{ display:flex; gap:.6rem; flex-wrap:wrap }
.hero-nav a{
  background:rgba(0,0,0,.55); color:#fff; font-weight:500; padding:.5rem .85rem;
  border-radius:999px; border:1px solid rgba(239,226,209,.22);
  transition:all .25s ease;
}
.hero-nav a:hover{
  background:var(--accent-2); color:var(--accent-fg); font-weight:700;
  border:1px solid var(--accent);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
@media (max-width:768px){
  .hero{ min-height:auto; aspect-ratio:16/9; padding-block:2rem 1rem }
  .hero h1{ font-size:clamp(20px,6vw,30px) }
  .hero p{ font-size:14px }
  .hero-nav a{ padding:.42rem .65rem; font-size:14px }
}

/* ===== karty ogólne ===== */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:1.2rem; box-shadow:var(--panel-shadow);
}

/* ===== Oferty (kafelki) ===== */
#lista-lokali{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem;
}
@media (max-width:1000px){ #lista-lokali{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){  #lista-lokali{ grid-template-columns:1fr } }

/* kafelek + beżowa poświata */
#lista-lokali .lokal{
  position:relative;
  background:#EFE2D1; color:#212429; border:1px solid rgba(123,106,88,.25);
  border-radius:16px; padding:1rem 1rem .9rem;
  transition:transform .18s, box-shadow .18s, border-color .18s;
  text-align:center;
}
#lista-lokali .lokal::after{
  content:""; position:absolute; inset:-2px; border-radius:18px; pointer-events:none; opacity:0;
  box-shadow:0 0 0 0 rgba(var(--beige-rgb),0), 0 0 0 0 rgba(0,0,0,0);
  transition:opacity .25s ease, box-shadow .25s ease;
}
#lista-lokali .lokal:hover,
#lista-lokali .lokal:focus-within{
  transform:translateY(-4px);
  border-color:rgba(123,106,88,.45);
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}
#lista-lokali .lokal:hover::after,
#lista-lokali .lokal:focus-within::after{
  opacity:1;
  box-shadow:
    0 0 0 2px rgba(var(--beige-rgb), .65),
    0 8px 24px rgba(var(--beige-rgb), .18);
}
@media (prefers-reduced-motion:reduce){
  #lista-lokali .lokal, #lista-lokali .lokal::after{ transition:none }
}

/* tytuł */
#lista-lokali .lokal h3{
  margin:.1rem 0 .5rem; font-size:1.14rem; color:#7B6A58; letter-spacing:.2px;
}

/* statusy */
#lista-lokali .lokal .badge{ display:inline-block; font-size:.78rem; padding:.18rem .6rem; border-radius:999px; font-weight:600 }
#lista-lokali .lokal .badge.badge-green{ background:var(--status-green-bg); border:1px solid var(--status-green-bd); color:var(--status-green-fg) }
#lista-lokali .lokal .badge.badge-orange{ background:var(--status-orange-bg); border:1px solid var(--status-orange-bd); color:var(--status-orange-fg) }
#lista-lokali .lokal .badge.badge-gray{ background:var(--status-gray-bg); border:1px solid var(--status-gray-bd); color:var(--status-gray-fg) }

/* dane lokalu */
#lista-lokali .lokal .kv{
  display:flex; flex-direction:column; align-items:center; gap:.3rem; margin:.2rem 0;
}
#lista-lokali .lokal .kv p,
#lista-lokali .lokal .kv p strong{ margin:0; color:#212429; text-align:center }

/* cena */
.cena{
  margin:1rem 0; padding:1rem;
  border:2px solid #7B6A58; border-radius:12px;
  background:#7B6A58; color:#EFE2D1; line-height:1.55; text-align:center;
}
.cena > div:first-child{ font-weight:800; font-size:1.1rem }
.cena > div + div{ position:relative; margin-top:.7rem; padding-top:.7rem }
.cena > div + div::before{
  content:""; position:absolute; top:0; left:20%; width:60%; height:1px;
  background:rgba(239,226,209,.55); border-radius:2px;
}

/* koszty dodatkowe */
#lista-lokali .lokal details summary{ text-align:center; cursor:pointer }
#lista-lokali .lokal details ul{ text-align:left; display:inline-block; margin:.4rem 0 0 .9rem }
#lista-lokali .lokal details ul li{ margin:.25rem 0; line-height:1.5 }
#lista-lokali .lokal details ul li .kwota{ font-weight:700; color:var(--accent); margin-left:.25rem }

/* historia cen — center, odstęp, separator */
#lista-lokali .lokal table.historia{
  display:inline-table; width:auto; margin:1.6rem auto 0 auto;
  border-collapse:collapse; table-layout:auto; text-align:center;
}
#lista-lokali .lokal table.historia caption{
  display:table-caption !important; caption-side:top;
  text-align:center !important; margin:0 !important; padding:0;
  font-weight:700; color:#212429;
}
#lista-lokali .lokal table.historia caption::before{
  content:""; display:block; width:56%; height:1px;
  margin:0 auto .6rem; background:rgba(123,106,88,.45); border-radius:2px; opacity:.9;
}
#lista-lokali .lokal table.historia th,
#lista-lokali .lokal table.historia td{
  padding:.32rem 1rem; white-space:nowrap; text-align:center; color:#212429;
}

/* ===== Galeria ===== */
#galeria .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:.8rem }
#galeria .grid a{
  display:block; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
#galeria .grid a:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(0,0,0,.45); border-color:rgba(239,226,209,.20) }
#galeria img{ width:100%; height:220px; object-fit:cover; display:block; filter:saturate(.95); transition:filter .25s }
#galeria img:hover{ filter:saturate(1) }

/* ===== Rzuty ===== */
#rzuty .rzuty-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-top:1rem }
#rzuty .rzuty-grid a{
  display:block; text-align:center; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.22); transition:transform .2s, border-color .2s;
}
#rzuty .rzuty-grid a:hover{ transform:scale(1.02); border-color:rgba(239,226,209,.22) }
#rzuty img{ width:100%; height:auto; max-height:260px; object-fit:contain; border-radius:8px; margin-bottom:.5rem }

/* ===== Mapa ===== */
#lokalizacja .map{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#1b1f25;
  box-shadow:0 10px 28px rgba(0,0,0,.30);
}
#lokalizacja iframe{ width:100%; height:380px; border:0 }

/* ===== Kontakt / Footer ===== */
#kontakt .card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1rem }
#kontakt .muted{ color:var(--muted); font-size:.95rem; margin-top:.5rem }
.list{ margin:0; padding-left:1rem }
footer{ border-top:1px solid var(--line); color:#D6DAE2; text-align:center; padding:1rem; margin-top:2rem }

/* ===== Lightbox ===== */
.lb-data .lb-caption{ color:var(--accent-2); font-family:'Poppins',sans-serif; font-size:1rem; margin-top:.5rem }
.lb-data .lb-number{ color:var(--muted); font-size:.85rem }
.lb-nav a.lb-prev, .lb-nav a.lb-next{ opacity:.85 }
.lb-nav a.lb-prev:hover, .lb-nav a.lb-next:hover{ opacity:1 }
.lb-close{ filter:invert(87%) sepia(7%) saturate(278%) hue-rotate(336deg) brightness(96%) contrast(94%) }

/* ===== Drobne UX ===== */
.panel:focus-within, #lista-lokali .lokal:focus-within{
  outline:2px solid rgba(239,226,209,.45); outline-offset:2px;
}

/* === O inwestycji — „fakty” (kafelki) === */
#o-inwestycji .facts-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.8rem;
  margin:1.1rem 0 0;
}
@media (max-width:1000px){ #o-inwestycji .facts-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){  #o-inwestycji .facts-grid{ grid-template-columns:1fr } }

#o-inwestycji .fact{
  background:rgba(239,226,209,.06);
  border:1px solid rgba(123,106,88,.35);
  border-radius:12px;
  padding:.85rem 1rem;
  box-shadow:0 8px 20px rgba(0,0,0,.18) inset, 0 2px 8px rgba(0,0,0,.12);
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  text-align:center;
}
#o-inwestycji .fact-k{ font-weight:600; letter-spacing:.2px; color:#7B6A58 }
#o-inwestycji .fact-v{
  display:inline-block; font-weight:800; font-size:1.05rem; color:var(--accent-2);
  text-shadow:0 1px 0 rgba(0,0,0,.15);
  padding:.15rem .5rem; border-radius:8px;
  background:linear-gradient(180deg, rgba(123,106,88,.14), rgba(123,106,88,.08));
  box-shadow:inset 0 0 0 1px rgba(123,106,88,.35);
  max-width:100%;
}
#o-inwestycji .fact-note{ font-size:.85rem; color:#6D6D6D; font-weight:500; margin-top:.2rem }
#o-inwestycji .fact-v div{ line-height:1.4 }

/* === HERO — MOBILE TUNING === */
@media (max-width: 768px){

  .hero{
    min-height: 62vh;
    aspect-ratio: auto;
    align-items: end;
    padding: clamp(12px, 4vw, 20px);
  }

  .hero-media img{
    object-position: var(--focus-x,50%) var(--focus-y,48%); /* lekko w górę */
  }

  .hero-overlay{
    /* mocniejszy dół dla czytelności napisów */
    background: linear-gradient(
      to top,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.44) 45%,
      rgba(0,0,0,.14) 80%,
      rgba(0,0,0,0) 100%
    );
  }

  .hero .hero-content{
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  }

  .hero h1{
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.15;
    padding: .28em .55em;
    border-radius: 10px;
    background: rgba(26,29,34,.55);
    box-shadow: inset 0 0 0 1px rgba(239,226,209,.18);
    margin-bottom: .4rem;
  }

  .hero p{
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.45;
    margin: 0 0 .6rem 0;
    padding: .35em .6em;
    border-radius: 8px;
    background: rgba(26,29,34,.45);
  }

  .hero-nav{
    margin-top: .2rem;
    gap: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
    scrollbar-width: none;       /* Firefox */
  }
  .hero-nav::-webkit-scrollbar{ display: none } /* WebKit */

  .hero-nav a{
    white-space: nowrap;
    padding: .44rem .7rem;
    border-width: 1px;
    background: rgba(0,0,0,.60);
  }

  .hero-nav a:focus-visible{
    outline: 2px solid rgba(223,199,162,.85);
    outline-offset: 2px;
  }
}