/* Shared blog listing and article layouts; loaded only on blog pages. */
.blog-hero { padding-block: clamp(3rem, 6vw, 5rem) var(--space-5); }
.blog-hero h1 { max-width: 28ch; font-size: clamp(2.125rem, 4vw, 3.5rem); }
.blog-hero .body-large { max-width: 64ch; margin-bottom: 0; }
.blog-listing { padding-bottom: var(--space-5); }
.blog-filters { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.blog-filter { border-radius: var(--radius-pill); min-height: 2.75rem; padding: 0.6rem 1rem; }
.blog-filter[aria-pressed="true"] { color: var(--color-text); background: var(--color-accent); border-color: var(--color-accent); }
.blog-status { min-height: 1.5rem; margin-block: var(--space-3); }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; }
.blog-card { display: flex; flex-direction: column; min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.blog-card:focus-within { border-color: var(--color-focus); }
.blog-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.blog-category { color: var(--color-link); font-size: var(--text-small); margin: 0; }
.blog-card h2 { font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: 1.25; }
.blog-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--color-muted); font-size: var(--text-small); }
.blog-card .blog-meta { margin-top: auto; padding-top: var(--space-2); }
.blog-read-link { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; min-height: 2.75rem; font-size: var(--text-small); }
.blog-empty { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-small); min-height: 12rem; }
.blog-article { max-width: 52rem; padding-block: var(--space-5); }
.blog-article-header { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.blog-back { display: inline-flex; align-items: center; min-height: 2.75rem; margin-bottom: var(--space-4); font-size: var(--text-small); }
.blog-article h1 { font-size: clamp(2.125rem, 4vw, 3.5rem); line-height: 1.15; }
.blog-article-header .blog-meta { margin-bottom: 0; }
.blog-prose { max-width: 68ch; font-size: 1.0625rem; line-height: 1.85; }
.blog-prose p { margin-bottom: var(--space-3); }
.blog-prose h2 { margin-top: var(--space-5); font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.3; }
.blog-takeaway { margin-top: var(--space-4); padding: var(--space-4); border-left: 2px solid var(--color-link); border-radius: var(--radius-small); background: var(--color-surface); }
.blog-takeaway h2 { font-size: 1.375rem; }
.blog-takeaway p { margin-bottom: 0; }
@media (max-width: 60rem) {
  .blog-card { padding: var(--space-3); }
}
@media (max-width: 40rem) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-article { padding-block: var(--space-4); }
  .blog-prose { font-size: 1rem; line-height: 1.8; }
  .blog-takeaway { padding: var(--space-3); }
}