/* ==========================================================================
   DIAI Responsive CSS
   Mobile and tablet adjustments
   ========================================================================== */

@media (max-width: 1024px) {

    .footer-container {
        grid-template-columns: 1fr 1fr;
    }

    .card-grid--three {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 760px) {

    .container,
    .site-header__inner,
    .site-nav__inner,
    .footer-container,
    .footer-bottom {
        width: min(100% - 32px, var(--container-width));
    }

    .site-header__inner {
        min-height: auto;
        padding: 16px 0;
        align-items: flex-start;
        flex-direction: column;
    }

    .site-brand__mark {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 13px;
    }

    .site-brand__title {
        font-size: 15px;
    }

    .site-brand__subtitle {
        font-size: 12px;
    }

    .site-tools {
        align-self: flex-end;
    }

    .site-nav__inner {
        gap: 22px;
        min-height: 48px;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
    }

    .site-nav a {
        font-size: 13px;
        scroll-snap-align: start;
    }

    .site-nav a.is-active::after {
        bottom: -15px;
    }

    .hero {
        padding: 56px 0 52px;
    }

    .hero h1 {
        font-size: clamp(38px, 13vw, 58px);
    }

    .hero-lead {
        font-size: 17px;
    }

    .section {
        padding: 52px 0;
    }

    .card-grid--three {
        grid-template-columns: 1fr;
    }

    .card {
        min-height: auto;
        padding: 24px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }

}

@media (max-width: 420px) {

    .site-brand {
        align-items: flex-start;
    }

    .hero-actions {
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

}