/* Blog and Case Studies list (blog.php, main.cs-page): same layout as before (one post per row: title, image with
   date, summary box; sidebar on the right), refreshed design only. */
main.cs-page{--cs-ink: #14213d; --cs-slate: #5b6477; --cs-blue: #0b75d6; --cs-violet: #7b61ff; --cs-rule: #dfe7f3; --cs-wash: #f6f8fd;
    --cs-grad: linear-gradient(100deg, #0b75d6, #3d6cf0 60%, #7b61ff);}
main.cs-page .blog-sec{background: linear-gradient(180deg, #ffffff 0%, var(--cs-wash) 100%);}

/* each post: one card, same order as before */
main.cs-page .blog-sec .blog-main-left > hr{display: none;}
main.cs-page .blog-sec .blog-main-left .blog-content-single{margin-bottom: 28px; padding: 26px 26px 0; overflow: hidden; border: 1px solid var(--cs-rule); border-radius: 22px; background: #fff;
    box-shadow: 0 24px 50px -40px rgba(38,60,160,.55); transition: box-shadow .3s ease, border-color .3s ease;}
main.cs-page .blog-sec .blog-main-left .blog-content-single:hover{border-color: rgba(11,117,214,.25); box-shadow: 0 32px 60px -36px rgba(38,60,160,.6);}
main.cs-page .blog-sec .blog-main-left #NoRecord{padding: 26px; border: 0; box-shadow: none; background: transparent;}

/* title */
main.cs-page .blog-sec .blog-main-left .blog-content-single .title{margin-bottom: 18px; font-size: 24px; line-height: 1.35; font-weight: 700;}
main.cs-page .blog-sec .blog-main-left .blog-content-single .title a{color: var(--cs-ink); transition: color .2s ease;}
main.cs-page .blog-sec .blog-main-left .blog-content-single .title a:hover{color: var(--cs-blue);}

/* image + date */
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-img{overflow: hidden; border-radius: 16px; background: #eef3fb;}
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-img img{display: block; width: 100%; height: auto; transition: transform .5s ease;}
main.cs-page .blog-sec .blog-main-left .blog-content-single:hover .blog-content-img img{transform: scale(1.03);}
main.cs-page .blog-sec .blog-main-left #NoRecord .blog-content-img{background: transparent;}
main.cs-page .blog-sec .blog-main-left #NoRecord .blog-content-img img{width: auto; margin: 0 auto;}
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-img .blog-date-box{left: 14px; bottom: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 16px -8px rgba(20,33,61,.35);}
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-img .blog-date-box p{color: var(--cs-blue); font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: .06em;}
/* posts without an image: the date sits in the flow instead of over an empty box */
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-img:has(> img[src=""]),
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-img:has(> img[src=" "]){background: transparent;}

/* summary box */
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-box{margin: 0 -26px; padding: 18px 26px 24px; background: transparent;}
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-box p{margin-bottom: 14px; color: var(--cs-slate); font-size: 16px; line-height: 1.65; font-weight: 400;}
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-box .read-btn{display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 12px; background: #eef4ff;
    color: var(--cs-blue); font-size: 14px; font-weight: 700; letter-spacing: 0; transition: background .2s ease, color .2s ease;}
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-box .read-btn::before{display: none;}
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-box .read-btn::after{content: '\2192';}
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-box .read-btn:hover{background: var(--cs-grad); color: #fff;}
main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-box .name li{display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--cs-slate); font-size: 13.5px; font-weight: 600;}

/* sidebar: same blocks and order, card styling */
main.cs-page .blog-sec .sidebar-right .sidebar-search #searchText{height: 56px; padding-left: 20px; border: 1px solid var(--cs-rule); border-radius: 16px; background: #fff; color: var(--cs-ink); font-size: 16px; font-weight: 500;
    box-shadow: 0 18px 40px -34px rgba(38,60,160,.6);}
main.cs-page .blog-sec .sidebar-right .sidebar-search #searchText:focus{border-color: var(--cs-blue); box-shadow: 0 0 0 4px rgba(11,117,214,.12);}
main.cs-page .blog-sec .sidebar-right .sidebar-post,
main.cs-page .blog-sec .sidebar-right .sidebar-category,
main.cs-page .blog-sec .sidebar-right .sidebar-tags{padding: 22px; border: 1px solid var(--cs-rule); border-radius: 20px; background: #fff; box-shadow: 0 24px 50px -44px rgba(38,60,160,.55);}
main.cs-page .blog-sec .sidebar-right .sidebar-tags{margin-top: 30px;}
main.cs-page .blog-sec .sidebar-right .sidebar-single .post-title{margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #e9eef7; color: var(--cs-ink); font-size: 18px; font-weight: 700;}
main.cs-page .blog-sec .sidebar-right .sidebar-single .post-title::after{width: 40px; height: 3px; bottom: -2px; border-radius: 3px; background: var(--cs-grad);}
main.cs-page .blog-sec .sidebar-right .sidebar-post li .post-box,
main.cs-page .blog-sec .sidebar-right .sidebar-category .sidebar-category-list li a{padding: 10px 12px; border-left: 0; border-radius: 12px;}
main.cs-page .blog-sec .sidebar-right .sidebar-post li:hover .post-box,
main.cs-page .blog-sec .sidebar-right .sidebar-category .sidebar-category-list li a:hover,
main.cs-page .blog-sec .sidebar-right .sidebar-category .sidebar-category-list li.active a{border-left: 0; background: #eef4ff;}
main.cs-page .blog-sec .sidebar-right .sidebar-post .sidebar-post-content .sidebar-title{color: var(--cs-ink); font-size: 14.5px; line-height: 1.5;}
main.cs-page .blog-sec .sidebar-right .sidebar-category .sidebar-category-list li a{color: var(--cs-ink); font-size: 15px;}
main.cs-page .blog-sec .sidebar-right .sidebar-category .sidebar-category-list li.active a{color: var(--cs-blue);}
main.cs-page .blog-sec .sidebar-right .sidebar-tags .sidebar-tag-list .tag-label{padding: 6px 14px; border: 1px solid var(--cs-rule); border-radius: 999px; background: #f7f9ff; color: var(--cs-ink); font-size: 13.5px;}
main.cs-page .blog-sec .sidebar-right .sidebar-tags .sidebar-tag-list .tag-label:hover,
main.cs-page .blog-sec .sidebar-right .sidebar-tags .sidebar-tag-list .tag-label.active{border-color: transparent; background: var(--cs-grad); color: #fff;}

@media (max-width: 575px){
    main.cs-page .blog-sec .blog-main-left .blog-content-single{padding: 20px 18px 0; border-radius: 18px;}
    main.cs-page .blog-sec .blog-main-left .blog-content-single .title{font-size: 20px;}
    main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-box{margin: 0 -18px; padding: 16px 18px 20px;}
    main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-img{border-radius: 12px;}
}
@media (prefers-reduced-motion: reduce){
    main.cs-page .blog-sec .blog-main-left .blog-content-single .blog-content-img img{transition: none;}
}