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

:root { --article-width: 1040px; }

.blog-hero { padding: var(--space-12) 0 var(--space-8); 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-16); }
.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-8);
  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-visual { display: grid; align-content: start; gap: var(--space-4); min-width: 0; margin: 0; }
.blog-featured-visual img,
.blog-card-image,
.article-hero-image {
  display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover;
  background: var(--primary-soft); border: 1px solid var(--primary-soft-border);
}
.blog-featured-visual img { border-radius: var(--r-lg); }
.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-image { margin-bottom: var(--space-5); border-radius: var(--r-md); }
.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-load-more-wrap { display: flex; justify-content: center; margin-top: var(--space-8); }
.blog-load-more { min-width: 168px; }
.blog-section [hidden] { display: none !important; }
.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,
.article-hero-wrap,
.article-body,
.related-section > .container {
  max-width: var(--article-width);
  margin-inline: 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-hero-wrap { margin-top: var(--space-8); }
.article-hero-image { border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.article-main { padding: 0 0 var(--space-16); }
.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-10) 0 var(--space-6); 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-hero-wrap { margin-top: var(--space-6); }
  .article-hero-image { border-radius: var(--r-lg); }
  .article-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-cta { padding: var(--space-8) var(--space-5); }
  .article-cta .btn {
    width: 100%; height: auto; min-height: 52px; padding-block: var(--space-3);
    line-height: 1.3; text-align: center; white-space: normal;
  }
}