/*
 * Opt-in responsive content primitives.
 *
 * This file deliberately excludes the shared header, footer, cart sidebar,
 * Astra content and WooCommerce transaction surfaces. Components must opt in
 * through an ig-* class inside a static or Insights content root.
 */

.iris-static-content .ig-mobile-rail,
.iris-insights-main .ig-mobile-rail {
    --ig-rail-card-width: min(82vw, 340px);
    --ig-rail-gap: 16px;
}

.iris-static-content .ig-responsive-table,
.iris-insights-main .ig-responsive-table {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.iris-static-content .ig-responsive-table > table,
.iris-insights-main .ig-responsive-table > table {
    min-width: 640px;
}

@media (max-width: 768px) {
    .iris-static-content .ig-mobile-rail,
    .iris-insights-main .ig-mobile-rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--ig-rail-card-width);
        grid-template-columns: none;
        grid-template-rows: none;
        gap: var(--ig-rail-gap);
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-inline: 0;
        padding: 2px clamp(18px, 5vw, 24px) 14px 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-padding-inline: 0 clamp(18px, 5vw, 24px);
        scroll-snap-type: inline mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
    }

    .iris-static-content .ig-mobile-rail > *,
    .iris-insights-main .ig-mobile-rail > * {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    .iris-static-content .ig-mobile-grid-2,
    .iris-insights-main .ig-mobile-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .iris-static-content .ig-mobile-media,
    .iris-insights-main .ig-mobile-media {
        min-height: 0;
        max-height: 480px;
        aspect-ratio: var(--ig-mobile-media-ratio, 4 / 3);
        overflow: hidden;
    }

    .iris-static-content .ig-mobile-media > img,
    .iris-static-content .ig-mobile-media > video,
    .iris-insights-main .ig-mobile-media > img,
    .iris-insights-main .ig-mobile-media > video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 480px) {
    .iris-static-content .ig-mobile-rail,
    .iris-insights-main .ig-mobile-rail {
        --ig-rail-card-width: min(84vw, 328px);
        --ig-rail-gap: 14px;
    }
}

@media (max-width: 340px) {
    .iris-static-content .ig-mobile-grid-2,
    .iris-insights-main .ig-mobile-grid-2 {
        grid-template-columns: 1fr;
    }

    .iris-static-content .ig-mobile-rail,
    .iris-insights-main .ig-mobile-rail {
        --ig-rail-card-width: calc(100vw - 48px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .iris-static-content .ig-mobile-rail,
    .iris-insights-main .ig-mobile-rail {
        scroll-behavior: auto;
    }
}