/* =========================================================
   The Era Post — Homepage category widgets (magazine style v2)
   Targets EXISTING class names only — no PHP files touched.
   Font-family stays 'Mukta' throughout (site standard); sizes
   are tuned for a stronger editorial hierarchy.
   KEY TECHNIQUE: the "Lg" hero cards get an image-bleed
   treatment — title/meta are pulled out of normal flow with
   position:absolute and overlaid on the bottom of the image
   with a dark gradient, entirely via CSS (their siblings in
   the markup don't need to move).
   Relies on color variables from header-nav.css.
   ========================================================= */

/* ---------------------------------------------------------
   0. Shared section header
   --------------------------------------------------------- */
.cat-title-section,
.newsHeadingSection{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
}
.cat-title-section:before,
.newsHeadingSection:before{
  content:'';
  width:5px; height:24px; border-radius:3px;
  background:var(--red);
  flex-shrink:0;
}
.cat-title,
.newsHeadingTitle{
  font:800 22px 'Mukta', sans-serif;
  color:var(--ink, #1f2430);
  text-decoration:none;
  letter-spacing:.2px;
}
.cat-title:hover,
.newsHeadingTitle:hover{ color:var(--red); text-decoration:none; }
.cat-title-section:after,
.newsHeadingSection:after{
  content:'';
  flex:1;
  height:1px;
  background:var(--line, #e4e6ee);
}

/* =========================================================
   SHARED: image-bleed hero-card overlay technique
   ========================================================= */
.nbc1-lg,
.nbc2-lg,
.nbc5LgContainer,
.nbc6Lg,
.nbc7Lg{
  position:relative;
}

/* the image box: fixed aspect ratio, full-bleed, dark gradient baked in via ::after */
.nbc1-lg .img-zoom-effect,
.nbc2-lg .img-zoom-effect{
  position:relative;
  aspect-ratio:16/10;
  border-radius:12px;
  margin-bottom:0;
}
.nbc1-lg .img-zoom-effect img,
.nbc2-lg .img-zoom-effect img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:12px;
}
.nbc1-lg .img-zoom-effect:after,
.nbc2-lg .img-zoom-effect:after{
  content:'';
  position:absolute; inset:0;
  border-radius:12px;
  background:linear-gradient(0deg, rgba(10,8,40,.92) 0%, rgba(10,8,40,.55) 34%, rgba(10,8,40,0) 65%);
  pointer-events:none;
}

.nbc5LgImg,
.nbc6LgImg,
.nbc7LgImg{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  display:block;
}
.nbc5LgContainer:after,
.nbc6Lg:after,
.nbc7Lg:after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:62%;
  border-radius:0 0 12px 12px;
  background:linear-gradient(0deg, rgba(10,8,40,.92) 0%, rgba(10,8,40,.5) 45%, rgba(10,8,40,0) 80%);
  pointer-events:none;
}

/* date/meta badge — pinned to the top-left of the image */
.nbc1-lg-post-created{
  position:absolute; top:14px; left:14px; z-index:2;
  background:rgba(255,255,255,.95) !important;
  color:var(--ink, #1f2430) !important;
  padding:5px 12px;
  border-radius:20px;
  font-size:12px !important;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}

/* titles pulled onto the bottom of the image */
.nbc1-lg-title,
.nbc2-lg-title{
  position:absolute; left:20px; right:20px; bottom:16px; z-index:2;
  color:#fff !important;
  font:700 25px/1.35 'Mukta', sans-serif !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  margin-bottom:0 !important;
}
.nbcLgTitle,
.nbc6LgTitle,
.nbc7LgTitle{
  position:absolute; left:20px; right:20px; bottom:44px; z-index:2;
  color:#fff !important;
  font:700 24px/1.35 'Mukta', sans-serif !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  margin:0 !important;
}
.nbc5-post-detail{
  position:absolute; left:20px; bottom:16px; z-index:2;
  color:rgba(255,255,255,.85) !important;
}
.nbc5-post-detail i{ color:var(--gold) !important; }

/* push the excerpt paragraph clear of the overlaid card */
.nbc1-lg-para,
.nbc2-lg-para{ margin-top:16px !important; }
.nbcLgPg{ margin-top:18px !important; }
.nbc6LgPara,
.nbc7LgPara{ margin-top:14px !important; }

/* card lift on hover */
.nbc1-lg:hover .img-zoom-effect img,
.nbc2-lg:hover .img-zoom-effect img,
.nbc5LgContainer:hover .nbc5LgImg,
.nbc6Lg:hover .nbc6LgImg,
.nbc7Lg:hover .nbc7LgImg{
  filter:brightness(1.04);
}

/* ---------------------------------------------------------
   1. NBC1 — medium 5-up grid (secondary cards)
   --------------------------------------------------------- */
.nbc1-md{
  background:#fff;
  border:1px solid var(--line, #e4e6ee);
  border-radius:10px;
  padding:8px 8px 12px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.nbc1-md:hover{ box-shadow:0 12px 26px rgba(19,15,82,.12); transform:translateY(-3px); }
.nbc1-md .img-zoom-effect{ margin-bottom:10px; border-radius:7px; }
.nbc1-md .img-zoom-effect img{ border-radius:7px; }
.nbc1-md-title{ margin-bottom:0 !important; padding:0 4px; }

/* ---------------------------------------------------------
   2. NBC2 — medium card + headline list column
   --------------------------------------------------------- */
.nbc2-md .img-zoom-effect{ border-radius:10px; margin-bottom:10px; box-shadow:0 6px 16px rgba(19,15,82,.08); }
.nbc2-md .img-zoom-effect img{ border-radius:10px; }

.nbc2-sm-content{
  background:var(--navy, #1c1677);
  border-radius:12px;
  padding:20px 18px 6px;
}
.nbc2-sm-title{
  color:rgba(255,255,255,.92) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  padding-left:18px;
  position:relative;
}
.nbc2-sm-title:hover{ color:var(--gold) !important; }
.nbc2-sm-title:before{
  content:'';
  position:absolute; left:0; top:11px;
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
}
.nbc2-sm-title:last-child{ color:rgba(255,255,255,.92) !important; }

/* ---------------------------------------------------------
   3. NBC3 — scrollable side list
   --------------------------------------------------------- */
.parent{
  border-radius:12px;
  background:var(--mist, #f3f4f8);
  padding:16px 16px 4px;
}
.child::-webkit-scrollbar{ width:5px; }
.child::-webkit-scrollbar-thumb{ background:var(--navy); border-radius:3px; }

.nbc3-md{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border-radius:9px;
  padding:9px;
  margin-bottom:10px !important;
  border-bottom:none !important;
  transition:box-shadow .15s ease;
}
.nbc3-md:hover{ box-shadow:0 6px 16px rgba(19,15,82,.1); }
.nbc3-md-img{
  float:none !important;
  margin:0 !important;
  flex-shrink:0;
  width:76px;
  height:58px;
  object-fit:cover;
  border-radius:7px;
}
.nbc3-md-title{ margin-bottom:0 !important; font-size:16px !important; line-height:1.4 !important; }

/* ---------------------------------------------------------
   4. NBC4 — editorial 4-up strip
   --------------------------------------------------------- */
.nbc4-md{ margin:0 -8px; }
.nbc4-md .col-md-3{ padding:0 8px; margin-bottom:20px; }
.nbc4-md .img-zoom-effect{
  border-radius:10px;
  overflow:hidden;
  margin-bottom:10px;
  box-shadow:0 6px 16px rgba(19,15,82,.08);
}
.nbc4-md .img-zoom-effect img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.nbc4-md .nbc1-lg-post-created{
  position:static !important;
  display:inline-block;
  background:var(--mist, #f3f4f8) !important;
  color:var(--ink-soft, #5c6270) !important;
  box-shadow:none;
  padding:3px 10px;
  margin:8px 0 4px;
}
.nbc4-md-title{ display:block; padding:0 2px; }

/* ---------------------------------------------------------
   5. NBC5 — medium + compact list column
   --------------------------------------------------------- */
.nbcMediumCont{ margin-bottom:18px; }
.nbcMediumImg{ border-radius:10px; box-shadow:0 6px 16px rgba(19,15,82,.08); margin-bottom:10px; width:100%; aspect-ratio:16/10; object-fit:cover; }
.nbcMediumHeading{
  display:block;
  font:700 19px/1.5 'Mukta', sans-serif !important;
  color:var(--ink, #242424) !important;
}
.nbcMediumHeading:hover{ color:var(--navy) !important; text-decoration:none; }

.nbc2SmallCont{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid var(--line, #e4e6ee);
}
.nbc2SmallCont:last-child{ border-bottom:none; margin-bottom:0; }
.nbc2SmallImg{ width:60px; height:48px; object-fit:cover; border-radius:7px; flex-shrink:0; }
.nbc2SmallHeading{
  font:600 14.5px/1.5 'Mukta', sans-serif !important;
  color:var(--ink, #242424) !important;
}
.nbc2SmallHeading:hover{ color:var(--navy) !important; text-decoration:none; }

/* ---------------------------------------------------------
   6. NBC6 — double stacked feature + medium list
   --------------------------------------------------------- */
.nbc6Lg{ margin-bottom:24px; }
.nbc6MdSection{
  display:flex;
  gap:12px;
  background:#fff;
  border:1px solid var(--line, #e4e6ee);
  border-radius:10px;
  padding:10px;
  margin-bottom:14px;
  transition:box-shadow .15s ease;
}
.nbc6MdSection:hover{ box-shadow:0 8px 18px rgba(19,15,82,.1); }
.nbc6MdSection img{ width:92px; height:74px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.nbc6MdTitle{
  display:block;
  font:700 16.5px/1.5 'Mukta', sans-serif !important;
  color:var(--ink, #242424) !important;
  margin-bottom:4px !important;
}
.nbc6MdTitle:hover{ color:var(--navy) !important; text-decoration:none; }
.nbc6MdPara{ font:400 13px/1.6 'Mukta', sans-serif !important; color:var(--ink-soft, #777) !important; }

/* ---------------------------------------------------------
   7. NBC7 — big banner + headline list
   --------------------------------------------------------- */
.nbc7Md{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 4px;
  border-bottom:1px solid var(--line, #e4e6ee);
}
.nbc7Md:last-child{ border-bottom:none; }
.nbc7MdImg{ width:96px; height:72px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.nbc7MdTitle{
  font:600 16.5px/1.5 'Mukta', sans-serif !important;
  color:var(--ink, #242424) !important;
}
.nbc7MdTitle:hover{ color:var(--navy) !important; text-decoration:none; }

/* ---------------------------------------------------------
   8. Ad spacer (index.php's .sponsor-bigyapan wrapper)
   --------------------------------------------------------- */
.sponsor-bigyapan{
  text-align:center;
  margin:26px 0;
}

/* ---------------------------------------------------------
   9. Breakpoints
   --------------------------------------------------------- */
@media (max-width:768px){
  .nbc1-lg-title,
  .nbc2-lg-title{ font-size:19px !important; left:14px; right:14px; bottom:12px; }
  .nbcLgTitle,
  .nbc6LgTitle,
  .nbc7LgTitle{ font-size:18px !important; left:14px; right:14px; bottom:36px; }
  .nbc3-md-img{ width:64px; height:50px; }
  .nbc6MdSection img{ width:74px; height:58px; }
  .cat-title,
  .newsHeadingTitle{ font-size:19px; }
}