/* Mobile Carousel Button Fix */
/* Ensure carousel navigation buttons work properly on mobile devices */

@media (max-width: 768px) {
    /* Make sure carousel buttons are touchable */
    .events-btn,
    .videos-btn,
    .articles-btn {
        touch-action: manipulation !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        
        /* Ensure minimum touch target size */
        min-width: 44px !important;
        min-height: 44px !important;
        
        /* Prevent text selection */
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        
        /* Ensure proper z-index */
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Ensure buttons are not hidden or overlapped */
    .events-nav,
    .videos-nav,
    .articles-nav {
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    /* Prevent carousel container from blocking button clicks */
    .events-carousel-wrapper,
    .videos-carousel-wrapper,
    .articles-carousel-wrapper {
        position: relative !important;
    }
    
    /* Ensure carousel doesn't overflow and block buttons */
    .events-carousel,
    .videos-carousel,
    .articles-carousel {
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Active/hover states for mobile */
    .events-btn:active,
    .videos-btn:active,
    .articles-btn:active {
        transform: scale(0.95) !important;
        opacity: 0.8 !important;
    }
    
    /* Disabled state should still be visible but not clickable */
    .events-btn:disabled,
    .videos-btn:disabled,
    .articles-btn:disabled {
        opacity: 0.5 !important;
        pointer-events: none !important;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .events-btn,
    .videos-btn,
    .articles-btn {
        /* Slightly larger touch targets on small screens */
        min-width: 48px !important;
        min-height: 48px !important;
        font-size: 18px !important;
    }
}