/* Mobile responsive overrides for BEST∞ website.
   Inline-styled React components are flattened with !important rules
   targeting common structural patterns (grid columns, large padding, font sizes).
   Breakpoints: ≤960 tablet, ≤640 mobile.
*/

/* ─────────────────────────── TABLET ≤960 ─────────────────────────── */
@media (max-width: 960px) {
  /* Hide desktop nav links + show hamburger */
  nav > ul { display: none !important; }
  nav { padding: 0 1.5rem !important; height: 68px !important; }
  nav > a:first-child { font-size: 1.15rem !important; }
  nav > a:first-child span { font-size: 1.45rem !important; }
  nav > div:last-child { gap: 0.6rem !important; }
  nav > div:last-child > a { display: none !important; } /* hide CTA in nav */

  /* Wrap padding everywhere */
  section { padding-left: 0 !important; padding-right: 0 !important; }
  section > div { padding-left: 2rem !important; padding-right: 2rem !important; }

  /* Two-col grids → one */
  section [style*="grid-template-columns: 1fr 1fr"],
  section [style*="grid-template-columns:1fr 1fr"],
  section [style*="gridTemplateColumns: '1fr 1fr'"] {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  /* Three-col → two */
  section [style*="grid-template-columns: repeat(3"],
  section [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 1rem !important;
  }
  /* Service / careers row grids → stacked */
  section [style*="grid-template-columns: 0.8fr"],
  section [style*="grid-template-columns: 0.7fr"] {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
    padding: 1.8rem 0 !important;
  }
  /* Footer cols → 2 then 1 */
  footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  footer [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
  }

  /* Hero */
  section#hero { min-height: 600px !important; height: 92vh !important; }
  section#hero h1 { font-size: clamp(2.4rem,9vw,3.5rem) !important; }
  section#hero p { font-size: 0.95rem !important; max-width: 100% !important; }

  /* Headings */
  section h2 { font-size: clamp(2rem,6vw,2.8rem) !important; }
}

/* ─────────────────────────── MOBILE ≤640 ─────────────────────────── */
@media (max-width: 640px) {
  nav { padding: 0 1rem !important; height: 60px !important; }
  nav > a:first-child { font-size: 1rem !important; letter-spacing: 0.14em !important; }
  nav > a:first-child span { font-size: 1.25rem !important; }

  section > div { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  section { padding-top: 4rem !important; padding-bottom: 4rem !important; }

  /* Stacked benefits/contact card padding */
  section [style*="padding: '5rem'"],
  section [style*="padding:'5rem'"] { padding: 2rem !important; }
  section [style*="padding: '5rem"][style*="3rem'"] { padding: 2rem !important; }

  /* Inner dark-card grids stacked */
  section [style*="grid-template-columns: 1.3fr 1fr"],
  section [style*="grid-template-columns: 1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  section [style*="border-left: 1px solid"][style*="padding-left: 3rem"] {
    border-left: none !important;
    padding-left: 0 !important;
    padding-top: 2rem !important;
    border-top: 1px solid rgba(251,250,245,0.15) !important;
  }

  /* Gallery 3-col → 1 */
  section#gallery [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Three-col → 1 on small */
  section [style*="grid-template-columns: repeat(3"],
  section [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero */
  section#hero h1 { font-size: clamp(2.2rem,10vw,2.8rem) !important; }

  /* Headings shrink */
  section h2 { font-size: clamp(1.7rem,7vw,2.2rem) !important; }
  section p { font-size: 0.98rem !important; }

  /* Chat widget tighter */
  .chatw-button { right: 1rem !important; bottom: 1rem !important; }
  .chatw-panel { right: 1rem !important; bottom: 5rem !important; left: 1rem !important; width: auto !important; }

  /* Language dropdown narrower */
  nav [style*="position: relative"] button { padding: 0.4rem 0.5rem !important; }
  nav [style*="min-width: 200px"] { min-width: 160px !important; }

  /* Footer 2 cols → 1 */
  footer [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Universal: no horizontal scroll */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }