/* ============================================================
   blog.css — DN Exposer
   ============================================================ */

/* ── Page hero (shared with marketplace) ───────────────────── */
.page-hero{
  padding: calc(var(--nav-h) + 60px) 0 56px;
  background: var(--cream-mid);
  text-align: center;
}
.page-hero h1{ margin-bottom: 16px; }
.page-hero .section-desc{
  max-width: 580px; margin-inline: auto;
}


/* ── Category tabs ─────────────────────────────────────────── */
.blog-tabs{
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0;
  position: sticky; top: var(--nav-h); z-index: 800;
}
.blog-tabs__inner{
  display: flex; align-items: center;
  gap: 4px; padding: 12px 0;
  overflow-x: auto; scrollbar-width: none;
}
.blog-tabs__inner::-webkit-scrollbar{ display: none; }

.blog-tabs__tab{
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 20px;
  font-size: .84rem; font-weight: 600;
  color: var(--muted);
  border-radius: var(--r-pill);
  transition: background var(--tr), color var(--tr);
}
.blog-tabs__tab:hover{
  color: var(--slate); background: var(--cream);
}
.blog-tabs__tab.is-active{
  color: var(--rose); background: var(--rose-light);
}

.blog-tabs__count{
  font-size: .68rem; font-weight: 700;
  background: var(--cream); color: var(--light);
  padding: 1px 7px; border-radius: var(--r-pill);
}
.blog-tabs__tab.is-active .blog-tabs__count{
  background: rgba(229,52,91,.15); color: var(--rose);
}


/* ── Blog grid ─────────────────────────────────────────────── */
.blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* On blog page, card titles are h2 */
.blog-grid .blog-card__title{
  font-size: 1.05rem;
}


/* ── Empty state ───────────────────────────────────────────── */
.blog-empty{
  text-align: center;
  padding: 80px 20px;
  color: var(--muted);
}
.blog-empty p{ margin-bottom: 20px; font-size: 1rem; }


/* ── Reading length bar (injected by JS) ───────────────────── */
.blog-card__length-bar{
  height: 3px; margin-top: 16px;
  background: var(--cream-mid);
  border-radius: 2px; overflow: hidden;
}
.blog-card__length-bar::after{
  content: '';
  display: block; height: 100%;
  width: var(--length-pct, 30%);
  background: linear-gradient(90deg, var(--teal), var(--rose));
  border-radius: 2px;
  transition: width .6s var(--ease);
}


/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1080px){
  .blog-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .blog-grid{ grid-template-columns: 1fr; }
  .blog-tabs__inner{ padding: 10px 0; }
}