/* =========================================================
   TEN A AND B FOODS COMPANY LTD — Responsive Rules
   ========================================================= */

/* ---------- Large tablets / small desktops ---------- */
@media (max-width: 1100px){
  .why-grid{ grid-template-columns: repeat(2,1fr); }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .values-grid{ grid-template-columns: repeat(3,1fr); }
  .masonry{ column-count:2; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- Tablets ---------- */
@media (max-width: 900px){
  .nav-links{
    position: fixed; top:0; right:0; height:100vh; width:min(320px,80vw);
    background: var(--white); flex-direction:column; align-items:flex-start; justify-content:center;
    padding: var(--sp-6); gap: var(--sp-4); transform: translateX(100%); transition: transform .4s var(--ease);
    box-shadow: -10px 0 40px rgba(0,0,0,0.12); z-index:1100;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ color: var(--gray-dark) !important; font-size:1.1rem; }
  .nav-toggle{ display:block; }
  .nav-cta .btn-primary{ display:none; }
  .nav-links .btn-primary{ display:inline-flex; margin-top: var(--sp-3); }

  .intro-grid{ grid-template-columns:1fr; }
  .intro-media{ order:-1; margin-bottom: var(--sp-4); }
  .intro-media .badge-card{ right:12px; bottom:-20px; }

  .mv-grid{ grid-template-columns:1fr; }
  .story-block, .story-block.reverse{ grid-template-columns:1fr; }
  .story-block.reverse .story-media{ order:0; }
  .story-media img{ height:280px; }

  .timeline{ grid-template-columns: repeat(3,1fr); row-gap: var(--sp-6); }
  .timeline::before{ display:none; }

  .contact-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap: var(--sp-5); }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px){
  section{ padding: var(--sp-6) 0; }
  .why-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; gap: var(--sp-5); }
  .masonry{ column-count:1; }
  .form-row{ grid-template-columns:1fr; }
  .testi-card{ flex: 0 0 100%; }
  .timeline{ grid-template-columns: repeat(2,1fr); }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .hero-content{ padding-top:120px; }
  .hero-actions .btn{ width:100%; }
  .hero-actions{ flex-direction:column; }
  .cta-actions{ flex-direction:column; width:100%; }
  .cta-actions .btn{ width:100%; }
  .cta-band{ padding: var(--sp-6) var(--sp-4); }
  .whatsapp-float{ width:50px; height:50px; bottom:16px; left:16px; }
  .back-to-top{ width:44px; height:44px; bottom:16px; right:16px; }
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap: var(--sp-5); }
  .page-hero{ padding: 140px 0 var(--sp-6); }
}