/* ============ Blog ============ */
.blog-featured {
  display: grid; gap: var(--space-6); align-items: center;
  grid-template-columns: 1fr; margin-bottom: var(--space-16);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); overflow: hidden;
}
.blog-featured__media { aspect-ratio: 16/10; background: var(--color-surface-2); }
.blog-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured__body { padding: var(--space-8); }
.blog-featured__body h2 { font-size: var(--text-3xl); margin-block: var(--space-3); }
.blog-featured__body p { color: var(--color-text-muted); margin-bottom: var(--space-6); }

.post-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.post-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--transition-base), border-color var(--transition-base);
}
.post-card:hover { transform: translateY(-4px); border-color: var(--color-primary); }
.post-card__media { aspect-ratio: 16/9; background: var(--color-surface-2); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.post-card__meta { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.post-card__body h3 { font-size: var(--text-xl); }
.post-card__body p { color: var(--color-text-muted); font-size: var(--text-sm); flex: 1; }
.post-card__body a.readmore { color: var(--color-primary); font-weight: 600; font-size: var(--text-sm); }

@media (min-width: 768px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured { grid-template-columns: 1.1fr 0.9fr; }
}
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Article page ---- */
.article { display: grid; gap: var(--space-12); grid-template-columns: 1fr; }
.article__main { max-width: 72ch; }
.article__main h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); }
.article__meta { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-8); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.article__main h2 { font-size: var(--text-2xl); margin-block: var(--space-8) var(--space-3); }
.article__main h3 { font-size: var(--text-xl); margin-block: var(--space-6) var(--space-2); }
.article__main p { margin-bottom: var(--space-4); color: var(--color-text); }
.article__main ul, .article__main ol { margin: 0 0 var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.article__main ul li { list-style: disc; color: var(--color-text-muted); }
.article__main ol li { list-style: decimal; color: var(--color-text-muted); }
.article__main blockquote {
  border-left: 4px solid var(--color-primary); padding: var(--space-3) var(--space-6);
  margin: var(--space-6) 0; color: var(--color-text-muted); background: var(--color-surface); border-radius: var(--radius-md);
}
.article aside { display: flex; flex-direction: column; gap: var(--space-4); }
.article aside h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); }
.article aside .related a {
  display: block; padding: var(--space-3) var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm);
  transition: border-color var(--transition-fast);
}
.article aside .related a:hover { border-color: var(--color-primary); color: var(--color-primary); }

@media (min-width: 1024px) { .article { grid-template-columns: 1fr 300px; } }