/* ==========================================================================
   Blog index + category pages
   ========================================================================== */
.page-hero .lead { line-height: 2; }

.cat-filter { display: flex; gap: .5rem; margin-top: 1.6rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem;
  margin-inline: calc(clamp(1rem, 4vw, 2rem) * -1); padding-inline: clamp(1rem, 4vw, 2rem); }
.cat-filter::-webkit-scrollbar { display: none; }
.cat-filter a { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.05rem; border-radius: 100px;
  font-weight: 500; font-size: .92rem; border: 1px solid var(--line); color: var(--muted); background: var(--panel); transition: all .15s; }
.cat-filter a small { font-size: .75rem; opacity: .75; }
.cat-filter a:hover { color: var(--white); border-color: rgba(45,212,255,.4); }
.cat-filter a.active { background: var(--cyan); color: #04222c; border-color: var(--cyan); font-weight: 700; }

.cat-stats { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.4rem; color: var(--muted); font-size: .9rem; }
.cat-stats b { color: var(--cyan); font-weight: 800; font-size: 1.1rem; display: block; }

.cat-cta { margin-top: 3rem; padding: clamp(1.6rem, 5vw, 2.4rem) 1.6rem; text-align: center;
  background: radial-gradient(560px 220px at 50% 0%, rgba(45,212,255,.12), transparent 70%), var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); }
.cat-cta h2 { font-size: clamp(1.15rem, 3vw, 1.5rem); margin-bottom: .5rem; }
.cat-cta p { color: var(--muted); margin-bottom: 1.2rem; }