/* Instructors Scroll Indicator Styles
 * This CSS adds a visible scrollbar indicator for the instructors section
 * on mobile devices (768px and 1024px) and improves scroll fluidity
 */

/* Base styles for all devices */
.instructores-container {
    position: relative;
}

/* Scroll indicator styles */
.instructores-scroll-indicator {
    display: none;
    text-align: center;
    margin-bottom: 15px;
    color: var(--gracie-red);
    font-weight: 600;
    font-size: 1rem;
    animation: instructorsBounceX 1.5s infinite;
}

.instructores-scroll-indicator i {
    margin-right: 5px;
    margin-left: 0;
}

@keyframes instructorsBounceX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

/* Custom scrollbar styles for the instructors grid */
@media (min-width: 769px) and (max-width: 1024px),
       (max-width: 768px) {
    /* Show scroll indicator on mobile and tablet */
    .instructores-scroll-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Improve scroll behavior */
    .instructores-grid {
        /* Removed -webkit-overflow-scrolling: touch; */
        -ms-overflow-style: auto;
        /* Smoother scrolling */
        scroll-behavior: smooth;
        /* Ensure no snapping occurs */
        scroll-snap-type: none;
        /* Add padding for scrollbar */
        padding-bottom: 12px;
        /* Prevent content from being squished */
        min-height: 0;
        min-width: 0;
    }
    
    /* Show scrollbar for Chrome, Safari and Opera */
    .instructores-grid::-webkit-scrollbar {
        display: block;
        height: 6px;
    }
    
    .instructores-grid::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .instructores-grid::-webkit-scrollbar-thumb {
        background: var(--gracie-red);
        border-radius: 10px;
    }
    
    .instructores-grid::-webkit-scrollbar-thumb:hover {
        background: #a00000;
    }
    
    /* Adjust card alignment for smoother scrolling - remove center alignment */
    .instructor-card {
        scroll-snap-align: none;
        /* Prevent card from being squished */
        flex-shrink: 0;
        /* Ensure consistent width */
        width: 300px;
    }
    
    /* Add scroll indicator text for very small screens */
    @media (max-width: 480px) {
        .instructores-grid::after {
            content: 'Desliza para ver más instructores';
            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;
        }
    }
}