/* ============================================================
   RESPONSIVE — every breakpoint for the site lives here.
   If something looks wrong at a particular width, this is the
   file to open. Breakpoints, largest to smallest:
     1280px  wide desktop
     1100px  small desktop / large tablet
      920px  tablet (nav collapses to the burger menu here)
      760px  large phone / small tablet
      480px  phone
   ============================================================ */

/* ---- container padding tightens as the viewport shrinks ---- */
@media (max-width:1100px){ :root{ --container-pad: 1.5rem; } }
@media (max-width:480px){  :root{ --container-pad: 1.1rem; } }

/* ---- grids: step down one column at a time, never straight to 1 ---- */
@media (max-width:1100px){
  .grid-4{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:920px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

/* ---- process steps: 5 -> 3 -> 1, connector lines only make
       sense on a single row, so they're hidden once it wraps ---- */
@media (max-width:1100px){
  .process{ grid-template-columns:repeat(3,1fr); row-gap:var(--space-lg); }
  .process__step::after{ display:none; }
}
@media (max-width:600px){
  .process{ grid-template-columns:1fr; }
}

/* ---- nav: collapse to burger menu at tablet width ---- */
@media (max-width:920px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
}
@media (max-width:480px){
  .nav__cta .btn--primary{ padding:10px 16px; font-size:0.72rem; }
  .nav__brand-sub{ display:none; }
}

/* ---- hero ---- */
@media (max-width:920px){
  .hero{ min-height:auto; padding-bottom:var(--space-xl); }
  .hero__content{ grid-template-columns:1fr; text-align:center; padding-top:var(--space-lg); }
  .hero__desc{ margin-left:auto; margin-right:auto; }
  .hero__actions{ justify-content:center; }
  .hero__trust{ justify-content:center; }
  .hero__visual{ margin-top:var(--space-lg); }
  .hero__visual svg{ max-width:220px; margin:0 auto; }
}
@media (max-width:480px){
  .hero__actions .btn{ width:100%; justify-content:center; }
  .hero__trust{ gap:20px 32px; }
}

/* ---- partner badge strip: shrink text before wrapping gets ugly ---- */
@media (max-width:600px){
  .tag{ font-size:0.62rem; padding:4px 10px; }
}

/* ---- about / connectivity / contact two-up layouts ---- */
@media (max-width:920px){
  .about__grid,.contact__grid{ grid-template-columns:1fr; }
}

/* ---- footer: 4 columns -> 2 -> 1, brand column keeps its own row ---- */
@media (max-width:920px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__grid > div:first-child{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ---- forms: side-by-side fields stack on narrow screens ---- */
@media (max-width:600px){
  .form-row{ grid-template-columns:1fr; }
}

/* ---- toast shouldn't span edge-to-edge on very narrow phones ---- */
@media (max-width:400px){
  .toast{ right:12px; left:12px; bottom:12px; max-width:none; }
}

/* ---- news header wraps its refresh button under the title ---- */
@media (max-width:600px){
  .news-refresh{ flex-direction:column; align-items:flex-start; }
}