/* =========================================================
   The Era Post — Sidebar tab widget (भर्खरै / लोकप्रिय)
   MINIMAL variant: flat underline tabs + 2-col tile grid.
   Namespaced "era-" classes — no collision with legacy CSS.
   Bootstrap's tab.js still drives show/hide via the original
   .tab-pane / .active / .in classes — untouched, only restyled.
   Relies on color variables from header-nav.css.
   ========================================================= */

/* ---------------------------------------------------------
   1. Minimal underline tab nav
   --------------------------------------------------------- */
.era-tabs-min{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  margin-bottom:22px;
}
.era-tabs-min__nav{
  display:flex;
  margin:0;
  padding:0 4px;
  list-style:none;
  border-bottom:1px solid var(--line);
}
.era-tabs-min__nav > li{ position:relative; }
.era-tabs-min__nav > li > a{
  display:block;
  padding:16px 18px;
  font:600 15px 'Mukta',sans-serif;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .15s ease;
}
.era-tabs-min__nav > li > a:hover,
.era-tabs-min__nav > li > a:focus{
  color:var(--ink);
  text-decoration:none;
  background:transparent;
}
.era-tabs-min__nav > li.active > a{ color:var(--ink); }
.era-tabs-min__nav > li.active:after{
  content:'';
  position:absolute; left:18px; right:18px; bottom:-1px;
  height:2px;
  background:var(--red);
}
.era-tabs-min .tab-content{ padding:18px; }

/* ---------------------------------------------------------
   2. 2-column tile grid
   --------------------------------------------------------- */
.era-tile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 14px;
}
.era-tile{
  display:block;
  text-decoration:none;
}
.era-tile:hover{ text-decoration:none; }
.era-tile__thumb{
  display:block;
  aspect-ratio:4/3;
  border-radius:8px;
  overflow:hidden;
  background:var(--mist);
  margin-bottom:9px;
}
.era-tile__thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease, opacity .2s ease;
}
.era-tile:hover .era-tile__thumb img{
  transform:scale(1.06);
  opacity:.92;
}
.era-tile__title{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font:500 13.5px/1.5 'Mukta',sans-serif;
  color:var(--ink);
  transition:color .15s ease;
}
.era-tile:hover .era-tile__title{ color:var(--navy); }

/* ---------------------------------------------------------
   3. Widget section title (used by tab-news-content.php)
   --------------------------------------------------------- */
.era-widget-title{
  font:700 15.5px 'Poppins',sans-serif;
  color:var(--ink);
  margin:0 0 14px;
  padding-bottom:11px;
  border-bottom:2px solid var(--line);
  position:relative;
}
.era-widget-title:after{
  content:'';
  position:absolute; left:0; bottom:-2px;
  width:32px; height:2px;
  background:var(--red);
}

/* ---------------------------------------------------------
   4. Plain compact list (tab-news-content.php — unrelated
      "trending" widget, left as a simple text list)
   --------------------------------------------------------- */
.era-side-list{ margin:0; padding:0; list-style:none; }
.era-side-item--plain{ border-bottom:1px solid var(--line); }
.era-side-item--plain:last-child{ border-bottom:none; }
.era-side-item--plain .era-side-item__link{
  display:block;
  padding:11px 2px;
  text-decoration:none;
}
.era-side-item--plain .era-side-item__link:hover .era-side-item__title{ color:var(--navy); }
.era-side-item--plain .era-side-item__title{
  display:block;
  font:500 14px/1.6 'Mukta',sans-serif;
  color:var(--ink);
}
.era-side-item--plain .era-side-item__title:before{
  content:'';
  display:inline-block;
  width:5px; height:5px; border-radius:50%;
  background:var(--red);
  margin-right:9px;
  vertical-align:middle;
}

@media (max-width:600px){
  .era-tile-grid{ gap:14px 10px; }
  .era-tile__title{ font-size:13px; }
}