/* =====================================================
   ELVANTA — Responsive Rules
   Mobile-first overrides. Breakpoints checked at:
   360 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440+
   ===================================================== */

/* ---------- Small phones (default / <=430px covered by base styles) ---------- */
.hero__grid { grid-template-columns: 1fr; }
.footer-cols { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr; }
.stat-bar__grid { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: 1fr; }
.earn-grid { grid-template-columns: 1fr; }
.testimonial-grid { grid-template-columns: 1fr; }
.referral { grid-template-columns: 1fr; text-align: center; }
.referral__content p { margin-left: auto; margin-right: auto; }
.spin { grid-template-columns: 1fr; text-align: center; }
.merchant { grid-template-columns: 1fr; text-align: center; }
.merchant__actions { justify-content: center; }
.auth-page { grid-template-columns: 1fr; }
.auth-panel { display: none; }
.ledger__row { flex-wrap: wrap; }
.ledger__amount { margin-left: auto; }

/* ---------- >= 480px : tighten up hero copy width ---------- */
@media (min-width: 480px) {
  .hero__actions .btn { flex: 0 0 auto; }
}

/* ---------- >= 640px : two-col earn / testimonial grids ---------- */
@media (min-width: 640px) {
  .earn-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- >= 768px : tablet ---------- */
@media (min-width: 768px) {
  .stat-bar__grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .referral { grid-template-columns: 1.2fr 0.8fr; text-align: left; }
  .referral__content p { margin-left: 0; margin-right: 0; }
  .spin { grid-template-columns: 0.7fr 1.3fr; text-align: left; }
  .merchant { grid-template-columns: 1.1fr 0.9fr; text-align: left; }
  .merchant__actions { justify-content: flex-start; }

  .auth-form-side { padding: var(--space-7) var(--space-6); }
}

/* ---------- >= 900px : show desktop header nav, auth split ---------- */
@media (min-width: 900px) {
  .main-nav { display: block; }
  .hamburger, .mobile-drawer { display: none; }

  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
  .footer-top { grid-template-columns: 1.3fr 2fr; }

  .auth-page { grid-template-columns: 1fr 1fr; min-height: 100vh; }
  .auth-panel { display: flex; }
}

/* ---------- >= 1024px : desktop refinements ---------- */
@media (min-width: 1024px) {
  .earn-grid { grid-template-columns: repeat(3, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
  :root { --header-h: 84px; }
}

/* ---------- >= 1280px : max container breathing room ---------- */
@media (min-width: 1280px) {
  .container { padding: 0 var(--space-5); }
}

/* ---------- Guard against horizontal scroll on very narrow phones ---------- */
@media (max-width: 359px) {
  .hero h1 { font-size: 2.2rem; }
  .btn { padding: 0.8rem 1.2rem; font-size: 0.88rem; }
  .container { padding: 0 var(--space-3); }
}