/* ==========================================================================
   Responsive Adaptability & Media Queries
   ========================================================================== */

/* Header: switch to mobile drawer when full menu does not fit (<= 1200px) */
@media (max-width: 1200px) {
    .site-header__utility-bar {
        display: none;
    }

    .site-header__nav {
        display: none;
    }

    .site-header__mobile-controls {
        display: flex;
    }

    .site-header__toggle {
        display: block;
    }
}

/* Tablet & Smaller Desktops (<= 1024px) */
@media (max-width: 1024px) {
    :root {
        --container-padding: 20px;
        --section-spacing: 72px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .blog-slider-block__wrap {
        padding: 0;
    }

    .blog-swiper-arrow {
        display: none;
    }

    .blog-slider-block__header {
        margin-bottom: 36px;
    }
}

/* Mobile Devices (<= 768px) */
@media (max-width: 768px) {
    :root {
        --container-padding: 16px;
        --section-spacing: 56px;
    }

    .site-header__top-container {
        flex-direction: column;
        gap: 8px;
    }

    .site-header__top-text {
        font-size: 0.875rem;
    }

    .site-header__top-btn {
        font-size: 0.8125rem;
        padding: 5px 16px;
    }

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

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

/* Small Tablets & Large Phones (<= 640px) */
@media (max-width: 640px) {
    .blog-slider-block__header {
        margin-bottom: 24px;
    }

    .blog-swiper-pagination {
        margin-top: 24px;
    }
}

/* Small Mobile (<= 480px) */
@media (max-width: 480px) {
    .nav-menu__link {
        padding: 10px 14px;
    }
}