/* ============================================================
   stock-nav-mobile.css
   Mobile treatment for the shared stock section nav (_StockNav).
   Load AFTER the stylesheet that defines .sp-nav.

   The problem: ten tabs can't fit a phone. Wrapping them ate three
   lines of vertical space AND still produced a horizontal scrollbar,
   because a flex row whose items can't shrink pushes its container
   wider than the viewport — which is what put a scrollbar on the
   page itself, not just on the nav.

   The fix: one contained, swipeable strip. Chosen over an overflow
   "..." menu because it needs no JavaScript, every tab stays a real
   link in the markup for crawlers, and it's the interaction people
   already expect from tab bars on mobile. The strip bleeds to the
   viewport edges so a half-visible tab signals there's more to see.
   ============================================================ */

@media (max-width: 1100px) {

    .sp-nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        /* min-width:0 is what actually stops the page-level scrollbar:
           without it this flex item refuses to shrink below its content. */
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        /* hide the scrollbar; the strip is swipeable and the fade hints at it */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* fade the trailing edge so it reads as "more to the right" */
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    }

        .sp-nav::-webkit-scrollbar {
            display: none;
        }

        /* tabs keep their natural width and never shrink into ellipsis */
        .sp-nav .sp-nav-tab {
            flex: 0 0 auto;
            white-space: nowrap;
            scroll-snap-align: start;
        }

            /* the active tab should be visible when the page loads */
            .sp-nav .sp-nav-tab.is-active {
                scroll-snap-align: center;
            }

    /* nothing inside a stock page should be able to push the page wider
       than the screen; these are the usual culprits */
    .sp-grid,
    .sp-grid > * {
        min-width: 0;
    }
}

/* once the strip is scrolled to the end there's nothing more to hint at,
   so drop the fade (progressive enhancement — ignored where unsupported) */
@supports (animation-timeline: scroll(self inline)) {
    @media (max-width: 1100px) {
        .sp-nav {
            animation: sp-nav-fade linear;
            animation-timeline: scroll(self inline);
        }

        @keyframes sp-nav-fade {
            to {
                -webkit-mask-image: linear-gradient(to right, #000 0, #000 100%);
                mask-image: linear-gradient(to right, #000 0, #000 100%);
            }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-nav {
        scroll-behavior: auto;
    }
}