/* 22Media Premium Pro v6.70 — Urdu mobile blank-screen hard fix
 * Scoped to the Urdu edition on phones/tablets only. Desktop and English layouts are unchanged.
 */

@media (max-width:980px){
  /* Keep the Urdu document anchored inside the viewport. Older stacked theme rules can
     otherwise leave RTL content clipped/off-canvas on some mobile browsers. */
  html[dir="rtl"],
  html[lang="ur-PK"]{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  html[dir="rtl"] body.m22-lang-ur,
  html[lang="ur-PK"] body.m22-lang-ur{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow-x:hidden!important;
    visibility:visible!important;
    opacity:1!important;
  }

  /* Never let the home/main surface inherit a hidden, zero-opacity or translated state. */
  body.m22-lang-ur #main-content,
  body.m22-lang-ur .m22-main,
  body.m22-lang-ur .m22-home,
  body.m22-lang-ur .m22-home-v6,
  body.m22-lang-ur .m22-home-v7{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
  }

  /* v6.3 reveal animation can occasionally remain at opacity:0 after an RTL/mobile
     language navigation or browser page-cache restore. Urdu mobile must remain readable
     even if IntersectionObserver does not fire. */
  body.m22-lang-ur .m22-home-v6 > section.m22-v63-reveal,
  body.m22-lang-ur .m22-home-v6 > section.m22-v63-reveal:not(.is-visible),
  body.m22-lang-ur .m22-home-v7 > section.m22-v63-reveal,
  body.m22-lang-ur .m22-comments-shell.m22-v63-reveal,
  body.m22-lang-ur .m22-related.m22-v63-reveal,
  body.m22-lang-ur .m22-article-image.m22-v63-reveal{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    transition:none!important;
  }

  /* Main containers should not be pushed out of the viewport by a wide RTL child. */
  body.m22-lang-ur .m22-container,
  body.m22-lang-ur .m22-home > *,
  body.m22-lang-ur .m22-section,
  body.m22-lang-ur .m22-newsroom-pulse,
  body.m22-lang-ur .m22-pulse-grid,
  body.m22-lang-ur .m22-section-grid,
  body.m22-lang-ur .m22-article,
  body.m22-lang-ur .m22-article-main{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Closed drawer/backdrop must stay genuinely off-canvas. This also protects against
     stale classes restored by mobile back/forward cache after changing language. */
  body.m22-lang-ur .m22-header-v66 .m22-nav-wrap:not(.is-open){
    left:auto!important;
    right:0!important;
    transform:translate3d(104%,0,0)!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.m22-lang-ur .m22-header-v66 .m22-nav-wrap.is-open{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.m22-lang-ur .m22-header-v66 .m22-nav-wrap:not(.is-open) + .m22-nav-backdrop{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Search overlay is hidden unless explicitly opened; prevents an invisible/full-screen
     layer from surviving a language switch on mobile Safari/Chromium WebViews. */
  body.m22-lang-ur .m22-search-pro:not(.is-open){
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* RTL horizontal rails remain scrollable without changing the page's own width. */
  body.m22-lang-ur .m22-breaking,
  body.m22-lang-ur .m22-trending-strip,
  body.m22-lang-ur .m22-trending-items{
    max-width:100%!important;
  }
}