/* depremvar.site — blog.css */

.blog-main { padding-bottom:100px; }

/* Filter */
.blog-filter {
  display:flex; gap:8px; flex-wrap:wrap;
  padding-top:40px; padding-bottom:40px;
}
.filter-btn {
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
  padding:8px 20px; border-radius:4px; cursor:none;
  background:var(--glass-bg); border:1px solid var(--border);
  color:var(--text-dim); transition:all .22s var(--ease);
}
.filter-btn:hover { border-color:var(--teal-glow); color:var(--teal); }
.filter-btn.active { background:var(--teal-soft); border-color:var(--teal-glow); color:var(--teal); }

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

/* Post card */
.blog-post {
  padding:28px; display:flex; flex-direction:column;
  transition:all .25s var(--ease); cursor:default;
}
.blog-post:hover { border-color:var(--teal-glow); transform:translateY(-4px); }

.post-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:16px;
}
.post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.post-date { font-family:var(--font-mono); font-size:.6rem; color:var(--text-dim); letter-spacing:.1em; }
.post-tag {
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.1em;
  background:var(--teal-soft); border:1px solid rgba(0,255,204,.18);
  color:var(--teal-dim); padding:2px 8px; border-radius:2px;
}
.post-title {
  font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; color:#fff; line-height:1.3;
  margin-bottom:12px;
  flex-grow:1;
}
.post-excerpt {
  font-size:.84rem; line-height:1.75; color:var(--text-dim);
  flex-grow:2; margin-bottom:20px;
}
.post-footer {
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border); padding-top:16px; margin-top:auto;
}
.post-read-time { font-family:var(--font-mono); font-size:.6rem; color:var(--text-dim); letter-spacing:.1em; }
.post-read-more {
  font-family:var(--font-mono); font-size:.65rem;
  color:var(--teal); letter-spacing:.1em;
  transition:gap .2s; display:inline-flex; align-items:center;
}
.post-read-more:hover { text-decoration:underline; }

/* Featured post — spans 2 columns */
.post-featured { grid-column:1/3; }
.post-featured .post-title { font-size:1.4rem; }

@media (max-width:900px) {
  .blog-grid { grid-template-columns:1fr 1fr; }
  .post-featured { grid-column:1/3; }
}
@media (max-width:600px) {
  .blog-grid { grid-template-columns:1fr; }
  .post-featured { grid-column:1; }
}