/* ============================================================
   company-fleet.css — Samora Ceylon · v4.0 (Emerald Royale)
   Our Fleet page: vehicle showcase cards. Shared components live
   in company.css; every value references main.css tokens.
   ============================================================ */
.fleet-features { margin-top: var(--spacing-8); }

.fleet-vehicles { display: grid; gap: var(--spacing-12); }
.fleet-vehicle {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--spacing-12);
  align-items: center;
  padding: var(--spacing-6);
  background: var(--er-white);
  border: 1px solid var(--coy-line);
  border-radius: var(--radius-4xl);
  box-shadow: var(--shadow-premium);
}
.fleet-vehicle--flip .fleet-vehicle-media { order: 2; }
.fleet-vehicle--highlight { border-color: var(--er-gold-antique); box-shadow: var(--shadow-luxury); }

.fleet-vehicle-media { position: relative; }
.fleet-vehicle-media .coy-photo-card-flag { z-index: var(--z-index-20); }
.fleet-vehicle-frame { border-radius: var(--radius-3xl); }
.fleet-main {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 220ms ease, transform 1400ms var(--coy-ease-soft);
}
.fleet-main.is-swapping { opacity: 0; }
.fleet-vehicle-frame:hover .fleet-main { transform: scale(1.04); }
.fleet-vehicle-frame:hover .coy-zoom-cue { opacity: 1; transform: none; }
.fleet-main:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--er-gold-antique); }
.fleet-store { display: none; }

.fleet-thumbs { display: flex; gap: var(--spacing-3); margin-top: var(--spacing-4); }
.fleet-thumb {
  width: 92px; height: 64px;
  padding: 3px;
  border: 1px solid var(--coy-line);
  border-radius: var(--radius-lg);
  background: var(--er-white);
  cursor: pointer;
  transition: var(--transition-elegant);
}
.fleet-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.fleet-thumb:hover, .fleet-thumb:focus-visible { border-color: var(--er-emerald); transform: translateY(-3px); box-shadow: var(--shadow-md); outline: none; }

.fleet-vehicle-body { padding: var(--spacing-4) var(--spacing-6) var(--spacing-4) 0; }
.fleet-vehicle--flip .fleet-vehicle-body { padding: var(--spacing-4) 0 var(--spacing-4) var(--spacing-6); }
.fleet-vehicle-name {
  margin: 0 0 var(--spacing-6);
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  color: var(--er-ink);
}
.fleet-specs { display: grid; gap: var(--spacing-4); margin: 0 0 var(--spacing-8); }
.fleet-specs div { padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--coy-line); }
.fleet-specs dt {
  margin-bottom: var(--spacing-1);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--er-gold-burnished);
}
.fleet-specs dt i { margin-right: var(--spacing-1-5); color: var(--er-emerald); }
.fleet-specs dd { margin: 0; font-size: var(--text-md); color: var(--text-secondary); }
.fleet-vehicle-body .btn { gap: var(--spacing-2); }

.fleet-growth-list li { font-size: var(--text-md); }

@media (max-width: 900px) {
  .fleet-vehicle { grid-template-columns: 1fr; gap: var(--spacing-6); }
  .fleet-vehicle--flip .fleet-vehicle-media { order: 0; }
  .fleet-vehicle-body,
  .fleet-vehicle--flip .fleet-vehicle-body { padding: 0 var(--spacing-2) var(--spacing-4); }
}
@media (max-width: 600px) {
  .fleet-vehicle { padding: var(--spacing-3); border-radius: var(--radius-3xl); }
  .fleet-thumb { width: 72px; height: 52px; }
}