/* Purpose: Blog archive cards + single post reading layout. */

.blog-archive, .blog-single { padding-top: clamp(8rem, 16vh, 12rem); }

.blog-grid {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.blog-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-alt); }
.blog-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.blog-card:hover .blog-card__img { transform: scale(1.05); }
.blog-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-primary-soft), var(--color-primary)); }
.blog-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.blog-card__date { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-primary-dark); }
.blog-card__title { font-size: var(--text-xl); }
.blog-card__title a:hover { color: var(--color-primary); }
.blog-card__excerpt { font-size: var(--text-sm); color: var(--color-text-muted); }
.blog-card__more { margin-top: auto; font-size: var(--text-sm); color: var(--color-primary-dark); font-weight: var(--weight-medium); }

.blog-pagination { margin-top: var(--space-16); display: flex; justify-content: center; }
.blog-pagination .page-numbers { padding: 0.5rem 0.9rem; margin: 0 0.2rem; border: var(--border-thin); border-radius: var(--radius-full); color: var(--color-text); }
.blog-pagination .page-numbers.current { background: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); }

/* Single */
.blog-single__back { font-size: var(--text-sm); color: var(--color-primary-dark); }
.blog-single__title { font-size: var(--text-4xl); margin-top: var(--space-4); }
.blog-single__hero { margin: var(--space-8) 0; border-radius: var(--radius-lg); overflow: hidden; }
.blog-single__img { width: 100%; height: auto; }
.blog-single__content { font-size: var(--text-md); color: var(--color-text); line-height: var(--leading-loose); }
.blog-single__content > * + * { margin-top: var(--space-5); }
.blog-single__content h2, .blog-single__content h3 { margin-top: var(--space-8); }
.blog-single__content a { color: var(--color-primary-dark); text-decoration: underline; }
.blog-single__foot { margin-top: var(--space-12); padding-top: var(--space-8); border-top: var(--border-thin); }