/* ═══════════════════════════════════════════════════════════════════════════
   RC4U — Flota — siatka, karta auta, specyfikacja

   Zrodlo: design/makiety/rc4u-redesign.html (blok <style> nr 2).
   Wygenerowane 2026-08-28. Zmiany wprowadzaj TUTAJ — makieta jest juz tylko
   dokumentacja decyzji, nie zrodlem prawdy.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- siatka floty --- */
.fleet{display:grid; gap:1.25rem; grid-template-columns:1fr}

@media (min-width:600px){.fleet{grid-template-columns:repeat(2,1fr)}}

@media (min-width:1000px){.fleet{grid-template-columns:repeat(3,1fr); gap:1.6rem}}

@media (min-width:1180px){.fleet--4{grid-template-columns:repeat(4,1fr)}}

/* --- karta auta --- */
.car{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}

.car:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}

.car__media{position:relative; aspect-ratio:16/9; background:var(--bg-sunken); overflow:hidden}

.car__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}

.car:hover .car__media img{transform:scale(1.045)}

.car__status{
  position:absolute; left:.7rem; top:.7rem; display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .7rem; border-radius:100px; font-size:.73rem; font-weight:600;
  box-shadow:0 1px 6px rgba(0,0,0,.18);
}

.car__status--ok{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok)}

.car__status--busy{background:var(--busy-bg); color:var(--busy); border:1px solid var(--busy)}

.car__status i{width:7px; height:7px; border-radius:50%; background:currentColor; display:block}

.car__body{padding:1.05rem 1.15rem 1.2rem; display:flex; flex-direction:column; gap:.85rem; flex:1}

.car__name{font-size:1.72rem; line-height:calc(.95em + 3px); letter-spacing:.012em}

.car__type{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:600; margin-top:.2rem;
}

.specs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(4.2rem,1fr)); gap:.5rem;
  border-block:1px solid var(--line); padding:.7rem 0;
}

.spec{display:flex; flex-direction:column; gap:.1rem; align-items:center; text-align:center}

.spec b{font-family:var(--display); font-size:1.12rem; letter-spacing:.02em; font-weight:400; color:var(--ink)}

.spec span{font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted)}

/* cena — reaguje na wybrany termin */
.price{display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem; margin-top:auto}

.car--result .price{flex-direction:column; align-items:stretch; gap:1rem}

.car--result .price .btn{width:100%}

.price__main{display:flex; flex-direction:column}

.price__amt{font-family:var(--display); font-size:2.1rem; line-height:1; letter-spacing:.01em}

.price__unit{font-size:.75rem; color:var(--ink-muted); margin-top:.25rem}

.price__was{font-size:.78rem; color:var(--ink-muted); text-decoration:line-through}

.price__tier{
  font-size:.72rem; font-weight:600; color:var(--ok);
  background:var(--ok-bg); border-radius:var(--r-sm); padding:.2rem .5rem; align-self:flex-start;
  margin-top:.35rem;
}

/* --- kategorie (wariant B) --- */
.cats{display:grid; gap:.9rem; grid-template-columns:repeat(2,1fr)}

@media (min-width:820px){.cats{grid-template-columns:repeat(4,1fr)}}

.cat{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:160px; padding:1.1rem; border-radius:var(--r-lg); overflow:hidden;
  background:var(--navy-800); color:#fff; text-decoration:none; isolation:isolate;
  border:1px solid var(--line);
}

.cat img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.62}

.cat::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(13,27,42,.15) 30%, rgba(13,27,42,.9) 100%)}

.cat b{font-family:var(--display); font-size:1.5rem; letter-spacing:.03em; font-weight:400}

.cat span{font-size:.76rem; color:rgba(255,255,255,.75)}

.cat:hover img{opacity:.8}

/* --- kroki rezerwacji --- */
.steps{display:grid; gap:1.1rem; counter-reset:s}

@media (min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}

.step{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.5rem 1.3rem 1.4rem; counter-increment:s;
}

.step::before{
  content:counter(s); position:absolute; top:-14px; left:1.3rem;
  font-family:var(--display); font-size:1.35rem; line-height:1;
  background:var(--accent-fill); color:var(--accent-on-fill);
  padding:.42rem .8rem; transform:skewX(var(--skew));
}

.step h3{font-size:1.4rem; line-height:calc(.95em + 3px); margin:.6rem 0 .5rem}

.step p{font-size:.9rem; color:var(--ink-muted)}

/* --- pasek zaufania --- */
.trust{
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
  padding:1.4rem 0;
}

@media (min-width:820px){.trust{grid-template-columns:repeat(4,1fr)}}

.trust div{display:flex; flex-direction:column; gap:.15rem}

.trust b{font-family:var(--display); font-size:2.3rem; line-height:1; color:var(--accent)}

.trust span{font-size:.8rem; color:var(--ink-muted)}

/* --- asystent: sama chmurka --- */
.assistant{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:80;
  width:60px; height:60px; border-radius:50%; border:0;
  background:var(--accent-fill); color:var(--accent-on-fill);
  display:grid; place-items:center; box-shadow:var(--shadow-lg);
  transition:transform .18s ease;
}

.assistant:hover{transform:scale(1.07)}

.assistant svg{width:28px; height:28px}

.assistant::after{
  content:''; position:absolute; top:6px; right:6px; width:11px; height:11px;
  border-radius:50%; background:var(--ok); border:2px solid var(--accent-fill);
}

/* --- pomocnicze --- */
.hidden{display:none !important}

.heroB__text{min-width:0}

.hidden-sm{display:none}

@media (min-width:620px){.hidden-sm{display:inline-flex}}

/* .note przeniesione do components.css — używa go też konto, kreator
   rezerwacji i panel, a fleet.css nie wszędzie się ładuje. */