/* Homepage lead stories, using the masthead's navy and blue palette. */
.featured-with-side-posts {
    --lead-navy: #031d33;
    --lead-blue: #103d70;
    --lead-accent: #64bbff;
    margin: 24px 0 32px;
}
.featured-with-side-posts > .container > .row { --bs-gutter-x: 20px; --bs-gutter-y: 20px; }
.featured-with-side-posts .featuredSwiper,
.featured-with-side-posts .overlay-post-card {
    background: var(--lead-navy);
    border: 1px solid #174563;
    border-radius: 18px;
    box-shadow: 0 8px 24px #031d3314;
    overflow: hidden;
}
.featured-with-side-posts .featured-slide { height: 460px; }
.featured-with-side-posts .featured-slide > img { height: 100%; object-fit: cover; }
.featured-with-side-posts .featured-overlay {
    padding: 80px 28px 76px;
    background: linear-gradient(0deg, #031d33 0%, #031d33f2 32%, #031d3380 70%, transparent 100%);
    color: #fff;
}
.featured-with-side-posts .featured-category,
.featured-with-side-posts .post-category {
    display: inline-flex;
    align-items: center;
    background: #103d70;
    border: 1px solid #4888bd80;
    border-radius: 20px;
    padding: 4px 12px;
    color: #e4f3ff;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 10px;
}
.featured-with-side-posts .featured-overlay h3 { font-size: clamp(19px, 1.7vw, 26px); line-height: 1.8; font-weight: 700; margin: 0 0 12px; }
.featured-with-side-posts .featured-overlay h3 a,
.featured-with-side-posts .post-overlay h4 a { color: #fff; }
.featured-with-side-posts .featured-overlay h3 a:hover,
.featured-with-side-posts .post-overlay h4 a:hover { color: #a9dbff; text-decoration: none; }
.featured-with-side-posts .featured-meta,
.featured-with-side-posts .post-meta { color: #c0d3e5; font-size: 11px; display: flex; flex-wrap: wrap; gap: 14px; }
.featured-with-side-posts .featured-meta i,
.featured-with-side-posts .post-meta i { color: var(--lead-accent); }
.featured-with-side-posts .side-posts-container { display: grid; grid-template-rows: repeat(2, 1fr); gap: 16px; height: 462px; }
.featured-with-side-posts .overlay-post-card { margin: 0; min-height: 0; }
.featured-with-side-posts .overlay-post-card:hover { transform: none; border-color: #4285b5; box-shadow: 0 8px 24px #031d3320; }
.featured-with-side-posts .overlay-post-card.horizontal .post-image { height: 100%; padding: 0; }
.featured-with-side-posts .post-overlay { padding: 42px 20px 17px; background: linear-gradient(0deg, #031d33 0%, #031d33eb 45%, #031d3370 78%, transparent 100%); }
.featured-with-side-posts .post-overlay h4 { font-size: 15px; line-height: 1.8; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.featured-with-side-posts .post-excerpt { display: none; }
.featured-with-side-posts .post-meta span { margin: 0; }
.featured-with-side-posts .featured-controls { position: absolute; bottom: 17px; inset-inline: 28px; z-index: 2; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.featured-with-side-posts .featured-controls button { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid #5d9bc366; border-radius: 50%; background: #103d70; color: #fff; font-size: 11px; }
.featured-with-side-posts .featured-controls button:hover { background: #1c548c; }
.featured-with-side-posts .featured-controls .swiper-pagination { position: static; width: auto; display: flex; align-items: center; gap: 6px; }
.featured-with-side-posts .swiper-pagination-bullet { background: #a5c1d8; opacity: .55; width: 6px; height: 6px; margin: 0!important; transition: width .2s; border-radius: 8px; }
.featured-with-side-posts .swiper-pagination-bullet-active { background: #64bbff; width: 23px; opacity: 1; }
.featured-with-side-posts :focus-visible { outline: 2px solid #64bbff; outline-offset: 3px; }
@media(max-width: 991.98px) {
    .featured-with-side-posts .featured-slide { height: 410px; }
    .featured-with-side-posts .side-posts-container { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
    .featured-with-side-posts .overlay-post-card.horizontal .post-image { height: 240px; }
}
@media(max-width: 575.98px) {
    .featured-with-side-posts { margin: 16px 0 24px; }
    .featured-with-side-posts .featured-slide { height: 360px; }
    .featured-with-side-posts .featured-overlay { padding: 65px 18px 66px; }
    .featured-with-side-posts .featured-overlay h3 { font-size: 18px; line-height: 1.75; }
    .featured-with-side-posts .featured-controls { inset-inline: 18px; bottom: 14px; }
    .featured-with-side-posts .side-posts-container { grid-template-columns: 1fr; gap: 12px; }
    .featured-with-side-posts .overlay-post-card.horizontal .post-image { height: 210px; }
}
@media(prefers-reduced-motion: reduce) {
    .featured-with-side-posts *, .featured-with-side-posts *::before { transition: none!important; }
}