/* ── Blog Hero ── */
.blog-hero {
    background: var(--bg-2);
    padding: calc(var(--nav-h) + 60px) 0 56px;
    border-bottom: 1px solid var(--border);
}
.blog-hero-sub { color: var(--muted); font-size:1rem; max-width: 860px; line-height:1.7; margin: 0 0 32px; }

.blog-search-wrap {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 12px; padding: 0 18px;
    max-width: 100%; transition: var(--ease);
}
.blog-search-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.blog-search-wrap i { color: var(--dim); font-size:0.9rem; flex-shrink:0; }
.blog-search-wrap input {
    background: none; border: none; outline: none;
    color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem; padding: 14px 0; flex: 1;
}
.blog-search-wrap input::placeholder { color: var(--dim); }
.search-clear { background:none; border:none; color:var(--dim); cursor:pointer; padding:4px; font-size:0.9rem; transition:var(--ease); }
.search-clear:hover { color: var(--text); }

/* ── Blog Main ── */
.blog-main { padding: 44px 0 80px; }

/* ── Category Tabs ── */
.cat-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.cat-tab {
    padding: 7px 16px; border-radius: 8px; font-size:0.82rem; font-weight:500;
    background: var(--bg-card); border:1px solid var(--border); color:var(--muted);
    cursor:pointer; transition:var(--ease); font-family:'Plus Jakarta Sans', sans-serif;
}
.cat-tab:hover { border-color:var(--primary); color:var(--primary-l); }
.cat-tab.active { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ── Tag Filters ── */
.tag-filter-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:24px; padding:14px 18px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; }
.tag-filter-label { font-size:0.78rem; font-weight:500; color:var(--dim); white-space:nowrap; }
.tag-filter-pills { display:flex; flex-wrap:wrap; gap:7px; }
.tag-pill {
    padding:4px 12px; border-radius:6px; font-size:0.75rem; font-weight:500;
    background: rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.1); color:var(--muted);
    cursor:pointer; transition:var(--ease); font-family:'Plus Jakarta Sans', sans-serif;
}
.tag-pill:hover { border-color:var(--primary); color:var(--primary-l); }
.tag-pill.active { background:rgba(99,102,241,0.18); border-color:var(--primary); color:var(--primary-l); }
.tag-clear { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:6px; font-size:0.75rem; background:none; border:1px solid rgba(239,68,68,0.3); color:#f87171; cursor:pointer; transition:var(--ease); font-family:'Plus Jakarta Sans', sans-serif; }
.tag-clear:hover { background:rgba(239,68,68,0.1); }

/* ── Meta row ── */
.blog-meta-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.blog-count { font-size:0.85rem; color:var(--muted); font-weight:500; }

/* ── Article Card Row ── */
.articles-list { display:flex; flex-direction:column; gap:16px; }

.article-card-row {
    display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--r); padding:28px 32px; transition:var(--ease);
}
.article-card-row:hover { border-color:var(--border-h); background:var(--bg-card-h); transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,0.3); }

.card-row-left { flex:1; min-width:0; }
.card-top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.featured-badge { display:inline-flex; align-items:center; gap:5px; font-size:0.7rem; font-weight:600; color:#fbbf24; background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.25); padding:3px 10px; border-radius:5px; }

.card-title { font-family:'Plus Jakarta Sans', sans-serif; font-size:1.15rem; font-weight:700; line-height:1.35; margin-bottom:10px; color:var(--text); }
.card-excerpt { color:var(--muted); font-size:0.9rem; line-height:1.7; margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; }

.card-row-right { display:flex; flex-direction:column; align-items:flex-end; gap:16px; flex-shrink:0; }
.card-meta { display:flex; flex-direction:column; align-items:flex-end; gap:5px; font-size:0.75rem; color:var(--dim); }
.card-meta i { margin-right:3px; }

.read-btn { padding:9px 18px !important; font-size:0.82rem !important; white-space:nowrap; }

/* ── Loading / empty ── */
.blog-loading { text-align:center; padding:80px 0; color:var(--muted); font-size:0.9rem; }
.blog-empty { flex-direction:column; align-items:center; gap:14px; padding:80px 0; color:var(--muted); display:flex; }
.blog-empty i { font-size:2.5rem; color:var(--dim); }
.blog-empty p { font-size:0.95rem; }

/* ── Category color badges (reuse from main style) ── */
.article-cat { display:inline-block; font-size:0.7rem; font-weight:600; padding:3px 10px; border-radius:5px; text-transform:uppercase; letter-spacing:0.07em; }
.article-cat.bc  { background:rgba(99,102,241,0.15);  color:var(--primary-l); }
.article-cat.api { background:rgba(6,182,212,0.15);   color:var(--cyan); }
.article-cat.ls  { background:rgba(139,92,246,0.15);  color:var(--violet); }
.article-cat.pbi { background:rgba(251,191,36,0.15);  color:#fbbf24; }
.article-cat.pp  { background:rgba(16,185,129,0.15);  color:#34d399; }

/* ── Responsive ── */
@media (max-width:640px) {
    .article-card-row { flex-direction:column; }
    .card-row-right { flex-direction:row; align-items:center; justify-content:space-between; width:100%; }
    .card-meta { flex-direction:row; gap:12px; }
}