.blog-card {
    --blog-ink: #172f40;
    --blog-muted: #526573;
    --blog-accent: #116b61;
    --blog-line: #dfe7ea;
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--blog-line);
}

.blog-card:last-child {
    border-bottom: 1px solid var(--blog-line);
}

.blog-card a:focus-visible {
    outline: 3px solid #116b61;
    outline-offset: 4px;
}

.blog-card .post-meta {
    color: var(--blog-muted);
    font-size: .8rem;
    line-height: 1.8;
    font-weight: 500;
}

.blog-card--image {
    grid-template-columns: minmax(0, 1fr) 180px;
}

.blog-card-copy {
    min-width: 0;
    grid-row: 1;
    grid-column: 1;
}

.blog-card-media {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: .65rem;
    background: #f0f4f5;
}

.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.blog-card-media:hover img {
    transform: scale(1.03);
}

.blog-card h2 {
    font-size: clamp(1.2rem, 1.7vw, 1.45rem);
    line-height: 1.35;
    letter-spacing: -.025em;
    font-weight: 700;
    margin: .35rem 0 .65rem;
}

.blog-card h2 a {
    color: var(--blog-ink);
    text-decoration: none;
}

.blog-card h2 a:hover {
    color: var(--blog-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.blog-card-excerpt {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--blog-muted);
    margin-bottom: .8rem;
}

.blog-card .tag-badge {
    display: inline-block;
    margin-right: .4rem;
    margin-bottom: .4rem;
    font-weight: 500;
    background: #edf4f3 !important;
    color: #295e57 !important;
    font-size: .73rem;
    border-radius: .3rem;
    padding: .35rem .6rem;
    text-decoration: none;
    transition: all .2s ease;
}

.blog-card .tag-badge:hover {
    background: #dcece8 !important;
    transform: none;
}

.blog-read-link {
    display: inline-block;
    margin-top: .5rem;
    color: var(--blog-accent);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}

.blog-read-link span {
    margin-left: .5rem;
}

@media (max-width: 991.98px) {
    .blog-card--image { grid-template-columns: minmax(0, 1fr) 130px; }
}

@media (max-width: 767.98px) {
    .blog-card--image { grid-template-columns: minmax(0, 1fr) 100px; gap: .6rem 1rem; }
    .blog-card--image .blog-card-copy { display: contents; }
    .blog-card--image .post-meta { grid-row: 1; grid-column: 1 / -1; }
    .blog-card--image h2 { grid-row: 2; grid-column: 1; margin: 0; }
    .blog-card--image .blog-card-media { grid-row: 2; grid-column: 2; }
    .blog-card--image .blog-card-excerpt { grid-row: 3; grid-column: 1 / -1; margin: 0; }
    .blog-card--image .blog-card-topics { grid-row: 4; grid-column: 1 / -1; }
    .blog-card--image .blog-read-link { grid-row: 5; grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card-media img { transition: none; }
    .blog-card-media:hover img { transform: none; }
}
