/* ═══════════════════════════════════════════════════════════════
   FTW ROBOTICS — mobile.css
   Global mobile optimizations for ftw-robotics.ai
   Link AFTER page <style> blocks in every HTML file:
     <link rel="stylesheet" href="mobile.css">
   Breakpoints: 900px (tablet), 768px, 600px (phone), 400px (small)
═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────
   1. DUPLICATE FEEDBACK TAB FIX
   Most pages ship two feedback systems:
   - #ftw-feedback-tab  (old slide-out panel)
   - #feedback-tab-btn  (green modal button)
   They stack/overlap each other. On mobile
   show only the modal version; hide the panel.
───────────────────────────────────────── */
@media (max-width: 900px) {
  #ftw-feedback-tab,
  #ftw-feedback-panel {
    display: none !important;
  }
}


/* ─────────────────────────────────────────
   2. NAV — ensure no overflow
───────────────────────────────────────── */
@media (max-width: 600px) {
  nav {
    padding: 0 1.2rem !important;
  }
  /* Shrink logo image if it wraps */
  nav img[style*="height:44px"] {
    height: 38px !important;
  }
}


/* ─────────────────────────────────────────
   3. SECTION PADDING — global reduction
   Many sections use `padding: 5rem 4rem`
   in inline styles or class styles without
   a mobile override.
───────────────────────────────────────── */
@media (max-width: 900px) {
  .section,
  .edition-section,
  .specs-section,
  .pcb-section,
  .flight-section,
  .tech-section,
  .manual-hero,
  .accordion-section,
  .how-section,
  .challenges-section,
  .manual-section,
  .bfc-hero,
  .pathway-hero,
  .matrix-section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

@media (max-width: 600px) {
  .section,
  .edition-section,
  .specs-section,
  .pcb-section,
  .flight-section,
  .tech-section,
  .how-section,
  .challenges-section,
  .manual-section,
  .bfc-hero,
  .pathway-hero {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* inline-style sections (hopper.html FAQ, resources CTA, etc.) */
  section[style*="padding:5rem 4rem"],
  section[style*="padding: 5rem 4rem"],
  div[style*="padding:5rem 4rem"],
  div[style*="padding: 5rem 4rem"] {
    padding: 2.5rem 1.25rem !important;
  }

  section[style*="padding:3rem 4rem"],
  section[style*="padding: 3rem 4rem"],
  div[style*="padding:3rem 4rem"],
  div[style*="padding: 3rem 4rem"] {
    padding: 2rem 1.25rem !important;
  }
}


/* ─────────────────────────────────────────
   4. INLINE GRID OVERRIDES
   Collapse multi-column inline-style grids
   that have no responsive breakpoints.
───────────────────────────────────────── */
@media (max-width: 768px) {

  /* 2-column grids → single column */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 3-column grids → single column */
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 4-column grids → 2-column */
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  /* 4-column → single on very small screens */
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}


/* ─────────────────────────────────────────
   5. HOPPER.HTML SPECIFIC
───────────────────────────────────────── */
@media (max-width: 768px) {
  /* FAQ grid (inline 1fr 1fr, max-width:1100px) */
  .hopper-hero { margin-top: 70px; }

  /* Hero drone image — remove padding offset */
  .hero-drone-img { transform: none !important; }

  /* Hero cards stack */
  .hero-cards {
    padding: 1.5rem 1.25rem 0 !important;
  }

  /* Warranty strip */
  .warranty-strip { padding: 1rem 1.25rem !important; }

  /* PCB images side-by-side → reduce height on small screens */
  .pcb-img-wrap img { height: 200px !important; }
}

@media (max-width: 600px) {
  /* Tech cards image+text → stack */
  .tech-card {
    grid-template-columns: 1fr !important;
  }
  .tech-img-wrap {
    width: 100% !important;
    height: 160px !important;
  }

  /* Contents grid → 2 columns on phone (4→2) */
  .contents-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Flight grid → single column */
  .flight-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ─────────────────────────────────────────
   6. CURRICULUM.HTML SPECIFIC
───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hopper Quest mission list (inline 1fr 1fr grid) */
  div[style*="grid-template-columns:1fr 1fr; gap:6px"],
  div[style*="grid-template-columns: 1fr 1fr; gap: 6px"] {
    grid-template-columns: 1fr !important;
  }

  /* Curriculum verticals row (5 columns) */
  .verticals-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Challenges + mission grids */
  .challenges-grid,
  .missions-grid,
  .leaderboard-grid,
  .hq-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Lesson element cards */
  .lesson-grid { grid-template-columns: 1fr !important; }
  .lesson-card { grid-template-columns: 1fr !important; }
  .lesson-img { width: 100% !important; aspect-ratio: 16/9 !important; }

  /* After-school resources 3-col */
  .after-school-resources { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .verticals-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .bfc-wordmark { font-size: 2rem !important; }
}


/* ─────────────────────────────────────────
   7. SHOP.HTML SPECIFIC
───────────────────────────────────────── */
@media (max-width: 768px) {
  .shop-header {
    padding: 2rem 1.25rem 1.5rem !important;
  }
  .shop-header h1 { font-size: 2.2rem !important; }
  .filter-bar {
    padding: 0 1.25rem !important;
    top: 72px; /* account for nav */
  }
  .results-bar { padding: 12px 1.25rem !important; }
  .product-grid {
    padding: 1.25rem 1.25rem 3rem !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .quote-banner { padding: 2.5rem 1.25rem !important; }
  .quote-banner h2 { font-size: 2rem !important; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr !important; }
}


/* ─────────────────────────────────────────
   8. COMPETE.HTML SPECIFIC
───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Intro section */
  .intro-section {
    padding: 2rem 1.25rem !important;
    gap: 2rem !important;
  }

  /* Stat cards stay 2-col on tablet */
  .intro-right {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Season section */
  .season-section {
    padding: 2.5rem 1.25rem !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Leaderboard callout + manual CTA */
  .lb-callout,
  .manual-cta {
    padding: 1.5rem 1.25rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* NLB tabs — allow wrapping on small screens */
  #nlb-tabs {
    flex-wrap: wrap !important;
    overflow-x: unset !important;
    gap: 4px !important;
  }
  .nlb-tab { font-size: 8px !important; padding: 4px 10px !important; }

  /* National LB table padding */
  #national-lb-section {
    margin: 0 !important;
  }
  #national-lb-section [style*="padding:2rem 2.5rem"],
  #national-lb-section [style*="padding: 2rem 2.5rem"] {
    padding: 1.25rem !important;
  }
}

@media (max-width: 600px) {
  /* Hero */
  .hero { padding: 3rem 1.25rem 2.5rem !important; min-height: auto !important; }
  .hero-tagline { font-size: 10px !important; }

  /* Season ticker */
  .season-ticker { margin: 0 !important; padding: 0 !important; }
  .tick-item { min-width: 130px !important; padding: 0.9rem 1rem !important; }
  .tick-label { font-size: 8px !important; }

  /* How grid */
  .how-grid { grid-template-columns: 1fr !important; }
}


/* ─────────────────────────────────────────
   9. NEWS.HTML SPECIFIC
───────────────────────────────────────── */
@media (max-width: 768px) {
  .news-section { padding: 2rem 1.25rem !important; }
  .featured-text { padding: 2rem 1.25rem !important; }
}

@media (max-width: 600px) {
  .featured-text h1 { font-size: 1.3rem !important; }
  .news-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
}


/* ─────────────────────────────────────────
   10. CONTACT.HTML SPECIFIC
───────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr !important;
    padding: 2rem 1.25rem 3rem !important;
  }
  .contact-form-wrap { padding-right: 0 !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .page-header { padding: 2rem 1.25rem 1.5rem !important; }
  .page-header h1 { font-size: 2.5rem !important; }
  footer { flex-direction: column !important; gap: 1.25rem !important;
    text-align: center !important; padding: 2rem 1.25rem !important; }
}


/* ─────────────────────────────────────────
   11. RESOURCES.HTML SPECIFIC
───────────────────────────────────────── */
@media (max-width: 768px) {
  .resources-section { padding: 2rem 1.25rem !important; margin: 0 !important; border-radius: 0 !important; }
  .resources-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .manual-section { padding: 2rem 1.25rem !important; }
  .accordion-body { padding-left: 0.75rem !important; }
  .acc-num { width: 56px !important; height: 56px !important; margin-right: 0.75rem !important; }
}

@media (max-width: 600px) {
  /* Support videos grid is auto-fill minmax(300px,1fr) so it already
     goes to 1 column when viewport < 300px padding. No fix needed.
     But enforce on very small phones: */
  div[style*="minmax(300px,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}


/* ─────────────────────────────────────────
   12. PRODUCT.HTML SPECIFIC
───────────────────────────────────────── */
@media (max-width: 600px) {
  .breadcrumb { padding: 12px 1.25rem !important; }
  .product-container { padding: 1.5rem 1.25rem 3rem !important; }
  .related-section { padding: 2rem 1.25rem !important; }
  .related-grid { grid-template-columns: 1fr 1fr !important; }
  .quote-banner { padding: 2rem 1.25rem !important; }
  /* Shipping panel inputs */
  #shipping-panel div[style*="grid-template-columns:1fr 60px 90px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ─────────────────────────────────────────
   13. LEADERBOARD.HTML (educator app)
───────────────────────────────────────── */
@media (max-width: 900px) {
  /* Already has sidebar:display:none — just ensure content fills */
  .content { margin-left: 0 !important; }
  .act-layout { flex-direction: column !important; }
  .act-panel { width: 100% !important; position: static !important; max-height: none !important; }
  .act-grid { grid-template-columns: 1fr !important; }
  .grid3, .grid2 { grid-template-columns: 1fr !important; }
  .grid4 { grid-template-columns: 1fr 1fr !important; }
  .cr, .cr3 { grid-template-columns: 1fr !important; }
  .submit-row { grid-template-columns: 1fr !important; }
  .lb-edit-body { grid-template-columns: 1fr !important; }
  .nat-e { grid-template-columns: 40px 1fr !important; }
}

@media (max-width: 600px) {
  .content { padding: 1rem !important; margin-top: 80px !important; }
  .grid4 { grid-template-columns: 1fr !important; }
  .mascot-grid { grid-template-columns: repeat(5, 1fr) !important; }
  /* Scoring input table — allow horizontal scroll */
  .lb-table { font-size: 11px !important; }
  .lb-table td, .lb-table th { padding: 8px 8px !important; }
}


/* ─────────────────────────────────────────
   14. PLATFORM.HTML SIDEBAR MOBILE FIX
   Sidebar uses transform: translateX(-100%)
   at 600px but there's NO toggle button.
   This adds the missing hamburger + overlay.
   Pair with the JS snippet in platform.html.
───────────────────────────────────────── */
@media (max-width: 600px) {
  /* Sidebar slides in when .mobile-open is added by JS */
  #sidebar {
    transition: transform 0.28s ease !important;
    z-index: 200 !important;
  }
  #sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 6px 0 40px rgba(0, 0, 0, 0.7) !important;
  }

  /* Mobile nav toggle for platform */
  #platform-mobile-nav-btn {
    display: flex !important;
  }

  /* Overlay that closes sidebar on tap-outside */
  #sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 199;
  }
  #sidebar-overlay.active {
    display: block;
  }

  /* Prevent content from being pushed */
  #content {
    margin-left: 0 !important;
    margin-top: 80px !important;
    padding: 1rem !important;
  }

  /* Login gate padding on small nav */
  #login-gate {
    padding-top: calc(80px + 1.5rem) !important;
  }

  /* Compact submit panels */
  .submit-row { grid-template-columns: 1fr !important; }
  .submit-panel { padding: 1.25rem !important; }
}


/* ─────────────────────────────────────────
   15. WARRANTY.HTML FOOTER FIX
   warranty.html has no @media on its footer
───────────────────────────────────────── */
@media (max-width: 900px) {
  .warranty-hero { padding: 3rem 1.5rem 2rem !important; }
  .warranty-content { padding: 0 1.5rem 3rem !important; }
  .warranty-section { padding: 1.5rem !important; }
}

@media (max-width: 600px) {
  .warranty-title { font-size: 2.2rem !important; }
}


/* ─────────────────────────────────────────
   16. FOOTER — global (all pages)
   Most pages already have footer collapse
   but some (warranty.html) do not.
───────────────────────────────────────── */
@media (max-width: 600px) {
  footer {
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    border-radius: 0 !important;
    gap: 2rem !important;
    padding: 2rem 1.25rem !important;
  }
  .footer-bottom {
    margin: 0 !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center !important;
    padding: 1rem 1.25rem !important;
  }
}


/* ─────────────────────────────────────────
   17. INDEX.HTML SPECIFIC
───────────────────────────────────────── */
@media (max-width: 600px) {
  /* Ensure hero grid uses correct margin for 70px nav */
  .hero-grid { margin-top: 70px !important; }

  /* Position section inline padding */
  .position-section {
    padding: 2.5rem 1.25rem !important;
    gap: 2rem !important;
    margin: 0 8px 8px !important;
  }

  /* Marquee strip */
  .marquee-strip { margin: 0 8px 8px !important; }

  /* Bottom tiles */
  .bottom-tiles { padding: 0 8px 8px !important; }
  .tile { min-height: 180px !important; }
}


/* ─────────────────────────────────────────
   18. TOUCH TARGET MINIMUMS
   44px minimum for interactive elements
   per Apple HIG and WCAG guidelines
───────────────────────────────────────── */
@media (max-width: 768px) {
  .cta-primary,
  .cta-secondary,
  .resource-btn,
  .learn-btn,
  .register-btn,
  .add-to-cart-btn,
  .view-details-btn,
  .checkout-btn,
  .submit-btn,
  .login-btn,
  .login-input,
  .filter-pill,
  .filter-btn,
  .mobile-shop,
  .mobile-menu ul li a {
    min-height: 44px !important;
  }

  /* Accordion triggers */
  .accordion-trigger {
    min-height: 56px !important;
  }

  /* Nav hamburger */
  .hamburger,
  .site-hamburger {
    min-width: 44px !important;
    min-height: 44px !important;
    justify-content: center !important;
    align-items: center !important;
  }
}


/* ─────────────────────────────────────────
   19. TYPOGRAPHY SCALE — mobile
───────────────────────────────────────── */
@media (max-width: 600px) {
  /* Prevent clamp() minimums from being too small */
  .section-title { font-size: 1.5rem !important; letter-spacing: 0.04em !important; }
  .hero-headline h1 { font-size: 2.4rem !important; }
  .shop-header h1 { font-size: 2rem !important; }

  /* Oversize Bebas headlines */
  .after-school-title { font-size: 3rem !important; }
  .bst { font-size: 2rem !important; }
}


/* ─────────────────────────────────────────
   20. IMAGE OVERFLOW GUARD
   Prevent any image from breaking layout
───────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* Specific fix for PCB images that have fixed height */
@media (max-width: 600px) {
  .pcb-img-wrap img,
  img[style*="height:280px"],
  img[style*="height: 280px"] {
    height: 180px !important;
  }
}
/* ── MOBILE TEXT CENTERING ── */
@media (max-width: 768px) {
  footer p, footer div { text-align: center !important; }
  section h1, section h2, section h3 { text-align: center !important; }
}
/* ── FOOTER PARAGRAPH CENTERING ── */
@media (max-width: 768px) {
  footer * { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  footer p { max-width: 100% !important; width: 100% !important; }
}

/* ── SHOP NOW BUTTON BOTTOM SPACING ── */
@media (max-width: 768px) {
  .shop-now-section, section.shop-now, [class*="shop-now"] {
    padding-bottom: 3rem !important;
  }
}
/* ── SHOP NOW CARD BOTTOM PADDING ── */
@media (max-width: 768px) {
  .card-shop { padding-bottom: 3rem !important; }
}

/* ── FOOTER GRID MOBILE FIX ── */
@media (max-width: 768px) {
  footer.grid { grid-template-columns: 1fr !important; text-align: center !important; }
  footer.grid p, footer.grid div, footer.grid span { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
}
/* ── LEARN BTN SPACING FIX ── */
@media (max-width: 768px) {
  .learn-btn { line-height: 1 !important; padding: 0.6rem 1.2rem !important; display: inline-flex !important; align-items: center !important; }
}
@media (max-width: 768px) {
  .card-compete { padding-top: 2rem !important; }
}
@media (max-width: 768px) {
  .card-shop h2 { margin-top: 2rem !important; }
}