/* ============================================================
   ONLY FAST CARS — pełny katalog floty (/flota)
   Minimalistycznie: kadr salonu na całą szerokość, pod nim pasek wyboru
   (skąd, odbiór, zwrot, Szukaj), a niżej gołe karty — zdjęcie, model, cena.
   Wszystko z klocków reszty serwisu (pigułki .hf-*, karty jak .home-car).
   ============================================================ */

.fleet-catalog-page {
  --fc-bg: #000;
  --fc-panel: #09090a;
  --fc-ink: #f3f3f1;
  --fc-muted: rgba(243, 243, 241, .52);
  --fc-line: rgba(255, 255, 255, .085);
  background: var(--fc-bg);
}

/* Bez kreski pod nawigacją: strona pod nią jest czarna, więc krawędź paska
   była jedyną linią przez całą szerokość ekranu i ciągnęła wzrok, zamiast
   znikać. Pasek i tak odcina się od kart przewijanych pod nim swoim tłem. */
.fleet-catalog-page .nav.scrolled {
  background: rgba(0, 0, 0, .92);
  border-bottom-color: transparent;
}

.fc-main { overflow: clip; background: var(--fc-bg); }
.fc-kicker {
  margin: 0;
  color: rgba(255, 255, 255, .5);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}
.fc-kicker span { color: var(--red2); margin-inline: .7em; }

/* ---------- kadr otwierający ----------
   Zdjęcie wjeżdża pod przezroczysty pasek nawigacji (nav jest fixed), więc
   sekcja nie potrzebuje górnego odstępu. Tytuł leży na zdjęciu jak nagłówek
   w hero; przyciemnienie od góry daje mu tło niezależne od jasnych okien. */
.fc-hero {
  position: relative;
  height: clamp(300px, 44vh, 500px);
  overflow: hidden;
  background: #000;
}
.fc-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kadr przycięty z obu stron: z góry znika czarne niebo, a niższa ramka
     wyżej zjada pustą drogę pod autem. Druga wartość rozdziela to cięcie —
     im wyższa, tym więcej znika z górnej krawędzi; 37% przy tej wysokości
     trzyma skrzydło w kadrze i oddaje resztę cięcia dołowi. */
  object-position: 50% 37%;
}

/* Dół schodzi do pełnej czerni, bo taka jest teraz strona pod kadrem —
   przy #0a0a0b zostawał widoczny szew między zdjęciem a tłem. */
.fc-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .24) 44%, rgba(0, 0, 0, .2) 70%, #000 100%);
  pointer-events: none;
}

@keyframes fc-head-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- kolekcja ---------- */
.fc-collection,
.fc-final {
  width: calc(100% - clamp(40px, 6vw, 112px));
  max-width: 1800px;
  margin-inline: auto;
}

.fc-collection { padding-block: clamp(40px, 4.5vw, 72px) clamp(56px, 6vw, 96px); }

/* Nagłówek katalogu jest tylko dla czytników ekranu (h1.sr-only), więc rząd
   zawiera już samą listwę narzędzi. Zostaje jako flex: przy wąskim ekranie
   narzędzia mają się łamać, a nie ściskać. */
.fc-collection-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px 44px;
  margin-bottom: clamp(20px, 2.2vw, 32px);
}

.fc-tools {
  /* Dwa rzędy jak w wyszukiwarce hero: na górze ciemny pasek z głównymi
     decyzjami (jakie auto, na kiedy, skąd), pod nim pigułki zawężające.
     Całość stoi na osi strony jak wyszukiwarka pod nagłówkiem hero; rzędy
     zwężają się do treści i środkują względem siebie. */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* Druga pigułka: ten sam materiał co górna (z hf-bar w site.css, przepisany,
   bo hf-bar niesie też wyściółkę i wysokość paska z hero), bez przycisku,
   odrobinę niższa i szersza od górnej, bo filtrów jest więcej niż decyzji
   wyżej. Szkło (backdrop-filter) zamyka z-index wszystkiego w środku we
   własnym kontekście rysowania, więc pigułka stoi z własnym z-indexem: bez
   tego listy klasy i sortowania ginęłyby pod kartami siatki, które przez
   animacje wejścia też mają swoje konteksty. Niżej niż muszla górnej (6):
   kalendarz i lista miast mają prawo przykryć filtry. Segmenty (cat-seg)
   są wspólne z górną pigułką, opisane niżej. */
.fleet-catalog-page .cat-row {
  width: min(1060px, 100%);
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(26, 26, 29, .72);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  position: relative;
  z-index: 5;
}
/* Segmenty filtrów dzielą się miejscem według treści, nie po równo jak trzy
   segmenty wyżej: jest ich cztery albo pięć (podstawienie i dostępność
   przychodzą z danymi), a „Z podstawieniem (+5)" potrzebuje więcej niż
   „Klasa". Zapas idzie do wszystkich po równo. */
.fleet-catalog-page .cat-row > .cat-seg,
.fleet-catalog-page .cat-seg-pair > .cat-seg { flex: 1 1 auto; min-height: 54px; padding: 4px 14px; gap: 10px; }
/* Kreska między segmentami: ::before każdego poza pierwszym w rzędzie.
   Ukryty segment (display: none) nie rysuje swojej, a kreska sąsiada zostaje
   pojedyncza; przy osobnych elementach jak wyżej (hf-sep) ukryty sąsiad
   zostawiałby dwie kreski obok siebie. */
.fleet-catalog-page .cat-row .cat-seg::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 26px; transform: translateY(-50%);
  background: rgba(255, 255, 255, .14);
}
.fleet-catalog-page .cat-row > .cat-seg:first-child::before { display: none; }
/* para przełączników: na szerokim ekranie pudełko znika z układu */
.cat-seg-pair { display: contents; }
/* ---------- pasek: skąd, od kiedy, do kiedy, Szukaj ----------
   Muszla, szkło i kreski między segmentami są z hf-shell/hf-bar/hf-sep
   w site.css; reszta jest własna. Dwie pigułki jedna pod drugą: górna to
   decyzje o najmie (skąd, od kiedy, do kiedy) z przyciskiem Szukaj na
   końcu, dolna, szersza, to filtry zawężające wynik (.cat-row niżej).
   Segment to dwa wiersze: nazwa pola ze
   strzałką u góry i wybrana wartość drobniej pod spodem, jak
   w wyszukiwarkach wynajmu. Kolory segmentów są wpisane wprost, nie
   tokenami: pasek zostaje ciemnym szkłem także w jasnym motywie, a tokeny
   tam ciemnieją.

   Szerzej niż pigułka w hero: trzy dwuwierszowe segmenty i przycisk
   potrzebują swojego miejsca. Z-index musi stać na muszli: hf-bar przez
   backdrop-filter tworzy własny kontekst rysowania, więc z-index kalendarza
   działa tylko wewnątrz paska, a bez podniesienia całości panel rozwijany
   w dół ginął pod kartami siatki, które przez animacje wejścia też mają
   swoje konteksty. */
.fleet-catalog-page .cat-shell {
  width: min(900px, 100%);
  position: relative;
  z-index: 6;
}
.fleet-catalog-page .cat-bar {
  min-height: 70px;
  padding: 7px 7px 7px 10px;
  gap: 0;
}
.fleet-catalog-page .cat-bar .hf-sep { height: 30px; }
/* segmenty górnej pigułki biorą wszystko poza przyciskiem */
.fleet-catalog-page .cat-bar-main { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.cat-seg {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 16px;
  border-radius: 999px;
  color: #f5f5f4;
  text-align: left;
  cursor: pointer;
  transition: background .2s;
}
.cat-seg:hover { background: rgba(255, 255, 255, .05); }
/* obrys do środka: segment stoi tuż przy krawędzi pigułki i obrys na
   zewnątrz wychodziłby poza nią */
.cat-seg:focus-visible { outline: 2px solid rgba(255, 255, 255, .45); outline-offset: -2px; }
/* Miary pisma: nazwa pola .9rem, wartość .8rem. Mniejsze (.8/.72) czytały
   się słabo z odległości, właściciel prosił o większe. */
.cat-seg-ico { width: 16px; height: 16px; flex: none; color: #8a8f96; }
.cat-seg-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cat-seg-lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 500; line-height: 1.15;
  color: #f5f5f4;
  white-space: nowrap;
}
.cat-seg-chev { width: 11px; height: 11px; flex: none; color: #8a8f96; transition: transform .22s ease; }
.cat-seg-val,
.fleet-catalog-page .cat-seg .ofc-pick-btn {
  font-size: .8rem; font-weight: 400; line-height: 1.15; letter-spacing: .01em;
  color: #c3c7cc;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* wartość bez wyboru czyta się jak podpowiedź w polu, nie jak wybrany dzień */
.cat-seg-val.empty { color: #9aa0a7; }

/* Miasto, klasa i sortowanie: initSelect wstawia własną listę za ukrytym
   selectem, więc wiersz wartości jest jej przyciskiem. Strzałkę niesie
   wiersz nazwy nad nim, a ta z przycisku znika; obraca się razem z otwarciem
   listy (:has bez wsparcia zostawia ją nieruchomą, lista i tak działa).
   Lista rozwija się spod całego segmentu, nie spod samego wiersza wartości:
   układem odniesienia jest segment (position: relative; to samo pole niesie
   kreski ::before w drugim rzędzie), a pudełko initSelect przestaje nim być. */
.fleet-catalog-page .cat-seg { position: relative; }
.fleet-catalog-page .cat-seg .ofc-pick { position: static; width: auto; align-self: auto; }
.fleet-catalog-page .cat-seg .ofc-pick-btn { height: auto; gap: 0; }
.fleet-catalog-page .cat-seg .ofc-pick-btn .hf-chev { display: none; }
.fleet-catalog-page .cat-seg .ofc-pick-list { left: 0; right: auto; top: calc(100% + 6px); min-width: 100%; }
.fleet-catalog-page .cat-seg:has(.ofc-pick.open) .cat-seg-chev { transform: rotate(180deg); }

/* Odbiór i zwrot w jednym pudełku (hfWhen): jeden kalendarz na oba, kreska
   między nimi. Przy otwartym panelu podświetla się całe pudełko, bo ono, a nie
   jeden z przycisków, jest tym, co się właśnie ustawia; własne podświetlenie
   przycisków wtedy gaśnie, żeby nie dublować tła. */
.cat-seg-dates {
  position: relative;
  flex: 2 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  border-radius: 999px;
  transition: background .2s;
}
.cat-seg-dates.open { background: rgba(255, 255, 255, .06); }
.cat-seg-dates.open .cat-seg-chev { transform: rotate(180deg); }
.cat-seg-dates.open .cat-seg:hover { background: none; }

/* Przycisk w środku górnej pigułki: wysokość równa segmentom, żeby
   z wyściółką paska dawał tę samą krawędź co one. */
.fleet-catalog-page .cat-go {
  flex: none;
  height: 56px;
  padding: 0 26px;
  margin-left: 6px;
  gap: 9px;
  font-size: .9rem;
}
.fleet-catalog-page .cat-go .ik { width: 15px; height: 15px; }

/* Na węższym ekranie pasek łamie się w kolumnę zaokrąglonych wierszy: miasto,
   para odbiór/zwrot, przycisk. To samo, co pigułka hero w site.css robi przy
   460 px, tylko wcześniej: trzy dwuwierszowe segmenty z przyciskiem nie
   mieszczą się w jednym rzędzie już przy 760 px. Kreski między wierszami
   znikają, zostaje ta między odbiorem a zwrotem, bo te dwa dzielą wiersz
   (site.css chowa hf-sep przy 460 px; ta reguła jest od niej ważniejsza). */
@media (max-width: 760px) {
  .fleet-catalog-page .cat-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 28px;
  }
  .fleet-catalog-page .cat-bar-main { flex-wrap: wrap; gap: 6px; width: 100%; }
  .fleet-catalog-page .cat-bar-main > .hf-sep { display: none; }
  .fleet-catalog-page .cat-place,
  .fleet-catalog-page .cat-seg-dates { flex: 1 1 100%; width: 100%; margin: 0; }
  /* flex: none, nie 1 1 100%: w kolumnie oś główna jest pionowa i podstawa
     100% liczyłaby się od wysokości pigułki */
  .fleet-catalog-page .cat-go { flex: none; width: 100%; margin: 0; }
  .fleet-catalog-page .cat-place,
  .fleet-catalog-page .cat-seg-dates {
    min-height: 58px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .05);
  }
  .fleet-catalog-page .cat-seg-dates .cat-seg { min-height: 58px; border-radius: 20px; }
  .fleet-catalog-page .cat-seg-dates.open { background: rgba(255, 255, 255, .08); }
  .fleet-catalog-page .cat-sep-dates { display: block; height: 26px; }
  /* lista na całą szerokość wiersza, jak lista miast w pigułce hero */
  .fleet-catalog-page .cat-seg .ofc-pick-list { left: 0; right: 0; }

  /* Dolna pigułka łamie się tak samo: szukajka, klasa, para przełączników,
     sortowanie; każdy na swojej zaokrąglonej tafli. */
  .fleet-catalog-page .cat-row {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    padding: 8px;
    border-radius: 28px;
  }
  .fleet-catalog-page .cat-row > .cat-seg,
  .fleet-catalog-page .cat-seg-pair {
    flex: 1 1 100%; width: 100%;
    min-height: 58px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .05);
  }
  .fleet-catalog-page .cat-seg-pair { display: flex; align-items: center; }
  .fleet-catalog-page .cat-seg-pair > .cat-seg { flex: 1 1 0; min-height: 58px; border-radius: 20px; }
  /* pudełko pary bez widocznego przełącznika nie ma zostawiać pustego wiersza */
  .fleet-catalog-page .cat-seg-pair:not(:has(.cat-seg:not([hidden]))) { display: none; }
  /* kreski zostają tylko między dwoma przełącznikami w jednym wierszu */
  .fleet-catalog-page .cat-row .cat-seg::before { display: none; }
  .fleet-catalog-page .cat-seg-pair:has(.cat-scope:not([hidden])) .cat-term::before { display: block; }
}

/* Telefony do 480 px: „Z podstawieniem (+59)" i „Tylko dostępne" nie mieszczą
   się obok siebie w jednym wierszu (po powiększeniu pisma każdy potrzebuje
   około 205 px). Każdy przełącznik dostaje własny wiersz na własnej tafli,
   a kreska między nimi znika. */
@media (max-width: 480px) {
  .fleet-catalog-page .cat-seg-pair { flex-wrap: wrap; gap: 6px; min-height: 0; background: none; }
  .fleet-catalog-page .cat-seg-pair > .cat-seg { flex: 1 1 100%; background: rgba(255, 255, 255, .05); }
  .fleet-catalog-page .cat-seg-pair > .cat-toggle:has(input:checked) { background: rgba(255, 255, 255, .08); }
  .fleet-catalog-page .cat-seg-pair:has(.cat-scope:not([hidden])) .cat-term::before { display: none; }
}

/* ---------- szukajka, klasa, przełączniki, sortowanie ----------
   Wszystko w segmentach cat-seg drugiej pigułki (patrz .cat-row wyżej);
   tu zostają różnice: pole tekstowe w wierszu wartości, ptaszek w miejscu
   ikony i kolory stanu włączonego. */
.fleet-catalog-page .cat-q input {
  width: 100%; min-width: 0;
  padding: 0; border: 0; background: none;
  color: #c3c7cc;
  font-family: inherit; font-size: .8rem; font-weight: 400; letter-spacing: .01em; line-height: 1.15;
}
.fleet-catalog-page .cat-q input::placeholder { color: #9aa0a7; }
/* natywny krzyżyk czyszczenia w input[type=search] jest czarny i ginie na
   ciemnym tle; pole i tak czyści się klawiaturą */
.fleet-catalog-page .cat-q input::-webkit-search-cancel-button { appearance: none; }
.fleet-catalog-page .cat-q input:focus-visible { outline: 0; }
/* pole w skupieniu podświetla cały segment, jak otwarty kalendarz wyżej */
.fleet-catalog-page .cat-q:focus-within { background: rgba(255, 255, 255, .06); }
/* Natywny select chowa initSelect; ta reguła jest tylko na wypadek, gdyby
   skrypt nie zdążył: nie ma rysować systemowej ramki na ciemnym szkle. */
.fleet-catalog-page .cat-seg select { min-width: 0; border: 0; background: none; color: inherit; font: inherit; }

/* ---------- przełączniki ----------
   Ptaszek stoi w miejscu ikony i sam niesie stan; wiersz wartości mówi, co
   przełącznik robi. Włączony przełącznik podświetla cały segment, nie tylko
   kwadracik: sam czerwony ptaszek ginął, gdy oko szukało z daleka, co jest
   zaznaczone. :has bez wsparcia zostawia czerwony ptaszek — stan nadal widać. */
.fleet-catalog-page .cat-toggle:has(input:checked) { background: rgba(255, 255, 255, .07); }
.fleet-catalog-page .cat-toggle:has(input:checked) .cat-seg-val { color: #e4e6e9; }
/* Własny kwadracik zamiast systemowego: natywny rysuje się stylem systemu
   operacyjnego i w ciemnej pigułce wyglądał jak wklejka z innej strony. */
.fleet-catalog-page .cat-toggle input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px; flex: none; margin: 0;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 5px;
  background: rgba(255, 255, 255, .05);
  cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
.fleet-catalog-page .cat-toggle input:checked {
  border-color: var(--red);
  background: var(--red) url("/assets/ikony/ptaszek-bialy.webp") center / 9px 9px no-repeat;
}
.fleet-catalog-page .cat-toggle input:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .45);
  outline-offset: 2px;
}

/* ---------- wyszukiwarka terminu ----------
   Kalendarz jest tym samym panelem co w pasku hero (hf-cal z site.css) i tak
   samo stoi w muszli obok paska; zostaje tylko pozycjonowanie.
   W hero panel wychodzi w górę, bo tam nad paskiem jest miejsce, a pod nim
   krawędź kadru. W katalogu jest odwrotnie: pasek stoi tuż pod zdjęciem,
   więc panel schodzi w dół, wyśrodkowany pod paskiem (środek i translateX
   dziedziczy z site.css). Warunek jest odwrotnością tego z site.css, gdzie
   na wąskim albo niskim ekranie panel zamienia się w arkusz przy dolnej
   krawędzi — tamten wariant ma zostać nietknięty. */
@media (min-width: 761px) and (min-height: 801px) {
  .fleet-catalog-page .hf-cal {
    top: calc(100% + 10px);
    bottom: auto;
    animation: fc-cal-drop .2s ease-out;
  }
}
@keyframes fc-cal-drop { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } }

/* Zdjęcie wybranych dni. Siedzi w pudełku terminu, za segmentem zwrotu, bo
   czyści dokładnie to, co oba segmenty pokazują; luzem w rzędzie było jedynym
   okrągłym elementem między kapsułami i przyciągało wzrok mocniej, niż na to
   zasługuje. Ujemny odstęp zbiera nadmiar wyściółki segmentu. Kolory wprost,
   jak w całym pasku (patrz komentarz przy .cat-shell). */
.fleet-catalog-page .cat-when-clear {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  margin: 0 10px 0 -8px;
  border-radius: 50%;
  font-size: .62rem; line-height: 1;
  color: #8a8f96;
  transition: background .2s, color .2s;
}
.fleet-catalog-page .cat-when-clear:hover { background: rgba(255, 255, 255, .12); color: #f5f5f4; }

/* ---------- siatka gołych kart: zdjęcie, model, cena ---------- */
.fleet-catalog-page .cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  transition: opacity 150ms ease;
  /* „Szukaj" w pasku przewija do kart; pasek nawigacji jest przyklejony,
     więc bez tego marginesu zasłaniałby pierwszy rząd */
  scroll-margin-top: calc(var(--nav-h) + 14px);
}
.fleet-catalog-page .cat-grid.swap { opacity: .28; }
/* zaślepki kart z flota.html: proporcje karty i lekkie tętnienie do czasu
   nadejścia floty; ruch gaśnie przy ograniczonej animacji */
.fleet-catalog-page .cat-skel {
  display: block;
  /* kadr 16/10 plus pasek z tekstem pod nim (.cat-info), żeby siatka nie
     skakała, gdy zaślepki zamienią się w karty */
  aspect-ratio: 16 / 12.4;
  border: 1px solid rgba(255, 255, 255, .06);
  background: radial-gradient(circle at 50% 70%, #18181b 0, #0e0e10 44%, #09090a 76%);
  animation: cat-skel 1.4s ease-in-out infinite;
}
@keyframes cat-skel { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fleet-catalog-page .cat-skel { animation: none; } }

/* Karta to dwa sklejone elementy: kadr auta i pod nim pasek z nazwą, danymi
   i ceną (.cat-info). Napisy nie leżą na zdjęciu: 7.09.2026 właściciel
   odrzucił zarówno tekst wprost na kadrze, jak i taflę szkła nad jego dołem,
   bo w obu wersjach napisy wchodziły na auto. Kadr trzyma 16/10 (pod tę
   proporcję ustawione są kadry i powiększenia 50 z 66 aut), a wysokość
   karty wynika z kadru plus paska. Bez osiągów i haseł; wszystko to jest na
   stronie auta. */
.fleet-catalog-page .cat-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 0;                       /* kanciasto — bez zaokrągleń */
  background: radial-gradient(circle at 50% 70%, #18181b 0, #0e0e10 44%, #09090a 76%);
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(.23,1,.32,1),
    border-color .3s ease,
    box-shadow .35s ease;
}
.fleet-catalog-page .cat-card.in { opacity: 1; transform: translateY(0); }

.fleet-catalog-page .cat-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  flex: none;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 600ms cubic-bezier(.23,1,.32,1);
}

/* Delikatna winieta tylko na kadrze (nie na pasku pod nim): odznaka w rogu
   i dolna krawędź zdjęcia dostają odrobinę tła, ale nic tu już nie musi
   nieść kontrastu napisów. Zajmuje 16/10 od góry karty, czyli dokładnie kadr. */
.cat-shade {
  position: absolute;
  top: 0; left: 0; right: 0;
  aspect-ratio: 16 / 10;
  background: linear-gradient(0deg, rgba(6, 6, 7, .38) 0%, transparent 34%);
  pointer-events: none;
}

/* Pasek z tekstem pod kadrem: osobny element sklejony ze zdjęciem górną
   krawędzią. Ciemna, kryjąca płaszczyzna (nie szkło: pod nią nie ma nic do
   rozmycia), oddzielona od kadru włoskową jasną linią jak sekcje w panelu.
   Dwa wiersze (.cat-line): nazwa z miastem, pod nimi dane z ceną.

   position: relative z z-indexem, bo zdjęcie nad paskiem ma transform
   (powiększenie przy najechaniu i własny zoom kadru), a element z transform
   rysuje się nad zwykłym blokiem w przepływie i wchodziłby na górę paska.
   pointer-events: none zostaje dla trybu kadrowania (kadry.js): chwyt zaczyna
   się na zdjęciu, ale przeciąganie kończy się często nad paskiem. */
.cat-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px clamp(13px, 1.1vw, 17px) 12px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  background: #111114;
  pointer-events: none;
}
/* Wiersz tafli: lewa strona rośnie i kurczy się, prawa (miasto, cena) jest
   sztywna i dosunięta do prawej marginesem. W pierwszym wierszu nazwa dzieli
   miejsce z miastem, więc długa nazwa („Dodge Challenger SRT Redeye Super
   Stock") łamie się na dwie linie zamiast urywać wielokropkiem; dawniej przy
   pełnej szerokości kadru wielokropek wystarczał, na węższym polu obcinałby
   model. Dwie linie to granica: trzecia zjadłaby kadr. Drugi wiersz zawija,
   bo dane z plakietkami promocji i stawką mogą nie zmieścić się w jednej
   linii; cena schodzi wtedy pod dane, dalej przy prawej krawędzi. */
.cat-line {
  display: flex;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
}
.cat-line + .cat-line { flex-wrap: wrap; }
.cat-info h3 {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: break-word;
  /* łamana nazwa dzieli się na dwie podobne linie, zamiast zostawiać
     w drugiej sam rocznik („…EVO Spyder" / „2022"); starsze przeglądarki
     pomijają tę własność i łamią jak dotąd */
  text-wrap: balance;
  /* zawsze miejsce na dwie linie (2 × 1.25 interlinii), także gdy nazwa
     mieści się w jednej: pasek pod kadrem ma w całej siatce tę samą
     wysokość, a nie raz 20, raz 40 px nazwy; właściciel 08.09.2026 wskazał
     nierówne prostokąty pod zdjęciami jako błąd */
  min-height: 2.5em;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(.95rem, 1.1vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.25;
}
/* cena z tym, co o niej mówi: plakietki promocji przed kwotą, stawka doby
   za nią; razem w prawym dolnym rogu tafli, gdzie oko kończy czytać kartę */
.cat-cena {
  flex: 0 1 auto;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 4px 8px;
  margin-left: auto;
}
.cat-price {
  color: rgba(255, 255, 255, .88);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cat-price small { color: rgba(255, 255, 255, .58); font-size: .74rem; font-weight: 400; }
/* Przekreślona kwota sprzed rabatu leży na fotografii, więc bierze biel karty
   zamiast przygaszonego atramentu motywu; ten w jasnym motywie byłby ciemny
   i zniknąłby w kadrze. */
.cat-price .cena-stara { color: rgba(255, 255, 255, .5); }

/* Stawka doby przy cenie za wybrany termin. Kwota nad nią mówi, ile kosztuje
   ten najem w całości; stawka zostaje, bo to ona porównuje auta między sobą,
   i bo po niej widać, że przy dłuższym najmie próg cennika zszedł niżej.
   Drobna i przygaszona, żeby liczba, po którą gość przyszedł, została pierwsza. */
.cat-rate {
  flex: none;
  /* odstęp ponad ten z .cat-meta: dwie kwoty obok siebie potrzebują więcej
     światła niż kwota i nazwa miasta, żeby nie zlały się w jedną liczbę */
  margin-left: 4px;
  color: rgba(255, 255, 255, .58);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* Cena po lewej, miasto po prawej. Lokalizacja jest tu potrzebna, bo od niej
   zależy, czy auto da się wziąć na krótko; przy nazwie i cenie mieści się
   w jednym rzucie oka, a nie wymaga wchodzenia w kartę auta. */
/* Rocznik doklejony do nazwy jak w ogłoszeniu; pod spodem moc, paliwo
   i pojemność. Dane mają być czytelne z odległości, więc jasne i z cieniem,
   ale wciąż o stopień niżej od nazwy. */
.cat-rok { font-weight: 400; color: rgba(255, 255, 255, .62); }
/* Dane auta to podpis pod nazwą, nie druga treść: drobne, rozstrzelone,
   przygaszone. Człony rozdziela samo światło — żadnych znaków ani kresek.
   Karta czyta się wtedy w trzech głosach: nazwa najgłośniej, cena drugim
   planem, dane szeptem; wcześniej wszystkie trzy krzyczały tak samo
   i zlewały się w jedno. */
.cat-specs {
  display: flex;
  align-items: baseline;
  gap: 17px;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.cat-specs i { font-style: normal; line-height: 1.2; }
/* Miasto stoi przy nazwie, w prawym górnym rogu tafli. Lokalizacja jest tu
   potrzebna, bo od niej zależy, czy auto da się wziąć na krótko; przy nazwie
   mieści się w jednym rzucie oka, a nie wymaga wchodzenia w kartę auta.
   Na prawo idzie marginesem, nie przez space-between: nazwa łamana na dwie
   linie zostaje przy lewej krawędzi, a miasto trzyma się linii bazowej jej
   pierwszej linii. */
.cat-city {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .62);
  font-size: .74rem; font-weight: 400; letter-spacing: .01em;
  white-space: nowrap;
}
/* szpilka w czerwieni marki — ta sama, którą lokalizację znaczą pasek
   wyszukiwania i plakietka w nawigacji */
.cat-city svg { width: 10px; height: 10px; flex: none; color: var(--red); }
/* Auto podstawiane z innej lokalizacji: szpilka gaśnie, bo nie stoi na miejscu,
   tylko przyjedzie. Kolory wpisane wprost, nie przez zmienne motywu; kadr pod
   spodem zostaje ciemny także w jasnym motywie. */
.cat-city.is-away { color: rgba(255, 255, 255, .5); }
.cat-city.is-away svg { color: rgba(255, 255, 255, .42); }

/* zajęte auto zostaje w siatce (termin można zmienić), ale nie udaje wolnego */
.fleet-catalog-page .cat-card.is-busy > img { opacity: .55; }

/* Najechanie rusza samym kadrem. Karta nie podnosi się już o trzy piksele:
   przy tym ruchu spod dolnej krawędzi wychodził czarny pasek, a rozjaśniona
   ramka kładła się jasną kreską na najciemniejszym miejscu zdjęcia; razem
   wyglądało to jak brudna krecha pod autem. Cień też odpadł; tło siatki jest
   czarne, więc nie było go widać, a w jasnym motywie zostaje osobno, niżej.
   Ten sam rachunek co w siatce na stronie głównej (.home-car): jaśnieje ramka,
   przybliża się fotografia, nic nie skacze. */
@media (hover: hover) and (pointer: fine) {
  .fleet-catalog-page .cat-card:hover { border-color: rgba(255, 255, 255, .16); }
  .fleet-catalog-page .cat-card:hover > img { transform: scale(1.045); }
  /* w jasnym motywie karta leży na jasnym tle, więc miękki cień ma po czym
     paść i jest jedyną rzeczą, która daje jej głębię przy najechaniu */
  html[data-motyw="jasny"] .fleet-catalog-page .cat-card:hover {
    border-color: rgba(23, 24, 27, .18);
    box-shadow: 0 14px 34px rgba(9, 9, 11, .18);
  }
}
.fleet-catalog-page .cat-card:active { transform: scale(.994); }

.fleet-catalog-page .cat-empty {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding: clamp(56px, 7vw, 88px) 24px;
  border: 1px solid var(--glass-border);
  border-radius: 0;
  background: rgba(17, 17, 19, .55);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--fc-muted);
  text-align: center;
}
.fleet-catalog-page .cat-empty p { margin: 0; font-size: .95rem; }
/* Dwa wyjścia obok siebie: zdjęcie filtrów i zdjęcie zawężenia do jednej
   lokalizacji. width: auto zbija mobilną regułę hero (.hf-all { width: 100% }) —
   tutaj przyciski stoją w parze i nie mogą się rozpychać na całą szerokość.
   Para ma być bliźniacza: duch przejmuje wymiary mlecznego przycisku
   (wysokość, wyściółkę i napis z .hf-all), a wspólna minimalna szerokość
   zbiera różnicę długości napisów, żeby jeden nie był krótszy od drugiego. */
.cat-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cat-empty-acts .btn {
  flex: none;
  width: auto;
  min-width: 184px;
  height: 44px;
  padding: 0 26px;
  font-size: .86rem;
}

/* ---------- finał ---------- */
.fc-final {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(80px, 9vw, 130px);
  padding: clamp(34px, 4vw, 58px) clamp(28px, 3.4vw, 56px);
  border: 1px solid var(--glass-border);
  border-radius: 0;
  background: rgba(17, 17, 19, .55);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--shadow-lg);
}
.fc-final h2 {
  margin: 14px 0 0;
  color: var(--fc-ink);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .95;
  text-transform: uppercase;
}
/* Stopka jest wspólna dla całego serwisu — katalog nie ma powodu jej odróżniać.
   Reguła zostaje tylko po to, by nadpisać wcześniejszy własny kolor tła. */
.fleet-catalog-page .footer { background: #000; }

@media (max-width: 1100px) {
  .fleet-catalog-page .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  /* Safari na iPhonie przybliża stronę, gdy dotknięte pole ma napis mniejszy
     niż 16 px, i po wpisaniu marki nie cofa przybliżenia; użytkownik zostawał
     z katalogiem powiększonym o kilkanaście procent i przewijaniem w bok.
     site.css robi to samo dla pól rezerwacji; listy klasy i sortowania są
     przyciskami initSelect, więc ich to nie dotyczy. Przy 16 px wiersz
     wartości byłby większy od nazwy pola nad nim, więc szukajka schodzi tu
     do jednego wiersza: sama lupa i pole, jak dawniej. */
  .fleet-catalog-page .cat-q input { font-size: 16px; }
  .fleet-catalog-page .cat-q .cat-seg-lbl { display: none; }
}

@media (max-width: 640px) {
  .fc-collection,
  .fc-final { width: calc(100% - 32px); }
  .fc-hero { height: clamp(220px, 32vh, 300px); }
  .fc-collection-head { align-items: start; flex-direction: column; gap: 18px; }
  .fc-tools { width: 100%; }
  .fleet-catalog-page .cat-grid { grid-template-columns: 1fr; gap: 16px; }

  /* ---------- karta na telefonie: zdjęcie osobno, podpis pod nim ----------
     Tafla szkła leżąca na kadrze działa na szerokim ekranie, gdzie karta ma
     420 px i zostaje nad nią pół zdjęcia. Na telefonie karta jest jedna
     w rzędzie i ta sama tafla zabiera dolną trzecią część kadru: siada na
     aucie i to jego zasłania, a auto jest tu jedyną treścią, po którą gość
     przewija katalog. Odsunąć jej nie ma dokąd, więc na tej szerokości karta
     rozkłada się na dwoje: fotografia w całości, a pod nią prostokąt
     z nazwą, danymi i ceną.

     Podpis bierze kolory z motywu, a nie biel znad fotografii: nie leży już
     na zdjęciu, tylko na tle karty, więc w jasnym motywie musi być ciemny. */
  .fleet-catalog-page .cat-card {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg1);
  }
  .fleet-catalog-page .cat-card > img {
    flex: none;
    aspect-ratio: 16 / 10;
    height: auto;
  }
  /* w jasnym motywie prostokąt podpisu jest niemal w kolorze strony, więc
     karta potrzebuje krawędzi; ciemna ramka karty byłaby tam niewidoczna */
  html[data-motyw="jasny"] .fleet-catalog-page .cat-card { border-color: var(--line); }
  /* przyciemnienie było pod napisami; napisy zeszły ze zdjęcia, a odznaka
     dostępności ma własną pigułkę, więc kadr zostaje czysty */
  .fleet-catalog-page .cat-card .cat-shade { display: none; }
  /* position: relative + z-index + kryjące tło ZOSTAJĄ także tutaj (wcześniej
     był static i background: none): kadr z panelu to transform: scale() na
     samym <img>, a przeskalowany obrazek wystaje poza swoje pole 16/10 w dół,
     na pasek. Card ma overflow: hidden, ale to tnie dopiero na krawędzi karty,
     nie na dole kadru; przy przezroczystym pasku auto z powiększeniem miało
     nazwę i miasto na zdjęciu, a pasek wyglądał na niższy niż u sąsiadów
     (zrzuty od właściciela, 08.09.2026). Tło paska = tło karty (var(--bg1)),
     więc w obu motywach wygląda jak dotąd, tylko zasłania nadmiar kadru. */
  .fleet-catalog-page .cat-info {
    position: relative;
    z-index: 1;
    gap: 7px;
    padding: 12px 14px 14px;
    border: 0;
    border-radius: 0;
    background: var(--bg1);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .fleet-catalog-page .cat-info::before { display: none; }
  .fleet-catalog-page .cat-info h3 { color: var(--ink); }
  .fleet-catalog-page .cat-price { color: var(--ink); }
  .fleet-catalog-page .cat-rok,
  .fleet-catalog-page .cat-specs,
  .fleet-catalog-page .cat-city,
  .fleet-catalog-page .cat-city.is-away,
  .fleet-catalog-page .cat-rate,
  .fleet-catalog-page .cat-price small,
  .fleet-catalog-page .cat-price .cena-stara { color: var(--dim); }
  .fleet-catalog-page .cat-city.is-away svg { color: var(--dim); }
  .fc-final {
    align-items: flex-start;
    flex-direction: column;
    gap: 28px;
    padding: 34px 24px;
  }
}

/* rozświetlanie słów planszy wyłącza już initStatement (dokłada .lit od razu),
   tu zostaje reszta ruchu na stronie */
@media (prefers-reduced-motion: reduce) {
  .fc-hero > img,
  .fleet-catalog-page .cat-card,
  .fleet-catalog-page .cat-card > img {
    animation: none !important;
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- motyw jasny ----------
   Kadry aut zostają ciemne (to fotografie z własnym cieniowaniem); jasne
   robią się tło strony i stopka. Obie pigułki narzędzi zostają ciemnym
   szkłem: to jeden element w dwóch rzędach, a nie chrom strony. */
html[data-motyw="jasny"] .fleet-catalog-page main,
html[data-motyw="jasny"] .fc-collection { background: var(--bg0); }
/* Pasek u góry zostaje ciemnym szkłem także w jasnym motywie — dokładnie jak
   pasek w hero, którego materiałem jest. Segmenty piszą kolory wprost, nie
   tokenami (te w jasnym motywie ciemnieją i znikałyby na ciemnym pasku), więc
   nakładek tu nie potrzebują. Jedynie przycisk Szukaj wraca do mlecznej bazy
   z ciemnym pismem, tak jak ten w hero: site.css odwraca .hf-all na jasnych
   powierzchniach, a to nie jest jasna powierzchnia. */
html[data-motyw="jasny"] .fleet-catalog-page .cat-go { background: none; color: #0b0b0c; box-shadow: none; }
html[data-motyw="jasny"] .fleet-catalog-page .cat-go::before { background: rgba(243, 243, 244, .82); }
html[data-motyw="jasny"] .fleet-catalog-page .cat-go:hover::before { background: rgba(250, 250, 250, .9); }
html[data-motyw="jasny"] .fleet-catalog-page .cat-go::after { opacity: 1; }
html[data-motyw="jasny"] .fleet-catalog-page .footer { background: var(--bg2); }
html[data-motyw="jasny"] .fleet-catalog-page .nav { background: rgba(250, 249, 247, .88); }

/* ---------- spis floty ----------
   Odnośniki do wszystkich kart aut, wpisane pod siatkę przez
   functions/flota.js (lokalnie server.js). Siatkę wyżej rysuje js/flota.js
   dopiero po odpowiedzi API, więc bez tego spisu w pliku strony nie było ani
   jednego odnośnika do karty auta; wyszukiwarka docierała do nich samą mapą
   witryny.

   Wygląd jest celowo cichy: to spis nazw, a nie druga siatka kart. Kolumny
   układa columns, więc lista sama łamie się pod szerokość ekranu i nie
   potrzebuje punktów granicznych. Szerokość ta sama, co sekcja kolekcji
   wyżej, żeby krawędzie obu stały w jednej linii. */
.fc-spis {
  width: calc(100% - clamp(40px, 6vw, 112px));
  max-width: 1800px;
  margin-inline: auto;
  padding-block: clamp(26px, 3vw, 44px) clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
}

.fc-spis-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  letter-spacing: -.01em;
}

.fc-spis-lead {
  margin-top: 6px;
  color: var(--dim);
  font-size: .92rem;
}

.fc-spis-lista {
  margin-top: clamp(16px, 2vw, 26px);
  padding: 0;
  list-style: none;
  columns: 260px 4;
  column-gap: clamp(22px, 2.4vw, 44px);
}

/* Pozycja rozdzielona między kolumny czytałaby się jak dwa różne auta. */
.fc-spis-lista li { break-inside: avoid; }

.fc-spis-lista a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

.fc-spis-lista a:hover,
.fc-spis-lista a:focus-visible {
  color: var(--red2);
  /* --red2 rozcieńczony; reszta arkusza też pisze te podświetlenia wprost */
  border-bottom-color: rgba(255, 74, 80, .45);
}

.fc-spis-nazwa { font-size: .95rem; font-weight: 600; }
.fc-spis-klasa { flex: none; color: var(--dim); font-size: .78rem; }

@media (prefers-reduced-motion: reduce) {
  .fc-spis-lista a { transition: none; }
}