/**
 * SMTBOX Blog Grid & Case Studies Component
 * File: css/components/blog-grid.css
 * Decoupled from page-blog.php & page-case-studies.php
 * Clean cascade, Zero important declarations
 */.sre-blog-grid,
.smtbox-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--smt-space-lg, 30px);
    margin-bottom: var(--smt-space-xl, 40px);
    contain: layout;
}@media (min-width: 768px) {.sre-blog-grid,
.smtbox-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}@media (min-width: 1024px) {.sre-blog-grid,
.smtbox-blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}.sre-blog-card,
.smtbox-blog-card {
    background: var(--smt-color-white, #ffffff);
    border: 1px solid var(--smt-color-slate-200, #e2e8f0);
    border-radius: var(--smt-radius-md, 6px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--smt-transition-normal, 0.3s ease), box-shadow var(--smt-transition-normal, 0.3s ease), border-color var(--smt-transition-normal, 0.3s ease);
    contain: layout style;
}.sre-blog-card:hover,
.smtbox-blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--smt-color-primary, #002780);
    box-shadow: var(--smt-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.05));
}.sre-blog-card__image-link,
.smtbox-blog-card__image-link {
    display: block;
    width: 100%;
    overflow: hidden;
}.sre-blog-image,
.smtbox-blog-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--smt-color-slate-50, #f8fafc);
    position: relative;
    overflow: hidden;
    contain: layout paint;
}.sre-blog-img,
.smtbox-blog-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform var(--smt-transition-normal, 0.3s ease);
}.sre-blog-card:hover .sre-blog-img,
.sre-blog-card:hover .smtbox-blog-img,
.smtbox-blog-card:hover .sre-blog-img,
.smtbox-blog-card:hover .smtbox-blog-img {
    transform: scale(1.04);
}.sre-blog-image-placeholder,
.smtbox-blog-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--smt-color-slate-500, #64748b);
    font-size: 48px;
    background: linear-gradient(135deg, var(--smt-color-slate-50, #f8fafc) 0%, var(--smt-color-slate-200, #e2e8f0) 100%);
}.sre-blog-content,
.smtbox-blog-content {
    padding: var(--smt-space-lg, 24px);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}.sre-blog-meta,
.smtbox-blog-meta {
    font-size: 0.8125rem;
    color: var(--smt-color-slate-500, #64748b);
    margin-bottom: var(--smt-space-sm, 12px);
    font-family: var(--smt-font-sans, 'Inter', sans-serif);
}.sre-blog-title,
.smtbox-blog-title {
    font-family: var(--smt-font-brand, 'Outfit', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 0;
    margin-bottom: var(--smt-space-sm, 12px);
}.sre-blog-title a,
.smtbox-blog-title a {
    color: var(--smt-color-slate-900, #0f172a);
    text-decoration: none;
    transition: color var(--smt-transition-fast, 0.2s ease);
}.sre-blog-title a:hover,
.smtbox-blog-title a:hover {
    color: var(--smt-color-primary, #002780);
}.sre-blog-excerpt,
.smtbox-blog-excerpt {
    font-family: var(--smt-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    color: var(--smt-color-slate-600, #475569);
    line-height: 1.6;
    margin-bottom: var(--smt-space-md, 20px);
    flex-grow: 1;
}.sre-blog-link,
.smtbox-blog-link {
    font-family: var(--smt-font-brand, 'Outfit', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--smt-color-primary, #002780);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color var(--smt-transition-fast, 0.2s ease);
}.sre-blog-link:hover,
.smtbox-blog-link:hover {
    color: var(--smt-color-accent, #CF0921);
}/* Blog Pagination */.sre-blog-pagination,
.smtbox-blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--smt-space-xl, 40px);
    font-family: var(--smt-font-sans, 'Inter', sans-serif);
}.sre-blog-pagination .page-numbers,
.smtbox-blog-pagination .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid var(--smt-color-slate-200, #e2e8f0);
    border-radius: var(--smt-radius-md, 6px);
    color: var(--smt-color-primary, #002780);
    background-color: var(--smt-color-white, #ffffff);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--smt-transition-fast, 0.2s ease);
}.sre-blog-pagination .page-numbers.current,
.smtbox-blog-pagination .page-numbers.current {
    background-color: var(--smt-color-primary, #002780);
    color: var(--smt-color-white, #ffffff);
    border-color: var(--smt-color-primary, #002780);
}.sre-blog-pagination .page-numbers:hover:not(.current),
.smtbox-blog-pagination .page-numbers:hover:not(.current) {
    border-color: var(--smt-color-accent-hover, #b0071a);
    color: var(--smt-color-white, #ffffff);
    background-color: var(--smt-color-accent-hover, #b0071a);
}/* Case Studies Specific Rules */.sre-cs-grid,
.smtbox-cs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--smt-space-lg, 35px);
    margin-bottom: var(--smt-space-xl, 50px);
}
@media (min-width: 768px) {
    .sre-cs-grid,
    .smtbox-cs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1200px) {
    .sre-cs-grid,
    .smtbox-cs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.sre-cs-card,
.smtbox-cs-card {
    background: var(--smt-color-white, #ffffff);
    border: 1px solid var(--smt-color-slate-200, #e2e8f0);
    border-radius: var(--smt-radius-lg, 12px);
    padding: var(--smt-space-lg, 30px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    transition: transform var(--smt-transition-normal, 0.3s ease), box-shadow var(--smt-transition-normal, 0.3s ease), border-color var(--smt-transition-normal, 0.3s ease);
}
.sre-cs-card:hover,
.smtbox-cs-card:hover {
    transform: translateY(-4px);
    border-color: var(--smt-color-primary, #002780);
    box-shadow: 0 20px 25px -5px rgba(0, 39, 128, 0.08);
}
.sre-cs-meta-tag,
.smtbox-cs-meta-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    background-color: rgba(0, 39, 128, 0.08);
    color: var(--smt-color-primary, #002780);
    font-family: var(--smt-font-brand, 'Outfit', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: var(--smt-space-sm, 15px);
}
.sre-cs-title,
.smtbox-cs-title {
    font-family: var(--smt-font-brand, 'Outfit', sans-serif);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--smt-color-primary, #002780);
    margin-top: 0;
    margin-bottom: var(--smt-space-sm, 15px);
    line-height: 1.3;
}
.sre-cs-metrics-box,
.smtbox-cs-metrics-box {
    background-color: var(--smt-color-slate-50, #f8fafc);
    border-radius: var(--smt-radius-md, 8px);
    padding: var(--smt-space-md, 18px);
    margin-bottom: var(--smt-space-md, 20px);
    border-left: 4px solid var(--smt-color-primary, #002780);
}
.sre-cs-metrics-title,
.smtbox-cs-metrics-title {
    font-family: var(--smt-font-brand, 'Outfit', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--smt-color-slate-900, #1e293b);
    margin-bottom: var(--smt-space-xs, 8px);
    text-transform: uppercase;
}
.sre-cs-metric-row,
.smtbox-cs-metric-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    font-family: var(--smt-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    color: var(--smt-color-slate-600, #475569);
    margin-bottom: 4px;
}
.sre-cs-metric-row span:last-child,
.smtbox-cs-metric-row span:last-child {
    font-weight: 600;
    color: var(--smt-color-success, #166534);
}
blockquote.sre-cs-testimonial,
blockquote.smtbox-cs-testimonial,
.sre-cs-testimonial,
.smtbox-cs-testimonial {
    margin: 0 0 var(--smt-space-md, 20px) 0;
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--smt-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    color: var(--smt-color-slate-600, #475569);
    line-height: 1.6;
    font-style: italic;
    position: relative;
    flex-grow: 1;
}
blockquote.sre-cs-testimonial p,
blockquote.smtbox-cs-testimonial p {
    margin: 0;
}
cite.sre-cs-author,
cite.smtbox-cs-author,
.sre-cs-author,
.smtbox-cs-author {
    font-family: var(--smt-font-brand, 'Outfit', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    font-style: normal;
    color: var(--smt-color-slate-900, #1e293b);
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}
cite.sre-cs-author span:last-child,
cite.smtbox-cs-author span:last-child,
.sre-cs-author span:last-child,
.smtbox-cs-author span:last-child,
.sre-cs-author-title,
.smtbox-cs-author-title {
    font-weight: normal;
    color: var(--smt-color-slate-500, #64748b);
    font-size: 0.75rem;
    margin-top: 2px;
}