/* --- WORK PAGE MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {

    /* 1. Work Header Spacing */
    .work-header {
        padding-top: 100px !important;
        /* Reduce top padding */
        margin-bottom: 2rem !important;
    }

    .work-header .section-header {
        font-size: 2.5rem !important;
        /* Smaller title */
    }

    .interaction-instructions {
        font-size: 0.7rem !important;
        margin-bottom: 1.5rem !important;
        padding: 0 1rem;
        /* Prevent edge touching */
    }

    /* 2. Filter Buttons */
    .work-filters {
        gap: 0.8rem;
        padding-bottom: 2rem;
    }

    .filter-btn {
        padding: 0.6rem 1.2rem;
        /* Compact buttons */
        font-size: 0.8rem;
        min-width: auto;
        width: auto;
        /* Allow auto width instead of full width for better flow */
        flex: 1 1 45%;
        /* 2 per row approx */
    }

    /* 3. Coverflow 3D -> Simple Horizontal Scroll on Mobile */
    .coverflow-section {
        perspective: none;
        /* Remove 3D perspective */
        padding: 2rem 0;
    }

    .coverflow-container {
        height: auto;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        /* Align start for scrolling */
        padding: 2rem 5%;
        /* Add side padding for scroll start */
        gap: 1.5rem;
        transform-style: flat;
        /* Flatten 3D */
        scroll-snap-type: x mandatory;
        /* Snap scrolling */
        -webkit-overflow-scrolling: touch;
    }

    .cover-card {
        position: relative;
        /* Reset absolute positioning */
        width: 280px;
        /* Smaller fixed width for mobile */
        height: 400px;
        /* Smaller height */
        flex-shrink: 0;
        /* Prevent squishing */
        transform: none !important;
        /* Remove all 3D transforms */
        opacity: 1 !important;
        /* Ensure visibility */
        visibility: visible !important;
        /* Override JS hidden state */
        display: block !important;
        pointer-events: auto !important;
        margin: 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        /* Simpler shadow */
        scroll-snap-align: center;
        /* Center on snap */
        -webkit-box-reflect: below 0px transparent !important;
        /* Remove reflection causing overlap issues */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .cover-card.hidden {
        /* Force override specifically for the class */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Remove the overlay dimming on mobile for better visibility */
    .cover-card::after {
        opacity: 0 !important;
        display: none;
    }

    .card-content {
        opacity: 1;
        /* Always show content on mobile */
        transform: translateY(0);
        bottom: 10px;
        left: 10px;
        right: 10px;
        padding: 10px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    }

    .card-content h3 {
        font-size: 1.2rem;
    }

    /* Active state adjustments for mobile scroll */
    .cover-card.active {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    }

    /* 4. Netflix Slider Mobile Adjustments */
    .netflix-slider {
        padding: 1rem 5%;
        gap: 1rem;
    }

    .movie-card {
        min-width: 200px;
        /* Smaller movie cards */
        height: 300px;
    }

    .video-card video {
        pointer-events: none;
        /* Ensure clicks go to card */
    }

    /* 5. Section Headers */
    .netflix-section .section-header {
        flex-direction: row;
        /* Keep row for controls */
        align-items: center;
        margin-bottom: 1rem;
    }

    .netflix-section .section-header h2 {
        font-size: 1.5rem;
        /* Smaller section titles */
        margin-bottom: 0;
    }

    .slider-controls button {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
}