/* Vehicle photo galleries for the three portals, see /portal-gallery.js.
   Lives inside the portals' 16:9 .veh-photo stage. */
.vg { position: relative; display: block; width: 100%; height: 100%; }
.vg-track {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.vg-track::-webkit-scrollbar { display: none; }
.vg-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: block; }
/* The exterior keeps the portal's contained, padded treatment; the cabin
   photographs fill the frame. */
.veh-photo .vg-slide.cover img { object-fit: cover; padding: 0; filter: none; }
.vg-nav {
  position: absolute; top: 50%; z-index: 3;
  width: 30px; height: 30px; margin-top: -15px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(11, 10, 8, .6); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.vg-prev { left: 8px; }
.vg-next { right: 8px; }
.vg:hover .vg-nav, .vg-nav:focus-visible { opacity: 1; }
.vg-nav:hover { background: rgba(11, 10, 8, .85); }
.vg-nav:focus-visible { outline: 2px solid var(--gold, #C9A961); outline-offset: 2px; }
@media (hover: none) { .vg-nav { display: none; } }
.vg-cap {
  position: absolute; left: 10px; bottom: 8px; z-index: 2; pointer-events: none;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: rgba(255, 255, 255, .82); text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.vg-dots { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; gap: 5px; pointer-events: none; }
.vg-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .38); transition: background .2s ease, width .2s ease; }
.vg-dots i.on { width: 14px; border-radius: 3px; background: var(--gold, #C9A961); }
@media (prefers-reduced-motion: reduce) { .vg-nav, .vg-dots i { transition: none; } }