.latest-news.our-blog{padding:100px 0}.post-pagination{margin-top:30px;text-align:center}.post-pagination ul{justify-content:center;padding:0;margin:0}.post-pagination ul li a,.post-pagination ul li span{display:flex;text-decoration:none;justify-content:center;align-items:center;background:var(--accent-color);color:var(--white-color);width:40px;height:40px;margin:0 4px;border-radius:10px;font-weight:700;transition:all .3s ease-out}.post-pagination ul li a:hover,.post-pagination ul li.active a{background:var(--secondary-color);color:var(--accent-color)}header.main-header{background-color:var(--white-color)}

/* ==========================================================================
   Blog listing — Featured spotlight (1 big + 3 small) + Latest Posts grid
   with a Popular Posts sidebar. Reuses the site's existing card/pill/spacing
   language (40px/20px radii, --secondary-color panels, --accent-color tags)
   rather than introducing a new visual system.
   ========================================================================== */

/* Featured section */
.blog-featured{margin-top:60px;margin-bottom:70px}
.blog-featured-main{display:block;background-color:var(--secondary-color);border-radius:40px;padding:10px;height:100%;transition:transform .3s ease}
.blog-featured-main:hover{transform:translateY(-4px)}
.blog-featured-main-image{border-radius:32px;overflow:hidden;margin:0;aspect-ratio:16/11}
.blog-featured-main-image img{width:100%;height:100%;object-fit:cover;border-radius:32px;transition:all .5s ease-out}
.blog-featured-main:hover .blog-featured-main-image img{transform:scale(1.05)}
.blog-featured-main-body{padding:26px 20px 20px}
.blog-featured-main-body h2{font-size:clamp(1.25rem, 2.2vw, 1.5rem);line-height:1.3;margin:2px 0 12px;color:var(--primary-color)}
.blog-featured-main-body p{color:var(--text-muted);font-size:.95rem;line-height:1.6;margin:0}

.blog-featured-list{display:flex;flex-direction:column;gap:14px}
.blog-featured-list-item{display:flex;gap:16px;align-items:flex-start;padding:12px;border-radius:22px;transition:background-color .25s ease}
.blog-featured-list-item:hover{background-color:var(--secondary-color)}
.blog-featured-list-image{flex-shrink:0;width:88px;height:88px;border-radius:16px;overflow:hidden;margin:0}
.blog-featured-list-image img{width:100%;height:100%;object-fit:cover;transition:all .5s ease-out}
.blog-featured-list-item:hover .blog-featured-list-image img{transform:scale(1.08)}
.blog-featured-list-body .post-meta{margin-bottom:6px}
.blog-featured-list-body h3{font-size:1rem;line-height:1.35;margin:0 0 6px;color:var(--primary-color)}
.blog-featured-list-body p{font-size:.85rem;line-height:1.5;color:var(--text-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Latest posts + sidebar layout */
.blog-layout{margin-top:10px}
/* Shorter, wider image than the common.css default (16/11) so these cards
   don't run as tall — scoped to this grid only, so Related Articles and the
   homepage's own post cards (same .post-featured-image class) are unaffected. */
.blog-layout .post-featured-image{aspect-ratio:16/9}
.blog-column-title{font-size:1.3rem;margin-bottom:24px;color:var(--primary-color)}

/* Popular posts sidebar */
.popular-posts{background-color:var(--secondary-color);border-radius:30px;padding:30px;position:sticky;top:120px}
.popular-posts ul{list-style:none;padding:0;margin:0}
.popular-post-item{display:flex;gap:16px;align-items:flex-start;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--divider-color)}
.popular-post-item:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none}
.popular-post-number{font-size:1.85rem;font-weight:800;color:var(--divider-color);flex-shrink:0;line-height:1.1;min-width:34px}
.popular-post-body h4{font-size:.92rem;line-height:1.4;margin:0 0 8px;font-weight:700;color:var(--primary-color)}
.popular-post-body h4 a{color:inherit}
.popular-post-body .post-meta{font-size:.72rem;margin-bottom:0}

@media only screen and (max-width:991px){
    .latest-news.our-blog{padding:50px 0}
    .post-pagination{margin-top:10px}
    .blog-featured{margin-top:30px;margin-bottom:10px}
    .blog-featured-main{margin-bottom:20px}
    .blog-featured-list{margin-top:0}
    .popular-posts{position:static;margin-top:10px}
}

@media only screen and (max-width:767px){
    .blog-featured-list-item{padding:10px}
    .blog-featured-list-image{width:72px;height:72px}
    .popular-posts{padding:24px 20px}
}