/* ==========================================================================
   MOBILE OVERRIDES — targets inline styles that can't be reached by style.css
   Uses !important only where inline styles block media query cascade.
   Breakpoints: tablet ≤768px | mobile ≤480px
   ========================================================================== */

/* ── TABLET (≤768px) ────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Global: no horizontal overflow on any element */
  *, *::before, *::after {
    max-width: 100%;
    word-break: break-word;
  }

  /* Force all inline grids to single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Keep auto-fit grids (stats, cards) at 2 cols on tablet */
  [style*="repeat(auto-fit"] {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }

  /* Modal form: 2-col → 1-col */
  #scopingInquiryForm [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero section text max-width: free it on mobile */
  .hero-content p[style*="max-width"] {
    max-width: 100% !important;
  }

  /* Section padding reduction */
  [style*="padding: 44px"] {
    padding: 28px 20px !important;
  }
  [style*="padding: 48px"] {
    padding: 28px 20px !important;
  }
  [style*="padding: 40px"] {
    padding: 24px 18px !important;
  }

  /* Large inline font sizes — scale down */
  [style*="font-size: 2.2rem"] {
    font-size: 1.6rem !important;
  }
  [style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
  }
  [style*="font-size: 1.8rem"] {
    font-size: 1.4rem !important;
  }

  /* Stats / number displays */
  [style*="font-size: 3"] {
    font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
  }

  /* Inline flex rows that wrap badly — exclude modals */
  [style*="display: flex"][style*="gap: 20px"]:not(.custom-modal-backdrop):not(.custom-modal-content),
  [style*="display: flex"][style*="gap: 24px"]:not(.custom-modal-backdrop):not(.custom-modal-content) {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* Badge / pill rows */
  [style*="display: inline-flex"] {
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* Hero canvas (WebGL) */
  #cyber-canvas {
    display: none !important;
  }

  /* Modals: full-width on mobile */
  .custom-modal-content,
  [class*="modal-content"] {
    max-width: 100% !important;
    margin: 12px !important;
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }

  /* Trust strip wraps */
  .trust-strip {
    gap: 14px !important;
    flex-wrap: wrap !important;
  }

  /* Section headers: reduce side padding on inline-padded containers */
  .section-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Commitment cards: text alignment */
  .commitments-grid [style*="border-radius"] {
    padding: 20px !important;
  }

  /* Inline max-width: constraints that clip content */
  [style*="max-width: 600px"],
  [style*="max-width: 560px"],
  [style*="max-width: 520px"] {
    max-width: 100% !important;
  }
}

/* ── MOBILE (≤480px) ────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Single column everywhere — no exceptions */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Auto-fit to 1 col */
  [style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* All inline padded containers */
  [style*="padding: 44px"],
  [style*="padding: 48px"],
  [style*="padding: 40px"],
  [style*="padding: 36px"],
  [style*="padding: 32px"] {
    padding: 16px !important;
  }

  /* Font scaling */
  [style*="font-size: 2.2rem"] { font-size: 1.4rem !important; }
  [style*="font-size: 2rem"]   { font-size: 1.3rem !important; }
  [style*="font-size: 1.8rem"] { font-size: 1.2rem !important; }
  [style*="font-size: 1.35rem"] { font-size: 1.1rem !important; }
  [style*="font-size: 3"]      { font-size: clamp(1.6rem, 8vw, 2rem) !important; }

  /* Flex rows → column */
  [style*="display: flex"][style*="gap: 20px"],
  [style*="display: flex"][style*="gap: 24px"],
  [style*="display: flex"][style*="gap: 18px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Buttons: full width on mobile */
  .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Hero CTA buttons stay full width */
  .hero-cta-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Trust strip: column */
  .trust-strip {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  /* Reduce border-radius on small screen cards */
  [style*="border-radius: 20px"] { border-radius: 12px !important; }
  [style*="border-radius: 16px"] { border-radius: 10px !important; }

  /* Remove inline box-shadow on low-end devices (perf) */
  [style*="box-shadow: 0 20px 60px"] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
  }

  /* Inline max-width */
  [style*="max-width:"],
  [style*="max-width: "] {
    max-width: 100% !important;
  }

  /* Form inputs: tap-target size */
  input, select, textarea, button {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    min-height: 44px;
  }

  /* Pill/eyebrow badges */
  .section-eyebrow {
    font-size: 0.72rem !important;
    padding: 5px 12px !important;
  }

  /* Nav logo sizing */
  .nav-logo img {
    height: 32px !important;
  }
}

/* ── FOUNDING PARTNER: protect slot card visuals ────────────────────────── */
@media (max-width: 768px) {
  .fp-slot-box {
    background: #04060C !important;
    border: 1px solid rgba(255,30,39,0.3) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.8) !important;
  }
  .fp-slot-label {
    font-size: 0.75rem !important;
    color: #FF2A43 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
  }
  .fp-slot-count {
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    color: #FFF !important;
  }
  .fp-slot-sub {
    font-size: 0.8rem !important;
    color: #64748B !important;
  }
}

/* ── MODAL: protect from generic overrides ──────────────────────────────── */
@media (max-width: 768px) {
  #speakToSalesModal,
  #scopingModal,
  .custom-modal-backdrop {
    padding: 12px !important;
    align-items: center !important;
    padding-top: env(safe-area-inset-top, 16px) !important;
  }
  .custom-modal-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 24px 18px !important;
    border-radius: 14px !important;
    margin-top: 8px !important;
  }
  /* Prevent grid override from hitting modal form fields */
  .custom-modal-content [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .custom-modal-content {
    padding: 18px 14px !important;
    border-radius: 12px !important;
    max-height: 92vh !important;
  }
}