/* ================================================================
   TRANSCENDENT VENTURES — Responsive System
   Covers: 320px → 480px → 640px → 768px → 1024px → 1280px → 1920px+
   Fixes: overflow, nav logo, blank sections, orbs, grids, typography
   ================================================================ */

/* ── DARK THEME LOCK — forces dark on every page, no exceptions ── */
html {
  background: #06060F !important;
}
body {
  background: #06060F !important;
  color: #FFFFFF !important;
}
/* Every section and main area must be dark */
section, main, article, aside, header, footer, div {
  color: inherit;
}
/* Prevent any inline white-background overrides */
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color: white"],
[style*="background-color:#fff"] {
  background: var(--glass) !important;
}

/* ── Global overflow clamp (prevents doughnut/horizontal scroll) */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* ── data-reveal fallback: show everything after 1.8s if JS fails */
[data-reveal] {
  animation: tv-reveal-fallback 0.01s 1.8s both;
}
@keyframes tv-reveal-fallback {
  to { opacity: 1 !important; transform: none !important; }
}
[data-reveal].revealed {
  animation: none;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Contain ALL absolutely-positioned orbs ─────────────────── */
.tv-hero-orb, [class*="orb"], .tv-orb-primary, .tv-orb-sky, .tv-orb-violet {
  max-width: 100vw !important;
}

/* ── NAV LOGO — prevent text overflow ───────────────────────── */
.nav-logo {
  font-size: clamp(0.85rem, 3.5vw, 1.25rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100vw - 160px);
}

/* ── TV Container ────────────────────────────────────────────── */
.tv-container {
  padding-left:  clamp(1rem, 4vw, 4rem);
  padding-right: clamp(1rem, 4vw, 4rem);
}

/* ── Sections ────────────────────────────────────────────────── */
.tv-section {
  padding-top:    clamp(3.5rem, 8vw, 9rem);
  padding-bottom: clamp(3.5rem, 8vw, 9rem);
}

/* ── Typography fluid scaling ────────────────────────────────── */
.tv-h1 { font-size: clamp(2.2rem, 7vw, 7.5rem); }
.tv-h2 { font-size: clamp(1.8rem, 5vw, 4.5rem); }
.tv-h3 { font-size: clamp(1.2rem, 3vw, 2.2rem); }
.tv-bleed-text { font-size: clamp(3rem, 10vw, 14rem); }

/* ── Hero orbs — cap on all screens ─────────────────────────── */
.tv-hero-orb-1 { width: min(600px, 80vw); height: min(600px, 80vw); }
.tv-hero-orb-2 { width: min(500px, 70vw); height: min(500px, 70vw); }
.tv-hero-orb-3 { width: min(350px, 60vw); height: min(350px, 60vw); }

/* ── Grids — force single column with overflow guard ─────────── */
.tv-grid-2, .tv-grid-3, .tv-grid-4 {
  overflow: hidden;
}

/* ── Horizontal scroll track — prevent page overflow ─────────── */
.tv-hscroll-track {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  max-width: 100vw;
}

/* ── Glass cards — prevent overflow ─────────────────────────── */
.tv-glass {
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Contact split — contain on all ─────────────────────────── */
.tv-contact-split {
  overflow: hidden;
}

/* ── Footer grid overflow fix ────────────────────────────────── */
.footer-grid {
  overflow: hidden;
}
.footer-brand p {
  word-break: break-word;
}

/* ================================================================
   BREAKPOINT: ≤ 1280px  (standard laptop 13–14")
   ================================================================ */
@media (max-width: 1280px) {
  .tv-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tv-hero-orb-1 { width: 400px; height: 400px; }
  .tv-hero-orb-2 { width: 350px; height: 350px; }
}

/* ================================================================
   BREAKPOINT: ≤ 1024px  (tablet landscape / small laptop)
   ================================================================ */
@media (max-width: 1024px) {
  /* Nav */
  .nav-links { gap: 1.2rem; }
  .nav-links a { font-size: 0.72rem; }
  .nav-cta { padding: 0.5rem 1.1rem; font-size: 0.72rem; }

  /* Grids */
  .tv-grid-2 { grid-template-columns: 1fr; gap: 2rem; }
  .tv-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .tv-grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .tv-hero-stats { gap: 2rem; }
  .tv-hero-orb-1 { width: 300px; height: 300px; top: -80px; left: -80px; }
  .tv-hero-orb-2 { width: 280px; height: 280px; }
  .tv-hero-orb-3 { width: 200px; height: 200px; }

  /* Africa layout */
  .tv-africa-layout { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Contact split */
  .tv-contact-split { grid-template-columns: 1fr; }
  .tv-contact-left { min-height: 50vh; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ================================================================
   BREAKPOINT: ≤ 768px  (tablet portrait / large phone)
   ================================================================ */
@media (max-width: 768px) {
  /* Nav logo */
  .nav-logo { font-size: clamp(0.85rem, 4vw, 1.1rem); }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-cta { display: none; }
  #tv-nav { padding: 0 1.25rem; }

  /* Hero */
  #tv-hero { min-height: 100svh; }
  #tv-hero-content { padding-top: 90px; }
  .tv-hero-actions { flex-direction: column; align-items: flex-start; }
  .tv-hero-actions .tv-btn { width: 100%; justify-content: center; }
  .tv-hero-stats { flex-wrap: wrap; gap: 1.5rem; }
  .tv-hero-stats .sep { display: none; }
  .tv-hero-orb-1 { width: 220px; height: 220px; top: -60px; left: -60px; }
  .tv-hero-orb-2 { width: 200px; height: 200px; bottom: -60px; right: -60px; }
  .tv-hero-orb-3 { display: none; }

  /* Stats row */
  .tv-stats-inner { grid-template-columns: repeat(2, 1fr) !important; }
  .tv-stat-num { font-size: clamp(2rem, 8vw, 3.5rem); }

  /* Grids */
  .tv-grid-2, .tv-grid-3, .tv-grid-4 { grid-template-columns: 1fr; gap: 1.25rem; }

  /* Section header */
  .tv-section-header { margin-bottom: 2rem; }

  /* Africa section */
  .tv-africa-layout { grid-template-columns: 1fr; }
  .tv-bleed-text { font-size: clamp(3.5rem, 18vw, 7rem); opacity: 0.025; }

  /* Case study / featured */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 55% 45%"],
  [style*="grid-template-columns: 60% 40%"] {
    grid-template-columns: 1fr !important;
  }

  /* Horizontal scroll */
  .tv-hscroll-item { flex: 0 0 min(90vw, 340px); }

  /* Service cards */
  .tv-service-card { min-height: auto; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

  /* Buttons */
  .tv-btn { padding: 0.75rem 1.5rem; font-size: 0.8rem; }
  .nav-cta { display: none; }

  /* 3D Tilt — disable on touch */
  [data-tilt] { transform: none !important; }

  /* Contact form */
  .tv-contact-split { grid-template-columns: 1fr !important; }
  .tv-contact-left { padding: 3rem 1.5rem; min-height: 320px; }
  .tv-contact-right { padding: 2.5rem 1.5rem; }

  /* WhatsApp button */
  #tv-wa, #tv-whatsapp-btn { bottom: 16px; right: 16px; width: 52px; height: 52px; }
}

/* ================================================================
   BREAKPOINT: ≤ 640px  (large phones — iPhone Plus, Pixel)
   ================================================================ */
@media (max-width: 640px) {
  .tv-h1 { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; }
  .tv-h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .tv-h3 { font-size: clamp(1.1rem, 5vw, 1.6rem); }
  .tv-body { font-size: 1rem; }

  .tv-section { padding: 3rem 0; }
  .tv-container { padding: 0 1rem; }

  .tv-grid-4 { grid-template-columns: 1fr; }

  /* Nav logo — shorten on very small screens */
  .nav-logo .nav-logo-full { display: none; }
  .nav-logo .nav-logo-short { display: inline; }

  /* Stats */
  .tv-stats-inner { grid-template-columns: 1fr 1fr !important; }

  /* Blog grid */
  [class*="blog-grid"], [class*="posts-grid"] { grid-template-columns: 1fr !important; }

  /* Team grid */
  [class*="team-grid"] { grid-template-columns: 1fr !important; }

  /* Timeline — reduce left padding */
  .tv-timeline { padding-left: 1.25rem; }

  /* FAQ accordion */
  [class*="faq"] .tv-glass { padding: 1.25rem; }
}

/* ================================================================
   BREAKPOINT: ≤ 480px  (standard phones — iPhone SE, Galaxy A)
   ================================================================ */
@media (max-width: 480px) {
  .tv-h1 { font-size: clamp(1.8rem, 10vw, 2.6rem); }
  .tv-h2 { font-size: clamp(1.5rem, 8vw, 2rem); }

  /* Nav */
  #tv-nav { padding: 0 1rem; height: 60px; --nav-h: 60px; }
  .nav-logo { font-size: 0.9rem; }
  #tv-hero-content { padding-top: 75px; }

  /* Stats — single column on very small */
  .tv-stats-inner { grid-template-columns: 1fr 1fr !important; }
  .tv-stat-num { font-size: 2.2rem; }

  /* Buttons — full width */
  .tv-btn { width: 100%; justify-content: center; }

  /* Service icon */
  .tv-service-card .icon { width: 42px; height: 42px; font-size: 1.2rem; }

  /* Footer single column */
  .footer-grid { grid-template-columns: 1fr !important; }

  /* Horizontal scroll item */
  .tv-hscroll-item { flex: 0 0 88vw; }

  /* WA button */
  #tv-wa, #tv-whatsapp-btn { width: 48px; height: 48px; bottom: 12px; right: 12px; }

  /* Hide tooltip on mobile */
  #tv-wa-tip, #tv-whatsapp-tooltip { display: none !important; }
}

/* ================================================================
   BREAKPOINT: ≤ 380px  (small phones — iPhone SE, older devices)
   ================================================================ */
@media (max-width: 380px) {
  .tv-h1 { font-size: 1.75rem; }
  .nav-logo { font-size: 0.82rem; max-width: calc(100vw - 100px); }
  .tv-container { padding: 0 0.75rem; }
  .tv-glass { padding: 1.25rem; border-radius: 14px; }
  .tv-stats-inner { grid-template-columns: 1fr !important; }
}

/* ================================================================
   BREAKPOINT: ≥ 1920px  (TV / large monitor)
   ================================================================ */
@media (min-width: 1920px) {
  .tv-container { max-width: 1600px; }
  .tv-h1 { font-size: min(8rem, 5.5vw); }
  .tv-h2 { font-size: min(5.5rem, 4vw); }
  .tv-body { font-size: 1.15rem; }
  .tv-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .tv-section { padding: 10rem 0; }
  #tv-nav { height: 84px; --nav-h: 84px; }
  .nav-logo { font-size: 1.4rem; }
  .nav-links a { font-size: 0.85rem; }
  .nav-cta { padding: 0.75rem 2rem; font-size: 0.85rem; }
}

/* ================================================================
   UTILITY: Force all inline grid overrides to respect mobile
   ================================================================ */
@media (max-width: 768px) {
  [style*="display: grid"] {
    display: block !important;
  }
  [style*="display:grid"] {
    display: block !important;
  }
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   SPECIFIC COMPONENT FIXES
   ================================================================ */

/* Nav mobile overlay z-fix */
#tv-mobile-nav {
  z-index: 9998;
  padding: 2rem;
}
#tv-mobile-nav a {
  font-size: clamp(1.8rem, 7vw, 2.5rem);
  word-break: break-word;
}

/* Ticker — prevent overflow */
.tv-ticker-wrap { overflow: hidden; max-width: 100vw; }

/* Hero canvas — keep contained */
#tv-particles { overflow: hidden; }

/* Blog cards */
.tv-blog-card { padding: clamp(1rem, 3vw, 2rem); }

/* Input fields — prevent zoom on iOS */
.tv-field input, .tv-field textarea, .tv-field select {
  font-size: max(16px, 0.95rem);
}

/* Service engagement table */
[class*="engagement"], [class*="comparison"] {
  overflow-x: auto;
  max-width: 100%;
}

/* Process steps — stack on mobile */
@media (max-width: 768px) {
  [class*="steps-grid"], [class*="step-grid"] {
    grid-template-columns: 1fr !important;
  }
  [class*="step-connector"], [class*="connector-line"] {
    display: none;
  }
}

/* Globe SVG — scale on mobile */
.tv-globe-wrap svg {
  width: min(280px, 85vw);
  height: auto;
}

/* Team grid responsive */
@media (max-width: 900px) {
  [class*="team-grid"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  [class*="team-grid"] { grid-template-columns: 1fr !important; }
}

/* Ensure no element causes horizontal scroll */
section, div, main, article, aside, header, footer, nav {
  max-width: 100%;
}
img, canvas, svg, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Fix the scroll progress bar */
#tv-progress, #tv-scroll-progress { max-width: 100vw; }

/* Mobile paragraph readability */
@media (max-width: 768px) {
  section p, main p { color: var(--white); }
  .tv-body { font-size: 1rem; line-height: 1.7; }
}