/* Blog hub and homepage article preview; existing navigation styles are preserved. */
.blog-listing, .home-blog { background: #fff; }
.blog-section-heading { margin: 0 0 30px; max-width: 820px; }
.blog-section-heading h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; }
.blog-section-heading .eyebrow { margin-bottom: 12px; }
.blog-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); overflow: hidden; border: 1px solid #d7e3ec; border-radius: 13px; background: var(--pale); }
.blog-card-image { display: block; min-width: 0; overflow: hidden; }
.blog-card-image img { display: block; width: 100%; height: 100%; min-height: 290px; object-fit: cover; }
.blog-card-copy { min-width: 0; padding: 34px; }
.blog-card-meta { color: var(--muted); font-size: 12px; margin-bottom: 14px; line-height: 1.6; }
.blog-card h3 { font-size: clamp(25px, 3vw, 38px); line-height: 1.13; margin-bottom: 17px; }
.blog-card h3 a { color: var(--navy); }
.blog-card h3 a:hover { color: var(--red); }
.blog-card-copy > p:not(.blog-card-meta) { font-size: 15px; line-height: 1.8; color: var(--muted); }
.blog-card-copy > .text-link, .blog-more { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 19px; }
.blog-more { margin-top: 24px; }
.blog-card a:focus-visible, .blog-more:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
@media (max-width: 700px) {
  .blog-card { grid-template-columns: minmax(0, 1fr); }
  .blog-card-image img { height: 220px; min-height: 0; }
  .blog-card-copy { padding: 25px; }
  .blog-card h3 { font-size: 28px; }
}