/* Leyas Candles - Responsive Styles */

/* Breakpoint Variables (For reference)
 * xs: 320px
 * sm: 576px
 * md: 768px
 * lg: 1024px
 * xl: 1280px
 */

@media (max-width: 1024px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }
    
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-xl: 4rem;
        --spacing-xxl: 5rem;
    }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    
    /* Navigation */
    .main-nav {
        display: none; /* Hide on mobile initially */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-bg-primary);
        flex-direction: column;
        padding: var(--spacing-md);
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    
    .brand-logo img {
        display: block;
        height: 70px;
        width: 128px;
        max-width: 128px;
        object-fit: contain;
    }
    
    .main-nav.active {
        display: flex;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-actions .btn {
        display: none; /* Hide CTA button in header on mobile */
    }

    /* Hero */
    .hero {
        min-height: 500px;
    }

    /* Editorial */
    .editorial {
        grid-template-columns: 1fr;
    }
    
    .editorial-image img {
        aspect-ratio: 4/3;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

@media (max-width: 414px) {
    h1 { font-size: 2.25rem; }
    
    .product-grid {
        grid-template-columns: 1fr;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .brand-intro h2 {
        font-size: 1.75rem;
    }
}