/* ============================================================
   RESPONSIVE.CSS — Mobile-first breakpoint overrides
   Base styles in style.css are already fluid; this file
   handles structural shifts at each breakpoint.
   ============================================================ */

/* ----- Laptops / small desktops ----- */
@media (max-width: 1180px){
  .collections-grid{ grid-template-columns: repeat(2,1fr); }
  .collection-card:nth-child(1){ grid-row: span 1; height:480px; }
  .features-grid{ grid-template-columns: repeat(2,1fr); }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* ----- Tablets ----- */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  section{ padding: 90px 0; }
  .hero{ min-height: 92vh; }
  .hero-stats{ position:static; margin-top: 60px; }
  .story{ grid-template-columns: 1fr; gap: 50px; }
  .story-media{ order: -1; }
  .products-grid{ grid-template-columns: repeat(2,1fr); gap: 24px; }
  .contact-grid{ grid-template-columns: 1fr; gap: 50px; }
  .stats-grid{ grid-template-columns: repeat(2,1fr); row-gap: 34px; }
  .modal{ grid-template-columns: 1fr; max-height: 92vh; overflow-y:auto; }
  .modal-media{ height: 260px; }
  .timeline::before{ left: 8px; }
  .timeline-item{ grid-template-columns: 1fr; gap: 10px; }
  .timeline-year{ text-align:left; }
  .timeline-dot{ left: 4px; top: 4px; }
}

/* ----- Mobile ----- */
@media (max-width: 640px){
  .container{ padding: 0 18px; }
  section{ padding: 70px 0; }
  .section-head{ margin-bottom: 40px; }
  .logo-text{ font-size:1.15rem; }
  .hero-content{ max-width: 100%; }
  .hero-title{ font-size: clamp(2.2rem,9vw,3rem); }
  .hero-actions{ flex-direction:column; align-items: stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-stats{ flex-wrap:wrap; gap: 28px; justify-content: space-between; }
  .collections-grid{ grid-template-columns: 1fr; }
  .collection-card{ height: 360px !important; }
  .features-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .products-toolbar{ flex-direction:column; align-items: stretch; }
  .search-box{ max-width: 100%; }
  .filter-tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; }
  .filter-tabs button{ flex-shrink:0; }

  /* 3-dot only on mobile: hide search icon + Book Consultation button from navbar */
  .nav-actions .icon-btn,
  .nav-actions > .btn-outline{ display:none; }
  .nav-actions{ gap:14px; }

  .products-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: 1fr 1fr; gap:16px; }
  .values-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; gap: 0; }
  .footer-grid{ grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .whatsapp-float{ width:52px; height:52px; right:18px; bottom:18px; }
  .back-to-top{ right:18px; bottom: 84px; width:42px; height:42px; }
  .page-header{ padding: 150px 0 60px; }
  .modal-body{ padding: 34px 26px; }
}

/* ----- Small phones ----- */
@media (max-width: 380px){
  .hero-stats{ gap: 18px; }
  .hero-stat b{ font-size:1.5rem; }
  .team-grid{ grid-template-columns: 1fr; }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse){
  .btn, .icon-btn, .filter-tabs button, .nav-links a{ min-height: 44px; }
}