/* ==========================================================================
   28FiTech AG — responsive layer for the GLOBAL components in style.css.
   Breakpoints chosen off the content, not off device names.

   ⚠ Load order is style.css → responsive.css → sections/*.css, so a rule here
   CANNOT override a section stylesheet at equal specificity (media queries add
   no specificity). Section-specific responsive rules therefore live in the
   section's own file — see hero.css and dial.css.
   ========================================================================== */

/* ── ≤ 1080px: tighten the shell, drop the 3-up to 2-up ─────────────────── */
@media (max-width: 67.5em) {
    .fi-cards--3 { grid-template-columns: repeat(2, 1fr); }
    .fi-cards--3 .fi-card:last-child { grid-column: 1 / -1; }
}

/* ── ≤ 900px: single column, drawer nav ─────────────────────────────────── */
@media (max-width: 56.25em) {
    .fi-nav,
    .fi-header__cta { display: none; }
    .fi-burger { display: block; }

    .fi-split,
    .fi-split--wide { grid-template-columns: 1fr; }

    /* Text before list, whichever order the markup used */
    .fi-split > .fi-ruled { order: 2; }

    .fi-footer__top { grid-template-columns: 1fr 1fr; }
    .fi-footer__brand { grid-column: 1 / -1; }
}

/* ── ≤ 700px: everything stacks ─────────────────────────────────────────── */
@media (max-width: 43.75em) {
    .fi-cards--3,
    .fi-cards--2 { grid-template-columns: 1fr; }
    .fi-cards--3 .fi-card:last-child { grid-column: auto; }

    .fi-form__row { grid-template-columns: 1fr; }

    .fi-footer__top { grid-template-columns: 1fr; gap: 2.25rem; }

    .fi-footer__base { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .fi-footer__legal { gap: 1rem 1.25rem; }
}

/* ── ≤ 480px ────────────────────────────────────────────────────────────── */
@media (max-width: 30em) {
    .fi-detail__v { font-size: 1rem; }
}