/* v3.69.0 — the vehicle card, shared by the vehicle-fleet block (server + client render), the
   vehicle-grid (display only) block and the VehicleFleetWidget. Every default lives here; a renderer
   sets a --fin-card-* variable on the GRID only for a config key the operator actually set.
   Plain CSS on purpose: Tailwind never scans the renderer's markup. No !important, no 100vw. */

.fin-card{
  --_accent:var(--fin-card-accent,#4f46e5);
  container-type:inline-size;
  display:flex;flex-direction:column;min-width:0;
  background:var(--fin-card-bg,#fff);
  border:1px solid var(--fin-card-border,#e5e7eb);
  border-radius:var(--fin-card-radius,16px);
  box-shadow:var(--fin-card-shadow,0 4px 6px rgba(0,0,0,.1));
  overflow:hidden;
  color:#111827;
  /* v3.70.1 — hover: lift, photo zoom, arrow slide (hover-capable pointers only, see the end).
     The transitions are declared here, unconditionally, so the way back is as smooth as the way in. */
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
  will-change:transform;
}

/* photo */
.fin-card__photo{
  position:relative;aspect-ratio:3/2;height:var(--fin-card-photo-h,auto);
  overflow:hidden;background:#f3f4f6;
  border-radius:var(--fin-card-photo-radius,0) var(--fin-card-photo-radius,0) 0 0;
}
.fin-card__photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fin-card__photo--empty{display:flex;align-items:center;justify-content:center;color:#d1d5db;font-size:48px}

/* panel */
.fin-card__panel{padding:18px 20px 8px;flex:1 1 auto}
.fin-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fin-card__title{
  margin:0;min-width:0;
  font-size:var(--fin-card-title-size,22px);font-weight:var(--fin-card-title-weight,800);
  line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;
  color:var(--fin-card-title-color,#111827);
}
.fin-card__title small{
  display:block;margin-bottom:4px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6b7280;
}
.fin-card__meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
.fin-card__cat{
  display:inline-block;padding:4px 12px;
  border-radius:var(--fin-card-badge-radius,999px);
  background:var(--fin-card-badge-bg,var(--_accent));color:var(--fin-card-badge-fg,#fff);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;white-space:nowrap;
}
.fin-card__year{font-size:14px;font-weight:500;color:#6b7280}

/* specs */
.fin-card__specs{
  display:flex;flex-wrap:wrap;margin:16px 0 0;padding:12px 0;
  border-top:1px solid #eef0f3;border-bottom:1px solid #eef0f3;
}
.fin-card__spec{
  display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 0;min-width:0;padding:2px 6px;
  font-size:var(--fin-card-specs-size,13px);font-weight:700;color:var(--fin-card-specs-color,#111827);white-space:nowrap;
}
.fin-card__spec+.fin-card__spec{border-left:1px solid #e5e7eb}
.fin-card__spec svg{
  width:20px;height:20px;flex:0 0 auto;
  fill:none;stroke:var(--_accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.fin-card__spec svg text{fill:var(--_accent);stroke:none;font-family:inherit;font-size:12px;font-weight:700}

/* feature chips */
.fin-card__feat{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.fin-card__feat li{
  padding:5px 12px;border:1px solid #e5e7eb;
  border-radius:var(--fin-card-feat-radius,999px);
  background:var(--fin-card-feat-bg,#fff);color:var(--fin-card-feat-fg,#374151);
  font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;
}
.fin-card__feat li.fin-card__more{
  border-color:transparent;color:var(--_accent);font-weight:700;
  background:#fde8e8;
  background:color-mix(in srgb,var(--_accent) 12%,#fff);
}

/* footer band */
.fin-card__foot{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:var(--fin-card-foot-bg,var(--_accent));color:#fff;
}
.fin-card__price{display:flex;flex-direction:column;min-width:0}
.fin-card__price small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.fin-card__price b{
  font-size:var(--fin-card-price-size,26px);font-weight:var(--fin-card-price-weight,800);
  line-height:1.15;color:var(--fin-card-price-color,#fff);white-space:nowrap;letter-spacing:-.01em;
}
.fin-card__price b span{font-size:.55em;font-weight:700;letter-spacing:0}
.fin-card__price--na small{opacity:1}
.fin-card__total{font-size:12px;font-weight:600;opacity:.9;margin-top:2px}
.fin-card__book{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:6px 6px 6px 22px;border:0;
  border-radius:var(--fin-card-btn-radius,999px);
  background:var(--fin-card-btn-bg,#fff);color:var(--fin-card-btn-fg,#111827);
  font-size:var(--fin-card-btn-size,14px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  text-decoration:none;cursor:pointer;transition:opacity .15s,background-color .2s;
}
.fin-card__book i{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--fin-card-btn-disc,#111827);color:#fff;font-style:normal;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.fin-card__book i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fin-card__book:focus-visible{outline:3px solid #fff;outline-offset:2px}
.fin-card__book:disabled{opacity:.5;cursor:not-allowed}

/* v3.70.1 — the interaction. Only where a real pointer can hover: a phone would otherwise keep
   the last tapped card lifted. Keyboard users get the same lift through focus-within. */
@media (hover:hover){
  .fin-card:hover,.fin-card:focus-within{
    transform:translateY(-6px);
    box-shadow:var(--fin-card-shadow-hover,0 18px 36px rgba(0,0,0,.16));
  }
  .fin-card:hover .fin-card__photo img,.fin-card:focus-within .fin-card__photo img{transform:scale(1.06)}
  .fin-card:hover .fin-card__book i,.fin-card:focus-within .fin-card__book i{transform:translateX(4px)}
  .fin-card:hover .fin-card__book:hover i,.fin-card__book:hover i{transform:translateX(6px)}
}
@media (prefers-reduced-motion:reduce){
  .fin-card,.fin-card__photo img,.fin-card__book,.fin-card__book i{transition:none}
  .fin-card:hover,.fin-card:focus-within{transform:none}
  .fin-card:hover .fin-card__photo img,.fin-card:focus-within .fin-card__photo img{transform:none}
}

/* narrow cards (one column on a phone, or four columns on a laptop) */
@container (max-width:360px){
  .fin-card__foot{flex-direction:column;align-items:stretch}
  .fin-card__book{justify-content:center;padding:6px 6px 6px 16px}
  .fin-card__spec{flex:1 1 100%;justify-content:flex-start}
  .fin-card__spec+.fin-card__spec{border-left:0;border-top:1px solid #eef0f3}
}