/* 22Media Premium Pro v6.62 — Clean Urdu typography system
   Replaces the slanted Nastaliq-heavy UI with a crisp Naskh newsroom face,
   fixes headline collisions/cropping, and normalizes Urdu spacing across cards. */

:root{
  --m22-urdu-editorial:"Noto Naskh Arabic","Noto Sans Arabic",Tahoma,Arial,serif;
  --m22-urdu-reading:"Noto Naskh Arabic","Noto Sans Arabic",Tahoma,Arial,serif;
  --m22-urdu-ui:"Noto Sans Arabic","Noto Naskh Arabic",Tahoma,Arial,sans-serif;
}

html[lang="ur-PK"] body.m22-lang-ur{
  font-family:var(--m22-urdu-ui)!important;
  font-size:16px;
  line-height:1.72;
  font-style:normal!important;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Urdu text should feel upright, editorial and spacious — never faux italic. */
body.m22-lang-ur h1,
body.m22-lang-ur h2,
body.m22-lang-ur h3,
body.m22-lang-ur h4,
body.m22-lang-ur h5,
body.m22-lang-ur h6,
body.m22-lang-ur p,
body.m22-lang-ur .m22-card-body,
body.m22-lang-ur .m22-feature-card,
body.m22-lang-ur .m22-pulse-feed,
body.m22-lang-ur .m22-hero-copy,
body.m22-lang-ur .m22-hero-mini-copy,
body.m22-lang-ur .m22-trending-items,
body.m22-lang-ur .m22-mostread-panel,
body.m22-lang-ur .m22-ranked-list,
body.m22-lang-ur .m22-article-masthead-v645,
body.m22-lang-ur .m22-article-content-v645{
  font-style:normal!important;
  letter-spacing:0!important;
}

body.m22-lang-ur h1,
body.m22-lang-ur h2,
body.m22-lang-ur h3,
body.m22-lang-ur h4,
body.m22-lang-ur .m22-hero-copy h1,
body.m22-lang-ur .m22-hero-mini-copy h3,
body.m22-lang-ur .m22-feature-card h3,
body.m22-lang-ur .m22-card-body h3,
body.m22-lang-ur .m22-pulse-feed h3,
body.m22-lang-ur .m22-only22-copy h3,
body.m22-lang-ur .m22-hub-card h3,
body.m22-lang-ur .m22-section-head h2,
body.m22-lang-ur .m22-trending-items a span,
body.m22-lang-ur .m22-mostread-panel>a>span,
body.m22-lang-ur .m22-ranked-list a span,
body.m22-lang-ur .m22-weather-head h2,
body.m22-lang-ur .m22-article-masthead-v645 h1,
body.m22-lang-ur .m22-article-content-v645,
body.m22-lang-ur .m22-article-content-v645 h2,
body.m22-lang-ur .m22-article-content-v645 h3{
  font-family:var(--m22-urdu-editorial)!important;
  font-style:normal!important;
  letter-spacing:0!important;
  word-spacing:0!important;
}

/* Compact interface text stays clear and modern. */
body.m22-lang-ur .m22-topbar,
body.m22-lang-ur .m22-nav-list,
body.m22-lang-ur .m22-discovery-inner,
body.m22-lang-ur .m22-meta,
body.m22-lang-ur .m22-badge,
body.m22-lang-ur .m22-kicker,
body.m22-lang-ur .m22-eyebrow,
body.m22-lang-ur .m22-panel-head,
body.m22-lang-ur .m22-weather-grid dl,
body.m22-lang-ur .m22-article-kicker-v645,
body.m22-lang-ur .m22-article-meta-v645,
body.m22-lang-ur .m22-article-console-v645,
body.m22-lang-ur .m22-article-reading-head-v645,
body.m22-lang-ur .m22-article-standards-v645,
body.m22-lang-ur button,
body.m22-lang-ur input,
body.m22-lang-ur textarea,
body.m22-lang-ur select{
  font-family:var(--m22-urdu-ui)!important;
  font-style:normal!important;
  letter-spacing:0!important;
}

/* Article masthead — v6.45 markup needs an explicit Urdu override.
   This is the main fix for the overlapping/colliding title shown in screenshots. */
body.m22-lang-ur.single-post .m22-article-masthead-v645{
  direction:rtl!important;
  text-align:right!important;
}
body.m22-lang-ur.single-post .m22-article-masthead-v645 h1{
  max-width:1100px!important;
  margin:20px 0 14px!important;
  padding-block:.08em .12em!important;
  font-size:clamp(38px,4.25vw,62px)!important;
  line-height:1.34!important;
  font-weight:700!important;
  text-align:right!important;
  text-wrap:pretty;
  overflow-wrap:break-word;
  word-break:normal!important;
  hyphens:none!important;
}
body.m22-lang-ur.single-post .m22-article-deck-v645{
  max-width:960px!important;
  margin:8px 0 0!important;
  font-family:var(--m22-urdu-ui)!important;
  font-size:19px!important;
  line-height:1.9!important;
  font-weight:500!important;
  font-style:normal!important;
  text-align:right!important;
  color:#64758e;
}
body.m22-lang-ur.single-post .m22-article-publisher-v645 em{
  font-style:normal!important;
  font-family:var(--m22-urdu-ui)!important;
}

/* Article body — cleaner Naskh reading rhythm, no exaggerated Nastaliq gaps. */
body.m22-lang-ur.single-post .m22-article-content,
body.m22-lang-ur.single-post .m22-article-content-v645{
  direction:rtl!important;
  text-align:right!important;
  font-family:var(--m22-urdu-reading)!important;
  font-size:20px!important;
  font-weight:500!important;
  line-height:2!important;
  letter-spacing:0!important;
  word-spacing:0!important;
}
body.m22-lang-ur.single-post .m22-article-content p,
body.m22-lang-ur.single-post .m22-article-content li,
body.m22-lang-ur.single-post .m22-article-content-v645 p,
body.m22-lang-ur.single-post .m22-article-content-v645 li{
  line-height:2!important;
  margin-bottom:1.12em!important;
}
body.m22-lang-ur.single-post .m22-article-content h2,
body.m22-lang-ur.single-post .m22-article-content-v645 h2{
  font-size:30px!important;
  line-height:1.55!important;
  font-weight:700!important;
  margin-top:36px!important;
  margin-bottom:14px!important;
}
body.m22-lang-ur.single-post .m22-article-content h3,
body.m22-lang-ur.single-post .m22-article-content-v645 h3{
  font-size:24px!important;
  line-height:1.6!important;
  font-weight:700!important;
}

/* Hero and section headings. */
body.m22-lang-ur .m22-hero-copy h1{
  font-size:clamp(31px,3.5vw,50px)!important;
  line-height:1.42!important;
  font-weight:700!important;
  padding-block:.04em .1em!important;
}
body.m22-lang-ur .m22-hero-mini-copy h3,
body.m22-lang-ur .m22-feature-card h3{
  line-height:1.55!important;
  font-weight:700!important;
}
body.m22-lang-ur .m22-section-head h2{
  line-height:1.45!important;
  font-weight:700!important;
  padding-block:.08em!important;
}
body.m22-lang-ur .m22-card-body h3{
  font-size:19px!important;
  line-height:1.58!important;
  font-weight:700!important;
  margin-block:.22em .35em!important;
}
body.m22-lang-ur .m22-pulse-feed h3{
  font-size:17px!important;
  line-height:1.58!important;
  font-weight:700!important;
  margin-block:4px 7px!important;
}

/* Trending — stable card height, balanced lines, no compressed/cut Nastaliq glyphs. */
body.m22-lang-ur .m22-trending-strip{direction:rtl!important}
body.m22-lang-ur .m22-trending-items a{
  direction:rtl!important;
  text-align:right!important;
  align-items:center!important;
  min-height:104px!important;
  height:auto!important;
  padding:14px 16px!important;
}
body.m22-lang-ur .m22-trending-items a span{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:4!important;
  overflow:hidden!important;
  font-size:16px!important;
  font-weight:650!important;
  line-height:1.6!important;
  padding-block:1px!important;
}
body.m22-lang-ur .m22-trending-title{
  font-family:var(--m22-urdu-ui)!important;
  font-size:13px!important;
  line-height:1.45!important;
  white-space:nowrap;
}

/* Most-read / ranked panels. */
body.m22-lang-ur .m22-mostread-panel{direction:rtl!important;text-align:right!important}
body.m22-lang-ur .m22-mostread-panel>a{
  grid-template-columns:minmax(0,1fr) 34px!important;
  gap:12px!important;
  min-height:74px!important;
  height:auto!important;
  padding:11px 0!important;
  align-items:center!important;
}
body.m22-lang-ur .m22-mostread-panel>a>span{
  grid-column:1!important;
  min-width:0!important;
  font-size:16px!important;
  font-weight:650!important;
  line-height:1.58!important;
  overflow:visible!important;
}
body.m22-lang-ur .m22-mostread-panel small,
body.m22-lang-ur .m22-ranked-list small{
  font-family:var(--m22-urdu-ui)!important;
  font-style:normal!important;
  line-height:1.55!important;
}
body.m22-lang-ur .m22-ranked-list a span{
  font-size:14.5px!important;
  line-height:1.6!important;
  font-weight:650!important;
}

/* Weather: use upright Naskh for the big title too. */
body.m22-lang-ur .m22-weather-head h2{
  font-size:32px!important;
  line-height:1.45!important;
  font-weight:700!important;
}
body.m22-lang-ur .m22-weather-grid article>div:nth-child(2)>span,
body.m22-lang-ur .m22-weather-grid article>div:nth-child(2)>small,
body.m22-lang-ur .m22-weather-grid dt,
body.m22-lang-ur .m22-weather-grid dd{
  font-family:var(--m22-urdu-ui)!important;
  font-style:normal!important;
  line-height:1.5!important;
}

/* Prevent fixed-height Urdu components from clipping tall marks. */
body.m22-lang-ur .m22-card-body,
body.m22-lang-ur .m22-feature-card,
body.m22-lang-ur .m22-hero-mini-copy,
body.m22-lang-ur .m22-pulse-feed article,
body.m22-lang-ur .m22-section-head{
  overflow:visible!important;
}

@media (max-width:900px){
  body.m22-lang-ur.single-post .m22-article-masthead-v645 h1{
    font-size:clamp(34px,6.4vw,50px)!important;
    line-height:1.38!important;
  }
}

@media (max-width:700px){
  body.m22-lang-ur .m22-trending-items a{
    min-height:92px!important;
    padding:12px 13px!important;
  }
  body.m22-lang-ur .m22-trending-items a span{
    font-size:15px!important;
    line-height:1.58!important;
    -webkit-line-clamp:3!important;
  }
  body.m22-lang-ur .m22-mostread-panel>a{min-height:70px!important}
  body.m22-lang-ur .m22-mostread-panel>a>span{font-size:15px!important;line-height:1.58!important}
  body.m22-lang-ur .m22-card-body h3{font-size:18px!important;line-height:1.58!important}
  body.m22-lang-ur .m22-pulse-feed h3{font-size:16px!important;line-height:1.58!important}
  body.m22-lang-ur .m22-hero-copy h1{font-size:30px!important;line-height:1.45!important}
  body.m22-lang-ur .m22-weather-head h2{font-size:27px!important}

  body.m22-lang-ur.single-post .m22-article-masthead-v645 h1{
    font-size:34px!important;
    line-height:1.42!important;
    margin-top:16px!important;
  }
  body.m22-lang-ur.single-post .m22-article-deck-v645{
    font-size:16px!important;
    line-height:1.8!important;
  }
  body.m22-lang-ur.single-post .m22-article-content,
  body.m22-lang-ur.single-post .m22-article-content-v645,
  body.m22-lang-ur.single-post .m22-article-content p,
  body.m22-lang-ur.single-post .m22-article-content li,
  body.m22-lang-ur.single-post .m22-article-content-v645 p,
  body.m22-lang-ur.single-post .m22-article-content-v645 li{
    font-size:18px!important;
    line-height:1.95!important;
  }
}

@media (max-width:430px){
  body.m22-lang-ur.single-post .m22-article-masthead-v645 h1{
    font-size:30px!important;
    line-height:1.46!important;
  }
  body.m22-lang-ur .m22-section-head h2{font-size:24px!important}
  body.m22-lang-ur .m22-trending-items a span{font-size:14.5px!important}
}