/* Events page specific overrides */
body {
    background: black !important;
    background-image: none !important;
    background-color: black !important;
}

.max-w-7xl {
    background-color: black !important;
}

:root {
    --gradient-start: #000000 !important;
    --gradient-end: #000000 !important;
}

/* Search input styling */
#eventSearch {
    background-color: #121218;
    border-color: #333;
    color: white;
}

#eventSearch:focus {
    border-color: #6566f0;
    outline: none;
    box-shadow: 0 0 0 2px rgba(101, 102, 240, 0.2);
}

#clearSearch:hover {
    background-color: #5152d0;
}

/* Mobile-first approach */
.events-slide {
    width: 100% !important;
    padding: 0 8px !important;
}

.events-slide > div {
    width: 100% !important;
}

/* Responsive slider fixes */
@media (max-width: 768px) {
    /* Container adjustments */
    .events-slider-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Search input mobile styling */
    #eventSearch {
        width: 100% !important;
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    
    .flex.flex-col.sm\:flex-row.gap-3 {
        width: 100% !important;
    }
    
    #noSearchResults {
        margin: 0 auto !important;
        width: 95% !important;
        padding: 1.5rem !important;
    }
    
    #noSearchResults h3 {
        font-size: 1.2rem !important;
    }
    
    #noSearchResults svg {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Fix slide dimensions */
    .events-slide {
        padding: 0 4px !important;
        width: 100% !important;
        min-width: 280px !important;
        flex: 0 0 auto !important;
    }
    
    .events-slide > div {
        width: 100% !important;
        margin: 0 auto !important;
        max-width: 95% !important;
        min-height: auto !important;
    }
    
    /* Fix image dimensions on mobile */
    .events-slide .relative.h-48,
    .events-slide .relative.h-56,
    .events-slide .relative.h-64 {
        height: 160px !important;
    }
    
    /* Better button spacing on mobile */
    #prevEvents, #nextEvents {
        margin-top: -20px;
        background-color: rgba(0, 0, 0, 0.7) !important;
        width: 30px !important;
        height: 30px !important;
        padding: 0 !important;
        top: 80px !important;
        transform: none !important;
        z-index: 999 !important;
        opacity: 0.9 !important;
        position: absolute !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #prevEvents {
        left: 5px !important;
    }
    
    #nextEvents {
        right: 5px !important;
    }
    
    #prevEvents svg, #nextEvents svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Mobile container fixes */
    .mobile-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    
    .events-slider {
        width: 100% !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .events-slides {
        display: flex !important;
        flex-wrap: nowrap !important;
        transition: transform 0.3s ease !important;
        width: 100% !important;
    }
    
    /* Card sizing */
    .bg-\[\#08090b\] {
        margin: 0 auto !important;
        max-width: 95% !important;
    }
    
    /* Content padding */
    .p-6 {
        padding: 12px !important;
    }
    
    /* Text sizing */
    .events-slide h3,
    .events-slide .text-xl {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
    
    .events-slide .space-y-3 {
        margin-top: 8px !important;
        font-size: 12px !important;
    }
    
    .events-slide .mb-6 {
        margin-bottom: 10px !important;
    }
    
    /* Spacing at the top of page */
    .py-20 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    .py-16 {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    
    /* Fix flex layouts */
    .flex-col.sm\:flex-row {
        flex-direction: column !important;
    }
    
    /* Extra small screen fixes */
    @media (max-width: 380px) {
        .events-slide {
            min-width: 260px !important;
        }
        
        .bg-\[\#08090b\] {
            max-width: 98% !important;
        }
        
        .events-slide .relative.h-48 {
            height: 140px !important;
        }
        
        .p-6 {
            padding: 8px !important;
        }
        
        .events-slide h3,
        .events-slide .text-xl {
            font-size: 14px !important;
        }
    }
}

/* Small screens */
@media (min-width: 576px) and (max-width: 767px) {
    .events-slide {
        width: 100% !important;
    }
}

/* Medium screens */
@media (min-width: 768px) and (max-width: 1199px) {
    .events-slide {
        width: 50% !important;
        padding: 0 8px !important;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    .events-slide {
        width: 33.333% !important;
        padding: 0 12px !important;
    }
}