@import url("/home.css?v=20260804-blog-v1");

.blog-hero { padding: var(--space-16) 0 var(--space-10); text-align: center; }
.blog-hero-inner { max-width: 760px; margin: 0 auto; }
.blog-hero .t-eyebrow { margin-bottom: var(--space-3); }
.blog-hero h1 { margin-bottom: var(--space-4); }
.blog-hero p { margin: 0; }

.blog-section { padding: 0 0 var(--space-20); }
.blog-featured {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--space-8); padding: var(--space-8); margin-bottom: var(--space-10);
  background: var(--surface); border: 1px solid var(--primary-soft-border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
}
.blog-featured-copy { display: grid; align-content: center; gap: var(--space-4); min-width: 0; }
.blog-featured-copy h2 { font: var(--h2); letter-spacing: -.016em; }
.blog-featured-copy h2 a, .blog-card h2 a { color: var(--text); text-decoration: none; }
.blog-featured-copy h2 a:hover, .blog-card h2 a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 4px; }
.blog-featured-panel {
  display: grid; align-content: center; gap: var(--space-4); padding: var(--space-6);
  background: var(--primary-soft); border: 1px solid var(--primary-soft-border); border-radius: var(--r-lg);
}
.blog-featured-panel strong { font: var(--h3); color: var(--teal-800); }
.blog-featured-panel p { margin: 0; color: var(--text-body); }

.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font: var(--body-sm); color: var(--text-muted); }
.blog-meta-separator { color: var(--border-strong); }
.blog-audience { color: var(--teal-700); font-weight: 700; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.blog-card {
  display: flex; flex-direction: column; min-width: 0; padding: var(--space-6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.blog-card h2 { margin: var(--space-4) 0 var(--space-3); font: var(--h3); }
.blog-card p { margin: 0 0 var(--space-5); color: var(--text-body); }
.blog-card .blog-meta { margin-top: auto; }
.blog-read-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-4); color: var(--link); font-weight: 700; text-decoration: none; }
.blog-read-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-author-note { max-width: 720px; margin: var(--space-8) auto 0; }

.article-header { padding: var(--space-12) 0 var(--space-8); }
.article-header-inner { max-width: var(--content); margin: 0 auto; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); font: var(--body-sm); color: var(--text-muted); }
.breadcrumbs a { color: var(--link); font-weight: 600; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.article-header h1 { margin: var(--space-4) 0; font: var(--h1); letter-spacing: -.02em; }
.article-deck { margin: 0 0 var(--space-5); font: var(--body-lg); color: var(--text-body); }
.article-main { padding: 0 0 var(--space-16); }
.article-body { max-width: var(--content); margin: 0 auto; }
.article-summary { margin-bottom: var(--space-8); padding: var(--space-5) var(--space-6); background: var(--primary-soft); border-left: 4px solid var(--primary); border-radius: var(--r-md); }
.article-summary strong { color: var(--teal-800); }
.article-body h2 { margin: var(--space-10) 0 var(--space-3); font: var(--h2); }
.article-body h3 { margin: var(--space-8) 0 var(--space-2); font: var(--h3); }
.article-body p { margin: 0 0 var(--space-4); color: var(--text-body); }
.article-body ul, .article-body ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.article-body li + li { margin-top: var(--space-2); }
.article-body blockquote { margin: var(--space-6) 0; padding: var(--space-4) var(--space-5); background: var(--surface-2); border-left: 4px solid var(--accent-400); border-radius: var(--r-sm); }
.article-body blockquote p { margin: 0; }
.article-body table { width: 100%; margin: var(--space-6) 0; border-collapse: collapse; background: var(--surface); font: var(--body-sm); }
.article-body th, .article-body td { padding: var(--space-3); border: 1px solid var(--border); text-align: left; vertical-align: top; }
.article-body th { background: var(--surface-2); color: var(--text); font-weight: 700; }
.article-body a { color: var(--link); font-weight: 600; }
.article-body .btn-primary { color: var(--text-on-brand); }
.article-cta { margin-top: var(--space-12); padding: var(--space-8); text-align: center; background: var(--ink-900); border-radius: var(--r-xl); }
.article-cta h2 { margin: 0 0 var(--space-3); color: var(--text-on-brand); }
.article-cta p { max-width: 52ch; margin: 0 auto var(--space-5); color: var(--text-on-dark); }
.related-section { padding: var(--space-12) 0 var(--space-16); border-top: 1px solid var(--border); }
.related-section h2 { margin-bottom: var(--space-6); }

@media (max-width: 900px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .blog-hero { padding: var(--space-12) 0 var(--space-8); text-align: left; }
  .blog-featured { padding: var(--space-6); gap: var(--space-5); }
  .blog-grid { grid-template-columns: 1fr; }
  .article-header { padding-top: var(--space-8); }
  .article-body table { display: block; overflow-x: auto; }
  .article-cta { padding: var(--space-8) var(--space-5); }
}