/* =============================================================
   BC HOME SERVICE — Homepage responsive + overflow fixes
   The homepage loads its CSS inline (from the React bundle) and
   does NOT load css/main.css. This file provides the mobile
   responsiveness + overflow guards the homepage needs.
   Loaded via <link> in index.html.
   ============================================================= */

/* ---- Global overflow guard ---- */
html, body { max-width: 100%; overflow-x: hidden; }
html { overflow-x: clip; }
body { overflow-x: clip !important; }
* { max-width: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }

/* Hide badge tooltips on mobile (they overflow + tap targets conflict) */
@media (max-width: 768px) {
  .badge-tooltip { display: none !important; }
  .hero-slider, .hs-slide, [class*="hs-slide"] { overflow: hidden !important; max-width: 100vw !important; }
  /* hero section hard clamp */
  section.hero, [class*="hero-section"], [class*="hero-wrap"] { overflow: hidden !important; max-width: 100vw !important; }
}

/* Hide the live activity ticker marquee on mobile (overflows) */
@media (max-width: 900px) {
  .ticker-desktop { display: none !important; }
  [style*="tickerScroll"] { display: none !important; }
}

/* Hide the topbar phone + emergency pill on mobile — they overflow and duplicate the nav CTA */
@media (max-width: 768px) {
  /* the topbar's right-side flex block (phone + emergency) — matches by inline style */
  [style*="gap: 16px"][style*="flex-shrink: 0"] { display: none !important; }
  [style*="gap:16px"][style*="flex-shrink:0"] { display: none !important; }
  /* also hide topbar left-full (the hours text) to keep topbar compact */
  .topbar-left-full { display: none !important; }
}

/* ---- Seasonal Deals mobile ---- */
@media (max-width: 768px) {
  .offers-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .offer-card, .deal-card, .offers-grid > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
}

/* ---- Service cards mobile ---- */
@media (max-width: 640px) {
  .services-grid, .svc-grid, .stats-grid, .feature-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
}

/* ---- Topbar + nav mobile ---- */
@media (max-width: 768px) {
  .topbar { font-size: 0.72rem; height: auto; min-height: 36px; padding: 6px 0; }
  .topbar .container { flex-wrap: wrap; gap: 6px; }
  .topbar-left, .topbar-right { gap: 10px; flex-wrap: wrap; }
  .topbar .topbar-divider { display: none; }
  .nav { min-height: 60px; }
  .nav-logo .brand-name { font-size: 1rem; }
  .nav-logo .brand-sub { font-size: 0.62rem; }
}

/* ---- Hero mobile ---- */
@media (max-width: 768px) {
  .hero-grid, .hero-orbit-wrap { gap: 16px !important; }
  .hero-orbit { display: none !important; }
  .hero-contact-form { width: 100% !important; }
}

/* ---- CTA banner mobile ---- */
@media (max-width: 640px) {
  .cta-banner { padding: 28px 20px !important; text-align: center; }
  .cta-banner h2 { font-size: 1.4rem !important; }
  .cta-actions { flex-direction: column; gap: 10px; }
  .cta-actions .btn { width: 100%; justify-content: center; }
}

/* ---- Before/After mobile ---- */
@media (max-width: 640px) {
  .ba-gallery { grid-template-columns: 1fr !important; gap: 18px !important; }
  .ba-comparison { aspect-ratio: 4 / 3 !important; }
  .ba-comparison .ba-handle::after { width: 40px; height: 40px; }
  .ba-info { padding: 16px 18px !important; }
  .ba-info h3 { font-size: 1.05rem !important; }
  .ba-info .ba-meta { gap: 8px !important; font-size: 0.72rem !important; flex-wrap: wrap; }
}

/* ---- Footer mobile ---- */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .fb-links { flex-wrap: wrap; justify-content: center; gap: 12px; }
}

/* ---- Pricing tables mobile ---- */
@media (max-width: 640px) {
  .cost-table, table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
}

/* ---- Sticky CTA bar touch targets ---- */
@media (max-width: 640px) {
  .sticky-cta-bar { padding: 8px 12px; }
  .sticky-cta-bar .cta-call, .sticky-cta-bar .cta-quote { min-height: 44px; font-size: 0.85rem; }
}

/* ---- Floating buttons mobile ---- */
@media (max-width: 640px) {
  .ai-chat-float, .whatsapp-float { width: 52px; height: 52px; bottom: 16px; }
  .ai-chat-float { right: 16px; }
  .whatsapp-float { left: 16px; }
  .ai-chat-window { width: calc(100vw - 24px) !important; right: 12px !important; left: 12px !important; bottom: 76px !important; max-height: 70vh !important; }
}

/* ---- Section spacing mobile ---- */
@media (max-width: 640px) {
  .section { padding: 48px 0 !important; }
  .section-header { margin-bottom: 32px !important; }
  .container { padding: 0 16px !important; }
  .section-title { font-size: 1.6rem !important; }
  .section-subtitle { font-size: 0.92rem !important; margin-bottom: 28px !important; }
}