/* Krok 1 — termin, punkt i lista aut.
   Tokeny i większość klas (`.pole`, `.pole-grupa`, `.pola`, `.filtry__*`, `.pojazdy`,
   `.oferta*`, `.przelacznik`, `.guzik*`, `.krok__naglowek`) przychodzą z `globalne.css`
   builda Astro. Tu są tylko uzupełnienia: prefiksy `warunki`, `oferta`, `auta`.
   Kolejność: układ → warunki wynajmu → przełącznik rodzaju → karta pojazdu → stan pusty. */

/* --------------------------------------------------------------------------
   Układ
   -------------------------------------------------------------------------- */

/* Krok 1 nie ma koszyka, więc siatka z `wspolne.css` schodzi do jednej kolumny. */
.rezerwacja__uklad--pelny { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1080px) {
  .rezerwacja__uklad--pelny { grid-template-columns: minmax(0, 1fr); }
}

#auta-outer { display: block; }

/* --------------------------------------------------------------------------
   Warunki wynajmu
   -------------------------------------------------------------------------- */

/* Uwaga: `.warunki` istnieje już w `globalne.css` (sekcja warunków najmu na /busy) jako
   siatka z własnym `padding` — stąd jawne zerowanie, inaczej blok jest wcięty o ~47 px
   względem przełącznika rodzaju i kart pod spodem. */
.warunki {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  margin-bottom: clamp(26px, 3vw, 40px);
}

.warunki__glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 14px;
}
.warunki__glowa h2 { margin: 0; }

/* Plakietka z mgły obok tytułu — luźny tekst po prawej gubił się w pustce. */
.warunki__doby {
  margin: 0;
  padding: 5px 13px;
  background: var(--tlo-mgla-glebsza);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 620;
  color: var(--atrament);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.warunki__doby[hidden] { display: none; }

/* Nota o opłatach: na monitorze jedna linijka, mniejsza od reszty. */
.warunki__nota { font-size: 0.86rem; }
@media (min-width: 1400px) { .warunki__nota { white-space: nowrap; } }

/* Dwa panele obok siebie dopiero od 760 px — przy 720 pola daty i godziny
   robiły się węższe niż ich własna zawartość. */
@media (max-width: 759px) {
  .warunki .pola--dwa { grid-template-columns: minmax(0, 1fr); }
}

/* Data i godzina stoją w jednym wierszu także na telefonie — `.pola--data` z globalne.css
   nie ma przełamania, więc wystarczy nie dokładać własnego. */

/* Na telefonie pola zostają rozwinięte — klient nie chce ich chować (14.09.2026). */
@media (max-width: 859px) {
  .warunki { margin-bottom: 18px; }
  .warunki__glowa { margin-bottom: 10px; }
  .warunki__glowa h2 { font-size: 1.2rem; }
}

.warunki__bledy { display: grid; gap: 6px; margin-top: 14px; }
/* Gdy wszystkie komunikaty są schowane, blok nie zabiera miejsca. */
.warunki__bledy:not(:has(.krok__blad:not([hidden]))) { display: none; }

/* Puste pole daty albo godziny — ten sam sygnał, co dawne różowe tło. */
.warunki input.jest-pusty { border-color: var(--pomarancz-mocny); background: var(--pomarancz-mgla); }

#change-dates[hidden],
#limit-km[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Przełącznik rodzaju i licznik
   -------------------------------------------------------------------------- */

.filtry--krok1 { margin-bottom: 12px; }
.filtry--krok1 .filtry__rodzaj button { min-height: 44px; }

@media (max-width: 640px) {
  /* Na telefonie trzy przyciski dzielą szerokość ekranu po równo; dłuższe etykiety
     łamią się na dwie linijki, ale wszystkie zostają w jednym rzędzie. */
  .filtry--krok1 .filtry__rodzaj {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    justify-self: stretch;
  }
  .filtry--krok1 .filtry__rodzaj button {
    padding-inline: 6px;
    font-size: 0.82rem;
    line-height: 1.25;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Karta pojazdu — uzupełnienia do `.oferta` z globalne.css
   -------------------------------------------------------------------------- */

/* Karty w panelu nie mają plusa z dymkiem, więc nazwa może zająć całą szerokość. */
.oferta.auto-lista-item .oferta__nazwa { padding-right: 0; }

/* Zdjęcie wypełnia górę karty od krawędzi do krawędzi, więc wcięcie schodzi
   z samej karty na jej treść. */
.oferta.auto-lista-item { --wciecie-karta: 19px; padding: 0; overflow: hidden; }
.oferta.auto-lista-item > :not(.oferta__foto) { margin-inline: var(--wciecie-karta, 19px); }
.oferta.auto-lista-item .oferta__tresc { margin-top: 18px; }
.oferta.auto-lista-item .oferta__drobne { margin-bottom: var(--wciecie-karta, 19px); }

/* Kadr o stałych proporcjach: karty w rzędzie zaczynają tekst na tej samej linii.
   Fotografie kadrujemy (`cover`), wycinki PNG pokazujemy w całości na mgle. */
.oferta.auto-lista-item .oferta__foto {
  display: block;
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--promien-karta) - 2px) calc(var(--promien-karta) - 2px) 0 0;
  background: var(--tlo-mgla-glebsza);
}
.oferta.auto-lista-item .oferta__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
}
/* Wycinki z chmury to studyjne kadry na białym tle (PNG bez przezroczystości),
   więc białe tło zdejmuje `mix-blend-mode: multiply` — inaczej w karcie siedzi
   biały prostokąt na mgle. */
.oferta.auto-lista-item .oferta__foto--wycinek img {
  object-fit: contain;
  padding: 4%;
  mix-blend-mode: multiply;
}
.oferta.auto-lista-item .oferta__foto .zastepcza { width: 100%; height: 100%; border-radius: 0; }

/* Meta w dwóch liniach: paliwo i skrzynia, pod spodem miejsca i walizki.
   Każda linia nierozrywalna — inaczej łamały się w przypadkowym miejscu. */
.oferta__meta-linia { flex: 0 0 100%; white-space: nowrap; }
.oferta__meta-linia + .oferta__meta-linia::before { content: none; margin: 0; }
.oferta.auto-lista-item .oferta__meta { gap: 2px 10px; font-size: 0.84rem; color: var(--atrament-cichy); }

/* Wiersz otwierający grupę w widoku „Wszystkie". */
.pojazdy__grupa {
  grid-column: 1 / -1;
  margin: 6px 0 -4px;
}
.pojazdy__grupa:not(:first-child) { margin-top: clamp(14px, 1.6vw, 24px); }

.oferta__drobne {
  display: block;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--atrament-cichy);
}

.oferta .guzik--maly { white-space: nowrap; }

/* Auto, którego chmura nie daje na ten termin: przygaszona karta zamiast przycisku.
   Lekko, nie na szaro — karta ma nadal być czytelna, ma tylko nie zapraszać do kliknięcia. */
@media (max-width: 560px) {
  /* Na telefonie karta jest jednokolumnowa, więc podpis staje pod ceną. */
  }

/* Bez ceny z chmury nie ma czego rezerwować — zamiast kwoty stoi zdanie. */
.oferta__cena--zapytanie { font-size: 1.05rem; }

/* Cena: kwota za dobę, pod nią dwie osobne linijki, żeby nic nie łamało się obok przycisku. */
.oferta__cena-opis { display: block; }
.oferta__cena-suma { display: block; white-space: nowrap; }

@media (max-width: 560px) {
  /* Karta na całą szerokość, przycisk pod ceną i również na całą szerokość karty. */
  .pojazdy { grid-template-columns: minmax(0, 1fr); }
  .oferta.auto-lista-item .oferta__dol { display: grid; gap: 14px; }
  .oferta.auto-lista-item .oferta__dol .guzik { width: 100%; }
}

/* Karty-szkielety na czas ładowania — sama mgła, bez tekstu, żeby strona nie skakała. */
.oferta--szkielet {
  min-height: 340px;
  border: 0;
  background: var(--tlo-mgla);
  pointer-events: none;
}
.oferta--szkielet::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 10;
  margin: 0;
  border-radius: calc(var(--promien-karta) - 2px) calc(var(--promien-karta) - 2px) 0 0;
  background: var(--tlo-mgla-glebsza);
}
@media (max-width: 560px) {
  /* Na telefonie karty stoją w kolumnie — jeden szkielet wystarczy za cały ekran. */
  .oferta--szkielet { min-height: 300px; }
  .oferta--szkielet:nth-child(n + 2) { display: none; }
}

/* --------------------------------------------------------------------------
   Stan pusty
   -------------------------------------------------------------------------- */

.auta-pusto {
  margin: 8px 0 0;
  padding: clamp(24px, 4vw, 40px);
  background: var(--tlo-mgla);
  border-radius: var(--promien-karta);
  text-align: center;
}
.auta-pusto[hidden] { display: none; }
.auta-pusto__tytul { margin: 0; font-size: 1.05rem; font-weight: 640; letter-spacing: -0.018em; }
.auta-pusto__nota { margin: 6px 0 0; font-size: 0.93rem; color: var(--atrament-cichy); }
.auta-pusto__nota a { color: var(--pomarancz-mocny); font-weight: 620; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Ruch
   -------------------------------------------------------------------------- */

/* Uniesienie zamiast ciemnego tła — karta ma zostać jasna także pod kursorem. */
@media (hover: hover) and (pointer: fine) {
  .oferta.auto-lista-item {
    transition: background var(--przejscie), border-color var(--przejscie),
                box-shadow var(--przejscie), transform var(--przejscie);
  }
  .oferta.auto-lista-item:hover {
    background: var(--tlo-mgla);
    box-shadow: var(--cien-uniesiony);
    transform: translateY(-2px);
  }
  .oferta.auto-lista-item .guzik--glowny:hover { background: #2a2e37; }
}

@media (prefers-reduced-motion: reduce) {
  .filtry--krok1 .filtry__rodzaj button,
  .oferta.auto-lista-item { transition: none; }
  .oferta.auto-lista-item:hover { transform: none; }
}