/* WEBSITE_RESOURCES_V2: full-screen sections and an image-only car gallery. */
.motion-line { display: inline-block; vertical-align: top; max-width: 100%; overflow: clip; padding: .09em 0; margin: -.09em 0; }
.motion-line > span { display: inline-block; max-width: 100%; }
.slide-deck, .slide-deck body { height: 100%; overflow: hidden; }
.slide-deck #main-content { position: relative; height: 100svh; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: none; scrollbar-width: none; scroll-behavior: auto; }
.slide-deck #main-content::-webkit-scrollbar { display: none; }
.slide-deck #main-content.slide-transitioning { scroll-snap-type: none; }
.page-slide { height: 100%; padding-top: var(--motion-header, 56px); scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.page-slide:first-child { padding-top: 0; }
.slide-content { height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scroll-padding-block: 20px; }
.slide-content > section { min-height: 100%; }
.slide-content > .site-footer { min-height: 100%; }
.slide-content > .design-hero { display: flex; flex-direction: column; height: 100%; }
.slide-deck .design-hero__scene { flex: 1 0 560px; height: auto; }
.slide-deck body.dialog-open #main-content { overflow: hidden; }
/* Keep the full calendar in one desktop stop without clipping short-screen overflow. */
.slide-deck .design-panel.calendar-panel { min-height: 100%; padding: 32px 5%; gap: 24px 48px; }
.slide-deck .calendar-panel .event-list__row { min-height: 64px; padding: 8px 0; }
@media (max-height: 740px) {
  .slide-deck .design-panel.calendar-panel { padding: 20px 5%; gap: 16px 32px; }
  .slide-deck .calendar-panel .event-list__row { min-height: 56px; padding: 6px 0; }
}
.fleet { position: relative; background: #e9e9e7; }
.motion-ready .design-hero__image { backface-visibility: hidden; }
.fleet-controls { display: none; }
.fleet--horizontal .fleet-stage { height: max(620px, calc(100svh - var(--motion-header))); display: flex; flex-direction: column; background: #000; }
.fleet--horizontal .fleet-intro { flex: 0 0 26%; }
.fleet--horizontal .fleet-intro .panel-heading { min-height: 0; padding: 24px 40px 24px 24px; }
.fleet--horizontal .fleet-intro__space { display: flex; align-items: end; justify-content: start; padding: 24px 20px; }
.fleet--horizontal .fleet-body { display: grid; grid-template-columns: clamp(240px, 25%, 360px) minmax(0, 1fr); flex: 1; min-height: 0; background: #000; }
.fleet--horizontal .fleet-details { display: grid; min-width: 0; background: #000; }
.fleet--horizontal .fleet-track { display: flex; min-height: 0; min-width: 0; width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; background: #000; }
.fleet--horizontal .fleet-track::-webkit-scrollbar { display: none; }
.fleet--horizontal .fleet-track:focus-visible { outline-offset: -4px; }
.fleet--horizontal .car-row { grid-area: 1 / 1; display: block; min-width: 0; visibility: hidden; }
.fleet--horizontal .car-row.is-active { visibility: visible; }
.fleet--horizontal .car-image { flex: 0 0 100%; height: 100%; aspect-ratio: auto; position: relative; overflow: hidden; container-type: size; scroll-snap-align: start; scroll-snap-stop: always; }
.fleet--horizontal .car-image img { object-fit: contain; }
/* Fill the reference's wide frame without cropping cars in tall or ultrawide views. */
@container (min-aspect-ratio: 17 / 10) and (max-aspect-ratio: 21 / 10) {
  .fleet--horizontal .car-image img { object-fit: cover; }
}
.fleet--horizontal .car-copy { height: 100%; padding: 24px 40px 40px 24px; background: none; }
.fleet--horizontal .car-specs { margin-top: 24px; margin-bottom: 24px; }
.fleet--horizontal .car-copy h3 { font-size: 24px; }
.fleet--horizontal .car-specs { font-size: 16px; }
.fleet--horizontal .fleet-controls { display: flex; align-items: center; gap: 14px; color: #080808; }
.fleet-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; padding: 0; background: transparent; }
.fleet-controls button:hover:not(:disabled) { background: #080808; color: #fff; }
.fleet-controls button:disabled { opacity: .3; cursor: default; }
.fleet-controls button::before { content: ''; width: 20px; height: 20px; background: currentColor; mask: url('assets/icons/chevron-right.svg') center / contain no-repeat; }
.fleet-controls button:first-child::before { mask-image: url('assets/icons/chevron-left.svg'); }
.fleet-count { font: 400 12px var(--control); min-width: 54px; text-align: center; }
@media (max-width: 900px) {
  .fleet--horizontal .fleet-stage { height: auto; }
  .fleet--horizontal .fleet-intro { flex: none; grid-template-columns: minmax(0, 1fr) auto; }
  .fleet--horizontal .fleet-intro .panel-heading { padding: 28px 20px; justify-content: start; }
  .fleet--horizontal .fleet-intro .panel-heading h2 { font-size: 22px; text-align: left; }
  .fleet--horizontal .fleet-intro__space { padding: 20px 12px; }
  .fleet--horizontal .fleet-controls { gap: 6px; }
  .fleet-count { min-width: 40px; }
  .fleet--horizontal .fleet-body { flex: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .fleet--horizontal .fleet-track { grid-row: 1; aspect-ratio: 5000 / 2922; }
  .fleet--horizontal .car-image img { object-fit: contain; }
  .fleet--horizontal .fleet-details { grid-row: 2; }
  .fleet--horizontal .car-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; align-content: start; align-items: start; padding: 24px; text-align: left; }
  .fleet--horizontal .car-copy h3 { font-size: 24px; }
  .fleet--horizontal .car-specs { margin: 0; text-align: right; }
  .fleet--horizontal .car-actions { grid-column: 1 / -1; width: 100%; margin: 0; }
}
@media (max-width: 380px) {
  .fleet--horizontal .fleet-intro { grid-template-columns: minmax(0, 1fr); }
  .fleet--horizontal .fleet-intro .panel-heading { padding-bottom: 12px; }
  .fleet--horizontal .fleet-intro__space { padding: 0 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-line { overflow: visible; }
}
