/* ════════════════════════════════════════════════════════════
   pages/blog.css — Blog listing filters + article page
   ════════════════════════════════════════════════════════════ */

/* Category filter row */
.blog-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:44px}
.blog-filter{
  font-size:13px;font-weight:600;color:var(--text-muted);
  background:var(--card);border:1.5px solid var(--card-border);
  border-radius:20px;padding:8px 18px;transition:all .15s;cursor:pointer;font-family:inherit;
}
.blog-filter:hover{border-color:var(--accent);color:var(--accent)}
.blog-filter.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Featured (large) post */
.blog-featured{
  display:grid;grid-template-columns:1.3fr 1fr;gap:0;
  background:var(--card);border:1.5px solid var(--card-border);
  border-radius:16px;overflow:hidden;margin-bottom:40px;transition:all .2s;cursor:pointer;
}
.blog-featured:hover{box-shadow:var(--shadow-lg);border-color:transparent}
.blog-featured-img{position:relative;min-height:320px;background:var(--bg-alt);overflow:hidden}
.blog-featured-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s}
.blog-featured:hover .blog-featured-img img{transform:scale(1.04)}
.blog-featured-body{padding:40px 42px;display:flex;flex-direction:column;justify-content:center}
.blog-featured-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--accent);background:var(--accent-light);padding:4px 12px;border-radius:20px;align-self:flex-start;margin-bottom:16px}
.blog-featured-body h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.25;margin-bottom:14px}
.blog-featured-body p{font-size:15px;color:var(--text-muted);line-height:1.72;margin-bottom:22px}
.blog-featured-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-light);margin-bottom:22px}
.blog-featured-meta .case-dot{width:3px;height:3px;border-radius:50%;background:var(--border-strong)}

.blog-card.is-hidden{display:none}

/* ─── ARTICLE PAGE ───────────────────────────────────────── */
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;position:relative;z-index:1}
.article-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#fff;background:var(--accent);padding:5px 13px;border-radius:20px}
.article-meta-item{font-size:13.5px;color:rgba(255,255,255,.7)}
.article-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4)}

.article-layout{max-width:760px;margin:0 auto}
.article-feature-img{width:100%;border-radius:14px;overflow:hidden;margin-bottom:40px;background:var(--bg-alt);aspect-ratio:16/8}
.article-feature-img img{width:100%;height:100%;object-fit:cover}
.article-body p{font-size:16.5px;color:var(--text);line-height:1.85;margin-bottom:24px}
.article-body p:first-of-type{font-size:18px;color:var(--text)}
.article-body a{color:var(--accent);font-weight:600;border-bottom:1px solid var(--accent-light)}
.article-body a:hover{border-color:var(--accent)}
.article-storymap-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  background:var(--accent);color:#fff;font-weight:600;font-size:14px;
  padding:12px 22px;border-radius:8px;transition:all .18s;
}
.article-storymap-cta:hover{background:var(--accent-hover);transform:translateY(-1px)}
.article-storymap-cta svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Author bio card */
.author-card{
  display:flex;gap:20px;align-items:center;
  background:var(--bg-alt);border:1.5px solid var(--card-border);
  border-radius:14px;padding:26px;margin-top:48px;
}
.author-avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--card)}
.author-avatar img{width:100%;height:100%;object-fit:cover;object-position:top}
.author-card-name{font-size:16px;font-weight:700}
.author-card-role{font-size:12.5px;color:var(--accent);font-weight:600;margin:2px 0 8px}
.author-card-bio{font-size:13.5px;color:var(--text-muted);line-height:1.65}

@media(max-width:760px){
  .blog-featured{grid-template-columns:1fr}
  .blog-featured-img{min-height:220px}
  .blog-featured-body{padding:28px}
  .author-card{flex-direction:column;text-align:center}
}