.blog-section { background: transparent; }
.blog-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.07); border: 1px solid #eee; transition: all .3s; height: 100%; display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(128,0,32,0.12); }
.blog-img-wrap { position: relative; height: 210px; overflow: hidden; }
.blog-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-img { transform: scale(1.05); }
.blog-img-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f5f5; font-size: 48px; color: #ddd; }
.blog-date-badge { position: absolute; top: 14px; right: 14px; background: var(--color-primary, #800020); color: #fff; border-radius: 8px; padding: 6px 10px; text-align: center; min-width: 44px; }
.blog-date-badge .day { display: block; font-size: 20px; font-weight: 800; line-height: 1; }
.blog-date-badge .month { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.blog-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-meta { font-size: 12px; color: #999; margin-bottom: 8px; }
.blog-meta i { color: var(--color-primary, #800020); margin-right: 4px; }
.blog-title { font-size: 16px; font-weight: 700; color: #222; line-height: 1.4; margin-bottom: 10px; flex: 1; }
.blog-title a { text-decoration: none; color: inherit; transition: color .2s; }
.blog-title a:hover { color: var(--color-primary, #800020); }
.blog-summary { font-size: 13px; color: #777; line-height: 1.6; }
.blog-read-more { font-size: 13px; font-weight: 600; color: var(--color-primary, #800020); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; transition: gap .2s; }
.blog-read-more:hover { gap: 10px; }

@media (max-width: 767px) {
    .blog-img-wrap { height: 180px; }
    .blog-body { padding: 16px; }
    .blog-title { font-size: 15px; }
    .blog-date-badge { padding: 4px 8px; min-width: 38px; }
    .blog-date-badge .day { font-size: 17px; }
}

@media (max-width: 575px) {
    .blog-img-wrap { height: 200px; }
}