/* =========================================================
   The Era Post — Homepage Hero / Banner section
   Namespaced "era-hero-*" classes — no collision with legacy
   .bannerNews* rules in style.css.
   Relies on color variables from header-nav.css.
   ========================================================= */

.era-hero{
  background:var(--paper);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(19,15,82,.08);
  padding:22px 24px 26px;
  margin-bottom:24px;
}

/* ---------------------------------------------------------
   1. Tag / title / subtitle
   --------------------------------------------------------- */
.era-hero__tag{
  display:inline-block;
  margin-bottom:12px;
}
.era-hero__tag span{
  display:inline-block;
  font:700 12px 'Poppins',sans-serif;
  color:#fff;
  background:var(--red);
  padding:5px 14px;
  border-radius:20px;
}

.era-hero__title{
  display:block;
  font:700 30px/1.4 'Mukta',sans-serif;
  color:var(--ink);
  margin-bottom:8px;
  transition:color .15s ease;
}
.era-hero__title:hover{ color:var(--navy); text-decoration:none; }

.era-hero__subtitle{
  display:block;
  font:500 17px/1.6 'Mukta',sans-serif;
  color:var(--ink-soft);
  margin-bottom:16px;
}

/* ---------------------------------------------------------
   2. Author meta row
   --------------------------------------------------------- */
.era-hero__meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.era-hero__meta-img{
  width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.era-hero__meta-text{
  font:600 13.5px 'Mukta',sans-serif;
  color:var(--ink);
}
.era-hero__meta-text:hover{ color:var(--navy); text-decoration:none; }
.era-hero__meta-text span{
  font-weight:400;
  color:var(--ink-soft);
}

/* ---------------------------------------------------------
   3. Media (image / video)
   --------------------------------------------------------- */
.era-hero__media{
  display:block;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:18px;
  background:var(--mist);
}
.era-hero__media img{
  width:100%;
  display:block;
  transition:transform .4s ease;
}
.era-hero__media:hover img{ transform:scale(1.02); }
.era-hero__media--video iframe{
  width:100%;
  display:block;
  border-radius:12px;
}

/* ---------------------------------------------------------
   4. Description
   --------------------------------------------------------- */
.era-hero__desc{
  font:400 16.5px/1.85 'Mukta',sans-serif;
  color:var(--ink);
  margin:0 0 6px;
}

/* ---------------------------------------------------------
   5. Related items grid
   --------------------------------------------------------- */
.era-hero__related{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.era-hero__related-item{
  display:block;
  text-decoration:none;
}
.era-hero__related-item:hover{ text-decoration:none; }
.era-hero__related-img{
  display:block;
  aspect-ratio:16/10;
  border-radius:9px;
  overflow:hidden;
  background:var(--mist);
  margin-bottom:9px;
}
.era-hero__related-img img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.era-hero__related-item:hover .era-hero__related-img img{ transform:scale(1.07); }
.era-hero__related-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font:600 14px/1.5 'Mukta',sans-serif;
  color:var(--ink);
  transition:color .15s ease;
}
.era-hero__related-item:hover .era-hero__related-title{ color:var(--navy); }

/* ---------------------------------------------------------
   6. Breakpoints
   --------------------------------------------------------- */
@media (max-width:768px){
  .era-hero{ padding:18px 16px 20px; }
  .era-hero__title{ font-size:22px; }
  .era-hero__subtitle{ font-size:15px; }
  .era-hero__related{ grid-template-columns:1fr; gap:14px; }
  .era-hero__media--video iframe{ height:220px; }
}
@media (min-width:769px) and (max-width:1024px){
  .era-hero__media--video iframe{ height:400px; }
}