/* ============================================================
   Karta oferty — redakcyjna, bez obudowy

   Poprzednia wersja była panelem: biała płyta z ramką i promieniem,
   na szarym tle, z poziomą kreską w środku i pigułkami na zdjęciu.
   To układ z czasów Bootstrapa i tak też się czytał.

   Teraz kartę tworzy zdjęcie i typografia postawione wprost na tle
   strony. Rozdziela je światło i skala, nie obwódka. Zdjęcie dostaje
   proporcję pionową 4:5 — pionowy kadr mieści architekturę i wnętrze,
   a przy trzech kolumnach daje wyraźnie większy obraz niż 4:3.
   ============================================================ */

.cards { gap: clamp(var(--s-5), 3vw, var(--s-8)) clamp(var(--s-5), 2.4vw, var(--s-7)); }

.card {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.card:hover,
.card:focus-within { border-color: transparent; }

.card__media { border-radius: 0; background: var(--bg-alt); }
.card__media img,
.card__media img[width][height] { aspect-ratio: 4 / 5; height: auto; }
.card__noimg { aspect-ratio: 4 / 5; }

/* Podniesienie całej karty zamiast samego zdjęcia: ruch jest jeden,
   więc czyta się jako reakcja na kursor, a nie jako dwie animacje. */
.card {
  transition: transform var(--dur-base, 260ms) var(--ease-out-quart, ease);
}
.card:hover { transform: translateY(-4px); }
.card:hover .card__media img { transform: scale(1.04); }

.card__body {
  padding: var(--s-4) 0 0;
  display: grid;
  gap: var(--s-2);
}

/* Lokalizacja bez wersalików i rozstrzelenia: to metadana, nie nagłówek. */
.card__region {
  font-size: var(--fs-sm);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--muted);
}

.card__title { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.012em; }
.card__title a { text-decoration: none; }
.card:hover .card__title a { text-decoration: none; }

.card__price { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 700; }

/* Forma władania była szarym boksem wewnątrz karty, czyli kartą w karcie.
   Zostaje sam wiersz oddzielony włoskową linią. */
.card .tenure {
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: var(--s-3) 0 0;
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.card .tenure svg { display: none; }
/* Tekst ostrzeżenia bierze --warn-text (4,9:1), obramowanie zostaje na
   --warn: linia nie musi spełniać progu kontrastu dla tekstu. */
.card .tenure--missing { color: var(--warn-text); border-top-color: var(--warn); }

/* ROI jako liczba w wierszu, nie musztardowa pigułka konkurująca ze zdjęciem. */
.card .badge--roi,
.feature .badge--roi {
  background: none;
  color: var(--accent-dark);
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
}

.card__foot {
  padding: 0;
  border-top: 0;
  margin-top: var(--s-1);
  align-items: center;
}
.card__save {
  border: 0;
  background: none;
  color: var(--muted);
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
}
.card__save:hover { color: var(--accent-dark); }

/* Jedna plakietka na zdjęciu wystarcza. Reszta informacji ma swoje
   miejsce w tekście i nie musi leżeć na fotografii. */
.card__badges .badge--roi { display: none; }

/* --- Plakietki na zdjęciu ------------------------------------------- */
/*
 * Kolorowe pigułki (zielona „gotowe”, pomarańczowa „w budowie”) wnosiły do
 * palety dwa kolory, których w niej nie ma, i przykrywały zdjęcie. Status
 * jest informacją, nie ostrzeżeniem, więc dostaje formę cichą: małe wersaliki
 * na przyciemnieniu, wspólne dla wszystkich stanów.
 *
 * Wyjątkiem zostaje „Okolica”. Ta plakietka mówi, że fotografia nie
 * przedstawia oferty, i musi być czytelna wprost na obrazie — bez niej
 * zdjęcie z sąsiedztwa udaje nieruchomość.
 */
.card__badges .badge,
.card__render .badge {
  background: oklch(0.21 0.008 260 / .78);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: 5px var(--s-3);
  /* 11 px wpadało poniżej progu czytelności w audycie; wersaliki na
     półprzezroczystym tle i tak tracą kontrast, więc stopień idzie w górę,
     a nie tracking. */
  font-size: 0.75rem;
  letter-spacing: .05em;
  font-weight: 600;
}
.card__badges .badge svg { display: none; }

/* Zarezerwowane i sprzedane nadal muszą się wyróżniać: to zmienia
   decyzję czytelnika, a nie tylko go informuje. */
.card__badges .badge--reserved {
  background: var(--accent);
  color: var(--on-accent);
}

/* --- Siatka ofert na stronie głównej --------------------------------- */
/*
 * Nad kartami stoi już pełnoszerokościowa oferta wyróżniona (`.feature`),
 * a pod nią cztery karty. Przy trzech kolumnach czwarta zostawała sama
 * w rzędzie — układ czytał się jak brakujący element, nie jak wybór.
 * Dwie kolumny dzielą cztery karty parzyście i dają większy kadr.
 */
@media (min-width: 1024px) {
  .home .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .cards > .feature { grid-column: 1 / -1; }
  .home .card__title { font-size: 1.3125rem; }
  .home .card__media img,
  .home .card__media img[width][height] { aspect-ratio: 3 / 2; }
}

/* --- Karuzela ofert na stronie głównej ------------------------------- */
/*
 * Wybór redakcyjny czyta się lepiej jako rząd do przewinięcia niż jako
 * siatka: nie zajmuje pionu, którego na stronie głównej brakuje, i mówi
 * wprost „jest tego więcej”. Realizacja na scroll-snapie, bez biblioteki
 * i bez JavaScriptu — przewijanie palcem, kółkiem, klawiaturą i pasek
 * przewijania działają wtedy same z siebie.
 *
 * Ostatni kafelek jest wąski celowo: wystający fragment następnej karty
 * to jedyny sygnał przewijalności, który nie wymaga strzałek ani kropek.
 */
@media (min-width: 600px) {
  .home .cards--rail {
    display: flex;
    gap: clamp(var(--s-4), 2vw, var(--s-6));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--gutter);
    padding-bottom: var(--s-4);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .home .cards--rail > .card {
    flex: 0 0 clamp(300px, 28vw, 380px);
    scroll-snap-align: start;
  }
}

/* Na telefonie rząd wychodzi poza margines strony: karta dociśnięta do
   krawędzi ekranu czyta się jako początek rzędu, a nie jako obcięty blok. */
@media (max-width: 599px) {
  .home .cards--rail {
    display: flex;
    gap: var(--s-6);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline-start: var(--gutter);
    padding-bottom: var(--s-4);
  }
  .home .cards--rail > .card {
    flex: 0 0 74vw;
    scroll-snap-align: start;
  }
}

/* Pasek przewijania bywa niewidoczny na macOS, więc krawędź rzędu dostaje
   delikatne przejście — informacja o tym, że treść biegnie dalej. */
.home .cards--rail { -webkit-overflow-scrolling: touch; }

/* --- Strzałki rzędu ofert -------------------------------------------- */
/*
 * Nad rzędem, po prawej — tam, gdzie kończy się nagłówek sekcji. Wariant
 * nakładany na krawędzie rzędu zasłaniałby zdjęcia, a na telefonie
 * dodatkowo kolidował z gestem przewijania.
 */
.rail__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.rail__nav[hidden] { display: none; }

.rail__arrow {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out-quart, ease),
              background 160ms var(--ease-out-quart, ease);
}
.rail__arrow:hover:not(:disabled) { border-color: var(--ink); background: var(--bg-alt); }
.rail__arrow:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rail__arrow:disabled { opacity: .3; cursor: default; }

/* Brak ceny to stan oferty, nie usterka: deweloper nie opublikował jeszcze
   cennika. Wyróżniamy skalą i barwą pomocniczą, nie kolorem ostrzegawczym. */
.card__price--brak,
.rail__price--brak,
.spec__price--brak {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --- Scena galerii na podstronie oferty ------------------------------ */
/*
 * Materiał z broszur ma bardzo różne proporcje i rozdzielczości: od 526 px
 * (Crystal Oak) po 8415 px (Luna Oak). Rozciąganie kadru na pełną szerokość
 * kolumny powiększało te mniejsze o 70% i było widać rozmycie.
 *
 * Obraz dostaje więc naturalną wielkość, wyśrodkowany na neutralnym tle —
 * układ, który zniesie też mieszane proporcje przyszłej galerii (§32).
 */
.gallery__stage {
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  min-height: min(60vh, 520px);
  overflow: hidden;
}
.gallery__stage img,
.gallery__stage img[width][height] {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(72vh, 720px);
  object-fit: contain;
  display: block;
}

/* Skrót udogodnień na karcie: jeden wiersz, ucinany, bez zawijania na trzy
   linijki przy dłuższych nazwach. */
.card__amen {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}