/* ============================================================
   PAGE: INVESTMENT (Majowe Ogrody) — style specyficzne dla landinga.
   Bazuje 1:1 na prototypie (root/index.html). To, co już jest
   w tokens.css / base.css / components.css, NIE jest tu duplikowane.
   Sekcje: hero (slideshow + video), breadcrumbs, about, mapa, POI,
   lokalizacja, navigator SVG + tabela lokali, gallery, spacer 3D,
   contact (left/right split z 3 osobami), lightbox.
   ============================================================ */


/* ===== HERO — slideshow 3 slajdy / video (wariant B) ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #1e2a18;
}
/* Self-hosted <video> background — 100% cover w kazdym widoku.
   Cel: wideo wypelnia hero w calosci na kazdym urzadzeniu, bez pustek.
   Mechanizm:
     - inset: 0 + width/height 100% rozciaga element na cala sekcje
     - object-fit: cover skaluje wideo "kafelkowo" — wypelnia bez znieksztalcen,
       obcinajac to co wystaje (analogicznie do background-size: cover)
     - object-position: center  — srodkuje kadr przy obcinaniu
     - poster: wyswietla 8.jpg dopoki wideo sie ladowuje
   Brak hackow z aspect-ratio/transform — object-fit dziala natywnie. */
.hero-video-bg {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  background: #1e2a18;
  pointer-events: none;
}
.hero-video-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  border: 0;
}

.hero-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  /* Overlay zredukowany do 30% poprzedniej intensywności na życzenie klienta —
     wideo ma być bardziej widoczne. Wartości alpha: 0.78→0.23, 0.65→0.20,
     0.5→0.15, 0.2→0.06. */
  background:
    linear-gradient(135deg, rgba(15, 28, 10, 0.23) 0%, rgba(30, 55, 18, 0.20) 100%),
    radial-gradient(ellipse at center left, rgba(15, 28, 10, 0.15) 0%, rgba(15, 28, 10, 0.06) 70%);
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #ffffff;
  padding: 120px 24px 80px;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeInUp 0.8s 0.2s forwards;
  text-shadow: none;
}
.hero-badge i { color: var(--green-light); }
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.8rem);
  margin-bottom: 24px;
  max-width: 900px;
  opacity: 0;
  animation: fadeInUp 0.8s 0.4s forwards;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.hero h1 .accent {
  color: var(--green-light);
  font-style: italic;
  font-weight: 700;
}
.hero p.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  max-width: 620px;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  animation: fadeInUp 0.8s 0.6s forwards;
  font-weight: 500;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeInUp 0.8s 0.8s forwards;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  opacity: 0;
  animation: fadeInUp 0.8s 1s forwards;
}
.hero-stat .num {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--green-light);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.hero-stat .label {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  margin-top: 6px;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scroll-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}


/* ===== BREADCRUMBS — dyskretne pod hero ===== */
.breadcrumbs {
  background: var(--gray-bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.88rem;
  color: var(--text-medium);
}
.breadcrumbs a {
  color: var(--text-medium);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
}
.breadcrumbs a:hover { opacity: 1; color: var(--green-dark); }
.breadcrumbs li[aria-current="page"] {
  color: var(--green-dark);
  font-weight: 700;
}


/* ===== O INWESTYCJI ===== */
#o-inwestycji { background: var(--gray-bg); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
  cursor: pointer;
}
.about-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.about-img:hover img { transform: scale(1.05); }

/* Tooltip "Zobacz wizualizacje" pojawiający się na hover/focus obrazka. */
.about-img-tooltip {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(31, 42, 26, 0.92);
  color: #ffffff;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.about-img:hover .about-img-tooltip,
.about-img:focus-visible .about-img-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.about-text p {
  color: var(--text-medium);
  margin-bottom: 18px;
  line-height: 1.7;
  font-weight: 500;
}
.feature-list {
  list-style: none;
  margin-top: 24px;
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--text-dark);
  font-weight: 600;
  font-size: 1rem;
}
.feature-list li i {
  color: var(--green);
  background: var(--green-bg);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}


/* ===== MAPA ===== */
#mapa { background: #ffffff; }
.map-intro {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 64px;
}
.map-intro-text h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  margin-bottom: 20px;
  line-height: 1.2;
}
.map-intro-text p {
  color: var(--text-medium);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 16px;
  font-weight: 500;
}
.map-intro-text .gmap-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--green-light);
  padding-bottom: 2px;
  transition: color 0.2s, border-bottom-color 0.2s;
  font-size: 1rem;
}
.map-intro-text .gmap-link:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

.map-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 5/4;
  background: linear-gradient(135deg, #e8eee3, #dce5d4);
}
.map-visual svg { width: 100%; height: 100%; }

.map-pin-mini {
  position: absolute;
  cursor: default;
  transition: transform 0.3s;
}
.map-pin-mini .pin-dot {
  width: 34px; height: 34px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg) translate(-17px, -17px);
  transform-origin: top left;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(61, 107, 46, 0.45);
  transition: box-shadow 0.3s;
}
.map-pin-mini.center .pin-dot {
  background: var(--green-dark);
  width: 44px; height: 44px;
  transform: rotate(-45deg) translate(-22px, -22px);
}
.map-pin-mini .pin-dot i {
  transform: rotate(45deg);
  color: #ffffff;
  font-size: 0.75rem;
}
.map-pin-mini.center .pin-dot i { font-size: 0.95rem; }
.map-pin-mini:hover .pin-dot {
  box-shadow: 0 10px 24px rgba(61, 107, 46, 0.6);
}
.map-pin-mini .pin-label {
  position: absolute;
  top: 8px; left: 22px;
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, left 0.2s;
  font-weight: 600;
  color: var(--text-dark);
}
.map-pin-mini:hover .pin-label {
  opacity: 1;
  left: 28px;
}
.map-pin-mini.center .pin-label {
  background: var(--green-dark);
  color: #ffffff;
  opacity: 1;
  top: 14px;
  left: 30px;
  font-weight: 700;
}
.map-pin-mini.pulse .pin-dot::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50% 50% 50% 0;
  border: 2px solid var(--green-dark);
  animation: pulse 2s ease-out infinite;
  opacity: 0;
}
@keyframes pulse {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.8); }
}


/* ===== POI MARQUEE — jednorzędowa karuzela ===== */
.poi-marquee-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.poi-marquee {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marqueeScroll 50s linear infinite;
}
.poi-marquee:hover { animation-play-state: paused; }
.poi-marquee .poi-card {
  flex: 0 0 300px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.poi-card .poi-icon-wrap {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--green-bg), #f0f6ea);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s;
}
.poi-card .poi-icon-wrap i {
  font-size: 1.3rem;
  color: var(--green-dark);
  transition: color 0.3s;
}
.poi-card h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin: 0 0 6px;
  color: var(--text-dark);
  font-weight: 700;
  line-height: 1.3;
}
.poi-card .poi-dist {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  color: var(--green-dark);
  font-weight: 700;
}
.poi-card .poi-dist i { font-size: 0.75rem; }
.poi-card .poi-time {
  color: var(--text-medium);
  font-size: 0.88rem;
  margin-top: 2px;
  font-weight: 500;
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ===== LOKALIZACJA ===== */
#lokalizacja { background: var(--gray-bg); }
.loc-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.loc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.loc-stat {
  background: #ffffff;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.loc-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-light);
}
.loc-stat i {
  color: var(--green);
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.loc-stat strong {
  display: block;
  font-size: 1.1rem;
  color: var(--text-dark);
  font-weight: 700;
}
.loc-stat span {
  color: var(--text-medium);
  font-size: 0.95rem;
  font-weight: 500;
}
.loc-img {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  min-height: 100%;
}
.loc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ===== DOMY — navigator (render + SVG overlay) + filters + tabela ===== */
#domy { background: #ffffff; }

/* Nawigator wychodzi poza .container — pełna szerokość okna z 20px marginesem
   po obu bokach. Reszta sekcji #domy (tytuł, filtry, tabela) zostaje w container. */
.navigator {
  background: transparent;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 48px;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Legenda statusów + statystyki — zawężona do container-width (1280px) mimo
   że .navigator wychodzi na pełen viewport. Padding 24px dopasowany do .container. */
.navigator-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 auto 16px;
  padding: 0 24px;
  max-width: var(--max-width);
  box-sizing: border-box;
  font-size: 15px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-medium);
}
.legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.legend-dot.dostepny    { background: rgba(90, 145, 66, 0.55); }
.legend-dot.rezerwacja  { background: rgba(245, 158, 11, 0.55); }
.legend-dot.sprzedany   { background: rgba(122, 130, 122, 0.55); }
.legend-stats {
  margin-left: auto;
  color: var(--text-medium);
}
.legend-stats strong { color: var(--green-dark); }

/* Stage = warstwa render + SVG overlay + tooltip.
   Aspect 2500/1471 ≈ 1.7 (proporcja klatek nawigatora 360°). */
.navigator-stage {
  position: relative;
  aspect-ratio: 2500 / 1471;
  background: transparent;
  overflow: hidden;
  border-radius: 14px;
  user-select: none;
  margin-bottom: 32px;
}

.navigator-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.navigator-stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* === Nawigator 360° — drag-to-rotate ===
   Klatka <img> przejmuje mousedown dla drag-to-rotate; .house-area mają
   pointer-events: all (definiowane niżej) więc kliki w domy nadal działają. */
.navigator-360 {
  cursor: grab;
  touch-action: pan-y;            /* scroll pionowy strony nie blokuje się na nawigatorze */
}
.navigator-360.is-dragging {
  cursor: grabbing;
}
.navigator-360__frame {
  pointer-events: auto;
  -webkit-user-drag: none;
  user-select: none;
}

.navigator-360__overlay {
  pointer-events: none;           /* tylko .house-area łapie eventy */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.navigator-360__overlay.is-visible {
  opacity: 1;
}

.navigator-360__hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-medium, #6b7560);
  font-size: 0.85rem;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 5;
}
.navigator-360.has-dragged .navigator-360__hint {
  opacity: 0;
}

/* === Strzałki obrotu (lewo/prawo) — klik = 30°, hold = ciągły obrót === */
.navigator-360__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;                                  /* reset domyślnego padding <button> */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 50%;
  color: #3D6B2F;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  z-index: 4;
  line-height: 0;                              /* zapobiega offsetowi od linii bazowej tekstu */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.navigator-360__arrow--left  { left: 16px; }
.navigator-360__arrow--right { right: 16px; }

.navigator-360__arrow:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transform: translateY(-50%) scale(1.06);
}

.navigator-360__arrow:active {
  transform: translateY(-50%) scale(0.95);
  background: #E9F3E3;
}

.navigator-360__arrow:focus-visible {
  outline: 2px solid #3D6B2F;
  outline-offset: 2px;
}

.navigator-360__arrow svg {
  /* Reset reguły .navigator-stage svg (która ustawia position: absolute; inset: 0
     dla overlayu — bez resetu SVG strzałki też dostałby pełen rozmiar przycisku). */
  position: static;
  inset: auto;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  pointer-events: none;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .navigator-360__arrow {
    width: 40px;
    height: 40px;
  }
  .navigator-360__arrow--left  { left: 8px; }
  .navigator-360__arrow--right { right: 8px; }
  .navigator-360__arrow svg { width: 20px; height: 20px; }
}

/* === Przyciski Przód/Tył (animowane przejście do klatki kluczowej) === */
.navigator-360__controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.navigator-360__btn {
  padding: 10px 20px;
  background: #fff;
  border: 2px solid #3D6B2F;
  color: #3D6B2F;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
}

.navigator-360__btn:hover {
  background: #E9F3E3;
}

.navigator-360__btn.is-active {
  background: #3D6B2F;
  color: #fff;
}

.navigator-360__btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* === Tooltip statusu lokalu (hover na .house-area) === */
.navigator-360__tooltip {
  position: fixed;
  z-index: 1000;
  background: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  min-width: 180px;
  transform: translate(-50%, calc(-100% - 14px));
}

.navigator-360__tooltip.is-visible {
  opacity: 1;
}

.navigator-360__tooltip-title {
  font-weight: 600;
  color: #232b1c;
  margin: 0 0 6px;
  font-size: 15px;
}

.navigator-360__tooltip-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.navigator-360__tooltip-status--dostepny    { background: #E9F3E3; color: #3D6B2F; }
.navigator-360__tooltip-status--rezerwacja  { background: #FEF3C7; color: #92400E; }
.navigator-360__tooltip-status--sprzedany   { background: #F3F4F6; color: #6B7280; }

.navigator-360__tooltip-meta {
  color: #6b7560;
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}

/* Hotspoty domyślnie NIEWIDOCZNE — kolor pojawia się dopiero na hover.
   Wymóg klienta: zero stroke nigdy. */
.house-area {
  cursor: pointer;
  transition: fill 0.2s, stroke 0.2s;
  pointer-events: all;
  fill: rgba(0, 0, 0, 0);
  stroke: rgba(0, 0, 0, 0);
  stroke-width: 0;
}

.house-group[data-status="dostepny"]:hover .house-area {
  fill: rgba(90, 145, 66, 0.45);
  stroke: rgba(0, 0, 0, 0);
}
.house-group[data-status="rezerwacja"]:hover .house-area {
  fill: rgba(245, 158, 11, 0.5);
  stroke: rgba(0, 0, 0, 0);
}

/* Sprzedane: bez stałego wyszarzenia — działa jak dostępne/rezerwacja,
   szary overlay tylko na hover. Cursor not-allowed sygnalizuje, że klik
   nie otworzy modala. */
.house-group[data-status="sprzedany"] .house-area {
  cursor: not-allowed;
}
.house-group[data-status="sprzedany"]:hover .house-area {
  fill: rgba(122, 130, 122, 0.45);
}

/* Stary prosty tooltip .number-label (tylko nazwa "Dom A1") zastąpiony
   bogatszym .navigator-360__tooltip (status badge + powierzchnia + pokoje). */
.buildings-svg {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: block;
}
.building-segment { cursor: pointer; transition: transform 0.3s; }
.building-segment rect.body {
  fill: #f5f1eb;
  stroke: #3a3a38;
  stroke-width: 1.5;
  transition: fill 0.3s, stroke 0.3s, stroke-width 0.3s;
}
.building-segment rect.roof,
.building-segment polygon.roof { fill: #3a3a38; }
.building-segment rect.wood { fill: #d4b896; transition: fill 0.3s; }
.building-segment rect.window { fill: #2a2a28; }
.building-segment rect.garage { fill: #1f1f1d; }
.building-segment:hover rect.body {
  fill: var(--green-bg);
  stroke: var(--green);
  stroke-width: 2;
}
.building-segment.active rect.body {
  fill: var(--green-bg);
  stroke: var(--green);
  stroke-width: 2.5;
}
.building-segment:focus-visible {
  outline: none;
}
.building-segment:focus-visible rect.body {
  stroke: var(--green-dark);
  stroke-width: 3;
}
.building-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  fill: var(--text-dark);
  text-anchor: middle;
  pointer-events: none;
}
.building-segment.active .building-label { fill: var(--green-dark); }

/* Status badges (Wolne / Rezerwacja / Sprzedane) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.status-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.status-wolne        { background: #e6f4de; color: #3d6b2e; }
.status-wolne::before     { background: #5a9142; }
.status-rezerwacja   { background: #fff2dc; color: #8a5a1a; }
.status-rezerwacja::before { background: #d89a3d; }
.status-sprzedane    { background: #ececea; color: #7a7a78; }
.status-sprzedane::before  { background: #a0a09e; }

.nav-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 24px;
}

.houses-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  align-items: center;
}
.houses-filters label {
  font-weight: 600;
  color: var(--text-medium);
  margin-right: 8px;
  font-size: 0.9rem;
}
.filter-btn {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text-dark);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.filter-btn:hover {
  background: var(--green-bg);
  border-color: var(--green-light);
  color: var(--green-dark);
}
.filter-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
}

.house-table-wrap {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.house-table .table-muted {
  color: var(--text-medium);
  font-size: 0.92rem;
  opacity: 0.55;
}
.house-table .btn-contact {
  font-family: inherit;
  cursor: pointer;
}
.house-table .btn-contact .fa-envelope { margin-right: 6px; }
.house-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.house-table thead { background: #f7f8f5; }
.house-table th {
  text-align: left;
  padding: 16px 20px;
  font-weight: 600;
  color: var(--text-medium);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.house-table td {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
}
.house-table tbody tr { transition: background 0.2s; }
.house-table tbody tr:hover { background: #fafbf7; }
.house-table tbody tr.highlighted { background: var(--green-bg); }
.house-table tbody tr:last-child td { border-bottom: none; }
.house-table .btn-small {
  padding: 8px 14px;
  font-size: 0.82rem;
  border-radius: 8px;
  background: var(--green);
  color: #ffffff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.house-table .btn-small:hover { background: var(--green-dark); }
.house-table .btn-small.disabled {
  background: #d0d2cd;
  color: #ffffff;
  cursor: not-allowed;
}

/* Tabela — loading + error states (sterowane przez investment-units.js) */
.house-table .row-skeleton td {
  background: linear-gradient(90deg, #f3f3f0 0%, #ececea 50%, #f3f3f0 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s linear infinite;
  color: transparent;
  user-select: none;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.house-table .row-error td,
.house-table .row-empty td {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-medium);
  font-weight: 600;
}
.house-table .row-error td {
  color: #8a2c2c;
  background: #fcecec;
}
.house-table .row-error a {
  color: #8a2c2c;
  font-weight: 700;
}
.house-table .table-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--green-bg);
  border-top-color: var(--green);
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ===== ZALETY — siatka kart (feature-card jest w components.css) ===== */
#zalety { background: var(--gray-bg); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}


/* ===== GALERIA — siatka 3 × 3 (9 slotów, 8 zdjęć, precyzyjne pozycje) ===== */
#galeria { background: #ffffff; }
.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 240px 240px 240px;
  gap: 16px;
}

/* Bez pustych komórek: salon zajmuje dużą lewą kolumnę przez 2 wiersze,
   pozostałe 7 zdjęć (kuchnia / jadalnia / sypialnia / garderoba / dziecko-1 /
   dziecko-2 / łazienka) wypełnia resztę 7 slotów siatki 3×3. */
.gallery-item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.gallery-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.gallery-item:nth-child(3) { grid-column: 3; grid-row: 1; }
.gallery-item:nth-child(4) { grid-column: 2; grid-row: 2; }
.gallery-item:nth-child(5) { grid-column: 3; grid-row: 2; }
.gallery-item:nth-child(6) { grid-column: 1; grid-row: 3; }
.gallery-item:nth-child(7) { grid-column: 2; grid-row: 3; }
.gallery-item:nth-child(8) { grid-column: 3; grid-row: 3; }

.gallery-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
  content: '\f00e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover::after { opacity: 1; }


/* ===== SPACER 3D — gradient bg, placeholder embed ===== */
#spacer {
  background: linear-gradient(135deg, #2d4a23, #3d6b2e);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
#spacer::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: rgba(122, 179, 88, 0.15);
}
#spacer::after {
  content: '';
  position: absolute;
  bottom: -150px; left: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: rgba(122, 179, 88, 0.08);
}
.tour-wrap {
  position: relative;
  z-index: 1;
  text-align: center;
}
#spacer .section-title { color: #ffffff; }
#spacer .section-subtitle {
  color: rgba(255, 255, 255, 0.8);
  margin-left: auto;
  margin-right: auto;
}

/* Kafelek otwierający spacer 3D w nowej karcie. Pełen-szerokości obraz +
   overlay z play-iconą i etykietą. Sam Pano2VR jest na osobnej podstronie. */
.tour-card-link {
  display: block;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}
.tour-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
}
.tour-card-thumb { position: absolute; inset: 0; }
.tour-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.tour-card-link:hover .tour-card-thumb img { transform: scale(1.05); }
.tour-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
  display: flex;
  align-items: flex-end;
  padding: 32px;
  color: #ffffff;
}
.tour-card-play {
  width: 80px; height: 80px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--green-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  padding-left: 6px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}
.tour-card-link:hover .tour-card-play { transform: translate(-50%, -50%) scale(1.1); }
.tour-card-info { position: relative; z-index: 1; }
.tour-card-info strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-heading);
  margin-bottom: 4px;
}
.tour-card-info span {
  display: block;
  font-size: 14px;
  opacity: 0.85;
}
.tour-note {
  text-align: center;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  margin-top: 20px;
}

@media (max-width: 640px) {
  .tour-card-play { width: 60px; height: 60px; font-size: 20px; }
  .tour-card-overlay { padding: 20px; }
  .tour-card-info strong { font-size: 18px; }
}


/* ===== DEWELOPER — siatka (dev-tile sam w components.css) ===== */
#deweloper { background: var(--gray-bg); }
.dev-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* W landingu inwestycji body ma 17px (globalna typografia).
   Kafelki dewelopera trzymamy świadomie na 16px — gęstszy tekst w boksach. */
.dev-content p {
  font-size: 16px;
}

/* Wariant: kafelki z ikoną SVG zamiast zdjęcia — 3 kolumny, ikona na górze, tekst pod nią. */
.dev-tiles--icons {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}
.dev-tiles--icons .dev-tile {
  grid-template-columns: 1fr;
  text-align: center;
  min-height: 0;
}
.dev-tiles--icons .dev-tile .dev-content {
  padding: 32px 24px;
  align-items: center;
}
.dev-tiles--icons .dev-icon-img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 18px;
}
.dev-tiles--icons .dev-icon-img img {
  width: 176px;
  height: 176px;
  max-width: 100%;
  display: block;
}


/* ===== KONTAKT — split: lewa (3 osoby + dane) / prawa (formularz) ===== */
#kontakt { background: #ffffff; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.contact-left {
  padding: 40px;
  background: linear-gradient(135deg, #3d6b2e, #5a9142);
  color: #ffffff;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.contact-left::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.contact-left h3 {
  color: #ffffff;
  font-size: 1.7rem;
  margin-bottom: 10px;
  position: relative;
  font-weight: 700;
}
.contact-left .contact-lead {
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 28px;
  position: relative;
  font-size: 0.98rem;
  line-height: 1.6;
  font-weight: 500;
}

/* W kontekście contact-left (zielone tło) — kafle osób z białym bg jak default,
   ale lekko dopasowane do otoczenia. */
.contact-left .contact-people {
  grid-template-columns: 1fr;
  gap: 12px;
  position: relative;
  margin-bottom: 28px;
}
.contact-left .contact-person {
  background: rgba(255, 255, 255, 0.96);
  border-color: transparent;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}
.contact-left .contact-person .cp-avatar {
  margin: 0;
  width: 48px;
  height: 48px;
  font-size: 1.2rem;
}
.contact-left .contact-person h4 {
  margin-bottom: 2px;
  font-size: 1rem;
}
.contact-left .contact-person .cp-role {
  margin-bottom: 0;
  font-size: 0.85rem;
}
.contact-left .contact-person .cp-phone {
  padding: 8px 14px;
  font-size: 0.95rem;
}

/* Lista informacji w sekcji kontakt — wariant "Biuro sprzedaży" (bez zespołu).
   Zastępuje contact-people + contact-extra w landingu Majowych Ogrodów. */
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 28px 0 32px;
  position: relative;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-info-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
}

.contact-info-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-info-body strong {
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  font-family: var(--font-heading);
}

.contact-info-body a,
.contact-info-body span {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.contact-info-body a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.contact-extra {
  position: relative;
  margin-bottom: 24px;
}
.contact-extra-item {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  align-items: center;
}
.contact-extra-item i {
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  color: #ffffff;
}
.contact-extra-item strong {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
}
.contact-extra-item a,
.contact-extra-item span {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.financing-note {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 20px;
  border-left: 3px solid var(--green-light);
  position: relative;
}
.financing-note strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.02rem;
  font-weight: 700;
}
.financing-note p {
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}

.contact-form {
  background: #ffffff;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.contact-form h3 {
  font-size: 1.7rem;
  margin-bottom: 10px;
  font-weight: 700;
}
.contact-form > p {
  color: var(--text-medium);
  margin-bottom: 24px;
  font-size: 1rem;
  font-weight: 500;
}


/* ===== MODAL "Zapytaj o dom" — 3 widoki (szczegóły / formularz / sukces) ===== */
.house-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 42, 26, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  padding: 20px;
}
.house-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.house-modal {
  background: #ffffff;
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  padding: 28px;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.2s;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
}
.house-modal-backdrop.open .house-modal {
  transform: translateY(0) scale(1);
}
.house-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 14px;
}
.house-modal h3 {
  font-size: 1.6rem;
  color: var(--green-dark);
  font-weight: 700;
  margin: 0;
}
.house-modal-subtitle {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 4px;
  font-weight: 500;
}
.house-modal-close {
  background: var(--gray-bg);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  color: var(--text-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.house-modal-close:hover {
  background: var(--green-bg);
  color: var(--green-dark);
}

.modal-status {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.modal-status.dostepny    { background: var(--green-bg); color: var(--green-dark); }
.modal-status.rezerwacja  { background: #fef3c7; color: #92400e; }
.modal-status.sprzedany   { background: var(--gray-bg); color: var(--text-medium); }

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.modal-field {
  background: var(--gray-bg);
  padding: 12px 14px;
  border-radius: 10px;
}
.modal-field-label {
  font-size: 0.72rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 600;
}
.modal-field-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
  font-family: var(--font-heading);
}
.modal-field-value.price { color: var(--green-dark); }

.modal-actions {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.btn-modal-primary,
.btn-modal-secondary {
  padding: 14px 20px;
  border-radius: 10px;
  width: 100%;
  font-weight: 600;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  text-decoration: none;
}
.btn-modal-primary {
  background: var(--green);
  color: #ffffff;
}
.btn-modal-primary:hover { background: var(--green-dark); }
.btn-modal-primary:disabled { background: var(--text-light); cursor: not-allowed; }

.btn-modal-secondary {
  background: #ffffff;
  color: var(--green-dark);
  border: 2px solid var(--green-bg);
}
.btn-modal-secondary:hover {
  background: var(--green-bg);
  border-color: var(--green);
}

.btn-text {
  background: none;
  border: 0;
  color: var(--text-medium);
  cursor: pointer;
  font-size: 14px;
  padding: 8px;
  margin-top: 8px;
  width: 100%;
}
.btn-text:hover { color: var(--green-dark); }

/* === Akcje pomocnicze w modal — PDF + Wirtualny spacer (2 kolumny obok siebie) === */
.modal-actions-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.btn-modal-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  background: #fff;
  border: 1.5px solid var(--green);
  color: var(--green-dark);
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-modal-tertiary:hover {
  background: var(--green-bg);
}

.btn-modal-tertiary i {
  font-size: 15px;
  color: var(--green-dark);
}

@media (max-width: 480px) {
  .modal-actions-secondary {
    grid-template-columns: 1fr;
  }
}

.success-icon {
  font-size: 64px;
  color: var(--green);
  margin: 0 0 16px;
}


/* ===== LIGHTBOX =====
   Style w assets/css/components.css (.lightbox, .lightbox-img,
   .lightbox-close/-prev/-next + responsive). JS: assets/js/lightbox.js. */


/* ============================================================
   RESPONSIVE — 1024px (tablet), 640px (mobile)
   ============================================================ */
@media (max-width: 1024px) {
  .about-grid,
  .map-intro,
  .loc-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dev-tiles {
    grid-template-columns: 1fr;
  }
  .dev-tiles--icons {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .dev-tiles--icons .dev-icon-img img {
    width: 140px;
    height: 140px;
  }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .gallery-item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
  .gallery-item { aspect-ratio: 4 / 3; }
  /* Tablet: nawigator pełna szerokość bez paddingu, render dosuwa do krawędzi. */
  .navigator { padding: 0; }
  .house-table { font-size: 0.82rem; }
  .house-table th,
  .house-table td { padding: 12px 10px; }
  .contact-left,
  .contact-form { padding: 28px; }
  .contact-left .contact-person {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  .contact-left .contact-person .cp-phone {
    grid-column: 1 / -1;
    justify-self: start;
  }
  /* Loc-img poniżej kolumny tekstu — przywracamy aspect-ratio jak na mobile. */
  .loc-img {
    aspect-ratio: 4/3;
    min-height: auto;
  }
  .loc-img img {
    height: auto;
  }
}

@media (max-width: 640px) {
  .hero-content { padding: 100px 16px 60px; }
  .hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .gallery-item { aspect-ratio: 4 / 3; }
  /* Mobile: nawigator pełna szerokość bez paddingu + wyśrodkowana legenda. */
  .navigator { padding: 0; }
  .navigator-legend {
    justify-content: center;
    text-align: center;
  }
  .legend-stats {
    margin-left: 0;
    width: 100%;
  }
  .houses-filters .filter-btn {
    padding: 6px 12px;
    font-size: 0.82rem;
  }
}


/* ============================================================
   LEAFLET — mapa lokalizacji w prawej kolumnie .map-intro (sekcja #mapa).
   Rozmiar dopasowany do starej proporcji ilustracji (.map-visual: aspect 5/4).
   ============================================================ */
.lokalizacja-mapa {
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8eee3, #dce5d4);
  box-shadow: var(--shadow-lg);
}

.leaflet-container {
  font-family: inherit;
  background: #f4f4f1;
}

/* Pin główny inwestycji — terakota dla kontrastu z zielenią POI. */
.pin-inwestycja {
  background: #C2410C;
  width: 44px;
  height: 44px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 4px solid #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  margin-left: -22px;
  margin-top: -44px;
}

.pin-inwestycja::after {
  content: '';
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transform: rotate(45deg);
}

/* Pinezki POI — zielone, na hover ciemniejsze. */
.pin-poi {
  background: #3D6B2F;
  width: 32px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  margin-left: -16px;
  margin-top: -40px;
  transition: background 0.2s ease;
}

.pin-poi:hover {
  background: #2d5223;
}

.pin-poi svg {
  transform: rotate(45deg);
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Popup Leaflet */
.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-content {
  font-family: inherit;
  font-size: 0.9rem;
  margin: 12px 16px;
  min-width: 140px;
}

.leaflet-popup-content strong {
  display: block;
  color: var(--green, #3d6b2e);
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.leaflet-popup-content .dystans {
  color: var(--text-medium, #6b7560);
  font-size: 0.82rem;
}

.leaflet-popup-tip {
  background: #fff;
}

@media (max-width: 1024px) {
  .lokalizacja-mapa {
    aspect-ratio: auto;
    min-height: 360px;
  }
}

/* ============================================================
   Tabela lokali — CARD LAYOUT na mobile (<640px).
   Każdy wiersz renderuje się jako karta z labelami `data-label`
   (atrybut ustawiany w investment-units.js). Thead ukryte,
   reguły display:block przekształcają tabelę w stos kart.
   ============================================================ */
@media (max-width: 640px) {
  .house-table-wrap {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  .house-table { font-size: 0.92rem; }
  .house-table thead { display: none; }
  .house-table,
  .house-table tbody,
  .house-table tr,
  .house-table td {
    display: block;
    width: 100%;
  }
  .house-table tbody tr {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 14px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
  }
  .house-table tbody tr:hover { background: #fff; }
  .house-table tbody tr:last-child { margin-bottom: 0; }
  .house-table td {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 12px;
    align-items: center;
  }
  .house-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-medium);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  /* Nr lokalu — wyróżniony nagłówek karty */
  .house-table td:first-child {
    grid-template-columns: 1fr;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .house-table td:first-child::before { display: none; }
  .house-table td:first-child strong {
    font-size: 1.3rem;
    color: var(--green-dark);
    font-weight: 700;
  }
  /* Status badge — wyrównany do lewej w kolumnie wartości */
  .house-table td[data-label="Status"] .status-badge {
    justify-self: start;
  }
  /* Karta lokalu + Kontakt — full-width na dole karty, button 100% */
  .house-table td[data-label="Karta lokalu"],
  .house-table td[data-label="Kontakt"] {
    grid-template-columns: 1fr;
    padding: 10px 0 0 0;
  }
  .house-table td[data-label="Karta lokalu"]::before,
  .house-table td[data-label="Kontakt"]::before {
    display: block;
    margin-bottom: 6px;
  }
  .house-table td[data-label="Karta lokalu"] .btn-small,
  .house-table td[data-label="Kontakt"] .btn-small {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .house-table td[data-label="Karta lokalu"] .table-muted {
    padding: 6px 0;
  }
  /* Ostatnia komórka karty bez separatora */
  .house-table tr td:last-child { border-bottom: none; }
  /* Stany loading / error / empty — przywróć layout tabelarny dla pojedynczego wiersza */
  .house-table tr.row-error td,
  .house-table tr.row-empty td {
    grid-template-columns: 1fr;
    padding: 14px 18px;
    border: none;
  }
  .house-table tr.row-error td::before,
  .house-table tr.row-empty td::before { display: none; }
  /* Skeleton rzędy nie mają sensu w card layout — ukrywamy */
  .house-table tr.row-skeleton { display: none; }
}