/* ── FILTERS ── */
.blog-filters { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.filter-btn {
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; border:1px solid var(--border); color:var(--gray);
  padding:.4rem 1rem; border-radius:100px; cursor:pointer; transition:all .2s;
}
.filter-btn:hover { border-color:var(--violet-dim); color:var(--light); }
.filter-btn.active { background:var(--violet); border-color:var(--violet); color:#fff; }

/* ── POSTS GRID ── */
.posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:3rem; }

.post-card {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:1.8rem; display:flex; flex-direction:column; gap:1rem;
  transition:border-color .25s, background .25s, transform .2s;
  position:relative;
}
.post-card:hover { background:#1a1a2a; border-color:rgba(124,58,237,.3); transform:translateY(-3px); }

.post-type {
  font-family:var(--mono); font-size:.62rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; padding:.25rem .75rem; border-radius:100px;
  display:inline-block; width:fit-content;
}
.post-type-linkedin { background:rgba(10,102,194,0.15); color:#60a5fa; border:1px solid rgba(10,102,194,0.3); }
.post-type-video { background:rgba(239,68,68,0.12); color:#f87171; border:1px solid rgba(239,68,68,0.25); }

.post-meta { display:flex; align-items:center; gap:.7rem; }
.post-date { font-family:var(--mono); font-size:.7rem; color:var(--gray); }
.post-tag-pill {
  font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(124,58,237,0.1); color:var(--violet-glow);
  border:1px solid rgba(124,58,237,0.2); padding:.2rem .6rem; border-radius:100px;
}

.post-card h3 { font-family:var(--sans); font-size:.95rem; font-weight:700; color:var(--white); line-height:1.35; }
.post-card > p { font-size:.83rem; line-height:1.65; color:var(--gray); flex:1; }

/* Code snippet inside post */
.post-code { background:var(--dark); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.code-bar { padding:.5rem 1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.5rem; }
.post-code pre { padding:.9rem 1rem; overflow-x:auto; }
.post-code code { font-family:var(--mono); font-size:.72rem; line-height:1.7; }

/* Video thumbnail placeholder */
.post-video-thumb {
  background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.2);
  border-radius:8px; height:120px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:.6rem; color:var(--gray); font-size:.8rem; text-align:center; padding:1rem;
}
.video-play-btn {
  width:40px; height:40px;
  background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.3);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color:#f87171;
}

.post-footer { margin-top:auto; padding-top:.8rem; border-top:1px solid var(--border); }
.post-link { font-family:var(--mono); font-size:.75rem; color:var(--violet-glow); text-decoration:none; transition:color .2s; }
.post-link:hover { color:var(--violet-bright); }
.post-link-muted { font-family:var(--mono); font-size:.75rem; color:var(--gray); }

/* Empty state */
.posts-empty { text-align:center; padding:4rem 2rem; }
.posts-empty p { font-size:.9rem; color:var(--gray); margin-bottom:1rem; }

/* ── BLOG PREVIEW CARDS (coming soon state) ── */
.coming-soon-banner {
  background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.2);
  border-radius: 14px; padding: 2rem 2.5rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cs-icon { font-size: 1.8rem; flex-shrink: 0; }
.coming-soon-banner h2 { font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--white); margin-bottom:.3rem; }
.coming-soon-banner p { font-size:.86rem; line-height:1.6; color:var(--gray); }
.coming-soon-banner > div { flex:1; min-width:200px; }

.blog-preview-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.blog-preview-card {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:1.8rem; display:flex; flex-direction:column; gap:.8rem;
  transition:border-color .25s, background .25s, transform .2s;
  position:relative; overflow:hidden;
}
.blog-preview-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),transparent);
  opacity:0; transition:opacity .3s;
}
.blog-preview-card:hover { background:#1a1a2a; border-color:rgba(124,58,237,.3); transform:translateY(-3px); }
.blog-preview-card:hover::before { opacity:1; }

.bp-type {
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.22rem .7rem; border-radius:100px; display:inline-block; width:fit-content;
}
.bp-type-post { background:rgba(124,58,237,0.12); color:var(--violet-glow); border:1px solid rgba(124,58,237,0.25); }
.bp-type-video { background:rgba(239,68,68,0.1); color:#f87171; border:1px solid rgba(239,68,68,0.25); }

.bp-tag { font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); }
.blog-preview-card h3 { font-family:var(--sans); font-size:.92rem; font-weight:700; color:var(--white); line-height:1.35; }
.blog-preview-card p { font-size:.82rem; line-height:1.65; color:var(--gray); }

/* ── LINKEDIN CTA ── */
.blog-linkedin-cta {
  background:rgba(10,102,194,0.08); border:1px solid rgba(10,102,194,0.2);
  border-radius:14px; padding:2rem 2.5rem;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.blc-icon {
  width:52px; height:52px; flex-shrink:0;
  background:rgba(10,102,194,0.15); border:1px solid rgba(10,102,194,0.3);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:1rem; font-weight:700; color:#60a5fa;
}
.blog-linkedin-cta h3 { font-family:var(--sans); font-size:.9rem; font-weight:700; color:var(--white); margin-bottom:.3rem; }
.blog-linkedin-cta p { font-size:.83rem; color:var(--gray); }
.blog-linkedin-cta > div { flex:1; min-width:200px; }

@media(max-width:900px) {
  .posts-grid { grid-template-columns:1fr; }
  .blog-linkedin-cta { flex-direction:column; }
}