/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    :root {

        --container-padding: 1.25rem;

    }

    .navbar__menu {

        gap:
            var(--spacing-md);

    }

    .cards-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .values-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}

/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */

@media (max-width: 800px) {

    .navbar__toggle {

        display:
            block;

        position:
            relative;

        z-index:
            2;

    }

    .navbar__menu {

        position:
            fixed;

        top:
            var(--header-height);

        left:
            0;

        width:
            100%;

        height:
            calc(100vh - var(--header-height));

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        padding:
            var(--spacing-lg);

        background:
            var(--color-white);

        border-top:
            1px solid
            var(--color-border);

        transform:
            translateX(100%);

        transition:
            transform var(--transition-normal);

        overflow-y:
            auto;

    }

    .navbar__menu.is-open {

        transform:
            translateX(0);

    }

    .navbar__link {

        display:
            block;

        padding:
            var(--spacing-lg);

        border-bottom:
            1px solid
            var(--color-border);

        font-size:
            var(--font-size-md);

    }

    .navbar__link::after {

        display:
            none;

    }

    .navbar__link--cta {

        margin-top:
            var(--spacing-md);

        text-align:
            center;

    }

    .cta__container {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

    .site-footer__main {

        grid-template-columns:
            1fr;

    }

    .site-footer__bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}

/* ============================================================
   COMPONENT RESPONSIVENESS
   ============================================================ */

@media (max-width: 900px) {

    .intro-grid {

        grid-template-columns:
            1fr;

        gap:
            var(--spacing-2xl);

    }

    .intro-grid__visual {

        min-height:
            320px;

    }

    .audit-flash__content {

        grid-template-columns:
            1fr;

        gap:
            var(--spacing-xl);

    }

    .audit-flash__action {

        justify-content:
            flex-start;

    }

}

/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 600px) {

    :root {

        --container-padding: 1rem;

        --font-size-3xl: 1.75rem;
        --font-size-4xl: 2.25rem;
        --font-size-5xl: 2.75rem;

        --spacing-3xl: 4rem;
        --spacing-4xl: 5rem;

    }

    .navbar__brand {
        max-width: 230px;
    }

    .navbar__logo {
        width: 40px;
        height: 40px;
    }

    .navbar__brand-name {
        font-size: var(--font-size-sm);
    }

    .hero__content {

        padding-block:
            var(--spacing-3xl);

    }

    .hero__title {

        font-size:
            clamp(
                2.2rem,
                11vw,
                3rem
            );

    }

    .hero__text {

        font-size:
            var(--font-size-lg);

    }

    .hero__actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }

    .hero__actions .btn {

        width:
            100%;

    }

    .cards-grid,
    .values-grid {

        grid-template-columns:
            1fr;

    }

    .section {

        padding-block:
            var(--spacing-3xl);

    }

    .site-footer__bottom div {

        flex-direction:
            column;

        gap:
            var(--spacing-sm);

    }

}

/* ============================================================
   BLOG RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

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

}

@media (max-width: 650px) {

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

    .blog-card__body {
        padding: var(--spacing-lg);
    }

    .article__content {
        font-size: var(--font-size-md);
    }

}