/* Multimedia Mobile Scroll Optimizations
 * This CSS handles mobile-specific optimizations for the multimedia gallery
 * Hides navigation arrows and tap-to-change options on mobile devices
 * since scrolling is now implemented
 */

/* Base styles for all devices */
.multimedia-grid {
    position: relative;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
    /* Hide navigation arrows in lightbox on mobile */
    .lightbox-nav {
        display: none !important;
    }
    
    /* Ensure swipe instruction is visible initially then fades */
    .lightbox-swipe-instruction {
        display: block;
        opacity: 0;
    }
    
    .lightbox-swipe-instruction.visible {
        opacity: 1;
    }
    
    /* Improve touch scrolling experience */
    .multimedia-grid {
        /* Removed -webkit-overflow-scrolling: touch; */
        scroll-snap-type: x mandatory;
        padding-bottom: 15px;
    }
    
    /* Add scroll indicator text */
    .multimedia-grid::after {
        content: 'Desliza en pantalla completa para moverte';
        display: block;
        text-align: center;
        font-size: 0.9rem;
        color: #666;
        margin-top: 10px;
        width: 100%;
        position: absolute;
        bottom: -15px;
        left: 0;
        pointer-events: none;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    /* Further optimize for very small screens */
    .multimedia-lightbox {
        padding: 5px;
    }
    
    .lightbox-close {
        top: 10px !important;
        right: 10px !important;
    }
}