/* ==========================================================================
   Responsive rules — Mobile-first overrides for larger gaps handled inline;
   this file manages the breakpoints where the layout must change shape.
   Breakpoints: 1080px (tablet landscape), 860px (tablet), 640px (mobile)
   ========================================================================== */

/* -------------------- Tablet landscape (<=1080px) -------------------- */
@media (max-width: 1080px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid .footer-col:last-child { grid-column: 1 / -1; }
  .testimonial-track { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------- Tablet (<=860px) -------------------- */
@media (max-width: 860px) {
  :root { --header-height: 68px; }

  /* backdrop-filter on an ancestor makes it the containing block for
     position:fixed descendants in Chrome/WebKit — that broke the fixed
     full-screen mobile nav panel, so it's disabled below the nav breakpoint. */
  .site-header {
    backdrop-filter: none;
    background: var(--color-white);
  }

  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-md);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .nav-list a { display: block; width: 100%; padding: 12px 4px; }
  .nav-actions { flex-direction: column; align-items: stretch; margin-top: var(--space-md); }
  .hamburger { display: flex; }

  .nav-dropdown { width: 100%; }
  .dropdown-toggle { width: 100%; justify-content: space-between; padding: 12px 4px; }
  .dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: 0 !important;
    width: 100%;
    display: none;
    padding: 4px 0 4px 12px !important;
  }
  .nav-dropdown.is-open .dropdown-menu { display: block; }

  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; margin: 0 auto; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .testimonial-track { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid .footer-brand { grid-column: 1 / -1; }

  .newsletter { flex-direction: column; align-items: flex-start; }
  .newsletter-form { width: 100%; max-width: none; }
}

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

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

  .tracker-box form { flex-direction: column; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

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

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .toast-region { left: 16px; right: 16px; bottom: 16px; }
  .toast { max-width: none; }
  .back-to-top { left: 16px; bottom: 16px; width: 42px; height: 42px; }

  .page-hero { padding: var(--space-lg) 0; }

  .newsletter { padding: var(--space-md); }
  .newsletter-form { flex-direction: column; min-width: 0; width: 100%; }
  .newsletter-form input, .newsletter-form button { width: 100%; }
}

@media (max-width: 420px) {
  .stats-strip { grid-template-columns: 1fr; }
  .brand { font-size: 1.05rem; }
}