/*
 * touch-scroll-fix.css
 * ──────────────────────────────────────────────────────────────────────────
 * Fix: Mobile/tablet touch scroll blocked on Industries, Premium Categories
 * (Services carousel), and News sections.
 *
 * Root cause: Horizontal scroll containers intercept all touch events,
 * preventing the browser from passing vertical swipes to the page.
 *
 * Solution:
 *   - `touch-action: pan-y` on SECTION wrappers → lets vertical scroll pass through
 *   - `touch-action: pan-x` on the horizontal SCROLL TRACK → allows horizontal drag
 *   - `overscroll-behavior-x: contain` → prevents the drag from bubbling up
 * ──────────────────────────────────────────────────────────────────────────
 */

/* ── Industries Carousel ───────────────────────────────────────────────── */
body.home-page section#industries,
.industries-carousel {
    touch-action: pan-y;
}

body.home-page section#industries .industry-carousel-viewport,
.industry-carousel-viewport {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
}

/* ── News Section (Home) ────────────────────────────────────────────────── */
body.home-page section#news,
section.home-news {
    touch-action: pan-y;
}

body.home-page section#news .home-news__grid[data-home-news-carousel],
.home-news__grid[data-home-news-carousel] {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* ── Premium Categories / Services (Story) Carousel ────────────────────── */
body.home-page section#work,
body.home-page section.stories {
    touch-action: pan-y;
}

body.home-page section#work .story-viewport,
body.home-page .story-viewport,
[data-story-viewport] {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* ── Voices / Testimonials Carousel ────────────────────────────────────── */
body.home-page section.market-voices,
body.home-page section.voices {
    touch-action: pan-y;
}

body.home-page .voices-viewport,
[data-voices-viewport] {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* ── Generic: any horizontal overflow wrapper ───────────────────────────── */
/*
 * This catches any other horizontal scroll containers that may exist
 * and ensures their parent sections allow vertical touch pass-through.
 */
@media (max-width: 1024px) {
    /* The actual scrollable track inside all carousels */
    .industry-carousel-track,
    .story-track,
    .voices-track {
        will-change: scroll-position;
    }

    /*
     * Ensure the section-level elements don't block vertical scroll.
     * `pan-y` means: browser handles vertical panning (page scroll),
     * and JS/CSS handles horizontal.
     */
    .industries-carousel,
    .home-news,
    section#news,
    section#industries,
    section#work,
    section.stories,
    section.market-voices {
        touch-action: pan-y;
    }

    /*
     * The scroll containers themselves use pan-x so that
     * horizontal finger swipes are captured for carousel dragging.
     */
    .industry-carousel-viewport,
    [data-home-news-carousel],
    [data-story-viewport],
    [data-voices-viewport] {
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }
}