/* HueCommand blog (/blog, rendered by worker/). Posts reuse the guide-page classes in site.css
   (.crumbs, .page-hero, .article, .toc, .prose, .faq-list, .cta-card, .related, .guides);
   this file only adds what the blog has and the guides don't. */

.blog-preview-banner { margin: 0; padding: 10px var(--gutter); background: var(--accent); color: var(--cta-ink); font-weight: 600; text-align: center; }

.blog-hero { margin: 0 0 28px; }
.blog-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }

.blog-faq { margin-top: 40px; }
.blog-faq h2 { margin-bottom: 8px; }
.blog-faq .faq-list { max-width: none; }

.blog-sources { margin-top: 40px; font-size: 0.9375rem; }
.blog-sources ol { padding-left: 1.3em; }
.blog-sources li { margin-bottom: 8px; }
.blog-sources .host { color: var(--faint); font-size: 0.8125rem; }

.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.blog-tag, .blog-topics a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text); text-decoration: none; font-size: 0.9375rem;
}
.blog-tag:hover, .blog-topics a:hover { border-color: var(--text); }
.blog-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.blog-topics a[aria-current="page"] { background: var(--cta-bg); color: var(--cta-ink); border-color: var(--cta-bg); }

.blog-index { padding-bottom: clamp(56px, 9vw, 110px); }
.blog-list .blog-card-meta { color: var(--faint); font-size: 0.8125rem; margin-top: auto; padding-top: 8px; }
.blog-empty { color: var(--muted); font-size: 1.0625rem; }

.blog-pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 32px; color: var(--faint); }
.blog-pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); text-decoration: none; }
.blog-pager a:hover { border-color: var(--text); }

.prose .cta-card { margin-top: 48px; }

/* Guide pages wrap each section in <section> with its own spacing; blog Markdown has bare headings. */
.prose > h2:not(:first-child) { margin-top: 48px; }
.prose > h3 { margin-top: 32px; }