/*
 * ALLEANZA S.A.M. — viewport/compositor stability layer
 * Release: viewport-stability-20260812
 *
 * This file is intentionally loaded LAST. It fixes cross-browser viewport,
 * horizontal-overflow and mobile compositor edge cases without changing data,
 * content or the desktop visual language. Leaflet/map transforms are deliberately
 * excluded from transform resets because they are functional, not decorative.
 */

:root {
  --app-viewport-height: 100dvh;
  --app-viewport-width: 100vw;
  --app-viewport-offset-top: 0px;
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* Leaflet positions and sizes tiles/canvases itself. Never override those
   functional dimensions from a global responsive rule. */
.leaflet-container img,
.leaflet-container canvas {
  max-width: none !important;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

main,
section,
article,
.container,
.admin-main,
.admin-content,
.avu-wrap,
.avu-main {
  min-width: 0;
}

/* Never let generic text/content create a document-wide horizontal scroller. */
pre,
code,
.avu-prose,
.avu-response-row,
.avu-adm-response-row,
.avu-adm-email,
.cell-title {
  overflow-wrap: anywhere;
}

/* Keep intentional wide data tables locally scrollable instead of widening the
   page itself. */
.table-wrap,
.admin-table-wrap,
.avu-adm-table,
[data-horizontal-scroll] {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px), (pointer: coarse) {
  html,
  body {
    min-height: 100%;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    background-attachment: scroll !important;
  }

  body {
    min-height: var(--app-viewport-height, 100dvh);
    perspective: none !important;
    transform-style: flat !important;
    will-change: auto !important;
  }


  /* A viewport-sized CSS filter is particularly expensive in WebKit. The same
     dark cinematic treatment is preserved with a plain overlay instead. */
  .env-backdrop {
    filter: none !important;
    -webkit-filter: none !important;
    background-color: #06120d !important;
    will-change: auto !important;
  }
  .env-backdrop::after {
    background: linear-gradient(180deg, rgba(3, 10, 8, .76), rgba(3, 10, 8, .9)) !important;
  }

  /* Large page-level surfaces are the expensive layers implicated in iOS
     blank/black repaint tiles after repeated toolbar-resizing scrolls. Flatten
     only those surfaces. Do NOT target Leaflet panes/tiles or map descendants. */
  main,
  .home-main,
  .monster-container,
  .monster-hero,
  .monster-hero-copy,
  .hero2-card,
  .monitoring-panel,
  .monster-block,
  .partner-chip,
  .cc-panel,
  .panel,
  .avu-main,
  .avu-wrap,
  .avu-section,
  .avu-card,
  .avu-case,
  .admin-shell,
  .admin-main,
  .admin-content,
  .form-card,
  .site-footer {
    perspective: none !important;
    transform-style: flat !important;
    will-change: auto !important;
  }

  /* The decorative 3D/hover transforms are visual only. Keeping them on large
     mobile surfaces causes unnecessary compositor promotion during scroll. */
  .monster-hero,
  .monster-hero-copy,
  .hero2-card,
  .monitoring-panel,
  .monster-block,
  .partner-chip,
  .premium-tilt {
    transform: none !important;
  }

  .monster-hero::before,
  .monster-hero::after,
  body::before,
  body::after,
  .admin-content::before,
  .pm-aurora,
  #pm-particles,
  canvas#pm-particles,
  .env-fog,
  .env-particles,
  #lux-veil,
  #lux-loader,
  .lux-rays,
  .lux-scroll-cue {
    display: none !important;
    content: none !important;
    animation: none !important;
  }

  /* If an old animation/observer is restored from bfcache halfway through its
     entrance state, real content must still be readable. */
  .reveal,
  .reveal.visible,
  .lux-reveal,
  .lux-stagger,
  .lux-stagger > *,
  [data-reveal] {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    animation: none !important;
    transition-property: color, background-color, border-color, box-shadow !important;
    will-change: auto !important;
  }

  .reveal,
  .reveal.visible,
  .lux-reveal,
  .lux-stagger,
  .lux-stagger > * {
    transform: none !important;
  }

  /* Fixed/sticky chrome remains functional, but without blur/3D promotion. */
  .site-header,
  .site-header.scrolled,
  .site-header.lux-hidden,
  .admin-topbar,
  .avu-submitbar,
  .bottom-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    perspective: none !important;
    transform-style: flat !important;
    will-change: auto !important;
  }

  /* Remaining full-screen pseudo/overlay layers found in the older CSS stack.
     Keep the look, but do not leave filtered/fixed compositor surfaces alive on
     touch devices. */
  .admin-login {
    position: relative;
    isolation: isolate;
    background-color: #020807 !important;
  }

  .admin-login::before {
    position: absolute !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: .24 !important;
    will-change: auto !important;
  }

  .admin-content::before,
  .mobile-menu.open::after {
    display: none !important;
    content: none !important;
    animation: none !important;
  }

  #article-lightbox img {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* Dynamic iOS browser bars and virtual keyboards change the visual viewport
     without changing 100vh consistently. Bound full-screen UI to the measured
     visualViewport values published by viewport-stability.js. */
  body .mobile-menu {
    transform: none !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: min(420px, calc(var(--app-viewport-width, 100vw) - 16px)) !important;
    height: calc(var(--app-viewport-height, 100dvh) - 16px) !important;
    max-width: min(420px, calc(var(--app-viewport-width, 100vw) - 16px)) !important;
    max-height: calc(var(--app-viewport-height, 100dvh) - 16px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(.75rem, calc(.75rem + var(--app-safe-bottom))) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .14s ease !important;
    will-change: auto !important;
  }

  body .mobile-menu.open {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .avu-submission-modal,
  .modal,
  .lightbox,
  .lb-overlay {
    max-width: var(--app-viewport-width, 100vw) !important;
    max-height: var(--app-viewport-height, 100dvh) !important;
  }

  .avu-submission-modal-card,
  .modal-card,
  .modal-panel,
  .gsearch-box,
  .monitoring-modal-card,
  .mi-modal-card {
    max-width: calc(var(--app-viewport-width, 100vw) - 16px) !important;
    max-height: calc(var(--app-viewport-height, 100dvh) - 16px) !important;
    overflow: auto !important;
  }

  .admin-sidebar {
    max-height: calc(var(--app-viewport-height, 100dvh) - 16px) !important;
    padding-bottom: max(.75rem, calc(.75rem + var(--app-safe-bottom))) !important;
    will-change: auto !important;
  }

  .avu-submitbar,
  .site-footer,
  footer {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), .5rem);
  }

  /* Flex/grid children otherwise keep intrinsic widths and are a common source
     of one-pixel-to-hundreds-pixel overflow on Android Chrome and iOS Safari. */
  .container > *,
  .admin-content > *,
  .avu-section > *,
  .avu-identity-fields > *,
  .form-grid > *,
  .form-row > *,
  .dashboard-grid > * {
    min-width: 0 !important;
  }

  /* Keep media in document flow; never let intrinsic dimensions widen it. */
  img,
  picture,
  video,
  svg,
  iframe {
    max-width: 100% !important;
  }

  .avu-media video,
  .avu-media img,
  .gallery-tile img,
  .pcard-media img,
  .news-card img {
    width: 100% !important;
    object-fit: cover;
  }

  /* Inputs must stay readable when iOS zoom/text-size changes. */
  input,
  select,
  textarea {
    min-width: 0 !important;
  }

  /* Localized CTA text is longer in some languages. At tablet widths the
     governance card gives this control less horizontal room, so wrapping is
     safer than clipping the label. */
  .monster-head .btn {
    white-space: normal !important;
    text-align: center;
    line-height: 1.25;
    height: auto !important;
  }

  /* Explorer's filter overlay used translateX(-100%) while closed. Keep the
     same open/closed UX, but move the small panel with layout positioning so
     it never becomes a large GPU-transformed scroll layer in WebKit. */
  body[data-page="explorer"] .exp-filters {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    position: absolute !important;
    left: -110vw !important;
    top: 86px !important;
    width: min(92vw, 320px) !important;
    max-width: calc(var(--app-viewport-width, 100vw) - 24px) !important;
    max-height: calc(var(--app-viewport-height, 100dvh) - 110px) !important;
    margin: 0 !important;
  }
  body[data-page="explorer"] .exp-filters.is-open {
    left: 12px !important;
    transform: none !important;
  }
}


/* `overflow-x:hidden` is the legacy fallback. `clip` avoids creating a body
   scrolling container in modern Safari/Chrome, which keeps sticky/fixed viewport
   calculations tied to the real document scroller. */
@supports (overflow: clip) {
  @media (max-width: 900px), (pointer: coarse) {
    html,
    body {
      overflow-x: clip !important;
    }
  }
}


@media (max-width: 980px) {
  /* Admin drawer is transform-free on phone/tablet breakpoints. Moving a fixed
     full-height layer with translateX is another common WebKit compositor trap. */
  .admin-sidebar,
  .exp-sidebar {
    transform: none !important;
    left: -110vw !important;
    transition: none !important;
    will-change: auto !important;
    max-height: calc(var(--app-viewport-height, 100dvh) - 16px) !important;
  }
  .admin-sidebar.open,
  .admin-sidebar.is-open {
    transform: none !important;
    left: 9px !important;
  }
  .exp-sidebar.open {
    transform: none !important;
    left: 0 !important;
  }

  body[data-page="explorer"] .exp-shell {
    height: var(--app-viewport-height, 100dvh) !important;
    min-height: var(--app-viewport-height, 100dvh) !important;
  }
}

@media (max-width: 430px) {
  .avu-identity-fields,
  .admin-body .form-grid,
  .admin-body .form-row,
  .avu-adm-submission-meta,
  .avu-submission-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .avu-participant-identity,
  .avu-question,
  .avu-section,
  .form-card {
    max-width: 100% !important;
  }
}

/* Landscape phones get very little vertical room once browser chrome is open. */
@media (max-height: 520px) and (pointer: coarse) {
  .mobile-menu,
  .avu-submission-modal-card,
  .admin-sidebar {
    max-height: calc(var(--app-viewport-height, 100dvh) - 8px) !important;
  }
}

@media (max-width: 760px) {
  /* iOS Safari zooms focused form controls below 16px, changing the visual
     viewport mid-form and historically leaving fixed/sticky layers displaced. */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .cookie-banner {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}

/* Native file controls have a browser-defined intrinsic width. Cap that width
   so two-column and tablet forms cannot widen the document. */
input[type="file"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  /* banca-dati uses 100%-wide CTA links on phones. The original link remained
     content-box, so its horizontal padding added a few pixels beyond the card. */
  .hub-card .hub-cta {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}