/* Fleet pages (cars list + car pages). Loaded after site.css. */

/* Gallery: CSS scroll-snap, the photo is the content */
.gallery {
  display: grid; grid-auto-flow: column; grid-auto-columns: 88%;
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.gallery figure {
  margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 3;
  border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: #fff;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery.cutouts figure { display: grid; place-items: center; padding: 28px; background: linear-gradient(180deg, #fff 0%, var(--ivory-2) 100%); }
.gallery.cutouts img { width: auto; height: auto; max-height: 100%; object-fit: contain; }
.gallery-hint { margin-top: 4px; font-size: var(--fs-small); color: var(--muted); }

/* Cars list */
.fleet-group + .fleet-group { margin-top: clamp(48px, 5vw, 72px); }
.fleet-group > h2 { margin-bottom: 8px; }
.fleet-group > .sub { color: var(--muted); margin-bottom: 24px; }
.fleet-grid { display: grid; gap: 16px; }
.car figure.photo { padding: 0; background: var(--ivory-2); }
.car figure.photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.fleet-grid .car figure { aspect-ratio: auto; height: clamp(200px, 17vw, 240px); }
.fleet-grid .car figure:not(.photo) img { max-height: 100%; }
.car .from { font-weight: 700; color: var(--accent); font-size: 0.9375rem; }

@media (min-width: 600px) {
  .gallery { grid-auto-columns: 62%; }
  .fleet-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .fleet-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Two cars in a group: wide horizontal cards so the row still spans the content width */
@media (min-width: 900px) {
  .fleet-grid.two { grid-template-columns: 1fr 1fr; }
  .fleet-grid.two .car { flex-direction: row; }
  .fleet-grid.two .car figure { flex: 0 0 46%; height: auto; aspect-ratio: 4 / 3; }
  .fleet-grid.two .car .body { border-top: 0; border-left: 1px solid var(--ivory-line); justify-content: center; }
}
@media (min-width: 1200px) {
  .gallery { grid-auto-columns: calc((100% - 12px) / 2); }
}

/* One-price table on phones: route left, price right on one line */
@media (max-width: 767px) {
  .dest.one tr { grid-template-columns: 1fr auto; align-items: center; }
  .dest.one td:first-child { grid-column: 1; }
  .dest.one td.price-col { grid-column: 2; grid-row: 1; }
  .dest.one td.price-col::before { content: none; }
}