/* ==========================================================================
   7. RESPONSIVE
   Breakpoints: 1200px / 992px / 768px / 576px
   Mobile layout never breaks; columns collapse progressively.
   ========================================================================== */

/* ---- <= 992px : tablets -------------------------------------------------- */
@media (max-width: 992px) {
    /* Hero heading + intro stack vertically */
    .hero__intro {
        grid-template-columns: 1fr;
        row-gap: clamp(1.5rem, 1rem + 3vw, 2.25rem);
    }

    .hero__title {
        max-width: 18ch;
    }

    .hero__lead {
        max-width: 60ch;
        padding-top: 0;
    }

    /* Footer columns stack */
    .site-footer__inner {
        grid-template-columns: 1fr;
        row-gap: clamp(1.75rem, 1rem + 3vw, 2.5rem);
    }

    .site-footer__disclaimer {
        justify-self: start;
        max-width: 60ch;
    }
}

/* ---- <= 768px : large phones / small tablets ---------------------------- */
@media (max-width: 768px) {
    /* Shrink the logo so header + label stay on one 80px row */
    .site-header__logo {
        font-size: 1.25rem; /* 20px */
    }

    .site-header__inner {
        gap: var(--space-sm);
    }

    .hero__lead {
        max-width: none;
    }
}

/* ---- <= 576px : phones --------------------------------------------------- */
@media (max-width: 576px) {
    /* Let the header grow and stack so the long brand never overflows */
    .site-header {
        height: auto;
        min-height: var(--header-height);
    }

    .site-header__inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.35rem;
        padding-block: 0.85rem;
    }

    .site-header__logo {
        font-size: 1.125rem; /* 18px */
        line-height: 1.2;
    }

    .hero__title {
        max-width: none;
    }

    .hero__divider {
        margin-block: 2.25rem;
    }
}