/* Editorial layouts use the site's shared color and typography tokens. */
.container.blog-article {
  width: calc(100% - 32px);
  max-width: 1040px;
  margin: clamp(24px, 4vw, 48px) auto 64px;
  padding: clamp(20px, 4vw, 40px);
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
}
.blog-heading { padding-bottom: 32px; border-bottom: 1px solid var(--border-color); margin-bottom: 32px; }
.blog-heading h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; }
.blog-breadcrumb { color: var(--text-secondary); font-size: .9rem; margin-bottom: 28px; }
.blog-meta { color: var(--text-secondary); font-size: .95rem; margin-top: 20px; }
.blog-body { font-size: 1.075rem; line-height: 1.8; }
.blog-body p + p { margin-top: 18px; }
.blog-body h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); margin: 42px 0 16px; line-height: 1.3; }
.blog-body ul { list-style: disc; padding-left: 24px; margin: 18px 0; }
.blog-body li + li { margin-top: 10px; }
.blog-body a, .blog-breadcrumb a, .blog-service-link a { text-decoration: underline; text-underline-offset: 3px; }
.blog-table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--border-color); border-radius: 12px; }
.blog-body table { border-collapse: collapse; width: 100%; font-size: .95rem; line-height: 1.6; background: var(--surface-bg); }
.blog-body caption { padding: 16px; text-align: left; font-weight: 700; }
.blog-body th, .blog-body td { padding: 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--border-color); }
.blog-body th { color: var(--heading-color); }
.blog-callout { margin: 32px 0; padding: 24px; border-left: 4px solid var(--accent-color); background: var(--surface-muted-bg); }
.blog-source { font-size: .9rem; color: var(--text-secondary); }
@media (max-width: 640px) {
 .container.blog-article { margin-bottom: 40px; }
 .blog-body { font-size: 1rem; }
 .blog-body th, .blog-body td { padding: 10px; overflow-wrap: anywhere; }
 }
/* Blog hub: shared hero, section headings, card shell, and CTA match service pages. */
.blog-feature {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 34px;
}
.blog-feature__media img { width: 180px; height: 180px; object-fit: contain; }
.blog-feature__content h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.3; }
.blog-feature__content h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.blog-feature__content .blog-feature__date { margin: 12px 0; font-size: var(--fs-note); }
.blog-feature__content .card-link { margin-top: 14px; }
@media (max-width: 640px) {
  .blog-feature { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .blog-feature__media { margin-inline: auto; }
  .blog-feature__media img { width: var(--icon-size-md); height: var(--icon-size-md); }
}

@media (max-width: 640px) {
  .blog-callout { padding: 18px; }
  .blog-body a { overflow-wrap: anywhere; }
}