/* ================================
   RESPONSIVE DESIGN
   Media Queries for Mobile & Tablet
   ================================ */

/* ===== CRITICAL: Hero Overlay Fix for ALL screen sizes ===== */
.hero-overlay {
    opacity: 0.6 !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* ===== TABLET & BELOW (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    :root {
        --container-padding: 1.5rem;
        --section-padding: 4rem 0;
    }

    h1 {
        font-size: var(--font-size-3xl);
    }

    h2 {
        font-size: var(--font-size-2xl);
    }

    h3 {
        font-size: var(--font-size-xl);
    }

    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-header {
        margin-bottom: var(--spacing-2xl);
    }

    /* Ensure overlay stays visible on tablet */
    .hero-overlay {
        opacity: 0.6 !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
        --section-padding: 3rem 0;
        --font-size-4xl: 2.5rem;
        --font-size-3xl: 2rem;
        --font-size-2xl: 1.5rem;
    }

    body {
        font-size: var(--font-size-sm);
        padding-top: 70px; /* Adjust for mobile header height */
    }

    /* CRITICAL: Prevent horizontal overflow on mobile */
    html,
    body {
        max-width: 100vw;
        overflow-x: hidden;
        position: relative;
    }

    * {
        max-width: 100%;
    }

    /* Ensure all sections fit within screen */
    section {
        width: 100%;
        overflow-x: hidden;
        position: relative; /* Create stacking context */
        z-index: 1; /* Content above background, below header */
    }

    /* Container must fit screen width on mobile */
    .container {
        padding: 0 1rem;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }

    /* CRITICAL: Ensure all buttons are clickable */
    .btn,
    button,
    a,
    input,
    textarea,
    select {
        pointer-events: auto !important; /* Always clickable */
        position: relative;
        z-index: 10; /* Above other content */
    }

    /* Forms must be interactive */
    form,
    .form-group,
    .form-input,
    .form-textarea,
    .form-select {
        pointer-events: auto !important;
        position: relative;
        z-index: 10;
    }

    h1 {
        font-size: var(--font-size-2xl);
    }

    h2 {
        font-size: var(--font-size-xl);
    }

    h3 {
        font-size: var(--font-size-lg);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .btn {
        padding: 0.75rem 1.5rem;
        font-size: var(--font-size-sm);
    }

    .section-title {
        font-size: var(--font-size-2xl);
    }

    .section-subtitle {
        font-size: var(--font-size-base);
    }

    /* ===== HERO SECTION MOBILE ===== */
    .hero-section {
        min-height: 400px !important;
        padding: 0 !important;
        padding-top: 70px !important; /* Account for fixed header */
        display: flex !important;
        align-items: center !important;
    }

    /* Video background adjustments for mobile */
    .hero-video {
        object-fit: cover; /* Ensure video covers entire section */
        min-height: 100%;
        min-width: 100%;
    }

    /* CRITICAL: Overlay must be visible on mobile */
    .hero-overlay {
        opacity: 0.6 !important; /* Force overlay visibility on mobile */
        display: block !important;
        pointer-events: none;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    }

    /* Hero content - centered on mobile */
    .hero-section .container {
        text-align: center !important;
    }

    .hero-section .container > div {
        text-align: center !important;
        max-width: 100% !important;
    }

    .hero-section .scroll-animate {
        text-align: center !important;
    }

    /* Hero title - larger, centered, and prominent on mobile */
    .hero-section h1 {
        font-size: 2.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 2rem !important;
        word-wrap: break-word;
        text-align: center !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
    }

    /* Hero buttons - centered and larger on mobile */
    .hero-section div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100%;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Hero sections with gradient background (services, team, videos, contact) */
    section[style*="linear-gradient(135deg, var(--color-primary)"] {
        padding-top: 8rem !important;
        padding-bottom: 4rem !important;
        text-align: center !important;
    }

    section[style*="linear-gradient(135deg, var(--color-primary)"] h1 {
        text-align: center !important;
        font-size: 2.25rem !important;
    }

    section[style*="linear-gradient(135deg, var(--color-primary)"] p {
        text-align: center !important;
        font-size: 1.125rem !important;
    }

    .hero-section .btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
        pointer-events: auto !important; /* Ensure clickable */
        z-index: 10;
        font-size: 1rem !important;
        padding: 0.875rem 2rem !important;
    }

    /* Show mobile-only Book Now button */
    .hero-mobile-cta {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Founder image section on mobile */
    section[style*="padding: 2.67rem 0"] {
        padding: 2rem 0 !important;
    }

    /* ===== ABOUT/MEET REENA SECTION MOBILE ===== */
    /* Stack two-column layouts vertically */
    section div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        width: 100%;
    }

    /* Video carousel - adjust for mobile */
    .video-carousel {
        max-width: 100% !important;
        margin: 0 auto;
    }

    .carousel-video {
        width: 100% !important;
        height: 100% !important;
    }

    /* Reduce heading sizes in sections */
    section h3[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }

    /* Signature image - smaller on mobile */
    img[alt*="Signature"] {
        max-width: 150px !important;
    }

    /* "What Makes Us Special" box - full width on mobile */
    section div[style*="background: white"] {
        padding: 1.5rem !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Prevent decorative elements from causing overflow */
    section > div[style*="position: absolute"] {
        display: none !important;
    }
    
    /* ===== CONTACT PAGE MOBILE REORDERING ===== */
    /* Only apply to contact page - reorder sections */
    body:has(section[data-form-contact-section]) main {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Form/Contact section - order 1 */
    section[data-form-contact-section] {
        order: 1 !important;
    }
    
    /* Stack form and contact columns vertically */
    section[data-form-contact-section] > .container > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 3rem !important;
    }
    
    /* Form stays first */
    [data-form-column] {
        order: 1 !important;
    }
    
    /* Contact info column (with Contact Info + Why Choose Us) - order 3 */
    [data-contact-column] {
        order: 3 !important;
    }
    
    /* Testimonials section - order 2 (right after form) */
    section[data-testimonials-section] {
        order: 2 !important;
    }
    
    /* FAQ section - order 4 */
    section[data-faq-section] {
        order: 4 !important;
    }
    
    /* Center headings on contact page mobile */
    section[data-form-contact-section] h2,
    section[data-testimonials-section] h2,
    section[data-faq-section] h2 {
        text-align: center !important;
    }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
    :root {
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
        --spacing-3xl: 4rem;
    }

    body {
        padding-top: 65px; /* Smaller header on tiny screens */
    }

    /* Extra overflow prevention for small screens */
    * {
        max-width: 100vw;
    }

    .container {
        padding: 0 0.75rem;
    }

    h1 {
        font-size: var(--font-size-xl);
    }

    .btn {
        width: 100%;
        padding: 0.875rem 1rem;
    }

    /* Hero section - even better on tiny screens */
    .hero-section {
        padding: 3rem 0 2rem !important;
        padding-top: 7rem !important; /* Adjust for smaller header on tiny screens */
        width: 100vw;
    }

    /* Hero section - small mobile */
    .hero-section {
        min-height: 350px !important;
        padding-top: 65px !important;
    }

    .hero-section h1 {
        font-size: 2.25rem !important;
        text-align: center !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 1.5rem !important;
    }

    .hero-section p {
        display: none !important;
    }

    .hero-section .btn {
        font-size: 0.95rem !important;
        padding: 0.875rem 1.5rem !important;
    }

    /* Hero sections with gradient backgrounds on small mobile */
    section[style*="linear-gradient(135deg, var(--color-primary)"] {
        padding-top: 7rem !important;
        padding-bottom: 3rem !important;
    }

    section[style*="linear-gradient(135deg, var(--color-primary)"] h1 {
        font-size: 1.875rem !important;
    }

    section[style*="linear-gradient(135deg, var(--color-primary)"] p {
        font-size: 1rem !important;
    }

    /* Reduce all section padding on small mobile */
    section {
        padding: 2rem 0 !important;
        width: 100vw;
    }

    /* Cards and boxes - reduce padding */
    section div[style*="padding: 2.5rem"] {
        padding: 1.25rem !important;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-height: 600px) and (orientation: landscape) {
    section {
        padding: var(--spacing-xl) 0;
    }
}