/* EximHub - mobile refinements.  Loaded AFTER index.css.
   Every rule is @media(max-width) scoped -> the desktop layout is not affected.
   Nav bar is intentionally left alone. */

/* ============================================================================
   v3 - GUARANTEE a real single-column phone layout.
   Symptom this fixes: on some phones / in-app browsers the page renders the
   DESKTOP layout (multi-column, zoomed out).  Root cause: the layout viewport
   is reported wide (~980px), so the design's own 900/920px breakpoints never
   fire.  This block uses a 1024px ceiling so it fires anyway, and only does
   things that are invisible on a normal full-width desktop window: collapse
   multi-column grids to one column, stop sideways scroll, and hide decorative
   background art that bleeds past the right edge.
   A full-width desktop (>=1025px) is completely unaffected.  Nav bar untouched.
   ============================================================================ */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  #root { max-width: 100%; overflow-x: hidden; }

  /* grid / flex tracks must be allowed to shrink below their content width */
  .hero, .hero-v2, .features-grid, .features-grid-5col, .pricing-grid,
  .testimonials-grid, .offerings-grid, .offerings-grid-5, .about-what-grid,
  .contact-grid, .hero-stats, .site-footer-grid, .agent-flow,
  .free-offer-inner, .dashboard-grid, .profile-stats,
  .lead-intelligence-layout {
    grid-template-columns: 1fr !important;
    min-width: 0;
  }
  .hiw-grid { flex-direction: column !important; }
  .hiw-step { width: 100% !important; }
  .platform-stats-inner { flex-wrap: wrap; }
  .hero-visual { display: none !important; }

  /* decorative bleed art (position:fixed / absolute, negative offsets) */
  .orbital-field, .quick-search-glow, .summary-card-beam,
  .hero-panel.secondary, .hero-panel.tertiary { display: none !important; }

  /* wide data tables scroll inside their own box, not the page */
  .mi-table-scroll, .lead-table-container {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .mi-table-scroll .lead-data-table { min-width: 560px; }
  .enrichment-drawer { width: 100% !important; }
}

@media (max-width: 820px) {

  /* no sideways scroll; media stays inside the viewport */
  html, body { overflow-x: hidden; }
  img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

  /* long emails / URLs / codes wrap instead of forcing the page wide */
  .contact-side-card, .office-card, .office-list, .contact-mini-card,
  .contact-proof-card, .hero-contact-bar a, .page-hero-links a,
  .auth-support-row a, .auth-legal-row a, .policy-card,
  .agent-log, .log-time, .bps-cell, td, th {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* iOS Safari: stop the page zooming when a field gets focus */
  input, select, textarea { font-size: 16px !important; }

  /* thumb-friendly tap targets (>=44px) */
  button, .btn-primary, .btn-secondary, .btn-primary-lg,
  a.btn-primary, a.btn-secondary, .login-button, .contact-submit,
  .smodal-submit, .preview-unlock-btn, .btn-search-primary,
  .hero-search-btn, input[type="submit"], input[type="button"],
  [role="button"] {
    min-height: 44px;
  }
  .site-footer a, .footer-actions a, .page-hero-links a,
  .auth-support-row a, .auth-legal-row a, .hero-contact-bar a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  a, button, [role="button"] { -webkit-tap-highlight-color: rgba(14, 165, 163, 0.18); }

  /* forms fill the width; stacked flex items get real spacing */
  .input-group, .fof-field, .smodal-field { width: 100%; }
  .hero-actions, .footer-actions, .page-hero-links, .hero-contact-bar,
  .auth-support-row, .footer-bottom-row { gap: 0.6rem; }

  /* readability */
  body { -webkit-text-size-adjust: 100%; }
  p, li { line-height: 1.62; }
  .hero h1 { line-height: 1.12; }

  /* decorative orbital art can bleed sideways on tablets (index.css only hides it <640) */
  .orbital-field { display: none !important; }

  /* keep the floating WhatsApp button above the home indicator on notched phones */
  .whatsapp-float { bottom: max(1rem, env(safe-area-inset-bottom, 1rem)); }
}

@media (max-width: 390px) {
  .hero h1 { font-size: clamp(1.85rem, 11vw, 2.35rem); }
  .section-header h2, .page-hero h1, .cta-footer h2,
  .contact-conversion-copy h2 { font-size: 1.7rem; line-height: 1.15; }
  .stat-num, .pstat-num, .about-stat-num { font-size: 1.35rem; }
  .hero-badge, .support-pill { font-size: 0.68rem; }
}

/* --- sticky mobile CTA bar (phone only) --- */
@media (max-width: 760px) {
  .m-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: #0ea5a3;
    box-shadow: 0 -8px 30px rgba(3, 10, 18, .35);
    transform: translateY(115%);
    transition: transform .28s ease;
  }
  .m-cta-bar.show { transform: translateY(0); }
  .m-cta-bar .m-cta-link {
    flex: 1; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: #041014; color: #7cf7d6;
    font-weight: 800; font-size: .97rem;
    padding: .78rem 1rem; border-radius: 12px; text-decoration: none;
  }
  .m-cta-bar .m-cta-x {
    flex-shrink: 0; width: 40px; height: 40px;
    border: 0; border-radius: 10px; cursor: pointer;
    background: rgba(0, 0, 0, .18); color: #041014;
    font-size: 1.15rem; line-height: 1;
  }
  body.has-mcta { padding-bottom: 74px; }
  body.has-mcta .whatsapp-float {
    bottom: calc(74px + max(1rem, env(safe-area-inset-bottom, 1rem)));
  }
}