/* Mobile Scroll Snap Slider - Performance Replacement for Owl Carousel */
@media (max-width: 991.98px) {
    .mobile-scroll-snap {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding-bottom: 1.5rem; /* Space for shadow/overflow */
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-right: -0.75rem; /* Counteract container padding */
        margin-left: -0.75rem;
    }

    .mobile-scroll-snap::-webkit-scrollbar {
        height: 0px;
        background: transparent; /* make scrollbar transparent */
        display: none;
    }

    .mobile-scroll-snap > * {
        flex: 0 0 85% !important; /* Show 85% of the card to hint at more content */
        width: 85% !important;
        max-width: 85% !important;
        scroll-snap-align: center;
        margin-bottom: 0 !important; /* Override Bootstrap mb */
    }
    
    /* Ensure cards inside have full height */
    .mobile-scroll-snap .card {
        height: 100% !important;
    }

    /* Fix for RTL */
    [dir="rtl"] .mobile-scroll-snap {
        flex-direction: row;
    }
}