/* NASA ASCEND mobile layout stabilization
   Added during 2026-06-17 mobile visual audit.
   Purpose: prevent horizontal overflow, oversized HUD/navigation blocks, cramped cards,
   broken media frames, and unreadable tables on phone-width screens.
*/

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
iframe,
svg {
  max-width: 100%;
}

iframe,
video {
  display: block;
}

.table-responsive,
.code-container,
pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 991.98px) {
  .hud-top-bar {
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    justify-content: center;
    text-align: center;
    font-size: 0.58rem;
    line-height: 1.35;
    padding: 0.4rem 0.65rem;
    letter-spacing: 1px;
  }

  .nasa-header {
    min-height: auto !important;
    padding: 0.9rem 0 !important;
  }

  .nasa-header .row,
  .nasa-header .d-flex {
    gap: 0.75rem;
  }

  .header-logo {
    height: 48px !important;
    margin-right: 12px !important;
  }

  .nasa-logo {
    font-size: clamp(1.15rem, 6vw, 1.6rem) !important;
    letter-spacing: 2px !important;
    line-height: 1.1;
  }

  .subtitle-text {
    font-size: 0.66rem !important;
    letter-spacing: 1px;
  }

  .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    max-height: min(72vh, 560px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nasa-nav .container-fluid,
  .nasa-nav .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .navbar-toggler {
    margin: 0.45rem 0;
    border-color: rgba(255,255,255,0.35) !important;
    background: rgba(255,255,255,0.08);
  }

  .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(1.8);
  }

  .nav-item {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .nav-link,
  .navbar-nav .nav-link {
    min-height: 44px;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0.8rem 1rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 1.2px !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 2.5rem !important;
    padding-bottom: 3rem !important;
  }

  .hero-content {
    padding: 1rem 0.25rem !important;
    text-align: center !important;
  }

  .hero-title,
  .section-title {
    font-size: clamp(1.75rem, 9vw, 2.5rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 1px !important;
    overflow-wrap: anywhere;
  }

  .hero-subtitle,
  .lead {
    font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
  }

  .mission-monitor,
  .nasa-card,
  .resource-card,
  .gallery-card,
  .eng-card {
    border-radius: 12px !important;
    overflow: hidden;
  }

  .mission-monitor.p-4,
  .mission-monitor.p-5,
  .nasa-card.p-4,
  .eng-card {
    padding: 1rem !important;
  }

  .mission-overview-panel .row.g-4,
  .live-feed-row,
  .matrix-grid,
  .source-grid,
  .eng-grid {
    gap: 0.75rem !important;
  }

  .matrix-grid,
  .source-grid,
  .eng-grid,
  .cesium-flight-stats,
  .cesium-live-readout {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .video-container,
  .resource-card-header,
  .gallery-card img {
    min-height: 190px;
  }

  .video-container iframe,
  .video-container video {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
  }

  #aprs-map,
  .cesium-flight-globe {
    height: 58vh !important;
    min-height: 280px !important;
    max-height: 440px !important;
  }

  #altitude-chart,
  canvas[id$="Chart"] {
    min-height: 220px !important;
  }

  .telemetry-stream {
    padding: 0.45rem 0;
  }

  .stream-content {
    font-size: 0.7rem !important;
    animation-duration: 45s !important;
  }

  .stream-item {
    padding: 0 18px !important;
  }

  .scroll-indicator {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .py-5 {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  .my-5 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .d-flex.gap-3,
  .d-flex.gap-4,
  .text-center.d-flex {
    gap: 0.65rem !important;
  }

  .btn,
  .nasa-btn,
  .btn-outline-light,
  .btn-header {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  .hero .btn,
  .application-form .btn,
  .mission-monitor .btn-lg {
    font-size: 0.85rem !important;
    padding: 0.75rem 0.9rem !important;
  }

  .hud-label,
  .nasa-section-badge,
  .eng-label {
    font-size: 0.65rem !important;
    letter-spacing: 1.1px !important;
  }

  .matrix-grid,
  .source-grid,
  .eng-grid,
  .cesium-flight-stats,
  .cesium-live-readout {
    grid-template-columns: 1fr !important;
  }

  .stat-block,
  .mission-overview-panel .col-4,
  .mission-overview-panel .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .stat-number,
  .eng-kpi {
    font-size: 1.55rem !important;
  }

  .table-responsive {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
  }

  .table {
    min-width: 680px;
  }

  .nasa-footer .row,
  .nasa-footer .d-flex {
    text-align: center;
    justify-content: center !important;
  }

  .social-icon {
    margin: 0.35rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}