/* ==========================================================================
   RESPONSIVE.CSS — Tablet & Mobile breakpoints
   Mobile-first overrides layered on top of style.css
   ========================================================================== */

/* ---------- Tablet (<=1024px) ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .hero-inner { grid-template-columns: 1fr; }
  .equation-card { max-width: 520px; margin-inline: auto; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-lg); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .sitemap-list { columns: 2; }

  /* Toggle (hamburger) menu becomes active from tablet size downward */
  .nav-menu { display: none; }
  .hamburger { display: flex; }

  .nav-menu.mobile-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--color-white);
    padding: var(--space-md);
    gap: var(--space-sm);
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid var(--color-line);
    z-index: 999;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav-menu.mobile-open a { width: 100%; padding-block: 10px; }
}

/* ---------- Small tablet / large mobile (<=860px) ---------- */
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }

  .timeline-track { flex-direction: column; gap: var(--space-lg); }
  .timeline-track::before { display: none; }

  .faq-columns { grid-template-columns: 1fr; }

  .newsletter { flex-direction: column; text-align: center; }
  .newsletter-form { max-width: 100%; }

  .sitemap-list { columns: 1; }
}

/* ---------- Mobile (<=600px) ---------- */
@media (max-width: 600px) {
  :root { --space-2xl: 3.5rem; --space-xl: 2.5rem; }

  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }

  .hero { padding-top: calc(var(--header-h) + 2.5rem); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .solver-box { flex-direction: column; border-radius: var(--radius-md); }
  .solver-box .btn { width: 100%; }

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

  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .contact-grid { gap: var(--space-lg); }

  .container { padding-inline: var(--space-sm); }

  .scroll-top-btn { right: 16px; bottom: 16px; }

  .page-hero { padding-top: calc(var(--header-h) + 2.5rem); }

  .nav-actions .btn-primary.btn-sm { display: none; }
}