/* ============================================
   RESPONSIVE STYLES
   Medium Desktops | Tablets | Mobile
   ============================================ */

/* Large Desktops (1400px - 1600px) */
@media screen and (max-width: 1600px) {
    html {
        font-size: 9.5px;
    }
    
    header .header-wrapper {
        padding: 20px 20rem;
    }
    
    section.hero {
        h1 {
            font-size: 15rem;
            top: 16rem;
        }
        
        img.portrait {
            width: 48rem;
        }
    }
    
    .floating-nav {
        right: 28rem;
    }
    
    section.acting-reels .acting-reels-wrapper {
        padding: 6rem 15rem;
    }
    
    section.get-a-quote .content-wrapper {
        padding-left: 30rem;
        
        h1 {
            font-size: 7.5rem;
        }
    }
}

/* Medium Desktops (1200px - 1400px) */
@media screen and (max-width: 1400px) {
    html {
        font-size: 9.5px;
    }
    
    header .header-wrapper {
        padding: 20px 15rem;
    }
    
    section.hero {
        h1 {
            font-size: 12rem;
            top: 22rem;
        }
        
        img.portrait {
            width: 45rem;
        }
    }
    
    .floating-nav {
        right: 20rem;
    }
    
    section.acting-reels .acting-reels-wrapper {
        padding: 6rem 10rem;
    }
    
    section.get-a-quote .content-wrapper {
        padding-left: 20rem;
        
        h1 {
            font-size: 7rem;
        }
    }
}

/* Tablets (768px - 1024px) */
@media screen and (max-width: 1024px) {
    html {
        font-size: 8px;
    }
    
    /* Header */
    header .header-wrapper {
        padding: 20px 4rem;
    }
    
    header .header-wrapper img {
        max-width: 150px;
        height: auto;
    }
    
    /* Navigation Menu */
    .nav-menu ul li a {
        font-size: 3.5rem;
    }
    
    /* Hero Section */
    section.hero {
        h1 {
            font-size: 12rem;
            top: 32rem;
        }
        
        img.portrait {
            width: 50rem;
        }
    }
    
    /* Floating Navigation - Hide on tablets */
    .floating-nav {
        display: none;
    }
    
    /* Typography */
    h2 {
        font-size: 3.5rem;
    }
    
    h4 {
        font-size: 2.5rem;
    }
    
    p {
        font-size: 1.8rem;
        width: 80%;
    }
    
    a.featured-btn {
        font-size: 1.8rem;
        padding: 14px 18px;
    }
    
    /* Acting Reels */
    section.acting-reels {
        padding: 8rem 0;
        
        .acting-reels-wrapper {
            padding: 4rem 4rem;
            flex-wrap: wrap;
            gap: 15px;
            
            .acting-reel-item {
                width: calc(50% - 12.5px);
                height: 70rem;
            }
        }
    }
    
    /* Directing Reels */
    section.directing-reels {
        padding: 8rem 0;
        
        .yt-wrapper {
            width: 80%;
            min-height: 50rem;
            max-height: 65rem;
        }
    }
    
    /* Get a Quote */
    section.get-a-quote {
        min-height: 40vw;
        
        .content-wrapper {
            width: 70%;
            padding-left: 8rem;
            
            h1 {
                font-size: 5.5rem;
            }
        }
    }
    
    /* Footer */
    footer.footer {
        min-height: 25rem;
        padding: 4rem 0;
    }
    
    /* Buttons Wrapper */
    .buttons-wrapper {
        flex-wrap: wrap;
        gap: 15px;
    }
}

/* Mobile Devices (below 768px) */
@media screen and (max-width: 768px) {
    html {
        font-size: 7px;
    }
    
    /* Header */
    header .header-wrapper {
        padding: 15px 2rem;
    }
    
    header .header-wrapper img {
        max-width: 120px;
    }
    
    /* Navigation Menu */
    .nav-menu {
        z-index: 99999 !important;
        background-color: rgb(0, 0, 0) !important;
    }
    
    .nav-menu ul li {
        margin-bottom: 30px;
        
        a {
            font-size: 3rem;
        }
    }
    
    /* Hamburger button z-index on mobile */
    .hamburger {
        z-index: 100000 !important;
    }
    
    /* Body scroll lock on mobile when menu is open */
    body.menu-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    body.menu-open section,
    body.menu-open footer {
        opacity: 1 !important;
        pointer-events: none !important;
    }
    
    body.menu-open header {
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 100001 !important;
    }
    
    /* Hero Section */
    section.hero {
        height: 100vw;
        h1 {
            font-size: 10rem;
            top: 36rem;
        }
        
        img.portrait {
            width: 50rem;
        }
    }
    
    /* Floating Navigation - Hide on mobile */
    .floating-nav {
        display: none;
    }
    
    /* Typography */
    h2 {
        font-size: 3rem;
        padding: 0 2rem;
    }
    
    h4 {
        font-size: 2rem;
        margin: 15px 0;
        padding: 0 2rem;
    }
    
    p {
        font-size: 1.6rem;
        width: 90%;
        padding: 0 2rem;
        margin: 10px auto;
    }
    
    a.featured-btn {
        font-size: 1.6rem;
        padding: 12px 16px;
    }
    
    /* Slider */
    .crevon-films-slider-item {
        gap: 15px;
        
        img {
            max-height: 50px;
        }
    }
    
    /* Acting Reels */
    section.acting-reels {
        padding: 6rem 0;
		position: relative;
		z-index: -9;
        
        .acting-reels-wrapper {
            padding: 3rem 2rem;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 20px;
            
            .acting-reel-item {
                width: calc(100% / 2 - 20px);
                height: 60rem;
            }
        }
    }
    
    /* Directing Reels */
    section.directing-reels {
        padding: 6rem 0;
        position: relative;
		z-index: -9;
        .yt-wrapper {
            width: 95%;
            min-height: 40rem;
            max-height: 50rem;
            margin: 3rem auto;
        }
    }
    
    /* Get a Quote */
    section.get-a-quote {
        min-height: 50vh;
        padding: 4rem 0;
        background-position: center;
        position: relative;
		z-index: -9;
        .content-wrapper {
            width: 100%;
            padding-left: 0;
            text-align: center;
            
            h1 {
                font-size: 4rem;
                margin-bottom: 20px;
            }
        }
    }
    
    /* Footer */
    footer.footer {
        min-height: 20rem;
        padding: 3rem 0;
        gap: 15px;
        position: relative;
		z-index: -9;
        .social-wrapper ul {
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
            
            li a {
                height: 45px;
                width: 45px;
                
                img {
                    height: 18px;
                }
            }
        }
        
        p.copyrights {
            font-size: 1.4rem;
        }
    }
    
    /* Buttons Wrapper */
    .buttons-wrapper {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
        
        a.featured-btn {
            width: fit-content;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }
    }
}

/* Small Mobile Devices (below 480px) */
@media screen and (max-width: 480px) {
    html {
        font-size: 10px;
        overflow-x: hidden;
    }
    
    /* Header */
    header .header-wrapper {
        padding: 12px 1.5rem;
    }
    
    header .header-wrapper img {
        max-width: 100px;
    }
    
    /* Navigation Menu */
    .nav-menu {
        z-index: 99999 !important;
        background-color: rgb(0, 0, 0) !important;
    }
    
    .nav-menu ul li {
        margin-bottom: 25px;
        
        a {
            font-size: 2.5rem;
        }
    }
    
    /* Body scroll lock on small mobile when menu is open */
    body.menu-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    body.menu-open section,
    body.menu-open footer {
        opacity: 1 !important;
        pointer-events: none !important;
    }
    
    body.menu-open header {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .hamburger {
        z-index: 100000 !important;
    }
    
    /* Hero Section */
    section.hero {
        h1 {
            font-size: 4rem;
            top: 10rem;
        }
        
        img.portrait {
            width: 18rem;
        }
    }
    
    /* Typography */
    h2 {
        font-size: 2.5rem;
    }
    
    h4 {
        font-size: 1.8rem;
    }
    
    p {
        font-size: 1.4rem;
        width: 95%;
    }
    
    a.featured-btn {
        font-size: 1.4rem;
        padding: 10px 14px;
    }
    
    /* Slider */
    .crevon-films-slider {
        padding: 8px 0;
    }
    
    .crevon-films-slider-item {
        gap: 12px;
        padding-right: 30px;
        
        img {
            max-height: 40px;
        }
        
        svg {
            width: 12px;
            height: 11px;
        }
    }
    
    /* Acting Reels */
    section.acting-reels {
        .acting-reels-wrapper {
            padding: 2rem 1.5rem;
            
            .acting-reel-item {
                width: 100%;
                height: 50rem;
            }
        }
    }
    
    /* Directing Reels */
    section.directing-reels {
        .yt-wrapper {
            width: 98%;
            min-height: 35rem;
            max-height: 45rem;
        }
    }
    
    /* Get a Quote */
    section.get-a-quote {
        min-height: 30vh;
        padding: 3rem 0;
        
        .content-wrapper h1 {
            font-size: 2rem;
        }
    }
    
    /* Footer */
    footer.footer {
        min-height: 18rem;
        padding: 2.5rem 0;
        
        .social-wrapper ul {
            gap: 12px;
            padding: 0;
            
            li a {
                height: 40px;
                width: 40px;
                
                img {
                    height: 16px;
                }
            }
        }
        
        p.copyrights {
            font-size: 1.2rem;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }
    }
}

/* Landscape Mobile Orientation */
@media screen and (max-width: 768px) and (orientation: landscape) {
    section.hero {
        h1 {
            font-size: 6rem;
            top: 8rem;
        }
        
        img.portrait {
            width: 25rem;
        }
    }
    
    section.acting-reels .acting-reels-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        
        .acting-reel-item {
            width: calc(50% - 10px);
            height: 35rem;
        }
    }
}

/* Print Styles - Hide unnecessary elements */
@media print {
    .floating-nav,
    .hamburger,
    .nav-menu,
    .crevon-films-slider {
        display: none !important;
    }
}

/* Contact Form Responsive Styles */
@media (max-width: 1024px) {
    section.contact-form .form-wrapper {
        padding: 4rem 2rem;
        border-radius: 2.4rem;
    }
    
    section.contact-form .form-wrapper h2 {
        font-size: 3.2rem;
    }
    
    section.contact-form .form {
        margin-top: 4rem;
        gap: 12px;
    }
    
    section.contact-form .form .form-row {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    section.contact-form .form .form-row:last-of-type:not(.form-row-button) {
        flex-direction: column;
    }
    
    section.contact-form .form .form-row:last-of-type:not(.form-row-button) .form-group {
        flex: 1 1 100%;
    }
    
    section.contact-form .form .form-group input[type="text"],
    section.contact-form .form .form-group input[type="email"],
    section.contact-form .form .form-group input[type="tel"],
    section.contact-form .form .form-group select {
        padding: 22px 5px 22px 28px;
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    section.contact-form {
        padding: 60px 15px;
    }
    
    section.contact-form .form-wrapper {
        padding: 4rem 2rem;
        border-radius: 2rem;
    }
    
    section.contact-form .form-wrapper h2 {
        font-size: 2.8rem;
        text-align: center;
    }
    
    section.contact-form .form {
        margin-top: 3rem;
        gap: 12px;
    }
    
    section.contact-form .form .form-row {
        flex-direction: column;
        gap: 12px;
    }
    
    section.contact-form .form .form-group {
        width: 100%;
    }
    
    section.contact-form .form .form-group input[type="text"],
    section.contact-form .form .form-group input[type="email"],
    section.contact-form .form .form-group input[type="tel"],
    section.contact-form .form .form-group select {
        font-size: 1.4rem;
        padding: 20px 5px 20px 24px;
        width: 100%;
    }
    
    section.contact-form .form .form-group input[type="text"],
    section.contact-form .form .form-group input[type="email"],
    section.contact-form .form .form-group input[type="tel"] {
        width: calc(100% - 30px);
    }
    
    section.contact-form .form .submit-btn {
        font-size: 1.8rem;
        padding: 16px 32px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    section.contact-form {
        padding: 40px 10px;
    }
    
    section.contact-form .form-wrapper {
        padding: 3rem 1.5rem;
        border-radius: 1.6rem;
    }
    
    section.contact-form .form-wrapper h2 {
        font-size: 2.4rem;
    }
    
    section.contact-form .form {
        margin-top: 2.5rem;
        gap: 10px;
    }
    
    section.contact-form .form .form-row {
        gap: 10px;
    }
    
    section.contact-form .form .form-group input[type="text"],
    section.contact-form .form .form-group input[type="email"],
    section.contact-form .form .form-group input[type="tel"],
    section.contact-form .form .form-group select {
        font-size: 1.3rem;
        padding: 18px 4px 18px 20px;
    }
    
    section.contact-form .form .form-group input[type="text"],
    section.contact-form .form .form-group input[type="email"],
    section.contact-form .form .form-group input[type="tel"] {
        width: calc(100% - 24px);
    }
    
    section.contact-form .form .submit-btn {
        font-size: 1.6rem;
        padding: 14px 28px;
    }
}