/*
 * TrackBack Media — Global Responsive Fixes
 * Injected via header.php into every page
 * Covers mobile (320–767px), tablet (768–1024px), desktop (1025px+)
 */

/* ── UNIVERSAL RESETS ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe, svg { max-width: 100%; height: auto; }
table { max-width: 100%; word-break: break-word; }

/* Prevent any element from causing horizontal scroll */
[class*="wrap"],
[class*="container"],
[class*="section"],
[class*="inner"],
section, footer, nav {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── TYPOGRAPHY SCALING ──────────────────── */
/* clamp fallbacks for older browsers */
h1 { font-size: clamp(28px, 6vw, 80px); }
h2 { font-size: clamp(24px, 4vw, 56px); }
h3 { font-size: clamp(18px, 2.5vw, 32px); }

/* ── NAV FIXES ────────────────────────────── */
#mainNav {
  padding: 0 max(16px, env(safe-area-inset-left)) !important;
  padding-right: max(16px, env(safe-area-inset-right)) !important;
}
@media (max-width: 1050px) {
  #mainNav { padding: 0 16px !important; }
}
/* Safe area for notch phones */
#tbm-mobile-menu {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* ── HERO SECTIONS ────────────────────────── */
@media (max-width: 768px) {
  /* All hero sections */
  #hero, section[id*="hero"], .hero-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 56px !important;
    min-height: auto !important;
  }
  /* Index hero specific */
  .hero-content { max-width: 100% !important; }
  .hero-statrow { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .hsr-item { border-right: none !important; padding-right: 0 !important; }
  .hsr-num { font-size: 24px !important; }
  /* Float tags & decorative elements */
  .float-tags, .orbit-ring, .hero-shape,
  .hero-float-cards, .hero-deco-num,
  .hero-right-visual { display: none !important; }
  /* Performance hero */
  .hero-cta-row, .hero-ctas { flex-direction: column; gap: 12px !important; }
  .hcta-main, .hcta-ghost,
  .hcta-amber, .hcta-outline,
  .cta-pill { width: 100% !important; text-align: center !important; }
  .hero-stats { flex-wrap: wrap !important; gap: 16px !important; }
  .hstat { flex: 0 0 calc(50% - 8px) !important; border-right: none !important; padding-right: 0 !important; }
  .hstat-n { font-size: 28px !important; }
}

/* ── GRID LAYOUTS ─────────────────────────── */
@media (max-width: 768px) {
  /* Two-column grids → single column */
  .split-layout,
  .deliver-layout, .process-layout, .funnel-layout,
  .why-layout, .tech-layout, .stat-row,
  .why-inner, .cta-inner,
  [class*="-grid"]:not(.hero-stats):not(.network-stats),
  [class*="two-col"],
  [class*="grid-2"],
  .form-row, .form-row-3 {
    grid-template-columns: 1fr !important;
  }

  /* Footer grid */
  .tbm-ft-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }

  /* Service cards */
  .services-grid,
  .svc-grid,
  .vert-grid,
  .results-grid,
  .testi-grid,
  .proof-grid { grid-template-columns: 1fr !important; }

  /* Bento grids */
  .bento { grid-template-columns: 1fr !important; }
  [class*="bc-s"] { grid-column: span 1 !important; }
}

@media (max-width: 480px) {
  .tbm-ft-grid { grid-template-columns: 1fr !important; }
  .network-stats { grid-template-columns: 1fr 1fr !important; }
  .hero-statrow { grid-template-columns: 1fr 1fr !important; }
}

/* ── SECTION PADDING ──────────────────────── */
@media (max-width: 768px) {
  section, .section-wrap,
  #deliver, #services, #process, #funnel-section,
  #network, #why-us, #tech, #verticals, #results,
  #testimonials, #faq, #cta-banner, #cta,
  #intro, #proof, #platforms,
  .tbm-brands-section, .tbm-cta-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .tbm-cta-section { padding-top: 56px !important; padding-bottom: 56px !important; }
}
@media (max-width: 480px) {
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* ── CARDS & COMPONENTS ───────────────────── */
@media (max-width: 768px) {
  /* Process/timeline cards */
  .process-step, .timeline-item, .proc-step { width: 100% !important; min-width: 0 !important; }
  /* Service scroll track */
  #services .services-track { padding-left: 20px !important; }
  /* Split column */
  .split-col { padding: 32px 24px !important; }
  /* CTA buttons */
  .tbm-cta-btns { flex-direction: column !important; align-items: stretch !important; }
  .tbm-cta-btn1, .tbm-cta-btn2 { text-align: center !important; }
  /* Network stats */
  .network-stats { grid-template-columns: 1fr 1fr !important; }
  /* FAQ */
  .faq-inner, .faq-cols { grid-template-columns: 1fr !important; }
  .faq-sidebar { position: static !important; }
  /* Testimonial */
  .testi-card, .tc { padding: 24px !important; }
  /* Dashboard */
  .db-body { grid-template-columns: 1fr 1fr !important; }
}

/* ── FORMS ────────────────────────────────── */
@media (max-width: 640px) {
  .form-card { padding: 24px 16px !important; }
  .intent-tabs { gap: 4px !important; }
  .itab { font-size: 11px !important; padding: 6px 10px !important; }
  .fi { font-size: 16px !important; } /* prevent iOS zoom on focus */
  select.fi { font-size: 16px !important; }
}

/* iOS input zoom prevention - font-size must be ≥16px */
@media (max-width: 480px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── OFFICE PILLS ─────────────────────────── */
@media (max-width: 480px) {
  .c-office-pills { gap: 6px !important; }
  .cop { padding: 7px 10px !important; font-size: 11px !important; }
}

/* ── FOOTER ───────────────────────────────── */
@media (max-width: 768px) {
  .tbm-footer { padding: 40px 20px 24px !important; }
  .tbm-ft-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; }
  .tbm-ft-links { flex-wrap: wrap !important; justify-content: center !important; }
}

/* ── MOBILE MENU Z-INDEX FIX ──────────────── */
#tbm-mobile-menu { z-index: 8999 !important; }
#mainNav { z-index: 9000 !important; }

/* ── ABOUT PAGE ───────────────────────────── */
@media (max-width: 768px) {
  .about-hero, .team-grid, .values-grid,
  .timeline-grid, .awards-grid { 
    grid-template-columns: 1fr !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── PERFORMANCE PAGE SPECIFIC ────────────── */
@media (max-width: 768px) {
  .ecosystem-visual { display: none !important; }
  .funnel-visual { display: none !important; }
  .tech-visual { height: 200px !important; overflow: hidden !important; }
  .network-map { padding: 0 !important; }
  .network-pin { display: none !important; } /* hide map pins on mobile */
}

/* ── SEO / SOCIAL / OTHER SERVICE PAGES ───── */
@media (max-width: 768px) {
  .bento-grid, .bento { grid-template-columns: 1fr 1fr !important; }
  .serp-vis, .hero-visual, .right-vis { 
    max-width: 100% !important;
    margin-top: 32px !important;
  }
  .intro-right { grid-template-columns: 1fr 1fr !important; }
  .intro-left { 
    border-right: none !important; 
    border-bottom: 1px solid #EBEBF0 !important;
    padding-bottom: 40px !important;
  }
  .timeline-track { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 16px !important; }
}
@media (max-width: 480px) {
  .bento-grid, .bento { grid-template-columns: 1fr !important; }
}

/* ── PREVENT TEXT OVERFLOW ────────────────── */
@media (max-width: 768px) {
  p, li, td, th, span, div {
    word-break: break-word;
    overflow-wrap: break-word;
  }
  /* Letter spacing tightening for headings on small screens */
  h1 { letter-spacing: -0.5px !important; }
  h2 { letter-spacing: -0.3px !important; }
}

/* ── SMOOTH TOUCH SCROLLING ───────────────── */
* { -webkit-overflow-scrolling: touch; }
.tbm-brands-scroll,
.services-scroll,
.timeline-track,
.results-scroll { 
  -webkit-overflow-scrolling: touch !important; 
  scrollbar-width: none !important;
}
.tbm-brands-scroll::-webkit-scrollbar,
.services-scroll::-webkit-scrollbar { display: none !important; }

/* ── PRINT / ACCESSIBILITY ────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── TABLET-SPECIFIC (768–1024px) ─────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  #mainNav { padding: 0 24px !important; }
  .contact-wrap { gap: 40px !important; padding: 52px 32px 72px !important; }
  .split-layout { grid-template-columns: 1fr 1fr !important; }
  .tbm-ft-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  section { padding-left: 32px !important; padding-right: 32px !important; }
}

/* ── LARGE DESKTOP (1440px+) ──────────────── */
@media (min-width: 1440px) {
  .contact-wrap, .hero-content-wrap {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}