/* AXION Portfolio V2 — mobile rendering stability
   Loaded after axion.css and mobile-v2.css.
   Mobile browsers, especially WebKit, can drop large composited surfaces when a long
   document contains dozens of backdrop-filter / mask / perspective layers. Keep the
   glass look on navigation, but use stable painted surfaces for document content. */

@media (max-width:900px){
  /* Do not create a compositor layer for every content card/media block. */
  .card.glass-card,
  .hero-media.glass-hero,
  .pillar.glass-pill,
  .stat.glass-stat,
  .footer.glass-footer{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    transform:none!important;
    will-change:auto!important;
  }

  /* Preserve the visual hierarchy with opaque theme-aware surfaces. */
  .card.glass-card{background:var(--navy-panel)!important}
  .card.glass-card.ghost{background:var(--navy-panel)!important}
  .hero-media.glass-hero{background:var(--navy-panel)!important}
  .pillar.glass-pill,
  .stat.glass-stat{background:var(--navy-panel)!important}
  .footer.glass-footer{background:var(--navy-deep)!important}

  /* Decorative refraction layers are expensive on long mobile documents. */
  .card.glass-card::before,
  .card.glass-card::after,
  .hero-media.glass-hero::before,
  .hero-media.glass-hero::after,
  .glass::before,
  .glass::after,
  .liquid-orb,
  body::after{
    display:none!important;
  }

  /* Eliminate other inherited 3D/compositor triggers below the tablet breakpoint. */
  .hub-grid{perspective:none!important}
  .hub-card.glass-card,
  .bar,
  .bar.b1,
  .bar.b2,
  .bar.b3{
    transform:none!important;
  }
  .angular-mask{clip-path:none!important}

  /* Image filters are applied to dozens of large surfaces in the legacy theme. */
  .hero-media img,
  .hub-card img{
    filter:none!important;
  }

  /* A fully generated locale page must always remain paintable and visible. */
  html[lang="en"] body,
  html[lang="ar"] body,
  html[lang="es"] body,
  html[lang="zh"] body,
  .page-wrap,
  .section{
    visibility:visible!important;
    opacity:1!important;
  }
}

/* Extra guard for WebKit touch browsers without changing desktop rendering. */
@supports (-webkit-touch-callout:none){
  @media (max-width:900px){
    .card.glass-card,
    .hero-media.glass-hero,
    .pillar.glass-pill,
    .stat.glass-stat{
      -webkit-backdrop-filter:none!important;
      backdrop-filter:none!important;
    }
  }
}