/* Blog index */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: all .25s ease; }
.blog-card:hover { box-shadow: var(--shadow-lg); border-color: transparent; transform: translateY(-2px); }
.blog-card-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.blog-card-body h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.blog-card-body h3 a { color: var(--navy); text-decoration: none; }
.blog-card-body h3 a:hover { color: var(--teal-600); }

.blog-meta { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--gray-500); flex-wrap: wrap; }

/* Featured post */
.blog-featured-card { display: grid; grid-template-columns: 1fr; gap: 2rem; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; background: var(--white); }
@media (min-width: 768px) { .blog-featured-card { grid-template-columns: 1fr 1fr; } }
.blog-featured-image { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.blog-featured-content { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.blog-featured-content h2 { font-size: 1.5rem; margin: .75rem 0 .5rem; }
.blog-featured-content h2 a { color: var(--navy); text-decoration: none; }
.blog-featured-content h2 a:hover { color: var(--teal-600); }
.blog-featured-content p { color: var(--gray-600); font-size: .9375rem; margin-bottom: 1rem; }

/* Blog post */
.blog-post-header { margin-bottom: 2rem; }
.blog-post-hero { width: 100%; border-radius: var(--radius-lg); margin: 2rem 0; }
.blog-post-body { margin-bottom: 3rem; }
.blog-post-footer { padding-top: 2rem; border-top: 1px solid var(--gray-200); }
.blog-post-share { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; }
.blog-post-share a { color: var(--teal-600); font-size: .875rem; text-decoration: underline; }