/* Component: Post Card (+ grid) ----------------------------------------- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .post-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.post-card .card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }

.card-thumb { overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-surface-alt); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card-body { padding: var(--space-4) var(--space-4) var(--space-5); }
.card-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.post-card:hover .card-title { color: var(--color-primary); }
.card-excerpt { color: var(--color-text-soft); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }