/* =========================================================
   CENO AGRO PHARM — Responsive rules (mobile-first overrides)
   Base styles in style.css already flex/wrap reasonably;
   this file handles the nav drawer, grid collapses, and
   spacing adjustments per breakpoint.
   ========================================================= */

/* ---------- Tablet & below (<= 991px) ---------- */
@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-hero-grid { grid-template-columns: 1fr; }
  .hero__content { max-width: 100%; }
  .section { padding: 56px 0; }

  .brand img { height: 38px; width: 38px; }
  .brand { font-size: 1.02rem; gap: 8px; }
  .brand small { font-size: .58rem; }
}

/* ---------- Mobile nav (<= 860px) ---------- */
@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    transition: max-height .3s ease;
  }
  .nav-links.is-open { max-height: 420px; }
  .nav-links a {
    width: 100%;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
  }
  .nav-links a::after { display: none; }

  .nav-cta { gap: 10px; }
  .nav-cta .btn-primary { padding: 9px 14px; font-size: .82rem; }
  .nav-cta span.nav-cta-label { display: none; }
}

/* ---------- Small phones (<= 480px) ---------- */
@media (max-width: 480px) {
  :root { --nav-height: 64px; }
  .brand img { height: 32px; width: 32px; }
  .brand { font-size: .88rem; gap: 6px; }
  .brand small { font-size: .52rem; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn-primary { padding: 7px 11px; font-size: .76rem; }
  .nav-cta .btn-primary svg,
  .nav-toggle { flex-shrink: 0; }
  .nav-toggle { width: 34px; height: 34px; }
}

/* ---------- Small tablet / large phone (<= 768px) ---------- */
@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; text-align: center; padding: 40px 26px; }
  .cta-band__actions { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .trust-strip .container { justify-content: center; text-align: center; }
  .hero__content { padding: 56px 0 44px; }
  .hero__content h1 { font-size: 2.1rem !important; }
  .hero__content p { font-size: 1rem; }
  .hero__stats { justify-content: center; text-align: center; padding-bottom: 40px; }
  .hero__stats div strong { font-size: 1.4rem; }
}

/* ---------- Phones (<= 560px) ---------- */
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .section { padding: 44px 0; }
  h1 { font-size: 1.8rem !important; }

  /* Hero — shrink all text for mobile, drop the location tag, and
     keep the banner compact (shorter image height) on phones/Android */
  .hero__content { padding: 32px 0 24px; }
  .hero__eyebrow { display: none; }
  .hero__content h1 { font-size: 1.45rem !important; line-height: 1.22; }
  .hero__content p { font-size: .86rem; line-height: 1.5; max-width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; margin-top: 14px; gap: 10px; }
  .hero__actions .btn { width: 100%; font-size: .84rem; padding: 11px 16px; }
  .hero__stats { gap: 16px; padding-bottom: 20px; }
  .hero__stats div strong { font-size: 1.05rem; }
  .hero__stats div span { font-size: .62rem; }

  .grid-products,
  .grid-blog { grid-template-columns: 1fr 1fr; gap: 14px; }
  .product-card__body,
  .blog-card__body { padding: 14px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-business { grid-template-columns: 1fr 1fr; gap: 14px; }
  .grid-locations { grid-template-columns: 1fr 1fr; }
  .business-card__body { padding: 14px; }
  .info-box { flex-direction: column; align-items: flex-start; text-align: left; }
  .filter-bar { gap: 8px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .whatsapp-float { width: 50px; height: 50px; bottom: 16px; right: 16px; }
  .cta-band h2 { font-size: 1.4rem; }
  .page-header { padding: 44px 0 32px; }
}

/* ---------- Very small phones (<= 380px) ---------- */
@media (max-width: 380px) {
  .grid-products,
  .grid-blog { grid-template-columns: 1fr; }
  .grid-business,
  .grid-locations { grid-template-columns: 1fr; }
  .brand small { display: none; }

  .hero__content { padding: 26px 0 20px; }
  .hero__content h1 { font-size: 1.3rem !important; line-height: 1.2; }
  .hero__content p { font-size: .82rem; }
  .hero__stats { gap: 12px; padding-bottom: 16px; }
  .hero__stats div strong { font-size: .95rem; }
  .hero__stats div span { font-size: .58rem; }
}