/* ================================================================
   MP-WEB-001 · Mi-PA Website · responsive.css
   Breakpoints: 1024 (tablet-landscape), 768 (tablet), 560 (mobile)
   Mobile-friendly refinements on top of the fluid base scale.
   ================================================================ */

/* ----------------------------------------------------------------
   0. Desktop guard — the mobile menu panel only exists ≤ 768px.
   Belt-and-braces with the [hidden] rule so it can never overlap
   the hero on wider screens.
   ---------------------------------------------------------------- */
@media (min-width: 769px) {
    .nav__mobile { display: none !important; }
}

/* ----------------------------------------------------------------
   1. ≤ 1024px — Tablet landscape
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {

    .platform__grid { grid-template-columns: repeat(2, 1fr); }
    .industries__grid { grid-template-columns: repeat(3, 1fr); }
    .cards--3 { grid-template-columns: repeat(2, 1fr); }
    .cards--4 { grid-template-columns: repeat(2, 1fr); }
    .run__grid { grid-template-columns: 1fr; }

    .about__inner { grid-template-columns: 1fr; }
    .about__visual { order: -1; }
    .about__card { width: min(360px, 80%); }

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

/* ----------------------------------------------------------------
   2. ≤ 768px — Tablet portrait / mobile nav
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

    :root { --nav-h: 66px; }

    /* Swap desktop links for the mobile toggle + panel */
    .nav__links { display: none; }
    .nav__toggle { display: flex; }

    /* Buttons keep their content width and wrap if the row is too narrow —
       they are never stretched across the page. */

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

    .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer__brand { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------------
   3. ≤ 560px — Mobile
   ---------------------------------------------------------------- */
@media (max-width: 560px) {

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

    .search-callout { flex-direction: column; align-items: flex-start; gap: 1rem; }

    .legal__toc ol { columns: 1; }

    .hero__stats { gap: 1.5rem; }
    .hero__stat-num { font-size: 1.6rem; }

    /* Buttons stay auto-sized; they wrap to stacked (still ~210px, centered)
       rather than stretching edge to edge. */

    /* Stacked email capture on small screens */
    .early__form { flex-direction: column; }
    .early__input { text-align: center; }

    .footer__inner { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; align-items: flex-start; }

    .badge { font-size: .66rem; }
}

/* ----------------------------------------------------------------
   4. Fine pointer hover-only enhancements
   Touch devices skip lift transforms to avoid sticky states.
   ---------------------------------------------------------------- */
@media (hover: none) {
    .card:hover,
    .platform__feature:hover,
    .industry:hover,
    .btn--primary:hover,
    .btn--ghost:hover { transform: none; }
}

/* ----------------------------------------------------------------
   5. Large screens — cap comfortable reading width
   ---------------------------------------------------------------- */
@media (min-width: 1440px) {
    :root { --container: 1280px; }
}