/* Blog */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding-top: 0;
}
.blog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
    transition: box-shadow var(--transition), transform var(--transition);
}
.blog-card:hover { transform: translateY(0px); }
.blog-card-img {
    aspect-ratio: 16/9;
    background: var(--bg-light);
    overflow: hidden;
    flex-shrink: 0;
}
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-light);
}
.blog-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.blog-tag {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary);
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: .04em;
}
.blog-title { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin: 0 0 8px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-excerpt { font-size: .875rem; color: var(--text-mid); line-height: 1.65; margin: 0 0 auto; padding-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-meta { display: flex; gap: 12px; font-size: .78rem; color: var(--text-light); border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }

@media (max-width: 992px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px)  { .blog-grid { grid-template-columns: 1fr; } }

/* ===== Blog Detail (view.php) ===== */
.blog-detail {
    margin: 0 auto; 
    padding: 0 0 48px 0; 
}
.blog-detail-header { 
    margin-bottom: 28px; 
}
.blog-detail-title { 
    font-size: clamp(1.5rem, 3vw, 2.2rem); 
    font-weight: 800; 
    color: var(--text-dark); 
    margin: 10px 0 14px; 
    line-height: 1.3; 
}
.blog-detail-meta { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 16px; 
    font-size: .875rem; 
    color: var(--text-light); 
}
.blog-detail-meta span { 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
}
.blog-detail-hero { 
    overflow: hidden; 
    margin-bottom: 36px; 
}
.blog-detail-hero img { 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
}
.blog-detail-body { 
    font-size: 1rem; 
    line-height: 1.9; 
    color: var(--text-mid); 
    padding-bottom: 40px; 
    border-bottom: 1px solid var(--border); 
}
.blog-detail-body img { 
    max-width: 100%; 
    border-radius: var(--radius-sm); 
    margin: 16px 0; 
}
.blog-detail-body h2, .blog-detail-body h3 { 
    color: var(--text-dark); 
    margin-top: 36px; 
}
.blog-detail-footer { 
    padding-top: 28px; 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    flex-wrap: wrap; 
}
.blog-footer-tags { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    flex-wrap: wrap; 
    font-size: .875rem; 
    color: var(--text-mid); 
}