/* =========================================================
   The Era Post — Single Article page
   Namespaced "era-" classes — no collision with legacy
   .newsDetail / .author-info / .trendingList rules.
   Relies on color variables from header-nav.css.
   ========================================================= */

.era-article-page{ padding:26px 0 10px; }

.era-article{
  background:var(--paper);
}

/* ---------------------------------------------------------
   1. Category tag + title + meta
   --------------------------------------------------------- */
.era-article__tag{
  display:inline-block;
  font:700 12px 'Poppins',sans-serif;
  color:#fff;
  background:var(--red);
  padding:5px 14px;
  border-radius:20px;
  margin-bottom:14px;
  text-decoration:none;
}
.era-article__tag:hover{ background:var(--navy); color:#fff; text-decoration:none; }

.era-article__title{
  font:700 30px/1.45 'Mukta',sans-serif;
  color:var(--ink);
  margin:0 0 10px;
}
.era-article__subtitle{
  font:500 17px/1.6 'Mukta',sans-serif;
  color:var(--ink-soft);
  margin:0 0 18px;
}

.era-article__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  padding:14px 0;
  margin-bottom:18px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.era-article__meta-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:500 13.5px 'Poppins',sans-serif;
  color:var(--ink-soft);
}
.era-article__meta-item svg{ width:14px; height:14px; color:var(--red); }

.era-article__author{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  font:600 13.5px 'Mukta',sans-serif;
  color:var(--ink);
  text-decoration:none;
}
.era-article__author:hover{ color:var(--navy); text-decoration:none; }
.era-article__author-img{
  width:30px; height:30px; border-radius:50%;
  object-fit:cover;
}

/* ---------------------------------------------------------
   2. Ad slots — clearly labeled, unobtrusive
   --------------------------------------------------------- */
.era-ad-slot{
  margin:18px 0;
  padding:10px 0;
  text-align:center;
}
.era-ad-slot:empty,
.era-ad-slot:has(> *:only-child:empty){ display:none; }
.era-ad-slot__label{
  display:block;
  font:600 10.5px 'Poppins',sans-serif;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.55;
  margin-bottom:8px;
}

/* ---------------------------------------------------------
   3. Share row
   --------------------------------------------------------- */
.era-article__share{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.era-article__share-label{
  font:600 13px 'Poppins',sans-serif;
  color:var(--ink-soft);
  flex-shrink:0;
}
.era-share-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; border:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.era-share-btn svg{ width:16px; height:16px; }
.era-share-btn:hover{ transform:translateY(-3px); box-shadow:0 8px 16px rgba(19,15,82,.2); }
.era-share-btn--fb{ background:#1877F2; }
.era-share-btn--x{ background:#0f1419; }
.era-share-btn--wa{ background:#25D366; }
.era-share-btn--copy{ background:var(--ink-soft); position:relative; }
.era-share-btn--copy.is-copied{ background:var(--navy); }
.era-share-btn--copy.is-copied:after{
  content:'लिंक कपी भयो';
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--navy); color:#fff; font:500 11px 'Poppins',sans-serif;
  padding:4px 10px; border-radius:6px; white-space:nowrap;
}

/* ---------------------------------------------------------
   4. Main image
   --------------------------------------------------------- */
.era-article__media{ margin-bottom:22px; }
.era-article__media img{
  width:100%;
  border-radius:12px;
  display:block;
}
.era-article__video{
  border-radius:12px;
  overflow:hidden;
}
.era-article__caption{
  display:block;
  font:400 13px 'Mukta',sans-serif;
  font-style:italic;
  color:var(--ink-soft);
  margin-top:8px;
  text-align:center;
}

/* ---------------------------------------------------------
   5. Article body typography (CMS-authored HTML content)
   --------------------------------------------------------- */
.era-article__body{
  font:400 17.5px/1.95 'Mukta',sans-serif;
  color:var(--ink);
}
.era-article__body p{ margin:0 0 20px; }
.era-article__body img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  margin:8px 0;
}
.era-article__body .post-content-caption{
  font:400 13px 'Mukta',sans-serif;
  font-style:italic;
  color:var(--ink-soft);
  text-align:center;
  margin:-2px 0 18px;
}
.era-article__body h2,
.era-article__body h3{
  font-family:'Mukta',sans-serif;
  font-weight:700;
  color:var(--ink);
  margin:30px 0 14px;
}
.era-article__body h2{ font-size:23px; }
.era-article__body h3{ font-size:19.5px; }
.era-article__body blockquote{
  margin:22px 0;
  padding:16px 20px;
  border-left:4px solid var(--red);
  background:var(--mist);
  border-radius:0 8px 8px 0;
  font-style:italic;
  color:var(--ink-soft);
}
.era-article__body a{ color:var(--navy); text-decoration:underline; }
.era-article__body ul,
.era-article__body ol{ margin:0 0 20px; padding-left:22px; }
.era-article__body li{ margin-bottom:8px; }

/* ---------------------------------------------------------
   6. Tags
   --------------------------------------------------------- */
.era-article__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:24px 0;
  padding:0;
  list-style:none;
}
.era-article__tags li a{
  display:inline-block;
  font:500 12.5px 'Poppins',sans-serif;
  color:var(--ink-soft);
  background:var(--mist);
  border:1px solid var(--line);
  padding:6px 14px;
  border-radius:18px;
  text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.era-article__tags li a:hover{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  text-decoration:none;
}

/* ---------------------------------------------------------
   7. Author box
   --------------------------------------------------------- */
.era-author-box{
  display:flex;
  align-items:center;
  gap:16px;
  margin:26px 0;
  padding:18px 20px;
  background:var(--mist);
  border-radius:12px;
}
.era-author-box__img{
  width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.era-author-box__label{
  display:block;
  font:600 11px 'Poppins',sans-serif;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:3px;
}
.era-author-box__name{
  font:700 16px 'Mukta',sans-serif;
  color:var(--ink);
  text-decoration:none;
}
.era-author-box__name:hover{ color:var(--navy); text-decoration:none; }

/* ---------------------------------------------------------
   8. Comments box
   --------------------------------------------------------- */
.era-comments-box{
  margin:30px 0 10px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.era-comments-box__title{
  font:700 18px 'Mukta',sans-serif;
  color:var(--ink);
  margin:0 0 16px;
}

/* ---------------------------------------------------------
   9. Breakpoints
   --------------------------------------------------------- */
@media (max-width:600px){
  .era-article__title{ font-size:22px; }
  .era-article__subtitle{ font-size:15px; }
  .era-article__meta{ gap:12px; }
  .era-article__author{ margin-left:0; width:100%; order:99; }
  .era-article__body{ font-size:16px; }
  .era-author-box{ flex-direction:column; text-align:center; }
}