/*
 * Blog-index-only styles: the post preview card grid. Not reused
 * elsewhere yet - if that changes (e.g. a "latest posts" widget on the
 * homepage), promote into components.css, same pattern already followed
 * for .pillar/.dot and .article (see the note in home.css).
 */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px 20px;
  margin-top: 6px;
}

.post-card { display: flex; flex-direction: column; transition: opacity 0.12s ease; }
.post-card:hover, .post-card:focus-visible { opacity: 0.82; outline: none; }
.post-card:hover .post-title, .post-card:focus-visible .post-title { color: var(--signal); }

.post-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line-dim);
  background: var(--line-dim);
  margin-bottom: 10px;
}

.post-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  color: var(--muted-dim);
}
.post-dot { color: var(--muted-dim); }

.post-title {
  font-family: var(--display); font-weight: 900;
  font-size: 1.02rem; line-height: 1.28;
  color: var(--text);
  margin: 6px 0 8px;
}

.post-excerpt {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  color: var(--muted);
  margin: 0 0 8px;
}

.post-author {
  font-family: var(--mono); font-size: 11px;
  color: var(--muted-dim);
}

/* ---------- topic filter chips (sidebar) ---------- */
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  font-family: var(--mono); font-size: 11px;
  padding: 4px 9px;
  border: 1px solid var(--line-dim);
  background: transparent; color: var(--muted);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.tag-chip:hover, .tag-chip:focus-visible { color: var(--text); border-color: var(--muted-dim); outline: none; }
.tag-chip.active { color: var(--signal-ink); background: var(--signal); border-color: var(--signal); }

/* ---------- individual post page (blog/<slug>.html) ---------- */
.article .post-meta { margin-bottom: 10px; }
.post-summary { font-style: italic; }
.post-hero-img {
  width: 100%; height: auto;
  border: 1px solid var(--line-dim);
  margin: 0 0 20px;
}

/* ---------- related posts sidebar (blog/<slug>.html) ---------- */
.related-list { display: flex; flex-direction: column; gap: 14px; }
.related-item {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--muted);
  transition: color 0.12s ease;
}
.related-item:hover, .related-item:focus-visible { color: var(--text); outline: none; }
.related-thumb {
  width: 56px; height: 56px; flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid var(--line-dim);
}
.related-title {
  font-family: var(--mono); font-size: 12px; line-height: 1.45;
}