/* ============================================================
   Mobile-first breakpoints.
   Base styles (in other files) target phones.
   ============================================================ */

/* ---- Tablet: 768px+ ---- */
@media (min-width: 768px) {
  .page-body { max-width: 620px; }
  .service-grid { grid-template-columns: repeat(4, 1fr); }
  .network-grid { grid-template-columns: repeat(4, 1fr); }
  .card, .card-flat { padding: var(--space-5); }
  .auth-card { max-width: 440px; margin-inline: auto; }
}

/* ---- Desktop: 1024px+ ----
   Bottom nav → sidebar; single column → dashboard grid. */
@media (min-width: 1024px) {
  .bottom-nav { display: none; }
  .sidebar { display: block; }

  #page-content { margin-left: var(--sidebar-width); }
  .topbar { padding-inline: var(--space-6); }

  /* BUG FIX: this used to be `max-width: none` — every single-column page
     (every purchase/settings/list page in the app EXCEPT the dashboard,
     which is the only one that opts into the wider .page-body--dashboard
     rule below) inherited that with nothing to re-cap it, so on a real
     desktop screen a plain text input or card stretched edge-to-edge full
     viewport width (measured: 1392px wide on a 1440px screen). Cap
     single-column pages at a normal reading width instead; the dashboard's
     2-column split grid is the one page that actually needs to be wider. */
  .page-body {
    max-width: 720px;
    margin-inline: auto;
    padding: var(--space-6);
    padding-bottom: var(--space-8);
  }

  .page-body--dashboard {
    max-width: var(--content-max-width);
    margin-inline: auto;
  }

  .dash-grid--split {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }

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

  .card, .card-flat { padding: var(--space-6); }

  /* Auth/gate screens: center the card instead of full-bleed */
  .gate-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
  .gate-screen__panel { width: 100%; max-width: 400px; }

  /* Sticky bottom action bars (Buy/Subscribe/Send CTAs on data.js, cable.js,
     plan-purchase-page.js, cardpin.js, result-checker.js, airtime2cash.js)
     are built with `left:0; right:0; margin-inline:auto` so they center
     themselves in the viewport on mobile, where there's no sidebar. On
     desktop that's wrong on two counts: at some widths it visibly overlaps
     the sidebar, and even where it doesn't, it centers on the *whole*
     screen instead of the actual content area to the right of the sidebar.
     `!important` is required here to beat the inline `left: 0` these pages
     set via style.cssText. */
  .sticky-cta { left: var(--sidebar-width) !important; }
}

/* ---- Large desktop: 1440px+ ---- */
@media (min-width: 1440px) {
  .page-body--dashboard { max-width: 1320px; }
  .service-grid { grid-template-columns: repeat(8, 1fr); }
}

/* ---- Small phones: keep touch targets comfortable ---- */
@media (max-width: 359px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .keypad-key { width: 62px; height: 62px; }
  .page-body { padding: var(--space-3); padding-bottom: calc(var(--bottom-nav-height) + var(--space-5)); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}