/* ============================================================
   ATC TURMERIC SPICE HUB — RESPONSIVE OVERRIDES
   Loaded after style.css so these rules take priority.
   ============================================================ */

@media (max-width: 1200px) {
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .counter-strip { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
  :root { --section-padding: 70px; }

  .hero-grid, .about-grid, .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero { padding-top: 140px; text-align: center; }
  .hero-cta, .hero-stats { justify-content: center; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero-visual { max-width: 420px; margin: 40px auto 0; }

  .nav-links, .nav-cta .btn-outline { display: none; }
  .nav-toggle { display: block; }

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

@media (max-width: 768px) {
  .brands-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .counter-strip { grid-template-columns: repeat(2, 1fr); padding: 40px 20px; }
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; text-align: center; padding: 40px 26px; }
  .page-header { padding: 140px 0 60px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
}

@media (max-width: 480px) {
  .container-xl { padding: 0 18px; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .whatsapp-float { width: 52px; height: 52px; font-size: 24px; bottom: 18px; right: 18px; }
  .back-to-top { width: 40px; height: 40px; bottom: 18px; left: 18px; }
  .counter-strip { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   MOBILE HEADER OVERFLOW FIX (For real phone screens)
   ============================================================ */
@media (max-width: 576px) {
  /* Reduce inner container side padding */
  .navbar-custom .container-xl {
    padding: 0 12px !important;
  }

  /* Shrink logo image and brand text */
  .brand-logo-img {
    width: 44px !important;
    height: 44px !important;
  }
  
  .brand-logo {
    gap: 8px !important;
    font-size: 13px !important;
  }

  /* Compact button & adjust gap in nav-cta */
  .nav-cta {
    gap: 8px !important;
  }

  .nav-cta .btn-whatsapp {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Keep toggle button crisp and in view */
  .nav-toggle {
    font-size: 22px !important;
    padding: 4px;
    flex-shrink: 0;
  }
}