/* XYR HUB 4.6 — Mobile Safe Mode
   Stabilità e prestazioni prima degli effetti GPU sui dispositivi mobili. */

/* External SVG icons introduced in 4.6 behave like the original inline SVGs. */
.xyr-icon{object-fit:contain;display:block}
.network-node>img.xyr-icon{width:50px;height:50px}
.plan-card>img.xyr-icon{width:108px;height:108px;margin:6px 0 9px}
.presentation-caption>img.xyr-icon,.pdf-link>img.xyr-icon,.presentation-download>img.xyr-icon{width:20px;height:20px}

@media (max-width: 800px), (hover: none) and (pointer: coarse) {
  /* Avoid Android/Chromium compositor corruption caused by stacked blur/filter/mask layers. */
  .site-header,
  dialog::backdrop,
  .professional-dialog::backdrop,
  .professional-dialog.cyber-panel::backdrop,
  .collaboration-hero-orbit .synergy-label {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .site-header{background:#070a1d !important;}

  .cyber-theme .xyr-icon,
  .cyber-theme .xyr-icon *,
  .cyber-theme .panel-fx,
  .cyber-theme .orbit-link-glow,
  .cyber-theme .hero-backdrop,
  .cyber-theme .page-hero::before,
  .cyber-theme .page-hero::after {
    filter:none !important;
    mix-blend-mode:normal !important;
  }

  /* Decorative GPU layers are desktop-only. */
  .panel-fx,
  .panel-rim,
  .panel-brackets,
  .panel-scan,
  .hero-hud,
  .network-pulse { display:none !important; }

  .cyber-panel,
  .plan-card,
  .benefit,
  .presentation-callout,
  .professional-card,
  .collaboration-card {
    transform:none !important;
    translate:none !important;
    box-shadow:0 8px 24px rgba(0,0,0,.22), inset 0 0 0 1px rgba(88,229,238,.05) !important;
  }

  /* No expensive background masking on scrollable/animated areas. */
  .plans-viewport,
  .collaboration-hero-orbit {
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  /* Disable non-essential CSS motion on mobile. JS content changes still work. */
  .cyber-theme .reveal-pending,
  .cyber-theme .reveal-ready,
  .cyber-theme .page-reveal,
  .cyber-theme .hero-message,
  .cyber-theme .cyber-panel,
  .cyber-theme .xyr-icon,
  .cyber-theme .xyr-icon * {
    animation:none !important;
    transition:none !important;
  }
  .reveal-pending{opacity:1 !important;transform:none !important;}

  /* Render long below-fold regions only when approaching the viewport. */
  .benefits-section,
  .plans-section,
  .network-story,
  .together-section,
  .page-related,
  .sector-directory,
  .collaborations-section {
    content-visibility:auto;
    contain-intrinsic-size:1px 700px;
  }

  /* ---------- Ecosystems: robust single-card viewer ---------- */
  .plans-section{overflow:hidden !important;}
  .plans-carousel{
    --plan-width:auto !important;
    --plan-gap:0 !important;
    width:100% !important;
    margin:8px 0 0 !important;
    padding:0 48px !important;
  }
  .plans-viewport{
    margin:0 !important;
    padding:10px 0 18px !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    scroll-behavior:auto !important;
    touch-action:pan-y !important;
  }
  .plans-track{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    gap:0 !important;
    transform:none !important;
  }
  .plans-track .plan-card{
    display:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:300px !important;
    margin:0 !important;
    padding:24px 22px 28px !important;
    overflow:hidden !important;
    scroll-snap-align:none !important;
    border-radius:18px 6px 18px 6px !important;
    background:#0d122f !important;
  }
  .plans-track .plan-card.mobile-active{display:block !important;}
  .plans-track .plan-card>img.xyr-icon{
    width:96px !important;
    height:96px !important;
    margin:30px auto 18px !important;
  }
  .plans-track .plan-title{font-size:22px !important;text-align:center;display:block;}
  .plans-track .plan-summary{font-size:14px !important;text-align:center;display:block;margin-top:8px;}
  .plans-track .plan-number{position:absolute;left:20px;top:18px;}
  .plans-track .plan-arrow{right:19px;top:12px;}
  .carousel-arrow{
    top:50% !important;
    transform:translateY(-50%) !important;
    width:38px !important;
    height:58px !important;
    touch-action:manipulation !important;
  }
  .carousel-arrow-left{left:2px !important;}
  .carousel-arrow-right{right:2px !important;}
  .carousel-footer{margin:0 !important;padding:6px 0 0 !important;justify-content:center !important;}
  .carousel-footer>span{text-align:center;width:100%;}
  .carousel-pause{display:none !important;}

  /* Header and menus: keep them in one compositor layer, without blur. */
  .site-header{contain:layout paint;}
  .mobile-nav{background:#090d24 !important;}

  /* The presentation callout must never create duplicated painted layers. */
  .presentation-callout{overflow:hidden !important;isolation:isolate;}

  /* Collaboration orbit stays readable but stops continuous physical movement on phone. */
  .collaboration-hero-orbit{filter:none !important;}
  .orbit-link-flow{animation:none !important;}
}

@media (max-width: 420px) {
  .plans-carousel{padding-inline:42px !important;}
  .plans-track .plan-card{min-height:286px !important;padding-inline:18px !important;}
  .plans-track .plan-card>img.xyr-icon{width:86px !important;height:86px !important;}
  .plans-track .plan-title{font-size:20px !important;}
}