/* =========================================================================
   Breo Box · Responsive Styles
   Breakpoints: sm 640, md 768, lg 1024, xl 1280
   ========================================================================= */

/* ----------------------------------------------------------------
 * Large (max-width: 1024px)
 * ---------------------------------------------------------------- */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----------------------------------------------------------------
 * Tablet (max-width: 900px)
 * ---------------------------------------------------------------- */
@media (max-width: 900px) {
    .past-boxes-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .how-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----------------------------------------------------------------
 * Tablet small (max-width: 768px)
 * ---------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --section-py: clamp(3rem, 7vw, 5rem);
    }
    .site-header__nav { display: none; }
    .site-header.is-menu-open .site-header__nav {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        padding: 1.5rem var(--container-px);
    }
    .site-header.is-menu-open .site-header__menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .menu-toggle { display: inline-flex; }

    .hero { padding-block: 4rem 3rem; }
    .hero__subtitle { font-size: 1rem; }
    .hero__badges { flex-direction: column; gap: 0.5rem; }

    .section__head { margin-bottom: 2.5rem; }

    .testimonials-grid { grid-template-columns: 1fr; }
    .categories-grid { gap: 1rem; }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .founders__avatars { gap: 1rem; }
    .founder-avatar { width: 88px; height: 88px; }

    .newsletter__form { flex-direction: column; }
    .newsletter__form input[type="email"] { width: 100%; }
}

/* ----------------------------------------------------------------
 * Mobile (max-width: 480px)
 * ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: 1fr;
    }
    .category-card { padding: 1.5rem; }
    .past-box__body { padding: 1.5rem; }
    .past-box__title { font-size: 1.25rem; }

    .btn-group--stack-mobile { flex-direction: column; align-items: stretch; }
    .btn-group--stack-mobile .btn { width: 100%; }

    .hero__ctas { flex-direction: column; align-items: stretch; }
    .hero__ctas .btn { width: 100%; }

    .testimonial { padding: 1.5rem; }
}