.blog-page .navbar { background-color: #214b68; }
.blog-listing { padding-top: 180px; padding-bottom: 100px; }
.blog-listing h1, .blog-article-header h1 { color: #214b68; font-family: 'Work Sans', sans-serif; font-size: 55px; font-weight: 800; line-height: 1.1; }
.blog-listing h1 { margin-bottom: 90px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.blog-card-image, .blog-card-image img { display: block; width: 100%; }
.blog-card-image img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.blog-card-content { padding: 28px 20px 20px; }
.blog-card h2 { font-size: 26px; font-weight: 800; line-height: 1.2; margin-bottom: 18px; }
.blog-card h2 a { font-family: 'Work Sans', sans-serif; color: #214b68; text-decoration: none; }
.blog-card time { color: #666; font-size: 14px; }
.blog-card p { color: #444; font-size: 16px; line-height: 1.7; margin: 18px 0; }
.blog-read-more, .blog-article-content a { color: #214b68; }
.blog-read-more { display: inline-block; font-weight: 600; text-decoration: none; }
.blog-read-more i { margin-left: 8px; }
.blog-card a:hover, .blog-article-content a:hover { color: #e67e22; }
.blog-detail { padding: 190px 20px 90px; }
.blog-article-header { max-width: 1050px; text-align: center; }
.blog-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; color: #214b68; font-size: 20px; margin: 35px 0; }
.blog-meta a { color: inherit; text-decoration: none; }
.blog-share { display: flex; justify-content: center; gap: 30px; margin-bottom: 40px; }
.blog-share a { font-size: 25px; color: #3b5998; }
.blog-share a:nth-child(2) { color: #bd081c; }
.blog-share a:nth-child(3) { color: #55acee; }
.blog-article-body { max-width: 900px; margin: 0 auto; }
.blog-featured-image { display: block; width: 100%; height: 360px; object-fit: cover; }
.blog-article-content { padding: 40px; color: #333; font-size: 18px; line-height: 1.8; }
.blog-article-content p, .blog-article-content ul { margin-bottom: 24px; }
.blog-article-content h2 { color: #214b68; font-size: 28px; line-height: 1.3; margin: 35px 0 20px; }
.blog-article-content h3 { font-size: 20px; line-height: 1.5; margin: 28px 0 15px; }
.blog-article-content ul { padding-left: 25px; }
.blog-article-content li { margin-bottom: 10px; }
.blog-inline-image { display: block; max-width: 100%; height: auto; margin: 30px auto; }
.blog-tags { border-top: 1px solid #eee; padding-top: 24px; font-size: 15px; }
@media (max-width: 1024px) {
    .blog-listing { padding-top: 130px; }
    .blog-detail { padding-top: 130px; }
    .blog-article-header h1 { font-size: 42px; }
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .blog-listing { padding-bottom: 50px; }
    .blog-listing h1 { font-size: 40px; margin-bottom: 45px; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card-content { padding: 24px 0; }
    .blog-card h2 { font-size: 25px; }
    .blog-detail { padding: 130px 20px 50px; }
    .blog-article-header { padding: 0; }
    .blog-article-header h1 { font-size: 32px; }
    .blog-meta { font-size: 16px; margin: 25px 0; gap: 15px; }
    .blog-featured-image { height: 220px; }
    .blog-article-content { padding: 28px 0 0; font-size: 16px; }
    .blog-article-content h2 { font-size: 25px; }
}