/* ========================================================================== 
   ALLEANZA — final responsive hardening (2026-08-09)
   Loaded LAST on every HTML shell. This file intentionally contains only
   layout/visibility invariants; it does not change business content or APIs.
   ========================================================================== */

/* Desktop navigation: JS owns the open state. Older styles also used
   :hover/:focus-within, which could leave two panels visually open at once. */
header .nav-group .nav-dropdown {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
header .nav-group.open .nav-dropdown {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Width safety shared by desktop/tablet/mobile. */
html,
body {
  max-width: 100%;
}
main,
section,
.container,
.admin-content,
.admin-shell,
.exp-shell {
  min-width: 0;
}
img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
}
video,
iframe {
  height: auto;
}
.table-wrap,
.admin-table-wrap,
.avu-adm-table,
.data-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* The real phone layout. Keep the header + hamburger as the navigation truth;
   the old fixed bottom bar permanently covered content and Safari controls. */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  body {
    padding-bottom: 0 !important;
  }

  body > .bottom-nav,
  .bottom-nav,
  .exp-bottom-nav {
    display: none !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  /* iOS/Safari stability: visible page content must never depend on an
     IntersectionObserver/GSAP class transition having fired. */
  .reveal,
  .reveal-left,
  .reveal-right,
  .lux-reveal,
  [data-gsap-fade],
  [data-gsap-stagger] > *,
  .hero2-brand,
  .hero2-mission,
  .hero2-accred > *,
  .hero2-title span,
  .hero2-sub,
  .hero2-motto,
  .hero2-cta .hero2-cta-btn,
  .hero2-metrics .hero2-metric,
  .hero2-right,
  .monster-hero,
  .monster-hero-copy,
  .monster-monitor,
  .monster-section,
  .monster-block,
  body[data-page="home"] .home-main {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .site-header,
  .site-header.lux-hidden {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Heavy fixed compositing layers add no value on a phone and were a likely
     source of blank/black Safari frames while scrolling. */
  .pm-aurora,
  #pm-particles {
    display: none !important;
  }
  body[data-page="home"]::after {
    animation: none !important;
    transform: none !important;
  }

  /* Use stable mobile viewport units and prevent children from widening the
     document. */
  main,
  section,
  .monster-section,
  .cc-panel,
  .panel,
  .form-card,
  .contact-form-wrap,
  .obs-form-wrap,
  .pcard,
  .doc-card,
  .res-card,
  .bear-card,
  .gallery-tile {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
  }

  .monster-container,
  .container {
    min-width: 0 !important;
    box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  li,
  label,
  td,
  th,
  .pcard-title,
  .feed-title,
  .alert-title,
  .bear-name,
  .bear-id {
    overflow-wrap: anywhere;
  }

  input,
  select,
  textarea,
  button,
  .btn,
  .avu-btn {
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }
  input,
  select,
  textarea {
    font-size: 16px !important; /* prevents iOS auto-zoom */
  }

  .toolbar,
  .row-actions,
  .admin-topbar-tools,
  .home-hero-actions,
  .social-row {
    flex-wrap: wrap !important;
  }
  .row-actions > .btn,
  .toolbar .btn,
  .admin-topbar-tools .btn {
    min-height: 44px;
  }

  /* Common desktop grids that otherwise preserve a wide minimum column. */
  .contact-grid,
  .obs-grid,
  .home-ops-grid,
  .monster-intel-grid,
  .removed-home-grid,
  .partner-command-grid,
  .featured-grid,
  .news-card-grid,
  .form-grid,
  .filter-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cinema-gallery {
    grid-template-columns: 1fr !important;
    grid-auto-rows: minmax(150px, auto) !important;
  }
  .cinema-shot:first-child {
    grid-row: auto !important;
  }

  /* Maps remain useful but must not force a desktop-sized canvas. */
  #home-map,
  #map-explorer,
  #map-region,
  #map-project,
  #map-propose,
  #obs-map,
  #modal-mini-map,
  #map-admin {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 300px !important;
  }

  .site-footer {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Academy public: keep long content/media/form controls in the viewport. */
  .avu-page,
  .avu-shell,
  .avu-card,
  .avu-case,
  .avu-question,
  .avu-question-card,
  .avu-video-wrap,
  .avu-case-media,
  .avu-submit-bar {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .avu-video-wrap video,
  .avu-case-media video {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
  .avu-submit-bar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Admin shell safety. Detailed Academy selector rules live in
     academy-admin.css, while this catches generic wide toolbars/tables. */
  .admin-body .admin-content,
  .admin-body .form-card,
  .admin-body .field,
  .admin-body .toolbar,
  .admin-body .row-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .admin-body .form-grid,
  .admin-body .form-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .admin-body .table-wrap,
  .admin-body .admin-table-wrap,
  .admin-body .avu-adm-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Disable fragile ambient/3D compositing on touch-first devices even when a
   large tablet reports more than 760 CSS pixels. */
@media (pointer: coarse) {
  .pm-aurora,
  #pm-particles {
    display: none !important;
  }
  .premium-tilt,
  .monster-hero-copy,
  .monitoring-panel,
  .monster-block,
  .partner-chip {
    transform: none !important;
  }
}

/* ========================================================================== 
   MOBILE SAFARI STABILITY PASS — 2026-08-10
   Real content must remain in normal document flow and visible regardless of
   observer timing, bfcache restoration, dynamic viewport changes or GPU state.
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) {
  /* iOS Safari compositor hardening: fixed pseudo-layers, fixed background
     attachment and blurred sticky chrome can produce black/empty tiles during
     fast scroll or dynamic toolbar resize. Keep the visual palette, but render
     it from the normal page background instead of extra GPU layers. */
  html,
  body,
  main {
    background-attachment: scroll !important;
  }
  /* iOS can repaint translucent descendant layers as black tiles while the
     dynamic browser chrome changes viewport height. Mobile keeps the same
     surfaces/gradients but renders them without backdrop compositing. */
  body * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body::before,
  body::after {
    display: none !important;
    content: none !important;
    animation: none !important;
    transform: none !important;
  }
  .site-header,
  .site-header.lux-hidden,
  .admin-body .admin-topbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .site-header,
  .site-header.lux-hidden {
    background: rgba(3, 12, 10, .98) !important;
  }

  .lux-reveal,
  .lux-stagger,
  .lux-stagger > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  #lux-veil,
  #lux-loader,
  .lux-rays,
  .lux-scroll-cue,
  .env-fog,
  .env-particles,
  canvas#pm-particles {
    display: none !important;
  }

  /* Fixed photographic/ambient layers are visually useful but expensive on
     iOS. Keep the home image static and avoid scroll-time compositing churn. */
  .env-backdrop {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: max(100svh, 760px) !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  body[data-page="home"]::after {
    display: none !important;
  }

  /* Never reserve giant invisible spaces between home sections. */
  body[data-page="home"] .monster-section,
  body[data-page="home"] .cc-panel,
  body[data-page="home"] .home-ops,
  body[data-page="home"] .home-intelligence,
  body[data-page="home"] .home-bottom-row,
  body[data-page="home"] .featured-grid,
  body[data-page="home"] .news-card-grid,
  body[data-page="home"] .partner-command-grid,
  body[data-page="home"] .mini-card-stack,
  body[data-page="home"] .cinema-gallery {
    min-height: 0 !important;
    height: auto !important;
  }

  body[data-page="home"] .monster-section {
    margin-block: clamp(0.8rem, 3vw, 1.35rem) !important;
  }

  /* Mobile cards/panels stay inside the viewport and don't form accidental
     horizontal scroll containers. */
  .cc-panel,
  .monster-block,
  .monitoring-panel,
  .pcard,
  .mini-resource-card,
  .news-mini-card,
  .activity-row,
  .avu-card,
  .avu-case,
  .monitoring-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Generic admin ergonomics: touch targets, one-column editors and action
     wrapping. Horizontal scrolling is kept only inside actual data tables. */
  .admin-body .admin-content {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: clamp(.75rem, 3.5vw, 1rem) !important;
  }
  .admin-body .btn,
  .admin-body button,
  .admin-body input,
  .admin-body select,
  .admin-body textarea {
    min-height: 44px;
  }
  .admin-body .row-actions,
  .admin-body .toolbar,
  .admin-body .admin-topbar-tools {
    gap: .5rem !important;
    flex-wrap: wrap !important;
  }
  .admin-body .row-actions > *,
  .admin-body .toolbar > * {
    max-width: 100% !important;
  }

  /* Phone admin behaves like a real touch workspace: stable topbar, bounded
     drawer, full-width content and modals that never escape the viewport. */
  .admin-body .admin-topbar {
    width: 100% !important;
    max-width: 100% !important;
    padding: .7rem .75rem !important;
    gap: .55rem !important;
    background: #07140f !important;
  }
  .admin-body .admin-topbar > *,
  .admin-body .admin-topbar-tools {
    min-width: 0 !important;
  }
  .admin-body .admin-topbar-tools {
    max-width: 100% !important;
  }
  .admin-body .admin-sidebar {
    width: min(290px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
    height: calc(100dvh - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  .admin-body .modal {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 86px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .admin-body .notif-pop,
  .admin-body .toast-stack {
    max-width: calc(100vw - 20px) !important;
  }
  .admin-body .toast-stack {
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 560px) {
  .admin-body .row-actions > .btn,
  .admin-body .toolbar > .btn {
    flex: 1 1 auto;
  }
}