/* ============================================================
   company-fleet.css — Tarawell Travels
   Our Fleet page only. Shared components live in company.css;
   the hero is styled only by template-hero-section.css.
   Every value resolves to a main.css / company.css token.
   ============================================================ */

/* ---------- Vehicle range ---------- */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--coy-grid-gap);
  align-items: stretch;
}

.fleet-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--coy-radius-card);
  background: var(--coy-surface);
  border: 1px solid var(--coy-border);
  overflow: hidden;
  transition: var(--transition-elegant);
}
.fleet-card:hover {
  transform: translateY(-6px);
  border-color: var(--coy-border-gold-strong);
  box-shadow: var(--coy-card-shadow-hover);
}
.fleet-card--highlight {
  border-color: var(--coy-border-gold-strong);
  box-shadow: var(--coy-card-shadow-hover);
}

.fleet-card-media {
  position: relative;
  margin: var(--spacing-3) var(--spacing-3) 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--coy-surface-raised);
}
.fleet-card-media img,
.fleet-card-media .coy-img-missing {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  transition: transform .6s ease;
}
.fleet-card:hover .fleet-card-media img { transform: scale(1.04); }

.fleet-ribbon {
  position: absolute;
  top: var(--spacing-3);
  left: var(--spacing-3);
  z-index: var(--z-index-10);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1-5) var(--spacing-3);
  border-radius: var(--coy-radius-chip);
  background: var(--gradient-gold);
  box-shadow: var(--shadow-gold);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-navy-abyss);
}

.fleet-seats {
  position: absolute;
  right: var(--spacing-3);
  bottom: var(--spacing-3);
  z-index: var(--z-index-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-xl);
  background: var(--coy-glass-strong);
  border: 1px solid var(--coy-border-gold);
  backdrop-filter: blur(8px);
  line-height: 1;
}
.fleet-seats strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold-light);
}
.fleet-seats small {
  margin-top: 2px;
  font-family: var(--font-primary);
  font-size: 10px;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.fleet-thumbs {
  display: flex;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-3) 0;
}
.fleet-thumb {
  flex: 1 1 0;
  padding: 0;
  border: 1px solid var(--coy-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.6;
  transition: var(--transition-fast);
}
.fleet-thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fleet-thumb:hover,
.fleet-thumb.is-active { opacity: 1; border-color: var(--color-gold); }
.fleet-thumb:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.fleet-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--spacing-5) var(--spacing-6) var(--spacing-6);
}
.fleet-card-body .coy-card-tag i { margin-right: var(--spacing-1); }
.fleet-card-title {
  margin: var(--spacing-2) 0 var(--spacing-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-white);
}

.fleet-specs {
  display: grid;
  gap: var(--spacing-3);
  margin: 0;
  padding: var(--spacing-4) 0;
  border-top: 1px solid var(--coy-border-soft);
  border-bottom: 1px solid var(--coy-border-soft);
}
.fleet-specs div { display: grid; gap: 2px; }
.fleet-specs dt {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}
.fleet-specs dt i { width: var(--spacing-4); }
.fleet-specs dd {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.fleet-incl {
  list-style: none;
  margin: auto 0 0;
  padding: var(--spacing-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}
.fleet-incl li {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1-5);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--coy-radius-chip);
  background: var(--coy-glass);
  border: 1px solid var(--coy-border-soft);
  font-family: var(--font-primary);
  font-size: 11px;
  color: var(--text-muted);
}
.fleet-incl i { color: var(--color-gold); font-size: 10px; }

/* ---------- Standards ---------- */
.fleet-features { margin-bottom: var(--spacing-12); }

/* ---------- On the road gallery ---------- */
.fleet-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 220px;
  gap: var(--spacing-4);
}
.fleet-gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--coy-border-soft);
  background: var(--coy-surface-raised);
  transition: var(--transition-elegant);
}
.fleet-gallery-item--feature { grid-column: span 2; grid-row: span 2; }
.fleet-gallery-item img,
.fleet-gallery-item .coy-img-missing {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  border-radius: 0;
  transition: transform .6s ease;
}
.fleet-gallery-item:hover { border-color: var(--coy-border-gold-strong); }
.fleet-gallery-item:hover img { transform: scale(1.05); }
.fleet-gallery-item figcaption {
  position: absolute;
  left: var(--spacing-3);
  bottom: var(--spacing-3);
  padding: var(--spacing-1-5) var(--spacing-3);
  border-radius: var(--coy-radius-chip);
  background: var(--coy-glass-strong);
  border: 1px solid var(--coy-border-soft);
  backdrop-filter: blur(8px);
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-white);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleet-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 200px; }
}
@media (max-width: 640px) {
  .fleet-grid { grid-template-columns: 1fr; }
  .fleet-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; gap: var(--spacing-3); }
  .fleet-gallery-item--feature { grid-column: span 2; grid-row: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fleet-card, .fleet-card-media img, .fleet-gallery-item img { transition: none; }
  .fleet-card:hover, .fleet-card:hover .fleet-card-media img, .fleet-gallery-item:hover img { transform: none; }
}