/* ============================================
   ScriptHooks Landing Pages — Mobile CSS Patch
   ============================================
   
   Fixes:
   1. .features-grid 3-col on mobile → 1-col
   2. 80px 60px padding → mobile-friendly
   3. All content sections responsive
   4. script.js bottom nav conflict (see note at bottom)
   
   HOW TO USE:
   Option A: Append this to the <style> block in each landing page
   Option B: Save as mobile-patch.css and add <link> after existing styles
   Option C: Append to cinematic-design.css (if landing pages use it)
   
   ============================================ */


/* ─── Tablet breakpoint (768px) ─── */

@media (max-width: 768px) {

  /* --- Global section padding fix --- */
  /* Kills the 60px side padding that eats half the screen */
  .hero,
  .what-you-get,
  .how-it-works,
  .broll-section,
  .faq-section,
  .final-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero {
    padding-top: 48px;
    padding-bottom: 40px;
  }

  .what-you-get,
  .how-it-works,
  .broll-section,
  .faq-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .final-cta {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* --- Hero section --- */
  .hero h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  .hero p {
    font-size: 15px;
  }

  /* --- Features grid: 3-col → 1-col --- */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* --- Steps grid: 3-col → 1-col --- */
  .steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* --- B-roll demo: 2-col → 1-col --- */
  .broll-demo {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* --- Stats bar: horizontal → stack --- */
  .stats-bar {
    flex-direction: column;
    gap: 24px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* --- Section titles --- */
  .section-title {
    font-size: 26px;
  }

  .section-subtitle {
    font-size: 14px;
  }

  /* --- Script preview card --- */
  .script-preview {
    margin-left: 20px;
    margin-right: 20px;
  }

  /* --- FAQ items: less internal padding --- */
  .faq-question {
    padding: 16px 20px;
    font-size: 15px;
  }

  .faq-answer {
    padding: 0 20px 16px;
    font-size: 14px;
  }

  /* --- Final CTA --- */
  .final-cta h2 {
    font-size: 26px;
  }

  .final-cta p {
    font-size: 15px;
  }

  /* --- Nav dropdown: don't show on mobile --- */
  .nav-dropdown-menu {
    display: none !important;
  }

  .nav-dropdown-content {
    width: 100%;
  }

  /* --- Footer links wrap --- */
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
  }

  /* --- Auth modal: prevent overflow --- */
  .modal-content.auth-modal {
    width: 90vw;
    max-width: 400px;
    padding: 2rem 1.5rem;
  }
}


/* ─── Small phone breakpoint (480px) ─── */

@media (max-width: 480px) {

  .hero,
  .what-you-get,
  .how-it-works,
  .broll-section,
  .faq-section,
  .final-cta {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero p {
    font-size: 14px;
    margin-bottom: 28px;
  }

  .section-title {
    font-size: 22px;
  }

  .btn-primary {
    width: 100%;
    text-align: center;
    padding: 14px 24px;
    font-size: 15px;
  }

  .feature-card {
    padding: 20px;
  }

  .step {
    padding: 20px;
  }

  .script-preview {
    margin-left: 0;
    margin-right: 0;
  }

  /* Ensure stats don't get clipped */
  .stat-number {
    font-size: 28px;
  }

  .stat-label {
    font-size: 13px;
  }
}


/* ─── Fix for script.js bottom nav on landing pages ───
   
   Problem: script.js injects a .mobile-bottom-nav on ALL pages,
   including landing pages where it confuses first-time visitors
   who haven't signed up yet.
   
   Two options:
   
   OPTION A — CSS hide on landing pages (quick fix):
   Add this class to the <body> tag of each landing page:
   <body class="landing-page">
   Then this rule hides the injected bottom nav: */

body.landing-page .mobile-bottom-nav {
  display: none !important;
}

/* OPTION B — JS guard in script.js (better fix):
   Wrap the bottom nav injection in a check:
   
   const isLandingPage = document.body.classList.contains('landing-page')
                      || window.location.pathname.includes('-landing');
   if (!isLandingPage) {
     // ... inject mobile bottom nav
   }
   
   Option B is cleaner long-term. Option A is a 30-second fix. */


/* ─── Homepage-specific overrides ───
   The homepage (index.html) uses cinematic-design.css classes.
   These target the homepage grid/sections if they share
   the same class names: */

@media (max-width: 768px) {
  .dropdown-grid {
    grid-template-columns: 1fr;
  }

  .affiliate-grid {
    grid-template-columns: 1fr;
  }

  /* Homepage comparison table: horizontal scroll */
  .comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
