/* ==========================================================================
   Responsive — Breakpoints: 1240, 1024, 778, 480
   ========================================================================== */

@media (max-width: 1240px) {
    .site-footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

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

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

@media (max-width: 1024px) {
    /* Header mobile */
    .site-header__toggle {
        display: block;
    }

    .site-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-white);
        padding: var(--space-md);
        transform: translateX(100%);
        transition: transform var(--transition-base);
        overflow-y: auto;
        z-index: 999;
    }

    .site-nav--open {
        transform: translateX(0);
    }

    .site-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .site-nav__list a {
        padding: 1rem;
        font-size: 1.125rem;
        border-bottom: 1px solid var(--color-border);
    }

    .site-nav__list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: var(--space-md);
    }

    body.menu-open {
        overflow: hidden;
    }

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

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

    .blog-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .about-grid__image {
        max-width: 500px;
        margin: 0 auto;
    }

    .about-grid__content {
        text-align: center;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }

    /* WooCommerce */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 778px) {
    :root {
        --space-xl: 4rem;
        --space-2xl: 5rem;
    }

    .hero-slider {
        height: 70vh;
    }

    .hero-slider__content {
        height: 70vh;
    }

    .hero-slider__prev,
    .hero-slider__next {
        width: 40px;
        height: 40px;
    }

    .hero-slider__prev {
        left: 1rem;
    }

    .hero-slider__next {
        right: 1rem;
    }

    .single-post__nav {
        grid-template-columns: 1fr;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__bottom-inner {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    :root {
        --space-md: 1.5rem;
        --space-lg: 2.5rem;
        --space-xl: 3rem;
    }

    .container {
        padding: 0 var(--space-sm);
    }

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

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .hero-slider {
        height: 60vh;
        min-height: 400px;
    }

    .hero-slider__content {
        height: 60vh;
        min-height: 400px;
    }

    .btn--lg {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    .single-hero {
        height: 35vh;
    }

    /* WooCommerce */
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100%;
        float: none;
    }
}