/* ================================================================
   tv-mobile.css — Total Veteran responsive overrides
   Loaded by every HTML host. Uses !important to override
   React inline styles which CSS cannot otherwise beat.
   Breakpoints: ≤768px mobile, 769–1024px tablet, ≥1025px desktop
   ================================================================ */

/* ================================================================
   1. SECTION PADDING (horizontal AND vertical)
   Most sections use padding: '120px 40px' inline.
   We override ALL four sides at mobile.
   ================================================================ */
@media (max-width: 1024px) {
  section {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .tv-nav-inner {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

@media (max-width: 768px) {
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .tv-nav-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 0 !important;
  }
  /* about.html uses plain CSS class selectors, not inline styles */
  .founder, .origin, .mvv, .timeline, .whynow, .team-section, .cta {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 40px !important;
  }
}

@media (max-width: 480px) {
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .tv-nav-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .founder, .origin, .mvv, .timeline, .whynow, .team-section, .cta {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 32px !important;
  }
}

/* ================================================================
   2. MOBILE NAV — hamburger visible, desktop items hidden
   ================================================================ */
.tv-hamburger {
  display: none; /* hidden by default; shown via media query */
}

@media (max-width: 768px) {
  .tv-hamburger {
    display: flex !important;
  }
  /* Hide desktop nav + cta across all pages */
  .tv-nav-links { display: none !important; }
  .tv-nav-cta   { display: none !important; }
  /* Footer grid collapses */
  .tv-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* ================================================================
   3. HERO GRIDS
   Two-panel split heroes — stack to single column on mobile
   ================================================================ */
@media (max-width: 768px) {
  .tv-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .tv-hero-panel {
    padding: 36px 24px !important;
    min-height: unset !important;
  }
  .tv-hero-panel-dark {
    min-height: 280px !important;
  }
  /* hero-top-grid is the index.html class — keep consistent */
  .hero-top-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-top-grid > div:first-child {
    padding: 40px 24px !important;
  }
  .hero-top-grid > div:last-child {
    padding: 36px 24px !important;
    min-height: 280px !important;
  }
}

/* ================================================================
   4. INTRO / CONTENT TWO-COL GRIDS
   Section headers (eyebrow + h2) left + body copy right
   ================================================================ */
@media (max-width: 768px) {
  .tv-intro-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 36px !important;
  }
  .tv-bio-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .tv-intro-grid {
    grid-template-columns: 1fr 1.2fr !important;
    gap: 40px !important;
  }
}

/* ================================================================
   5. THREE-COLUMN CARD GRIDS
   .tv-cards-3  — light sections (rule borders)
   .tv-tiers-grid — dark sections (bone borders)
   ================================================================ */
@media (max-width: 768px) {
  .tv-cards-3 {
    grid-template-columns: 1fr !important;
  }
  .tv-cards-3 > * {
    border-right: none !important;
  }
  .tv-cards-3 > *:not(:last-child) {
    border-bottom: 1px solid var(--rule) !important;
  }

  .tv-tiers-grid {
    grid-template-columns: 1fr !important;
  }
  .tv-tiers-grid > * {
    border-right: none !important;
  }
  .tv-tiers-grid > *:not(:last-child) {
    border-bottom: 1px solid rgba(244,241,234,0.22) !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tv-cards-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tv-tiers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ================================================================
   6. FOUR-COLUMN CARD GRIDS
   ================================================================ */
@media (max-width: 768px) {
  .tv-cards-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tv-cards-4 > * {
    border-right: none !important;
  }
  /* Re-apply right border for odd items in 2-col layout */
  .tv-cards-4 > *:nth-child(odd) {
    border-right: 1px solid var(--rule) !important;
  }
}

@media (max-width: 420px) {
  .tv-cards-4 {
    grid-template-columns: 1fr !important;
  }
  .tv-cards-4 > *:nth-child(odd) {
    border-right: none !important;
  }
  .tv-cards-4 > *:not(:last-child) {
    border-bottom: 1px solid var(--rule) !important;
  }
}

/* ================================================================
   7. TWO-COLUMN CARD GRIDS (Takeaways, etc.)
   ================================================================ */
@media (max-width: 600px) {
  .tv-cards-2 {
    grid-template-columns: 1fr !important;
  }
  .tv-cards-2 > * {
    border-right: none !important;
  }
  .tv-cards-2 > *:not(:last-child) {
    border-bottom: 1px solid var(--rule) !important;
  }
}

/* ================================================================
   8. HOW IT WORKS — STEP ROWS
   gridTemplateColumns: '120px 1fr 60px' on desktop
   ================================================================ */
@media (max-width: 768px) {
  .tv-step-row {
    grid-template-columns: auto 1fr !important;
    gap: 16px !important;
    padding: 24px 20px !important;
    align-items: flex-start !important;
  }
  .tv-step-arrow {
    display: none !important;
  }
}

/* ================================================================
   9. MANUAL PARTS ROWS
   gridTemplateColumns: '180px 1fr 60px' on desktop
   ================================================================ */
@media (max-width: 768px) {
  .tv-part-row {
    grid-template-columns: auto 1fr !important;
    gap: 16px !important;
    padding: 28px 20px !important;
    align-items: flex-start !important;
  }
  .tv-part-num {
    display: none !important;
  }
}

/* ================================================================
   10. SAMPLE SESSION
   Sticky sidebar + beats list → stacked
   ================================================================ */
@media (max-width: 768px) {
  .tv-session-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .tv-session-sticky {
    position: static !important;
    top: auto !important;
  }
  .tv-beat-row {
    grid-template-columns: 64px 1fr !important;
    gap: 16px !important;
  }
}

/* ================================================================
   11. PREORDER / APPLY SPLIT PANELS
   ================================================================ */
@media (max-width: 768px) {
  .tv-preorder-grid {
    grid-template-columns: 1fr !important;
  }
  .tv-preorder-grid > * {
    border-right: none !important;
  }
  .tv-preorder-grid > *:not(:last-child) {
    border-bottom: 1px solid rgba(244,241,234,0.22) !important;
  }
}

/* ================================================================
   12. HERO META GRID (coaching hero 3-col stats)
   ================================================================ */
@media (max-width: 768px) {
  .tv-hero-meta-grid {
    grid-template-columns: 1fr !important;
    margin-top: 28px !important;
  }
  .tv-hero-meta-grid > * {
    border-right: none !important;
    padding-right: 0 !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  .tv-hero-meta-grid > *:last-child {
    border-bottom: none !important;
  }
}

/* ================================================================
   13. STAT BAR (index hero mission brief 4-col)
   ================================================================ */
@media (max-width: 768px) {
  .tv-stat-bar {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tv-stat-bar > * {
    border-left: none !important;
  }
  .tv-stat-bar > *:nth-child(even) {
    border-left: 1px solid rgba(244,241,234,0.18) !important;
  }
}

@media (max-width: 420px) {
  .tv-stat-bar {
    grid-template-columns: 1fr !important;
  }
  .tv-stat-bar > *:nth-child(even) {
    border-left: none !important;
  }
}

/* ================================================================
   14. HERO IMAGE SLAB
   ================================================================ */
@media (max-width: 768px) {
  .tv-hero-img-slab img {
    height: 220px !important;
    object-position: center 20% !important;
  }
  .tv-hero-img-slab .tv-overlay-card {
    max-width: none !important;
    left: 16px !important;
    bottom: 16px !important;
    right: 16px !important;
  }
  .tv-hero-fig-tag {
    display: none !important;
  }
}

/* ================================================================
   15. KEYWORD MARQUEE BAR
   ================================================================ */
@media (max-width: 768px) {
  .tv-marquee {
    gap: 8px !important;
    padding: 16px 20px !important;
    flex-wrap: wrap !important;
  }
  .tv-marquee-sep {
    display: none !important;
  }
}

/* ================================================================
   16. FOOTER COPYRIGHT ROW
   ================================================================ */
@media (max-width: 768px) {
  .tv-footer-copyright {
    flex-direction: column !important;
    gap: 4px !important;
  }
}

/* ================================================================
   17. MANUAL PRICE ROW
   (price + divider + description block)
   ================================================================ */
@media (max-width: 600px) {
  .tv-manual-price-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .tv-manual-price-divider {
    display: none !important;
  }
}

/* ================================================================
   18. HERO META STRIP (coaching top bar)
   ================================================================ */
@media (max-width: 640px) {
  .tv-hero-meta-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 12px 0 !important;
  }
}

/* ================================================================
   19. PATHWAY DIAGRAM (index.html)
   ================================================================ */
@media (max-width: 480px) {
  .pathway-stages {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   20. FOUNDING BIO IMAGE (auto-height on mobile)
   ================================================================ */
@media (max-width: 768px) {
  .tv-bio-img {
    aspect-ratio: 3/2 !important;
  }
}

/* ================================================================
   21. BLOCKQUOTE PADDING
   ================================================================ */
@media (max-width: 768px) {
  blockquote {
    padding: 28px 24px !important;
    margin-left: 0 !important;
  }
}

/* ================================================================
   18. CONTACT / BRIEF FORM
   ================================================================ */
@media (max-width: 480px) {
  .tv-contact-form {
    padding: 24px 16px !important;
  }
}

/* ================================================================
   19. FORM GRIDS (2-col label/input grids in dark forms)
   ================================================================ */
@media (max-width: 600px) {
  .tv-form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   20. ABOUT.HTML — plain HTML responsive grids
   ================================================================ */
@media (max-width: 900px) {
  /* Nav */
  .nav nav { display: none; }
  .nav .right { display: none; }
  .nav-inner { padding-left: 20px !important; padding-right: 20px !important; gap: 12px !important; }
  .nav-hamburger { display: flex !important; }

  /* Hero */
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-left { padding: 36px 24px 32px !important; }
  .hero-right { min-height: 260px !important; padding: 32px 24px !important; }

  /* Founder */
  .founder-inner { grid-template-columns: 1fr !important; gap: 36px !important; }
  .founder .bio { grid-template-columns: 1fr !important; gap: 16px !important; }
  .credentials { grid-template-columns: repeat(2, 1fr) !important; }

  /* Origin */
  .origin-head { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 32px !important; }
  .origin-grid { grid-template-columns: 1fr !important; }
  .origin-grid article { border-right: none !important; border-bottom: 1px solid var(--rule); }

  /* Why now */
  .whynow-inner { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* Mission/Vision */
  .mvv-top { grid-template-columns: 1fr !important; }
  .mvv-top .mission { border-right: none !important; border-bottom: 1px solid var(--rule); }
  .values { grid-template-columns: repeat(2, 1fr) !important; }
  .values article:nth-child(even) { border-right: none !important; }
  .values article:nth-child(odd) { border-right: 1px solid var(--rule) !important; }

  /* Timeline */
  .timeline-head { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 32px !important; }
  .tline { grid-template-columns: repeat(2, 1fr) !important; }

  /* about.html research section */
  .about-research { padding-top: 64px !important; padding-bottom: 64px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .about-research-head { grid-template-columns: 1fr !important; gap: 24px !important; margin-bottom: 32px !important; }
  .about-scholar-cta { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; padding: 24px 20px !important; }
  .about-scholar-cta > div:last-child { width: 100% !important; }
  .about-scholar-cta a { flex: 1 !important; text-align: center !important; }

  /* CTA */
  .cta-inner { flex-direction: column !important; gap: 28px !important; }
  .btns { flex-direction: column !important; gap: 12px !important; }
  .btns a { text-align: center !important; }
}

@media (max-width: 480px) {
  .credentials { grid-template-columns: 1fr !important; }
  .values { grid-template-columns: 1fr !important; }
  .values article { border-right: none !important; }
  .tline { grid-template-columns: 1fr !important; }
  .tline article { border-right: none !important; }
  .mvv-top > div { padding: 28px 20px !important; }
  .hero-left h1 { font-size: clamp(36px, 10vw, 56px) !important; }
}

/* Mobile menu panel (about.html) */
.about-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--paper);
  border-bottom: 2px solid var(--forest);
  padding: 8px 20px 24px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.12);
  z-index: 39;
}
.about-mobile-menu.open { display: block; }
.about-mobile-menu a {
  display: block;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.about-mobile-menu a.active { color: var(--accent); }
.about-mobile-menu .mob-cta {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Fix: btn-dark inside about mobile menu must keep white text */
.about-mobile-menu a.btn-dark {
  color: var(--bone) !important;
}
.nav-hamburger {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--forest);
  transition: transform 0.2s, opacity 0.15s;
}

/* ================================================================
   21. GENERAL OVERFLOW SAFETY
   ================================================================ */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}
h1, h2, h3 {
  overflow-wrap: break-word;
  word-break: break-word;
}
img {
  max-width: 100%;
  height: auto;
}