/* =============================================
   CETAF MILESTONES — mobile 1-per-view carousel
   The 4 year-columns live inside ONE slick slide, so
   on mobile (where they currently stack) we turn the
   row into a horizontal scroll-snap carousel — one year
   per screen, swipe sideways.
   Loads after style.css via cetaf_enqueue_split_css,
   overriding the stacked-columns rule there.

   CAVEAT: this scroller is nested inside the slick
   carousel. If slick's touch-swipe hijacks the inner
   horizontal scroll on a device, the robust fix is to
   make each year its own slide + set slick slidesToShow
   responsive (4 desktop / 1 mobile).
   ============================================= */

@media (max-width: 767px) {

    /* Row becomes a horizontal swipe track */
    .cetaf-milestones .vce-content-slider .vce-content-slide .vce-row-content {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        scrollbar-width: none !important;      /* Firefox */
    }

    /* Hide the scrollbar (WebKit) */
    .cetaf-milestones .vce-content-slider .vce-content-slide .vce-row-content::-webkit-scrollbar {
        display: none !important;
    }

    /* Each year = one full-width snap stop */
    .cetaf-milestones .vce-content-slider .vce-content-slide .vce-col {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        scroll-snap-align: center !important;
    }
}