/*=================================================================
  ARTICLE / SINGLE NEWS VIEW — शङ्खघोष मिडिया
  Uses colour tokens from header.css (:root) — header.css must load
  on every page.
=================================================================*/

/* ============ STICKY TWO-COLUMN LAYOUT ============
   Whichever column (article vs sidebar) is SHORTER will pin in
   place once its own content ends, while the taller column keeps
   scrolling beside it — pure CSS, no JS. */
.article-row{
  display:flex;
  flex-wrap:wrap;
}
.article-row > [class*="col-"]{
  display:flex;
  flex-direction:column;
}
.sticky-panel{
  position:sticky;
  top:96px;
  align-self:flex-start;
  width:100%;
}
@media (max-width:991px){
  .sticky-panel{position:static;}
}

/* ============ AD BLOCKS ============
   Wraps every group of AdvertiseWidget calls; only renders (with a
   small transparent label) when at least one ad actually returned
   content — no more empty boxes. */
.ad-block{
  margin:26px 0;
  padding:14px 0 4px;
  border-top:1px dashed #e3e3ec;
  border-bottom:1px dashed #e3e3ec;
  text-align:center;
}
.ad-block-label{
  display:block;
  color:#b3b4c8;
  font:600 11px 'Open Sans',sans-serif;
  letter-spacing:.6px;
  margin-bottom:10px;
}
.ad-block img{margin-bottom:16px;}

/* ============ ARTICLE HEADER ============ */
.news-view-content h1{
  color:var(--sg-navy,#1e1878);
  font:700 34px/46px 'Mukta',sans-serif;
  margin:0 0 6px;
}
.news-view-content h1 span{
  display:block;
  font:500 20px/30px 'Mukta',sans-serif;
  color:var(--sg-muted,#707070);
  margin-top:6px;
}

.newsDetail{
  border:none;
  margin:18px 0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 18px;
  padding-bottom:18px;
  border-bottom:1px solid #edeef5;
}
.newsDetail > ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 18px;
}
.newsDetail > ul > li{
  color:var(--sg-muted,#707070);
  font:500 14.5px 'Open Sans',sans-serif;
  display:flex;
  align-items:center;
  gap:6px;
}
.newsDetail > ul > li i{color:var(--sg-orange,#f89d28);}

.author-info{
  display:flex;
  align-items:center;
  gap:10px;
  border:none;
  padding:0;
  margin:0;
}
.author-info .author-image{
  float:none;
  width:34px;
  height:34px;
  margin:0;
  border-radius:50%;
}
.author-info .author-name{
  font:600 15px 'Mukta',sans-serif;
  color:var(--sg-navy,#1e1878);
  line-height:1.1;
}

.newsShare{
  margin:0 0 26px !important;
}

/* ============ MAIN IMAGE ============ */
.newsMainImg{
  margin-bottom:22px;
}
.newsMainImg img{
  border-radius:12px;
  width:100%;
}
.newsMainImg span{
  display:block;
  color:var(--sg-muted,#707070);
  font:400 13.5px 'Open Sans',sans-serif;
  margin-top:8px;
  text-align:center;
}

/* ============ ARTICLE BODY ============ */
.post-content{
  color:var(--sg-text,#242424);
  font:400 18px/34px 'Mukta',sans-serif;
}
.post-content p{margin:0 0 20px;}
.post-content img{
  border-radius:10px;
  max-width:100%;
  height:auto;
}
.post-content-caption{
  color:var(--sg-muted,#707070);
  font:400 13.5px 'Open Sans',sans-serif;
  text-align:center;
  margin:-12px 0 20px;
}

/* ============ TAGS ============ */
.newsFooterTagList{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:6px 0 34px;
  padding:0;
}
.newsFooterTagList li a{
  display:inline-block;
  padding:8px 16px;
  border-radius:30px;
  background:#f3f3f9;
  color:var(--sg-navy,#1e1878);
  font:500 14px 'Mukta',sans-serif;
  transition:background .2s ease, color .2s ease;
}
.newsFooterTagList li a:hover{
  background:var(--sg-navy,#1e1878);
  color:#fff;
}

/* Note: shared ".cat-name" section-title style now lives in sidebar.css
   (loaded globally) so related.php below reuses it without duplication. */

/* ============ RELATED NEWS (related.php) ============ */
.related-news-section{
  margin:8px 0 30px !important;
}
.related-news-content .col-md-4{
  margin-bottom:20px;
}
.related-news-content .img-zoom-effect{
  border-radius:10px;
  margin-bottom:12px !important;
}
.related-news-content .img-zoom-effect img{
  border-radius:10px;
  transition:transform .35s ease;
}
.related-news-content .img-zoom-effect:hover img{
  transform:scale(1.06);
}
.related-news-title{
  display:block;
  color:var(--sg-text,#242424);
  font:600 16.5px/24px 'Mukta',sans-serif;
  transition:color .2s ease;
}
.related-news-title:hover{color:var(--sg-navy,#1e1878);}

/* ============ SUGGEST / "यो पनि" (suggest.php) ============ */
.related-news{
  background:#f9f9fd;
  border-left:3px solid var(--sg-orange,#f89d28);
  border-radius:0 10px 10px 0;
  padding:20px 22px;
  margin:8px 0 30px;
}
.yoPaniNews{
  color:var(--sg-navy,#1e1878);
  font:600 15.5px 'Mukta',sans-serif;
  margin-bottom:10px;
}
.related-news ul{
  list-style:none;
  margin:0;padding:0;
}
.related-news ul li{
  padding:9px 0;
  border-bottom:1px dashed #e3e3ec;
}
.related-news ul li:last-child{border-bottom:none;padding-bottom:0;}
.related-news ul li a{
  color:var(--sg-text,#242424);
  font:500 15.5px/24px 'Mukta',sans-serif;
  display:flex;
  gap:8px;
}
.related-news ul li a::before{
  content:'›';
  color:var(--sg-orange,#f89d28);
  font-weight:700;
}
.related-news ul li a:hover{color:var(--sg-navy,#1e1878);}