/* Blog styles */
.blog-hero .hero-content {
max-width: 700px;
}

.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
padding: 40px 0;
}

.blog-card {
background: var(--card);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: transform 0.2s, box-shadow 0.2s;
}

.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.blog-card-link {
display: block;
text-decoration: none;
color: inherit;
}

.blog-card-img {
width: 100%;
height: 200px;
overflow: hidden;
}

.blog-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}

.blog-card-content {
padding: 20px;
}

.blog-tag {
display: inline-block;
background: var(--accent);
color: white;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 10px;
}

.blog-card-content h2 {
font-size: 1.1rem;
margin: 0 0 8px;
line-height: 1.3;
}

.blog-card-content p {
color: var(--muted);
font-size: 0.9rem;
margin: 0 0 12px;
}

.blog-read-more {
color: var(--accent);
font-weight: 600;
font-size: 0.9rem;
}

.blog-cta {
padding: 40px 0 60px;
}

@media (max-width: 600px) {
.blog-grid {
grid-template-columns: 1fr;
}
}