/* Mobile-only auto-scrolling carousels (scripts/mobile-carousel.js).
   Mark a list with data-mobile-autoscroll="<ms>" and, at phone widths, its
   children become a horizontal swipe carousel that advances on its own.
   Desktop layouts are untouched. */
@media (max-width: 767px) {
    html [data-mobile-autoscroll] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        grid-template-columns: none;
        grid-template-rows: none;
        align-items: stretch;
        gap: 14px;
        max-width: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 6px;
    }

    html [data-mobile-autoscroll]::-webkit-scrollbar { display: none }

    html [data-mobile-autoscroll] > * {
        flex: 0 0 86%;
        min-width: 0;
        margin: 0;
        scroll-snap-align: start;
    }

    /* Home "Our Mentions": the two award cards join the tweet as slides */
    html .mentions-carousel { margin-top: 40px }
    html .mentions-carousel > .csc-awards { display: contents }
    html .mentions-carousel > .csc-awards > *,
    html .mentions-carousel > .csc-tweet {
        flex: 0 0 86%;
        min-width: 0;
        margin: 0;
        scroll-snap-align: start;
    }
}