/* ==========================================================================
   OVERSIGHT — MOBILE RESPONSIVE DESIGN SYSTEM
   Compact Tactical Mobile Architecture:
   - Horizontal Snap Carousels (Touch Peek-Ahead Slider)
   - 2x2 High-Density Metrics Grid
   - Compact Section Spacings & Scaled SVGs
   - Preserves Full Tactical Aesthetic without Infinite Vertical Scroll
   ========================================================================== */

/* ---- BASE RESET ---- */
@media (max-width: 1024px) {
  :root {
    --mobile-padding: 20px;
    --mobile-gap: 16px;
  }
  html { font-size: 15px; -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
}

/* ---- SECTION SPACING & COMPACT HEADINGS ---- */
@media (max-width: 820px) {
  .sec {
    padding: 46px 0 !important;
  }
  .sec-head {
    margin-bottom: 22px !important;
  }
  .sec-head h2 {
    font-size: clamp(1.6rem, 5.5vw, 2.1rem) !important;
    line-height: 1.14 !important;
  }
  .sec-head p {
    font-size: .86rem !important;
    line-height: 1.55 !important;
    margin-top: 8px !important;
  }
  .pipe-conduit {
    display: none !important;
  }

  /* ── 1. HORIZONTAL SNAP CAROUSELS (Saves ~65% vertical space) ── */
  .tactical-stack-grid,
  .pipe-grid,
  .qm-grid-3,
  .bento:not(.bento-keep-grid) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 4px 18px 4px !important;
    margin: 16px -20px 0 -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 14px !important;
    scrollbar-width: none !important; /* Firefox */
  }

  .tactical-stack-grid::-webkit-scrollbar,
  .pipe-grid::-webkit-scrollbar,
  .qm-grid-3::-webkit-scrollbar,
  .bento::-webkit-scrollbar {
    display: none !important; /* Chrome / Safari */
  }

  /* Card Peek-Ahead Sizing: 84% width lets user see ~16% of next card */
  .tactical-stack-grid > *,
  .pipe-grid > *,
  .qm-grid-3 > *,
  .bento > * {
    flex: 0 0 84% !important;
    width: 84% !important;
    min-width: 275px !important;
    max-width: 330px !important;
    scroll-snap-align: start !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* Compact Artwork on Mobile */
  .stack-micro-art,
  .pipe-art {
    height: 76px !important;
    margin: 8px 0 12px !important;
  }

  /* ── 2. COMPACT 2x2 METRICS GRID ── */
  .metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }
  .metrics .met {
    padding: 14px 12px !important;
    border-radius: 10px !important;
  }
  .metrics .met .num {
    font-size: 1.65rem !important;
    line-height: 1.1 !important;
  }
  .metrics .met .lbl {
    font-size: .66rem !important;
    letter-spacing: .08em !important;
  }
  .metrics .met .desc {
    display: none !important; /* Conceal long paragraph to keep metrics punchy */
  }
  .metrics .met .met-tag {
    margin-bottom: 8px !important;
    font-size: .56rem !important;
  }

  /* ── 3. COMPACT CTA ── */
  .cta {
    padding: 28px 20px !important;
    margin: 20px 0 !important;
  }
  .cta h3 {
    font-size: 1.55rem !important;
  }
  .cta p {
    font-size: .86rem !important;
    line-height: 1.55 !important;
  }

  /* ── 4. TACTICAL CARDS ON MOBILE ── */
  .tactical-card {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
  .tactical-card-topbar {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }
  .tactical-telemetry-hud {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
}

/* ---- HERO: Sonar Compact ---- */
@media (max-width: 900px) {
  .sonar-compact-hero { padding: 72px 0 32px !important; min-height: auto !important; }
  .sonar-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .sonar-copy { max-width: 100% !important; }
  .sonar-copy h1 { font-size: clamp(2rem, 8vw, 3rem) !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; }
  .sonar-copy .sub { font-size: 0.92rem !important; line-height: 1.65 !important; }
  .sonar-console { min-height: 380px !important; padding: 16px !important; }
  .sonar-scope { width: 180px !important; height: 180px !important; }
  .depth-selector-wrap { padding: 6px !important; }
  .depth-nav-btns { grid-template-columns: repeat(2, 1fr) !important; gap: 4px !important; }
  .depth-btn { padding: 8px 4px !important; }
  .depth-btn-name { font-size: 0.7rem !important; }
  .sonar-cta-row { flex-direction: column !important; gap: 10px !important; }
  .sonar-proof { flex-wrap: wrap !important; gap: 8px !important; font-size: 0.55rem !important; }
}

/* ---- NAVIGATION ---- */
@media (max-width: 900px) {
  #nav .wrap { padding: 0 16px !important; }
  #nav .nav-links { display: none !important; }
  #nav .logo img { height: 30px !important; }
  #nav .nav-cta { display: none !important; }
  .mobile-toggle-btn { display: block !important; }
  .mobile-drawer { font-size: 1.05rem !important; padding-top: 80px !important; }
  .mobile-drawer a { padding: 14px 20px !important; }
}

/* ---- TICKER ---- */
@media (max-width: 900px) {
  .ticker { font-size: 0.7rem !important; padding: 8px 0 !important; }
  .ticker .track { animation-duration: 30s !important; }
}

/* ---- TRACKING / THREAT FEED ---- */
@media (max-width: 900px) {
  .tracking-grid { grid-template-columns: 1fr !important; }
  .tracking-map-wrap { min-height: 360px !important; height: 360px !important; }
  .vessel-panel {
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    padding: 16px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .vessel-row {
    padding: 11px 18px !important;
    font-size: inherit !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .vessel-detail {
    display: block !important;
    padding: 16px 18px !important;
    border-top: 1px solid var(--line) !important;
    box-sizing: border-box !important;
  }
  .vessel-preview-box {
    display: block !important;
    width: 100% !important;
    height: 110px !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
  }
  .cyber-spec-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    font-size: .56rem !important;
  }
  .threat-feed-card { padding: 14px !important; }
  .threat-meta { font-size: 0.78rem !important; }
}

/* ---- SMALL MOBILE ADJUSTMENTS (< 480px) ---- */
@media (max-width: 480px) {
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .tactical-stack-grid > *,
  .pipe-grid > *,
  .qm-grid-3 > *,
  .bento > * {
    flex: 0 0 88% !important;
    width: 88% !important;
    min-width: 255px !important;
  }
  .tactical-telemetry-hud {
    grid-template-columns: 1fr !important;
  }
}

/* ---- SCROLLBAR (mobile webkit) ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: rgba(168,213,6,0.3); border-radius: 3px; }