/* ===================================================================
   RESPONSIVE OVERRIDES — mobile-first refinements
   Breakpoints: 1600 / 1440 / 1200 / 992 / 768 / 576 / 425 / 375 / 320

   NOTE: several grid containers in the HTML carry an inline
   `style="grid-template-columns:..."` for their desktop layout.
   Inline styles beat plain class rules, so every override below
   that targets one of those containers uses !important to win.
=================================================================== */

@media (max-width:1600px){
  .container-xl{ max-width:1180px; }
}

@media (max-width:1200px){
  .footer-grid{ grid-template-columns:1.3fr 1fr 1fr !important; row-gap:2.5rem; }
  .grid-4{ grid-template-columns:repeat(2,1fr) !important; }
  .stats-row{ grid-template-columns:repeat(2,1fr) !important; row-gap:2rem; }
}

@media (max-width:992px){
  .nav-links, .nav-cta .btn-sanara{ display:none; }
  .nav-toggle{ display:flex; }

  .split-2{ grid-template-columns:1fr !important; gap:2.5rem !important; }
  .hero-grid{ grid-template-columns:1fr !important; gap:2.5rem !important; }
  .grid-3{ grid-template-columns:repeat(2,1fr) !important; }
  .footer-grid{ grid-template-columns:1fr 1fr !important; }

  .section{ padding:4rem 0; }
  h1{ font-size:clamp(2.2rem,7vw,3.4rem); }

  /* hero visual moves below copy on split layouts */
  .hero-grid > div:last-child,
  .split-2 > div:last-child{ order:2; }
  .hero-grid > div:first-child,
  .split-2 > div:first-child{ order:1; }
}

@media (max-width:768px){
  .grid-3, .grid-4{ grid-template-columns:1fr !important; }
  .footer-grid{ grid-template-columns:1fr 1fr !important; }
  .stats-row{ grid-template-columns:repeat(2,1fr) !important; row-gap:2rem; }
  h1{ font-size:clamp(2rem,8vw,2.9rem); }
  h2{ font-size:clamp(1.6rem,6vw,2.2rem); }

  .row{ display:block !important; }
  .col-md-6{ width:100% !important; margin-bottom:0; }

  .filter-row{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; }
  .filter-btn{ flex:none; }

  /* CTA band + hero blocks get tighter horizontal padding */
  section .container-xl[style*="border-radius:var(--radius-lg)"]{ padding:clamp(30px,8vw,50px) 1.25rem !important; }
}

@media (max-width:576px){
  .footer-grid{ grid-template-columns:1fr !important; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }

  [data-hero-cta]{ flex-direction:column; align-items:stretch; }
  [data-hero-cta] .btn-sanara{ width:100%; justify-content:center; }

  .btn-sanara[style*="width:100%"]{ padding:.95rem 1.4rem; }

  .nav-cta .btn-sanara{ display:none; }
  .brand{ font-size:1rem; }
  .brand img{ width:28px; height:28px; }

  .work-card, .card-sanara[style*="aspect-ratio"]{ aspect-ratio:4/3.4 !important; }

  [data-slider] [style*="min-width:100%"]{ padding:4px !important; }
  .card-sanara[style*="padding:40px"]{ padding:24px !important; }
}

@media (max-width:425px){
  .container-xl{ padding-inline:1.1rem; }
  .stat-num{ font-size:1.7rem; }
  .eyebrow{ font-size:.66rem; }
  .card-sanara[style*="padding:30px"],
  .card-sanara[style*="padding:28px"]{ padding:1.35rem !important; }
  .stats-row{ grid-template-columns:1fr 1fr !important; gap:1.5rem !important; }

  .nav-cta{ gap:.5rem; }
  .theme-toggle, .nav-toggle{ width:38px; height:38px; }
  .brand{ font-size:.98rem; }
  .brand img{ width:26px; height:26px; }
}

@media (max-width:375px){
  .marquee-track .chip{ font-size:.72rem; padding:.4rem .85rem; }
}

@media (max-width:320px){
  h1{ font-size:1.85rem; }
  .btn-sanara{ padding:.8rem 1.3rem; font-size:.88rem; }
  .footer-grid{ gap:1.75rem; }
}

@media (orientation:landscape) and (max-height:500px){
  .section{ padding:3.25rem 0; }
  section[style*="padding-top:clamp(140px"]{ padding-top:6.5rem !important; }
}

/* ---------------------------------------------------------------
   Touch-friendly tap targets & dropdown behavior on small screens
---------------------------------------------------------------- */
@media (max-width:992px){
  .has-drop .nav-drop{ display:none; }
  a, button{ -webkit-tap-highlight-color:transparent; }
  .mobile-menu a{ min-height:44px; display:flex; align-items:center; }
}