/* ==========================================
   Mobile Responsive Design - FINAL
   ========================================== */

/* Base: Mobile-first approach - defaults are for mobile */

/* ==========================================
   Tablet and larger (768px+)
   ========================================== */
@media (max-width: 768px) {

    /* ----------------------------------------
       LAYOUT & CONTAINERS
       ---------------------------------------- */
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    section {
        padding: var(--space-12) 0;
        position: relative;
        z-index: 1;
        overflow-x: clip;
        /* Better than hidden for sticky headers */
    }

    /* Prevent overflow globally */
    body {
        overflow-x: hidden;
        width: 100%;
        padding-bottom: 80px;
        /* Space for fixed chat button */
        position: relative;
    }

    /* ----------------------------------------
       TYPOGRAPHY
       ---------------------------------------- */
    .hero-content h1 {
        font-size: 2rem !important;
        line-height: 1.2;
        margin-bottom: var(--space-4);
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: var(--space-6);
        white-space: normal !important;
    }

    /* Reduce large brand text */
    .brand-text {
        font-size: 12vw !important;
        /* Viewport based sizing */
        padding: 10px 0;
        line-height: 1;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    /* ----------------------------------------
       HEADER & NAVIGATION
       ---------------------------------------- */
    header,
    nav,
    .navbar {
        position: relative;
        z-index: 1000;
        width: 100%;
    }

    .nav-container {
        padding: var(--space-3) var(--space-4);
    }

    /* Hide desktop nav, show mobile toggle */
    .nav-links {
        display: none !important;
    }

    .mobile-menu-btn {
        display: block !important;
    }

    /* ----------------------------------------
       HERO SECTION
       ---------------------------------------- */
    .hero-content {
        padding: var(--space-8) 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Fix Badge Clip Path overlapping */
    .hero-badge {
        max-width: 90%;
        white-space: normal;
        height: auto;
        padding: var(--space-3);
        margin-bottom: var(--space-6);
        /* Simplify clip path for mobile if needed, or keep provided it doesn't cut text */
    }

    /* ----------------------------------------
       ACCORDION (The JuiceTeam Advantage)
       ---------------------------------------- */
    .accordion-gallery {
        display: flex;
        flex-direction: column !important;
        gap: var(--space-4);
        width: 100%;
        height: auto !important;
    }

    .accordion-item {
        width: 100% !important;
        flex: 0 0 auto !important;
        /* Disable flex grow/shrink */
        height: auto !important;
        min-height: auto;
        margin-bottom: var(--space-4);
        padding: var(--space-4);
        background: var(--bg-secondary);
        /* Use base background, no transparent */
    }

    /* Disable hover expansion on mobile */
    .accordion-item:hover {
        flex: 0 0 auto !important;
        transform: none !important;
    }

    /* Fix icon position */
    .accordion-icon-fixed {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin-bottom: var(--space-3);
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    /* Content always visible or structured properly */
    .vertical-label {
        display: none !important;
        /* Hide vertical text on mobile */
    }

    .accordion-content {
        padding: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        position: relative !important;
        width: 100%;
        display: block !important;
    }

    .accordion-title-expanded {
        font-size: 1.25rem !important;
        margin-bottom: var(--space-2);
    }

    /* ----------------------------------------
       GRIDS & CARDS (Blog, Products, Features)
       ---------------------------------------- */
    .footer-grid,
    .blog-grid,
    .product-grid,
    .features-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: var(--space-6);
        width: 100%;
    }

    /* Footer specifically */
    .footer-grid {
        grid-template-columns: 1fr !important;
        /* Force 1 column for safety */
        margin-top: var(--space-6);
    }

    /* Blog Cards */
    .blog-card {
        margin-bottom: var(--space-6);
        width: 100%;
        max-width: 100%;
    }

    .blog-image {
        height: 200px;
        /* Fixed height for consistency */
    }

    /* ----------------------------------------
       CAROUSEL
       ---------------------------------------- */
    .carousel-container {
        width: 100% !important;
        overflow: hidden;
        padding: 0;
    }

    /* Ensure slides don't overflow */
    .carousel-slide {
        width: 100% !important;
        box-sizing: border-box;
        margin-right: 0 !important;
        /* Reset margin to avoid calc issues */
    }

    .carousel-track {
        display: flex;
        /* Ensure inline */
    }

    /* ----------------------------------------
       MODALS
       ---------------------------------------- */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: var(--space-4) auto;
        max-height: 85vh;
        overflow-y: auto;
        padding: var(--space-6);
        position: relative;
    }

    /* ----------------------------------------
       UTILITIES & SAFETY
       ---------------------------------------- */
    img,
    video,
    iframe,
    svg {
        max-width: 100%;
        height: auto;
    }

    /* Chat button alignment */
    .chat-button {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
    }

    /* Social links grouping */
    .social-links {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    /* Tables */
    table {
        display: block;
        overflow-x: auto;
    }
}

/* ==========================================
   Small Mobile (max 480px)
   ========================================== */
@media (max-width: 480px) {
    .container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    .hero-content h1 {
        font-size: 1.75rem !important;
    }

    .accordion-icon-fixed {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .btn {
        width: 100%;
        /* Full width buttons */
        justify-content: center;
        margin-bottom: var(--space-2);
    }

    .cta-buttons {
        width: 100%;
    }
}

/* ==========================================
   Mobile Menu Styles (Always needed)
   ========================================== */
.mobile-menu-btn {
    display: none;
    /* Hidden on desktop */
    background: none;
    border: none;
    color: var(--color-text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--space-2);
    z-index: 1001;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    z-index: 1000;
    padding: 80px var(--space-6) var(--space-6);
    /* Padding top for close button */
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.mobile-menu.active {
    display: flex;
}

.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--color-text-primary);
    font-size: 2rem;
    cursor: pointer;
    z-index: 1002;
}

.mobile-menu-link {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    padding: var(--space-2);
    display: block;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

/* Landscape fix */
@media (max-height: 600px) and (orientation: landscape) {
    .mobile-menu {
        padding-top: 60px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .mobile-menu-link {
        width: auto;
        border: none;
        font-size: 1.2rem;
    }
}