/* ============================================
   RESPONSIVE STYLES
   All @media queries for mobile, tablet, desktop
   ============================================ */

/* ============================================
   DESKTOP LAYOUT (769px and up)
   ============================================ */
        @media (min-width: 769px) {
            .form-card {
                width: clamp(550px, 70vw, 900px);
                padding: clamp(20px, 2.5vh, 32px) clamp(25px, 3vw, 40px);
            }

            .card-content {
                grid-template-columns: 1fr 1fr; /* 2 columns on desktop */
                gap: 6px 12px; /* Minimal row gap, moderate column gap */
            }

            /* Full-width elements span both columns */
            .card-content .form-info,
            .card-content .form-group.full-width {
                grid-column: 1 / -1;
            }
        }

/* ============================================
   MOBILE RESPONSIVE (768px and below)
   ============================================ */
        @media (max-width: 768px) {
            /* Form Card Layout */
            .form-card {
                width: clamp(300px, 88vw, 400px);
                padding: clamp(18px, 2.5vh, 25px) clamp(18px, 4vw, 25px);
                /* Height set dynamically by JavaScript */
            }

            /* card-content stays as grid with 1 column (from base styles) */
            /* gap: 6px from base styles - minimal spacing */

            /* Header & Navigation */
            .header-fixed {
                padding: 0 20px;
            }
            
            .header-fixed span {
                letter-spacing: var(--letter-spacing-wide);
            }

            /* Hero adjustments */
            .hero-text {
                padding: 0 20px;
            }

            /* ===== EPISODI MOBILE LAYOUT =====
               Maintains fixed positioning but with simpler layout.
               Uses fade in/deadzone/fade out animations (like missione section).
            */

            /* Episodi spacer: Hidden scroll range creator (same as desktop) */
            .episodi-spacer {
                /* Spacer remains hidden - JS sets height for scroll range */
            }

            /* Container wrapper: Stays fixed, but simplified for mobile */
            .episodi-container-wrapper {
                /* Keep position: fixed - animations controlled by JS */
                flex-direction: column !important; /* Stack vertically */
                gap: clamp(15px, 2vh, 20px) !important;
                /* Top padding accounts for mobile selector height + gap (relative values) */
                /* Selector: clamp(46px, 5vh, 58px) + Gap: clamp(15px, 2vh, 20px) = clamp(61px, 7vh, 78px) */
                padding: clamp(60px, 7vh, 80px) 0 clamp(15px, 2vh, 20px) 0 !important; /* top right bottom left */
                max-width: 100vw !important; /* Full viewport width */
                width: 100vw !important;
                left: 0 !important;
                transform: none !important; /* No centering transform needed */
            }

            /* Hide desktop sidebar accordion on mobile */
            .episodi-sidebar-wrapper {
                display: none !important;
            }

            /* Show mobile dropdown selector - now at body level as sibling */
            .episodi-mobile-selector {
                display: block !important;
                /* Already fixed at body level - no position override needed */
                /* Horizontal positioning with margins from viewport edges */
                left: clamp(15px, 4vw, 20px) !important;
                width: calc(100vw - 2 * clamp(15px, 4vw, 20px)) !important;
                padding: clamp(14px, 2vh, 18px) clamp(16px, 3vw, 20px);
                /* Glassmorphism background - NOW WORKS because it's at body level! */
                background-color: var(--bg-overlay-30) !important;
                backdrop-filter: blur(20px) saturate(90%) !important;
                -webkit-backdrop-filter: blur(20px) saturate(90%) !important;
                border: 1px solid var(--border-default);
                border-radius: 2px;
                color: var(--text-secondary);
                font-family: inherit;
                font-size: clamp(11px, 1.2vw + 0.3vh, 14px);
                text-transform: none;
                letter-spacing: var(--letter-spacing-wide);
                cursor: pointer;
                transition: all 0.3s;
                /* Remove default select appearance to allow custom styling */
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                /* Custom dropdown arrow - uses background-image to overlay on background-color */
                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
                background-repeat: no-repeat !important;
                background-position: right 15px center !important;
                background-size: 20px !important;
                padding-right: 45px;
                /* Enhanced shadow system matching other glassmorphism elements */
                box-shadow:
                    var(--shadow-8),
                    var(--shadow-5),
                    0 3px 6px var(--bg-overlay-25),
                    0 1px 3px var(--bg-overlay-20),
                    var(--shadow-inset-1);
                /* z-index inherited from base (106 - above container) */
                /* opacity inherited from base (0 - controlled by JS) */
            }

            .episodi-mobile-selector:hover,
            .episodi-mobile-selector:focus {
                color: var(--text-primary);
                border-color: var(--border-hover);
                outline: none;
            }

            .episodi-mobile-selector option {
                background: var(--black);
                color: var(--text-primary);
                padding: 12px;
            }

            /* Content wrapper: Full width on mobile */
            .episodi-content-wrapper {
                width: 100% !important;
                height: 100% !important;
                flex: 1 !important;
                min-width: 0 !important;
                /* No padding - let children control their own spacing */
                padding: 0 !important;
            }

            /* Content area: Vertical scroll for episode content */
            .content-area {
                height: 100% !important;
                /* CRITICAL FIX: Disable vertical scrolling on mobile to prevent scroll conflicts */
                /* The episodi container is fixed and sized to fit viewport, so no vertical scroll needed */
                overflow-y: visible !important;
                overflow-x: visible !important;
                padding: 0 !important;
                /* Allow pan-y and pinch-zoom without blocking scroll */
                touch-action: pan-y pinch-zoom;
            }

            /* Episode content: Ensure proper spacing */
            .episodio-content {
                display: none;
            }

            .episodio-content.active {
                display: flex !important;
                flex-direction: column;
                gap: clamp(12px, 2vh, 18px);
                width: 100%;
                /* Allow all touch actions */
                touch-action: auto;
            }

            /* Main video: Full width, responsive aspect ratio */
            .video-principale {
                width: calc(100% - 2 * clamp(15px, 4vw, 20px)) !important;
                max-width: calc(100% - 2 * clamp(15px, 4vw, 20px)) !important;
                aspect-ratio: 16/9;
                margin-bottom: 0 !important;
                /* Add horizontal margin for spacing from viewport edges */
                margin-left: clamp(15px, 4vw, 20px) !important;
                margin-right: clamp(15px, 4vw, 20px) !important;
            }

            /* ===== MOBILE CAROUSEL (SLIDE + FADE WITH ARROWS) ===== */
            .coreografie-section {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                width: 100% !important;  /* Changed from 100vw to prevent overflow */
                margin-top: clamp(10px, 2vh, 15px) !important;
                padding: 0 !important;
                box-sizing: border-box !important;
            }

            .coreografie-header {
                font-size: clamp(10px, 1.1vw + 0.2vh, 12px);
                margin-bottom: clamp(8px, 1.5vh, 12px);
                padding-bottom: clamp(6px, 1vh, 8px);
                padding-left: clamp(15px, 4vw, 20px) !important;
                padding-right: clamp(15px, 4vw, 20px) !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Carousel container - contains arrows and video */
            .carousel-container {
                width: 100% !important;
                position: relative !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 clamp(40px, 8vw, 60px) !important; /* Space for arrows */
            }

            /* Carousel track - holds cards with absolute positioning */
            .carousel-track {
                position: relative !important;
                width: 100% !important;
                max-width: 400px !important;
                overflow: hidden !important;
                /* CRITICAL: Set min-height to prevent collapse when cards are absolutely positioned */
                min-height: 225px !important; /* 16:9 aspect ratio for 400px width */
                aspect-ratio: 16/9 !important;
            }

            /* Individual cards - positioned absolutely for slide+fade */
            /* Position must have !important to override desktop CSS in components.css */
            /* JS uses inline styles with !important which will override this */
            .coreo-card {
                width: 100% !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                /* NO !important on opacity/transform - allow JS to override */
                opacity: 0;
                transform: translateX(100%);
                transition: none;
            }

            /* First card gets relative positioning to establish container height */
            /* REMOVED !important flags to allow JavaScript carousel to override these values */
            .coreo-card:first-child {
                position: relative;
                opacity: 1;
                transform: translateX(0);
                pointer-events: auto;
            }

            .coreo-video {
                aspect-ratio: 16/9 !important;
            }

            .coreo-title {
                font-size: clamp(9px, 1vw + 0.2vh, 11px) !important;
                padding: clamp(8px, 1.5vh, 12px) !important;
            }

            /* Navigation arrows - positioned outside video area */
            .carousel-arrow {
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                z-index: 20 !important;
                background: var(--bg-overlay-30) !important;
                border: 1px solid var(--border-default) !important;
                border-radius: 50% !important;
                width: clamp(32px, 6vw, 44px) !important;
                height: clamp(32px, 6vw, 44px) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                cursor: pointer !important;
                padding: 0 !important;
                opacity: 0.8 !important;
                transition: opacity 0.3s ease !important;
                touch-action: manipulation !important;
            }

            .carousel-arrow:active {
                opacity: 1 !important;
                background: var(--bg-medium) !important;
            }

            .carousel-arrow.left {
                left: clamp(5px, 2vw, 15px) !important;
            }

            .carousel-arrow.right {
                right: clamp(5px, 2vw, 15px) !important;
            }

            .carousel-arrow svg {
                width: clamp(18px, 4vw, 24px) !important;
                height: clamp(18px, 4vw, 24px) !important;
                stroke: var(--text-primary) !important;
                fill: none !important;
                stroke-width: 2 !important;
            }

            /* Dot indicators */
            .carousel-dots {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                gap: clamp(8px, 2vw, 12px) !important;
                margin-top: clamp(10px, 2vh, 15px) !important;
                padding: clamp(5px, 1vh, 8px) 0 !important;
            }

            .carousel-dot {
                width: clamp(6px, 1.5vw, 8px) !important;
                height: clamp(6px, 1.5vw, 8px) !important;
                border-radius: 50% !important;
                background: var(--border-default) !important;
                border: none !important;
                cursor: pointer !important;
                padding: 0 !important;
                transition: all 0.3s ease !important;
                opacity: 0.5 !important;
            }

            .carousel-dot.active {
                background: var(--text-primary) !important;
                opacity: 1 !important;
                transform: scale(1.3) !important;
            }

            .carousel-dot:active {
                opacity: 0.8 !important;
            }

            /* Missione responsive */
            .missione-container {
                max-height: none;
                overflow-y: visible;
            }


            /* Form responsive */
            .form-container {
                max-height: none;
            }


            .form-group input,
            .form-group select,
            .form-group textarea {
                padding: 15px;
            }

            /* Contatti responsive */
            .contatti-container {
                max-height: none;
            }


            .contatti-info {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }

/* ============================================
   MOBILE GLASSMORPHISM PERFORMANCE FIX
   Remove expensive backdrop-filter on mobile
   ============================================ */
@media (max-width: 768px) {
    .candidati-card-wrapper,
    .episodi-mobile-selector,
    .submit-button,
    .popup-button {
        background: rgba(0, 0, 0, 0.85) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .accordion-header,
    .card-nav-button,
    .form-group input,
    .form-group select,
    .form-group textarea {
        background: rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ============================================
   PREVENT iOS AUTO-ZOOM ON FORM INPUTS
   ============================================ */
@media (max-width: 768px) {
    .form-group input,
    .form-group select,
    .form-group textarea {
        /* Force minimum 16px to prevent iOS auto-zoom */
        font-size: max(16px, var(--text-sm)) !important;
    }

    /* Ensure labels and placeholders remain proportional */
    .form-group label {
        font-size: max(14px, var(--text-xs)) !important;
    }
}

/* ============================================
   EXTREME SMALL VIEWPORT (320px or 480px height)
   ============================================ */
        @media (max-width: 320px) or (max-height: 480px) {
            .missione-container {
                max-height: none;
                padding: 0;
            }

            .missione-title {
                font-size: clamp(1rem, 4vw, 1.3rem);
                margin-bottom: clamp(4px, 1vh, 8px);
                line-height: 1.2;
            }

            .missione-text {
                font-size: clamp(0.8rem, 3vw, 1rem);
                line-height: 1.3;
            }

            .missione-button {
                font-size: clamp(8px, 2vw, 11px);
                padding: clamp(8px, 1.5vh, 12px) clamp(15px, 3vw, 25px);
                letter-spacing: clamp(0.5px, 0.2vw, 1px);
            }

            .copy-block {
                margin: clamp(8px, 2vh, 15px) 0;
            }

            .cta-container {
                margin-top: clamp(10px, 2vh, 20px);
            }
        }

/* ============================================
   SMALL MOBILE (480px and below)
   ============================================ */
        @media (max-width: 480px) {
            .header-fixed {
                padding: 0 10px;
                flex-wrap: wrap;
                gap: 5px;
            }
            
            .header-fixed span {
                letter-spacing: var(--letter-spacing-normal);
            }

            /* Intro adjustments */
            .intro-text {
                margin-top: 20px;
                padding: 0 20px;
            }

            /* Hero mobile */
            .hero-text {
                padding: 0 15px;
            }

            /* Episodi mobile */
            .episodi-block {
                padding: 60px 15px 40px;
            }

            /* Missione mobile */
            .missione-block {
                padding: 60px 15px;
            }

            /* Missione mobile styles now handled by fluid system */

            /* Additional responsive adjustments for mobile */
            .missione-container {
                padding: 0;
            }

            .missione-block {
                padding: clamp(15px, 5vh, 60px) clamp(10px, 3vw, 15px);
            }

            /* Contatti mobile */
            .contatti-block {
                padding: 60px 15px;
            }



        }