/* ===== Blog detail page (blog-details.php) ===== */
/* --- Post banner --- */
.blog-hero{
    position:relative;
    height:clamp(300px, 52vh, 520px);
    background:#1f2366 center/cover no-repeat;
}
.blog-hero:after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(10,12,40,.85) 0%, rgba(10,12,40,.45) 50%, rgba(10,12,40,.15) 100%);
}
.blog-hero-inner{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:2;
    padding:0 max(24px, calc((100% - 1200px) / 2)) 50px;
    color:#fff;
}
.blog-breadcrumb{ font-size:14px; margin-bottom:14px; color:rgba(255,255,255,.75); }
.blog-breadcrumb a{ color:rgba(255,255,255,.9); }
.blog-breadcrumb a:hover{ color:#fff; }
.blog-breadcrumb span{ margin:0 8px; }
.blog-hero h1.blogdetheading{
    color:#fff;
    margin:0;
    max-width:900px;
    font-weight:600;
    line-height:1.3;
    border-left:4px solid #fff;
    padding-left:22px;
}

/* --- Layout --- */
.blog-detail{
    background:#f5f6fa;
    padding:60px max(20px, calc((100% - 1200px) / 2)) 80px;
}
.blog-detail-grid{ display:flex; flex-wrap:wrap; margin:0 -15px; }
.blog-detail-main{ flex:1 1 0; min-width:0; padding:0 15px; }
.blog-detail-side{ flex:0 0 340px; max-width:340px; padding:0 15px; }

/* --- Article --- */
.blog-article{
    background:#fff;
    border-radius:6px;
    padding:46px 54px 50px;
    box-shadow:0 6px 22px rgba(20,24,80,.07);
    color:#444;
    font-size:16px;
    line-height:30px;
}
.blog-article p,
.blog-article li{ text-align:left; margin:0 0 20px; width:auto; }
.blog-article ul,
.blog-article ol{ padding-left:22px; margin:0 0 20px; }
.blog-article li{ margin-bottom:8px; }
.blog-article h2,
.blog-article h3,
.blog-article h4{
    color:#2f3483;
    text-align:left !important;
    margin:38px 0 16px;
    line-height:1.4;
}
.blog-article h2{ padding-bottom:12px; border-bottom:1px solid #e6e8f0; }
.blog-article > *:first-child{ margin-top:0; }
.blog-article img{ max-width:100%; height:auto; border-radius:4px; }
.blog-article a,
.blog-article a *{ color:#2f3483; text-decoration:none !important; }
.blog-article a:hover{ color:#1f2366; }
.blog-article strong, .blog-article b{ color:#252525; }
.blog-article table{ width:100%; margin-bottom:20px; }
.blog-article td, .blog-article th{ border:1px solid #e6e8f0; padding:8px 12px; }
.blog-back{ margin-top:30px; }
.blog-back .more-btn{ margin:0; border-radius:40px; }

/* --- Sidebar --- */
.side-box{
    background:#fff;
    border-radius:6px;
    padding:28px 26px;
    margin-bottom:30px;
    box-shadow:0 6px 22px rgba(20,24,80,.07);
}
.side-box-title{
    margin:0 0 20px;
    font-size:16px;
    font-weight:600;
    text-transform:uppercase;
    color:#252525;
}
.side-box-title:after{
    content:"";
    display:block;
    width:40px; height:3px;
    background:#2f3483;
    margin-top:12px;
}
.recent-post{ display:flex; align-items:center; margin-bottom:18px; }
.recent-post:last-child{ margin-bottom:0; }
.recent-post img{
    flex:0 0 84px;
    width:84px; height:62px;
    object-fit:cover;
    border-radius:4px;
    margin-right:14px;
}
.recent-post span{
    font-size:14px;
    line-height:20px;
    color:#252525;
    transition:color .3s ease;
}
.recent-post:hover{ text-decoration:none; }
.recent-post:hover span{ color:#2f3483; }
.side-cta{
    background:linear-gradient(135deg, #2f3483 0%, #1f2366 100%);
    color:#fff;
}
.side-cta .side-box-title{ color:#fff; }
.side-cta .side-box-title:after{ background:#fff; }
.side-cta p{ font-size:14px; line-height:24px; color:rgba(255,255,255,.85); margin:0 0 16px; }
.side-cta .side-phone{ display:block; color:#fff; font-size:16px; margin-bottom:6px; }
.side-cta .side-phone .fa{ width:20px; }
.side-cta .more-btn{ margin:14px 0 0; border-color:#fff; color:#fff; border-radius:40px; }
.side-cta .more-btn:hover{ background:#fff; color:#2f3483; }
.blog-detail-side .sticky{ position:sticky; top:120px; }

@media (max-width:991px){
    .blog-detail-main, .blog-detail-side{ flex:0 0 100%; max-width:100%; }
    .blog-detail-side{ margin-top:30px; }
    .blog-article{ padding:34px 30px 40px; }
}
@media (max-width:767px){
    .blog-hero-inner{ padding-bottom:30px; }
    .blog-hero h1.blogdetheading{ font-size:24px; padding-left:14px; border-left-width:3px; }
    .blog-detail{ padding:30px 12px 50px; }
    .blog-article{ padding:24px 18px 30px; }
}