/* ==========================================================================
   responsive.css — Breakpoints (loaded last to override base rules)
   Mobile-first: base styles target the smallest screens; these queries
   progressively enhance for larger viewports.
     sm 640 · md 768 · lg 1024 · xl 1280
   ========================================================================== */

/* ---- sm: 640px --------------------------------------------------------- */
@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brands__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

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

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

/* ---- md: 768px --------------------------------------------------------- */
@media (min-width: 768px) {
  .trust__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .brands__grid {
    grid-template-columns: repeat(5, 1fr);
  }

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

/* ---- lg: 1024px -------------------------------------------------------- */
@media (min-width: 1024px) {
  .nav__links {
    display: flex;
  }

  .nav__toggle {
    display: none;
  }

  /* The mobile dropdown never shows at lg+ even if toggled */
  .nav__mobile,
  .nav__mobile.is-open {
    display: none;
  }

  .trust__grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .brands__grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}