/* =====================================================
   FLEET — horizontal snap carousel on mobile
   =====================================================
   Desktop keeps the existing grid untouched. Below the breakpoint the same
   markup becomes a swipeable, snapping row rather than a tall stacked list.
   ===================================================== */

@media (max-width: 768px) {
    .wo-fleet-grid[data-fleet-carousel] {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;

        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        /* No `scroll-behavior: smooth` here on purpose: with it set in CSS, a
           programmatic scrollLeft assignment is routed through the smooth-scroll
           animation, and if that animation does not run the carousel silently
           never advances. fleet-carousel.js requests the easing explicitly and
           verifies the scroll actually landed. */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;   /* don't trigger back-navigation */

        /* bleed to the screen edges so a peeking card reads as scrollable */
        margin-inline: calc(50% - 50vw);
        padding-inline: max(16px, calc(50vw - 50% + 16px));
        padding-bottom: 8px;

        scrollbar-width: none;            /* Firefox */
    }
    .wo-fleet-grid[data-fleet-carousel]::-webkit-scrollbar { display: none; }

    .wo-fleet-grid[data-fleet-carousel] > .wo-fleet-card {
        flex: 0 0 78%;                    /* next card peeks in — an affordance */
        max-width: 320px;
        scroll-snap-align: center;
        margin: 0;
    }

    /* progress dots, injected by fleet-carousel.js */
    .fleet-dots {
        display: flex; justify-content: center; align-items: center;
        gap: 7px; margin-top: 14px;
    }
    .fleet-dots__d {
        width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
        background: #cbd5e1; cursor: pointer;
        transition: width .28s ease, background .28s ease;
    }
    .fleet-dots__d.is-on { width: 22px; background: #0EA5E9; }
}

@media (min-width: 769px) {
    .fleet-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wo-fleet-grid[data-fleet-carousel] { scroll-behavior: auto; }
    .fleet-dots__d { transition: none; }
}