.blog-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:30px;}
.blog-card {display:flex; flex-direction:column; border-radius:8px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.08); transition:transform 0.3s, box-shadow 0.3s; background-color:var(--white);}
.blog-card:hover {transform:translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,0.12);}
.blog-card-image {height:220px; overflow:hidden; background-color: #f0f0f0;}
.blog-card-image img {width:100%; height:100%; object-fit:cover; transition:transform 0.4s;}
.blog-card:hover .blog-card-image img {transform:scale(1.05);}
.blog-card-content {padding:25px; flex-grow:1; display:flex; flex-direction:column;}
.blog-card-meta {font-size:0.85rem; color:var(--text-muted, #6c757d); margin-bottom:10px;}
.blog-card-title {font-size:1.3rem; color:var(--dark-blue, #0d4d8a); margin-bottom:15px;}
.blog-card-excerpt {font-size:0.95rem; color:#555; flex-grow:1; margin-bottom:20px;}
.blog-card-link {color:var(--orange-accent, #f15a2b); font-weight:600; margin-top:auto; display:inline-flex; align-items:center; gap:8px;}
.blog-card-link i {transition:transform 0.2s;}
.blog-card:hover .blog-card-link i {transform:translateX(5px);}
.blog-post-container {max-width:900px; margin:40px auto;}
.blog-post {background-color:var(--white); padding:40px; border-radius:8px;}
.blog-post-header {text-align:center; margin-bottom:30px;}
.blog-post-title {font-size:2.8rem; color:var(--dark-blue, #0d4d8a); margin-bottom:15px; line-height:1.2;}
.blog-post-meta {font-size:1rem; color:var(--text-muted, #6c757d);}
.blog-post-featured-image {margin-bottom:30px; border-radius:8px; overflow:hidden;}
.blog-post-featured-image img {width:100%; height:auto;}
.blog-post-content {line-height:1.8; font-size:1.1rem; color:#333;}
.blog-post-content p {margin-bottom:1.5em;}
.blog-post-content h1, .blog-post-content h2, .blog-post-content h3 {color:var(--dark-blue, #0d4d8a); margin-top:2em; margin-bottom:1em; line-height: 1.3;}
.blog-post-content ul, .blog-post-content ol {margin-bottom:1.5em; padding-left:1.5em;}
.blog-post-content li {margin-bottom: 0.5em;}
.blog-post-content a {color: var(--medium-blue); text-decoration: underline;}
.blog-post-content a:hover {color: var(--dark-blue);}
.blog-post-content blockquote {border-left: 4px solid var(--border-color); padding-left: 1em; margin: 1.5em 0; color: #6c757d; font-style: italic;}
.back-to-blog {margin-top:40px; text-align:center;}

@media (max-width: 768px) {
.blog-post {padding:25px;}
.blog-post-title {font-size:2rem;}
}