/* =========================================================
   COSHIFT STUDIO
   Shared Responsive Rules
   ========================================================= */


/* =========================================================
   1. SMALL DESKTOPS
   ========================================================= */

@media (max-width: 1180px) {
    .site-nav {
        gap: 19px;
    }

    .site-nav__link {
        font-size: 0.84rem;
    }

    .split-layout {
        gap: 64px;
    }
}


/* =========================================================
   2. TABLET
   ========================================================= */

@media (max-width: 1024px) {
    :root {
        --space-10: 104px;
        --space-11: 128px;
    }

    .site-nav {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

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

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

    .split-layout {
        grid-template-columns: 1fr;
        gap: 54px;
    }

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

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   3. MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 760px) {
    :root {
        --space-8: 52px;
        --space-9: 72px;
        --space-10: 84px;
        --space-11: 96px;
    }

    body {
        font-size: 15px;
    }

    h1 {
        font-size: clamp(2.65rem, 13vw, 4.2rem);
    }

    h2 {
        font-size: clamp(2rem, 10vw, 3.2rem);
    }

    .container,
    .container--wide {
        width: min(calc(100% - 32px), var(--container));
    }

    .section {
        padding-block: var(--space-9);
    }

    .section--compact {
        padding-block: var(--space-8);
    }

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

    .site-header__inner {
        min-height: 74px;
    }

    .mobile-navigation {
        inset: 74px 0 0;
        height: calc(100dvh - 74px);
    }

    .cluster {
        align-items: stretch;
    }

        .cluster .btn,
        .cluster .button {
            width: 100%;
        }

    .site-footer__main {
        grid-template-columns: 1fr;
        gap: var(--space-7);
        padding-block: var(--space-8);
    }

    .site-footer__brand {
        grid-column: auto;
    }

    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .floating-whatsapp {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }
}


/* =========================================================
   4. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
    .brand__name {
        font-size: 1.22rem;
    }

    .brand__suffix {
        font-size: 0.73rem;
    }

    .btn,
    .button {
        min-height: 50px;
        padding-inline: 18px;
    }

    .card__body {
        padding: 23px;
    }

    .price {
        font-size: 2.35rem;
    }

    .trust-pill {
        width: 100%;
        justify-content: center;
    }
}