/*
==========================================================================
 NEWSES MODERN EDITION - Redesign layer
 Loaded after the palette css so these rules win the cascade.
 Goals: modern, compact, stylish + image-first (no overlays) + TV fixes.
==========================================================================
*/

/* ----------------------------------------------------------------------
 0. GLOBAL
---------------------------------------------------------------------- */
html,
body {
        overflow-x: hidden;
        width: auto;
}

body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
}

::selection {
        background: #23272f;
        color: #fff;
}

img {
        max-width: 100%;
        height: auto;
}

/* ----------------------------------------------------------------------
 1. TOP BAR (date / social strip) - compact
---------------------------------------------------------------------- */
.mg-head-detail {
        font-size: 12.5px;
        line-height: 1.2;
        padding: 0;
}

/* v1.1: the red date box on top is much slimmer now */
.mg-head-detail .info-left,
.mg-head-detail .info-left li,
.mg-head-detail .info-right li {
        padding-top: 3px;
        padding-bottom: 3px;
        margin-top: 0;
        margin-bottom: 0;
}

.mg-head-detail .info-left li span.time {
        padding: 2px 8px;
        margin-left: 8px;
}

.mg-head-detail .container .row {
        margin-top: 0;
        margin-bottom: 0;
}

.mg-head-detail .info-left li,
.mg-head-detail .info-right li {
        padding: 2px 0;
        /* v1.8: bar-height slider (Bars & Strips section). The classic layer
         * hard-codes line-height:35px which made the strip far taller than
         * its 12.5px text. */
        line-height: var(--sp-bar-top, 26px);
}

.mg-head-detail .info-left li span.time {
        line-height: var(--sp-bar-top, 26px);
}

.mg-head-detail .info-left li i {
        margin-right: 6px;
        opacity: .9;
}

.mg-social.info-right {
        margin: 0;
}

.mg-social li span.icon-soci {
        margin: 0 2px;
        width: 26px;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        border-radius: 6px;
        transition: transform .2s ease, opacity .2s ease;
}

.mg-social li span.icon-soci:hover {
        transform: translateY(-2px);
        opacity: .92;
}

/* ----------------------------------------------------------------------
 2. HEADER BRAND - logo left, title inline, subtitle underneath
---------------------------------------------------------------------- */
.newses-brand-inline {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        gap: 4px 0;
}

.newses-brand-inline .site-logo {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin: 0;
}

.newses-brand-inline .site-logo img,
.newses-brand-inline .navbar-brand img {
        /* v1.9.1: the "Logo Size (height)" slider now truly SETS the height.
         * It was max-height before - dragging the slider above the image's
         * natural size did nothing (max-height never enlarges), which looked
         * exactly like "the preview is not working". width:auto keeps the
         * aspect ratio. */
        height: var(--sp-logo-h, 64px);
        max-height: var(--sp-logo-h, 64px);
        width: auto;
        transition: transform .25s ease;
}

.newses-brand-inline .site-logo img:hover {
        transform: scale(1.04);
}

.newses-brand-inline .site-branding-text {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
        overflow: hidden;
        /* v1.3: horizontal distance logo<->title; NEGATIVE values allowed */
        margin-left: var(--sp-brand-gap, 8px);
}

/* v1.3: no residual spacing around the logo */
.newses-brand-inline .site-logo,
.newses-brand-inline .custom-logo-link {
        margin: 0;
        padding: 0;
}
.newses-brand-inline .custom-logo-link {
        display: inline-flex;
}
.newses-brand-inline .site-logo img {
        display: block;
}

.newses-brand-inline .site-title,
.site-branding-text .site-title {
        margin: 0;
        /* v1.9: follows the global TITLE line-height slider */
        line-height: var(--sp-title-lh, 1.15);
        letter-spacing: -.02em;
        font-size: var(--sp-title-size, 30px);
}

.newses-brand-inline .site-title a {
        display: inline-block;
        /* v1.3 FIX: the <a> itself must use the slider value - a direct rule
           in style.css (.site-title a{font-size:34px}) was beating the
           inherited value, so the Title size slider changed nothing. */
        font-size: var(--sp-title-size, 30px);
}

.newses-brand-inline .site-description {
        margin: 3px 0 0;
        font-size: var(--sp-sub-size, 13px);
        font-weight: 400;
        line-height: 1.35;
        opacity: .88;
        letter-spacing: .01em;
}

.newses-brand-center {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
}

.newses-brand-center .site-branding-text {
        text-align: center;
}

/* tighter header strip - height controlled from the Customizer */
.mg-nav-widget-area .row {
        margin-top: 0;
        margin-bottom: 0;
}

.mg-nav-widget-area {
        padding: var(--sp-brand-pad-y, 8px) 0;
}

/* Social icons next to the menu bar (compact header) */
.sp-navbar-social {
        margin-left: 14px;
        padding-left: 14px;
        border-left: 1px solid rgba(255, 255, 255, .14);
}

.sp-navbar-social li span.icon-soci {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        border-radius: 8px;
}

/* ----------------------------------------------------------------------
 3. NAVIGATION - compact + modern underline accent
---------------------------------------------------------------------- */
.mg-menu-full .navbar-wp {
        min-height: calc(var(--sp-bar-nav, 8px) * 2 + 22px);
        box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35);
}

.navbar-wp .navbar-nav > li > a {
        font-size: 14.5px;
        font-weight: 500;
        /* v1.8: main-menu bar height slider (Bars & Strips) */
        padding: var(--sp-bar-nav, 8px) 14px;
        letter-spacing: .01em;
        position: relative;
}

.mg-headwidget .navbar-wp .navbar-nav > li > a::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 7px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        opacity: 0;
        -webkit-transform: scaleX(.35);
        transform: scaleX(.35);
        transition: opacity .2s ease, -webkit-transform .25s ease;
        transition: opacity .2s ease, transform .25s ease;
}

.mg-headwidget .navbar-wp .navbar-nav > li > a:hover::after,
.mg-headwidget .navbar-wp .navbar-nav > .active > a::after {
        opacity: .9;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
}

.navbar-wp .dropdown-menu {
        border: 0;
        border-radius: 10px;
        box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .45);
        padding: 6px;
        overflow: hidden;
}

.navbar-wp .dropdown-menu > li > a {
        border-radius: 6px;
        padding: 9px 14px;
        transition: background .18s ease, color .18s ease;
}

.mg-search-box .dropdown-menu.searchinner {
        border-radius: 10px;
        padding: 14px;
        min-width: 290px;
}

/* home button - squared modern */
.navbar-wp .homebtn,
.mobilehomebtn {
        border-radius: 6px;
}

/* ----------------------------------------------------------------------
 4. MAIN SLIDESHOW - image-first with solid info banner
    (no camera icon, no floating categories, no title over the photo)
---------------------------------------------------------------------- */
.newses-clean-slide::after {
        display: none !important; /* kill the dark gradient over photos */
}

.newses-clean-slide .mg-blog-inner {
        display: none !important; /* legacy overlay block unused */
}

.newses-clean-slide .mg-blog-category {
        display: none !important;
}

.newses-slide-info-banner {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        background: #23272f; /* solid dark charcoal like the reference sample */
        color: #fff;
        padding: 13px 18px 14px;
        box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .5);
}

.newses-slide-info-banner .newses-slide-cat {
        margin-bottom: 6px;
        line-height: 1;
}

.newses-slide-info-banner .newses-slide-cat a {
        display: inline-block;
        background: var(--newses-accent, #c70909);
        color: var(--sp-on-accent, #fff);
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        padding: 4px 8px;
        border-radius: 4px;
        margin-right: 6px;
        margin-bottom: 4px;
        line-height: 1.2;
        transition: opacity .18s ease;
}

.newses-slide-info-banner .newses-slide-cat a:hover {
        opacity: .88;
        color: var(--sp-on-accent, #fff);
}

.newses-slide-info-banner .newses-slide-title {
        margin: 0 0 6px;
        font-size: 21px;
        font-weight: 700;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
}

.newses-slide-info-banner .newses-slide-title a {
        color: #fff;
}

.newses-slide-info-banner .newses-slide-title a:hover {
        color: rgba(255, 255, 255, .85);
}

.newses-slide-info-banner .newses-slide-meta {
        font-size: 12.5px;
        color: rgba(255, 255, 255, .82);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 4px 14px;
}

.newses-slide-info-banner .newses-slide-meta i {
        margin-right: 5px;
        opacity: .75;
}

/* compact banner variant for carousel / smaller slides */
.newses-slide-info-banner.newses-slide-banner-sm {
        padding: 10px 14px 11px;
}

.newses-slide-info-banner.newses-slide-banner-sm .newses-slide-title {
        font-size: 15px;
        margin-bottom: 0;
        -webkit-line-clamp: 2;
}

/* modern slideshow arrows */
.homemain .swiper-button-next,
.homemain .swiper-button-prev,
.postcrousel .swiper-button-next,
.postcrousel .swiper-button-prev,
.featuredcat .swiper-button-next,
.featuredcat .swiper-button-prev {
        width: 42px;
        height: 42px;
        border-radius: 50% !important;
        background: rgba(18, 20, 26, .55) !important;
        color: #fff !important;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        transition: background .2s ease, transform .2s ease;
}

.homemain .swiper-button-next::after,
.homemain .swiper-button-prev::after,
.postcrousel .swiper-button-next::after,
.postcrousel .swiper-button-prev::after,
.featuredcat .swiper-button-next::after,
.featuredcat .swiper-button-prev::after {
        font-size: 15px;
        font-weight: 700;
}

.homemain .swiper-button-next:hover,
.homemain .swiper-button-prev:hover,
.postcrousel .swiper-button-next:hover,
.postcrousel .swiper-button-prev:hover,
.featuredcat .swiper-button-next:hover,
.featuredcat .swiper-button-prev:hover {
        background: var(--newses-accent, #c70909) !important;
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
}

/* slideshow area vertical rhythm */
.mg-fea-area .mg-padding {
        padding-top: 18px;
        padding-bottom: 10px;
}

.mg-fea-area .row.my-4 {
        margin-top: 0 !important;
}

/* trending column cards (desktop only) */
.recentarea .content {
        border-radius: 8px;
        overflow: hidden;
}

.recentarea .back-img {
        border-radius: 8px;
}

/* ----------------------------------------------------------------------
 5. CATEGORY PAGE BANNER (same width as posts, sidebar aligned)
---------------------------------------------------------------------- */
.newses-cat-banner {
        background: var(--sp-content-bg, #fff);
        border-radius: 10px;
        box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .14);
        margin-bottom: 22px;
        overflow: hidden;
        position: relative;
}

.newses-cat-banner::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: var(--newses-accent, #c70909);
}

.newses-cat-banner-inner {
        padding: 18px 22px 17px 26px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 6px 12px;
}

.newses-cat-banner-icon {
        color: var(--newses-accent, #c70909);
        font-size: 20px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}

.newses-cat-banner-title {
        font-size: 28px;
        font-weight: 800;
        margin: 0;
        line-height: 1.15;
        letter-spacing: -.015em;
        color: #17181c;
}

.newses-cat-banner-desc {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        margin: 2px 0 0;
        font-size: 14px;
        color: #5b616e;
        line-height: 1.55;
}

/* ----------------------------------------------------------------------
 6. ARTICLE CARDS + LISTS - compact modern
---------------------------------------------------------------------- */
.mg-blog-post-box {
        border-radius: 10px;
        overflow: hidden;
        /* v1.7: cards follow the palette surface (white on light palettes,
         * near-black on Dark Variants - was hardcoded #fff, which made the
         * white titles of dark palettes unreadable in the slideshow RIGHT
         * column, BOTTOM row and every article card). */
        background: var(--sp-content-bg, #fff);
        box-shadow: 0 2px 10px -6px rgba(15, 18, 25, .18);
        transition: -webkit-transform .25s ease, box-shadow .25s ease;
        transition: transform .25s ease, box-shadow .25s ease;
}

.mg-blog-post-box:hover {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
        box-shadow: 0 14px 30px -14px rgba(15, 18, 25, .35);
}

.mg-blog-post-box .mg-blog-thumb {
        border-radius: 10px 10px 0 0;
}

.mg-blog-post-box .mg-blog-thumb::before {
        display: none; /* old red-ish overlay if any */
}

.mg-blog-post-box article.small {
        padding: 14px 16px 16px;
}

.mg-blog-post-box h4.title,
.mg-blog-post-box h4.title a {
        font-weight: 700;
        font-size: 16.5px;
        line-height: 1.32;
        letter-spacing: -.008em;
}

.mg-posts-sec-post .mg-blog-thumb {
        border-radius: 10px;
        transition: -webkit-transform .3s ease;
        transition: transform .3s ease;
}

/* subtle image zoom on hover */
.mg-blog-post-box:hover .mg-blog-thumb {
        -webkit-transform: scale(1.025);
        transform: scale(1.025);
}

.mg-posts-modul-6 {
        border-radius: 12px;
        box-shadow: 0 2px 12px -6px rgba(15, 18, 25, .16);
}

/* archive list items */
.mg-posts-sec-post {
        background: var(--sp-content-bg, #fff);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px -6px rgba(15, 18, 25, .16);
        transition: -webkit-transform .22s ease, box-shadow .22s ease;
        transition: transform .22s ease, box-shadow .22s ease;
}

.mg-posts-sec-post:hover {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
        box-shadow: 0 12px 26px -14px rgba(15, 18, 25, .3);
}

.mg-posts-sec-post .mg-sec-top-post {
        padding: 16px 18px 6px;
}

.mg-posts-sec-post h4.title,
.mg-posts-sec-post h4.title a {
        font-size: 19px;
        font-weight: 700;
        line-height: 1.3;
}

/* category badges in text areas (below images) */
.mg-blog-category a.newses-categories {
        border-radius: 4px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        padding: 4px 9px;
        line-height: 1.25;
}

/* pagination pills */
.pagination .nav-links .page-numbers {
        border-radius: 8px !important;
        margin: 0 3px;
        min-width: 40px;
        height: 40px;
        line-height: 38px;
        text-align: center;
        font-weight: 600;
        box-shadow: 0 2px 6px -3px rgba(15, 18, 25, .25);
        transition: -webkit-transform .18s ease;
        transition: transform .18s ease;
}

.pagination .nav-links .page-numbers:hover {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
}

/* ----------------------------------------------------------------------
 7. SIDEBAR - card widgets, category image, ad slots
---------------------------------------------------------------------- */
.mg-sidebar .mg-widget {
        background: var(--sp-content-bg, #fff);
        border-radius: 10px;
        box-shadow: 0 2px 10px -6px rgba(15, 18, 25, .16);
        padding: 16px 16px 18px;
        margin-bottom: 20px;
}

.mg-sidebar .mg-widget .mg-wid-title {
        margin: -16px -16px 14px;
        padding: 0;
        border-bottom: 0;
}

/* Red title box: text CENTERED, readable size, slim height */
.mg-wid-title h6,
.mg-wid-title h6 span.bg {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin: 0;
        padding: 9px 10px;
        line-height: 1.35;
        color: var(--sp-on-accent, #fff);
        background: var(--sp-accent, #c70909);
        border-radius: 8px 8px 0 0;
        box-sizing: border-box;
}

.mg-wid-title h6 span.bg::before {
        display: none;
}

.mg-wid-title h6 span.bg::after {
        display: none;
}

/* widgets without the negative-margin card still get the box */
.mg-widget .mg-wid-title {
        margin-bottom: 14px;
}

.mg-widget h2.widget-title,
.mg-widget h2 {
        text-align: center;
}

/* category sidebar image + ad slots */
.newses-cat-sidebar-image {
        margin-bottom: 20px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 6px 18px -10px rgba(15, 18, 25, .3);
}

.newses-cat-sidebar-image img {
        display: block;
        width: 100%;
        height: auto;
}

.newses-ad-slot {
        margin: 0 0 20px;
        text-align: center;
        overflow: hidden;
}

.newses-ad-slot > * {
        max-width: 100%;
}

/* search widget compact */
.mg-sidebar .widget_search {
        padding-bottom: 16px;
}

/* ----------------------------------------------------------------------
 8. SECTION TITLES (main column strip headers)
---------------------------------------------------------------------- */
.mg-sec-title {
        margin-bottom: 14px;
}

.mg-sec-title h4 {
        margin: 0;
}

.mg-sec-title span.bg {
        font-size: 16px;
        font-weight: 800;
        letter-spacing: .02em;
        padding: 0;
        line-height: 1.3;
}

.mg-sec-title.st3 span.bg {
        color: var(--sp-on-accent, #fff);
        padding: 8px 14px;
        border-radius: 6px;
        background: var(--sp-accent, #c70909);
        display: inline-block;
}

.mg-sec-title.st3 span.bg::before,
.mg-sec-title.st3 span.bg::after {
        display: none;
}

/* ----------------------------------------------------------------------
 9. FLASH NEWS TICKER - red label centered, readable font size
---------------------------------------------------------------------- */
.mg-latest-news-sec {
        border-radius: 8px;
        overflow: hidden;
}

.mg-latest-news .bn_title h2.title {
        font-size: 16px;
        font-weight: 800;
        letter-spacing: .04em;
        padding: 10px 18px;
        line-height: 1.3;
        display: flex;
        align-items: center;
        white-space: nowrap;
}

.mg-latest-news .bn_title h2.title .fa-spinner {
        font-size: 15px;
}

.mg-latest-news .bn_title {
        display: flex;
        align-items: center;
}

.mg-latest-news-sec .mg-latest-news-slider {
        align-items: center;
}

/* ----------------------------------------------------------------------
 10. SINGLE POST - modern article
---------------------------------------------------------------------- */
.mg-header.mb-30 {
        background: var(--sp-content-bg, #fff);
        border-radius: 10px;
        padding: 22px 24px;
        box-shadow: 0 2px 10px -6px rgba(15, 18, 25, .14);
        margin-bottom: 22px !important;
}

.mg-header h1.title {
        font-size: 30px;
        font-weight: 800;
        line-height: 1.22;
        letter-spacing: -.015em;
        margin: 10px 0 12px;
}

.mg-blog-post-box > img.img-responsive {
        border-radius: 10px;
        margin-bottom: 4px;
}

.mg-blog-post-box article.small.single {
        background: var(--sp-content-bg, #fff);
        border-radius: 10px;
        box-shadow: 0 2px 10px -6px rgba(15, 18, 25, .14);
        padding: 22px 24px !important;
        font-size: 16.5px;
        line-height: 1.75;
}

.mg-info-author-block {
        background: #f6f7f9;
        border-radius: 10px;
        padding: 12px 16px;
}

/* ----------------------------------------------------------------------
 11. FOOTER - compact modern
---------------------------------------------------------------------- */
footer .mg-footer-widget-area {
        padding: 34px 0 12px;
}

footer .mg-widget {
        margin-bottom: 22px;
}

footer .mg-widget h2,
footer .mg-widget h6 {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
        margin-bottom: 14px;
}

.mg-footer-copyright {
        padding: var(--sp-bar-copy, 7px) 0;
        font-size: 13.5px;
}

/* ----------------------------------------------------------------------
 12. BUTTONS
---------------------------------------------------------------------- */
input[type="submit"],
button,
.btn-theme,
.wp-block-search .wp-block-search__button {
        border-radius: 8px !important;
        font-weight: 600;
        transition: -webkit-transform .18s ease, box-shadow .18s ease, background .18s ease;
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

input[type="submit"]:hover,
button:hover,
.btn-theme:hover {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
        box-shadow: 0 8px 18px -10px rgba(15, 18, 25, .55);
}

/* ----------------------------------------------------------------------
 13. LARGE SCREENS / TV - progressive content width so nothing is
     cropped or stretched at 100% zoom, and the layout stays centered.
---------------------------------------------------------------------- */
@media (min-width: 1440px) {
        .container {
                max-width: 1280px;
        }

        .mg-blog-post-3.lg {
                height: 480px;
        }
}

@media (min-width: 1600px) {
        .container {
                max-width: 1320px;
        }

        .mg-blog-post-3.lg {
                height: 520px;
        }

        .newses-slide-info-banner .newses-slide-title {
                font-size: 24px;
        }
}

@media (min-width: 1920px) {
        .container {
                max-width: 1400px;
        }
}

@media (min-width: 2304px) {
        /* 4K TVs: keep content readable and centered, never edge to edge */
        .container {
                max-width: 1500px;
        }

        body {
                font-size: 17px;
        }
}

/* ----------------------------------------------------------------------
 14. MOBILE - clean feed: only the center slideshow, no side columns,
     no bottom row (handled in PHP) and no right sidebar.
---------------------------------------------------------------------- */

/* equal-height cards inside grid rows (bottom row, editorials, grids) */
body:not(.single) .row > [class*="col-"] > .mg-blog-post-box,
#grid .mg-blog-post-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100%;
}

body:not(.single) .row > [class*="col-"] > .mg-blog-post-box article.small,
#grid .mg-blog-post-box article.small {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
}

@media (max-width: 991px) {
        /* keep the brand row tidy on tablets - but still follow the slider */
        .newses-brand-inline .site-logo img,
        .newses-brand-inline .navbar-brand img,
        .sp-logo-edge img.custom-logo {
                max-height: min(54px, var(--sp-logo-h, 64px));
        }
}

@media (max-width: 767px) {
        /* brand row: logo + title stay on ONE line on phones */
        .newses-brand-inline {
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        }

        .newses-brand-inline .site-logo img,
        .newses-brand-inline .navbar-brand img,
        .sp-logo-edge img.custom-logo {
                max-height: min(46px, var(--sp-logo-h, 64px));
        }

        .newses-brand-inline .site-title a,
        .newses-brand-inline .site-title,
        .site-branding-text .site-title a {
                font-size: min(21px, var(--sp-title-size, 30px)) !important;
                line-height: 1.15;
        }

        .newses-brand-inline .site-description {
                font-size: min(12px, var(--sp-sub-size, 13px));
                margin-top: 2px;
        }

        /* tighter top rhythm */
        .container.mt-4.mg-padding {
                margin-top: 12px !important;
        }

        .mg-nav-widget-area {
                padding: 12px 0;
        }
        .mg-sidebar,
        body #content aside.col-md-4,
        body #content aside.col-lg-3 {
                display: none !important;
        }

        /* content columns go full width */
        #content .col-md-8,
        #content .col-lg-9,
        #content .col-md-12 {
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
        }

        /* center slideshow: full width, friendly height */
        .mg-blog-post-3.lg,
        .homemain .mg-blog-post-3 {
                height: 340px;
                min-height: 340px;
        }

        .newses-slide-info-banner .newses-slide-title {
                font-size: 17px;
        }

        .mg-fea-area .mg-padding {
                padding-left: 0;
                padding-right: 0;
        }

        .mg-fea-area .container {
                padding-left: 10px;
                padding-right: 10px;
        }

        .newses-cat-banner-title {
                font-size: 22px;
        }

        .mg-header h1.title {
                font-size: 22px;
        }

        .mg-header.mb-30 {
                padding: 16px;
        }

        .mg-blog-post-box article.small.single {
                padding: 16px !important;
        }
}

/* ----------------------------------------------------------------------
 15. ACCENT CSS VARIABLE
     --newses-accent is defined inside each palette file
     (css/colors/*.css, loaded before this sheet).
     Fallback value #c70909 is used inline wherever needed.
---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
 15. DARK PALETTE BADGE OUTLINES
     On near-black accents, badges can blend into dark backgrounds:
     a subtle inner outline keeps them visible in every palette.
---------------------------------------------------------------------- */
/* v1.1: badge outlines apply to EVERY dark palette (Midnight Black,
     * Slate Night, Forest Night) plus the low-contrast Steel Gray. */
body.sp-dark-palette .newses-slide-info-banner .newses-slide-cat a,
body.sp-dark-palette .mg-blog-category a,
body.sp-dark-palette .mg-blog-category a.newses-categories,
body.sp-dark-palette .mg-wid-title h6,
body.sp-dark-palette .mg-wid-title h6 span.bg,
body.sp-dark-palette .mg-sec-title.st3 span.bg {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

body.palette-gray .newses-slide-info-banner .newses-slide-cat a,
body.palette-gray .mg-blog-category a,
body.palette-gray .mg-blog-category a.newses-categories {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}


/* ----------------------------------------------------------------------
 16. v1.1 LAYER - palette-aware surfaces, boxed layout, narrow sidebar,
     slideshow category labels, category icon, sidebar blocks, new footer
---------------------------------------------------------------------- */

/* ---- 16.1 Page background per palette -------------------------------- */
body.sp-palette-bg {
        background: var(--sp-body-bg, #f1f3f6) !important;
}

body,
.mg-blog-post-box,
.mg-posts-sec {
        color: var(--sp-text-body, #3d4350);
}

.mg-blog-post-box .title,
.mg-blog-post-box .title a,
.mg-sec-title h4,
.mg-header h1.title,
h1, h2, h3, h4, h5, h6 {
        color: var(--sp-text-strong, #1c1e25);
}

.wd-back {
        background: var(--sp-content-bg, #fff);
        border-color: var(--sp-border, #e8e8e8);
}

/* v1.7: CLASSIC TICKER RESTORED - the whole bar is the strong accent
   color with readable letters (--sp-on-accent), exactly like the user's
   original classic file (.mg-latest-news { background: var(--sp-accent) }
   + white slider links). The old white-track look is gone. */
.mg-latest-news {
        background: var(--sp-accent, #c70909);
}
.mg-latest-news .mg-latest-news-slider {
        background: transparent;
}
.mg-latest-news .mg-latest-news-slider a {
        color: var(--sp-on-accent, #fff);
}
.mg-latest-news .mg-latest-news-slider a::before {
        color: var(--sp-on-accent, #fff);
}

/* v1.9.1 dead rules removed: body.palette-cream/sky/mint/rose never render
   (legacy slugs resolve to their modern keys in the body-class filter), so
   these four selectors were unreachable since v1.6. */

/* ---- 16.2 BOXED LAYOUT (framed, centered site) ----------------------- */
body.sp-boxed {
        background-color: #eef1f5; /* overridden by the Customizer color / inline rule */
}

body.sp-boxed .wrapper {
        max-width: 1600px;
        margin: 0 auto;
        background: var(--sp-body-bg, #fff);
        box-shadow: 0 0 44px -12px rgba(15, 18, 25, .28);
}

body.sp-boxed #page {
        margin: 0 auto;
}

/* ---- 16.3 NARROW SIDEBAR (fixed px width, content takes the rest) ----
   v1.9.1: aside.col-md-3 added - page.php wraps its sidebar in col-md-3,
   so the Sidebar Width slider never reached it. */
@media (min-width: 992px) {
        #content .row > aside.col-md-4,
        #content .row > aside.col-md-3,
        #content .row > aside.col-lg-4,
        #content .row > aside.col-lg-3 {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 var(--sp-sidebar-w, 300px);
                flex: 0 0 var(--sp-sidebar-w, 300px);
                max-width: var(--sp-sidebar-w, 300px);
        }

        #content .row > div.col-md-8,
        #content .row > div.col-lg-8,
        #content .row > div.col-lg-9 {
                -webkit-box-flex: 1;
                -ms-flex: 1 1 0%;
                flex: 1 1 0%;
                width: auto;
                max-width: 100%;
        }
}

/* ---- 16.4 SLIDESHOW side + bottom items: category label -------------- */
.sp-item-cat {
        display: inline-block;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
        line-height: 1;
        margin-bottom: 4px;
}

.sp-item-cat a {
        display: inline-block;
        padding: 3px 7px;
        border-radius: 4px;
        color: var(--sp-on-accent, #fff) !important;
        background: var(--sp-accent, #c70909);
        text-decoration: none;
        transition: opacity .18s ease;
}

.sp-item-cat a:hover,
.sp-item-cat a:focus {
        opacity: .88;
        color: var(--sp-on-accent, #fff);
}

/* left column (trending) - label sits above the h5 title */
.recentarea .content .inner .sp-item-cat {
        display: block;
        margin-bottom: 5px;
}

/* right column + bottom row - label above the h4 title */
.mg-blog-post-box article.small .sp-item-cat {
        display: block;
        margin-bottom: 5px;
}

/* ---- 16.5 CATEGORY PAGE: optional icon before the name --------------- */
.newses-cat-banner-title {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10px;
}

.sp-cat-icon {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 1.55em;
        height: 1.55em;
        font-size: .9em;
        line-height: 1;
        border-radius: 8px;
        color: var(--sp-on-accent, #fff);
        background: var(--sp-accent, #c70909);
        box-shadow: 0 4px 10px -6px rgba(15, 18, 25, .5);
}

.sp-cat-icon i,
.sp-cat-icon svg {
        font-size: .95em;
        width: 1em;
        height: 1em;
}

.sp-cat-icon-torch svg path {
        fill: currentColor;
}

/* ---- 16.6 SIDEBAR BLOCKS (Category Layouts page - no widgets) -------- */
.sp-blocks {
        margin-bottom: 4px;
}

.sp-block {
        margin-bottom: 20px;
}

.sp-block-heading {
        margin-bottom: 12px;
}

.sp-block-heading h6,
.sp-block-heading h6 span.bg {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin: 0;
        padding: 9px 10px;
        line-height: 1.35;
        color: var(--sp-on-accent, #fff);
        background: var(--sp-accent, #c70909);
        border-radius: 8px;
}

.sp-block-image {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 6px 18px -10px rgba(15, 18, 25, .3);
        background: var(--sp-content-bg, #fff);
}

.sp-block-image img.sp-block-img {
        display: block;
        width: 100%;
        height: auto;
}

.sp-block-caption {
        margin: 0;
        padding: 8px 10px 10px;
        font-size: 12.5px;
        color: var(--sp-text-muted, #6b7280);
        text-align: center;
}

.sp-block-html {
        background: var(--sp-content-bg, #fff);
        border-radius: 10px;
        box-shadow: 0 2px 10px -6px rgba(15, 18, 25, .16);
        padding: 14px;
        overflow: hidden;
}

.sp-block-html .mg-wid-title {
        margin: -14px -14px 14px;
}

.sp-block-html-inner > * {
        max-width: 100%;
}

.sp-block-html-inner iframe,
.sp-block-html-inner img {
        max-width: 100% !important;
}

.sp-block-posts .sp-block-posts-list {
        list-style: none;
        margin: 0;
        padding: 0;
}

.sp-block-posts .sp-block-posts-list li {
        border-bottom: 1px solid var(--sp-border, #ececec);
}

.sp-block-posts .sp-block-posts-list li:last-child {
        border-bottom: 0;
}

.sp-block-post-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10px;
        padding: 8px 2px;
        text-decoration: none;
}

.sp-block-post-thumb {
        width: 56px;
        height: 56px;
        min-width: 56px;
        border-radius: 8px;
        object-fit: cover;
}

.sp-block-post-noimg {
        background: var(--sp-accent, #c70909);
        opacity: .9;
}

.sp-block-post-text strong {
        display: block;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.35;
        color: var(--sp-text-strong, #1c1e25);
}

.sp-block-post-text time {
        display: block;
        font-size: 11.5px;
        color: var(--sp-text-muted, #6b7280);
        margin-top: 2px;
}

/* ---- 16.7 NEW COMPACT FOOTER ------------------------------------------ */
footer.sp-footer {
        background: var(--sp-dark, #121026);
        color: rgba(255, 255, 255, .82);
}

footer.sp-footer .overlay {
        padding: 0;
}

footer.sp-footer .mg-footer-widget-area {
        padding: 30px 0 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sp-footer-main {
        padding: 26px 0 6px;
}

.sp-footer-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 18px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.sp-footer-brand {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 12px;
}

.sp-footer-brand .custom-logo-link img,
.sp-footer-brand img.custom-logo {
        /* v1.8: footer logo size slider (Footer section).
         * v1.9.1: height (not just max-height) so the slider truly sets
         * the size in both directions, same as the header logo. */
        height: var(--sp-footer-logo-h, 44px);
        max-height: var(--sp-footer-logo-h, 44px);
        width: auto;
}

.sp-footer-brand-text .site-title-footer {
        margin: 0;
        /* v1.8: footer site-name size slider (Footer section) */
        font-size: var(--sp-footer-title-size, 19px);
        font-weight: 800;
        letter-spacing: -.01em;
        line-height: 1.2;
}

.sp-footer-brand-text .site-title-footer a {
        color: #fff;
        text-decoration: none;
}

.sp-footer-brand-text .site-title-footer a:hover {
        color: var(--sp-accent, #c70909);
}

.sp-footer-brand-text .site-description-footer {
        margin: 2px 0 0;
        font-size: 12.5px;
        color: rgba(255, 255, 255, .62);
}

.sp-footer-menu-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 4px 22px;
        list-style: none;
        margin: 0;
        padding: 0;
}

.sp-footer-menu-list li a {
        color: rgba(255, 255, 255, .78);
        font-size: 13.5px;
        font-weight: 600;
        text-decoration: none;
        /* v1.8: footer-menu bar height slider (Bars & Strips) */
        padding: var(--sp-bar-fmenu, 3px) 0;
        display: inline-block;
}

.sp-footer-menu-list li a:hover {
        color: #fff;
}

.sp-footer-social {
        margin: 0;
}

.sp-footer-social li span.icon-soci {
        background: rgba(255, 255, 255, .1);
        color: #fff;
}

.sp-footer-social li span.icon-soci:hover {
        background: var(--sp-accent, #c70909);
}

.mg-footer-copyright {
        /* v1.8: copyright bar height slider (Bars & Strips) */
        padding: var(--sp-bar-copy, 7px) 0;
        font-size: 13px;
        border-top: 1px solid rgba(255, 255, 255, .08);
        background: rgba(0, 0, 0, .18);
}

.sp-copy-row {
        text-align: center;
}

.sp-footer-copy-text {
        margin: 0;
        color: rgba(255, 255, 255, .68);
}

.sp-footer-copy-text strong {
        color: #fff;
}

@media (max-width: 767px) {
        .sp-footer-row {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                text-align: center;
        }

        .sp-footer-brand {
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
        }

        .sp-footer-menu-list {
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
        }
}

/* ---- 16.8 TV / 4K: keep the boxed frame elegant ----------------------- */
@media (min-width: 2304px) {
        body.sp-boxed .wrapper {
                max-width: 1660px;
        }
}


/* ----------------------------------------------------------------------
 17. v1.2 LAYER - fixed breaking-news ticker + site-wide compact design
     (less empty color: every box now hugs its text)
---------------------------------------------------------------------- */

/* ---- 17.1 BREAKING NEWS TICKER - CRITICAL FIX + COMPACT ----------------
   The v1.1 rule ".bn_title { display:flex }" turned the red label box
   into a BLOCK that spanned the whole bar and (with z-index:100) sat
   ON TOP of the scrolling headlines - the ticker looked "empty".
   New layout: label shrinks to its own width, the headline track takes
   the rest of the row. Height: compact 38px. */
/* v1.8: the strip height follows the "Breaking news bar height" slider
   (--sp-bar-ticker, default 34px - was a hard-coded 38px). */
.mg-latest-news {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        height: var(--sp-bar-ticker, 34px);
        min-height: 0;
}

.mg-latest-news .bn_title {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: auto;
        height: auto;
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        margin: 0;
        z-index: 2;
        background: var(--sp-accent, #c70909);
        border-right: 3px solid rgba(255, 255, 255, .28);
}

.mg-latest-news .bn_title h2.title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        margin: 0;
        padding: 0 16px;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .05em;
        line-height: 1.15;
        white-space: nowrap;
        border-right: 0;
        box-sizing: border-box;
}

.mg-latest-news .bn_title h2.title .fa-spinner {
        font-size: 12px;
        margin-right: 7px;
}

.mg-latest-news .mg-latest-news-slider {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        width: auto;
        height: var(--sp-bar-ticker, 34px);
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
        line-height: var(--sp-bar-ticker, 34px);
        padding: 0 10px 0 14px;
        background: transparent;   /* v1.7: classic full-accent bar */
        border-radius: 0;
}

.mg-latest-news .mg-latest-news-slider a {
        display: inline-block;
        padding: 0 28px 0 0;
        margin: 0;
        line-height: var(--sp-bar-ticker, 34px);
        font-size: 14px;
        font-weight: 600;
        color: var(--sp-on-accent, #fff);   /* v1.7: readable on the accent bar */
        vertical-align: middle;
}

.mg-latest-news .mg-latest-news-slider a:hover {
        color: var(--sp-on-accent, #fff);
        text-decoration: underline;
}

.mg-latest-news .mg-latest-news-slider a .img,
.mg-latest-news .mg-latest-news-slider a img {
        width: calc(var(--sp-bar-ticker, 34px) - 10px);
        height: calc(var(--sp-bar-ticker, 34px) - 10px);
        border-radius: 6px;
        margin-right: 9px;
        margin-left: 0;
        vertical-align: middle;
        object-fit: cover;
}

/* ticker wrapper: pull it tight against the menu bar */
.mg-latest-news-sec .container,
.mg-latest-news-sec {
        box-shadow: 0 2px 8px -4px rgba(15, 18, 25, .18);
}

/* ---- 17.2 TOP DATE BAR - slim (was ~45-55px, now ~26px) --------------- */
.mg-head-detail {
        padding: 3px 0;
}

.mg-head-detail .info-left li,
.mg-head-detail .info-right li {
        /* v1.8: follows the Top date bar height slider */
        line-height: var(--sp-bar-top, 26px);
        margin-right: 10px;
}

.mg-head-detail .info-left li span.time {
        line-height: calc(var(--sp-bar-top, 26px) - 4px);
        font-size: 12px;
        padding: 1px 8px;
        margin-left: 8px;
}

.mg-head-detail .info-left i {
        font-size: 12px;
        padding-right: 6px;
}

.mg-head-detail .info-left li a {
        font-size: 12.5px;
}

/* ---- 17.3 RED TITLE BOXES - hug their text ---------------------------- */
.mg-wid-title h6,
.mg-wid-title h6 span.bg,
.sp-block-heading h6,
.sp-block-heading h6 span.bg {
        font-size: 13px;
        padding: 6px 10px;
        line-height: 1.3;
        border-radius: 7px 7px 0 0;
}

.sp-block-heading h6,
.sp-block-heading h6 span.bg {
        border-radius: 7px;
}

.mg-sec-title.st3 span.bg {
        font-size: 13.5px;
        padding: 5px 12px;
}

.mg-sec-title {
        margin-bottom: 10px;
}

/* ---- 17.4 ARTICLE CARDS - tighter boxes -------------------------------- */
.mg-blog-post-box article.small {
        padding: 12px 14px;
}

.mg-blog-post-box article.small.p-3 {
        padding: 12px 14px;
}

.mg-blog-post-box article.small .title {
        font-size: 15px;
        line-height: 1.3;
}

.recentarea .content .inner {
        padding: 10px 12px;
}

.recentarea .content .inner h5 {
        font-size: 13.5px;
        line-height: 1.3;
        margin: 0;
}

/* single post + page headers */
.mg-header.mb-30 {
        padding: 16px 18px;
        margin-bottom: 16px !important;
}

.mg-header h1.title {
        font-size: 26px;
        margin: 8px 0 10px;
}

.mg-blog-post-box article.small.single {
        padding: 18px 20px !important;
}

/* category banner: less air */
.newses-cat-banner {
        margin-bottom: 16px;
}

.newses-cat-banner-inner {
        padding: 12px 16px 12px 20px;
}

.newses-cat-banner-title {
        font-size: 24px;
}

/* card meta line */
.mg-blog-meta {
        font-size: 12.5px;
        margin-bottom: 4px;
}

.mg-blog-date {
        font-size: 12.5px;
}

/* ---- 17.5 SECTION SPACING - close the vertical gaps -------------------- */
.mg-fea-area .mg-padding {
        padding-top: 10px;
        padding-bottom: 6px;
}

.container.mt-4.mg-padding {
        margin-top: 14px !important;
}

.mg-posts-sec .mg-sec-title {
        margin-top: 0;
}

.mg-blog-post-box {
        margin-bottom: 18px;
}

.mg-blog-post-lts {
        margin-bottom: 18px;
}

/* sidebar blocks: tighter stack */
.sp-block {
        margin-bottom: 14px;
}

.sp-block-html {
        padding: 12px;
}

.sp-block-html .mg-wid-title {
        margin: -12px -12px 12px;
}

.sp-block-posts .sp-block-post-link {
        padding: 7px 2px;
}

.sp-block-posts .sp-block-post-thumb {
        width: 52px;
        height: 52px;
        min-width: 52px;
}

/* footer: compact */
footer .mg-footer-widget-area {
        padding: 24px 0 8px;
}

footer .mg-widget {
        margin-bottom: 16px;
}

.mg-footer-copyright {
        padding: 10px 0;
        font-size: 12.5px;
}

/* ---- 17.6 HEADER - kill the dead dark space ---------------------------- */
.mg-nav-widget-area-back .overlay .inner {
        padding-top: 2px;
        padding-bottom: 2px;
}

.mg-nav-widget-area {
        padding: var(--sp-brand-pad-y, 8px) 0;
}

/* the slideshow info banner: slightly tighter */
.newses-slide-info-banner {
        padding: 10px 14px 11px;
}

.newses-slide-info-banner .newses-slide-title {
        font-size: 19px;
}

.newses-slide-info-banner .newses-slide-cat a {
        padding: 3px 7px;
}

/* ---- 17.7 DARK PALETTES ----------------------------------------------
   (v1.7: the old "ticker track uses their content bg" rules were removed -
   every palette now shows the classic full-accent ticker bar with
   --sp-on-accent letters, per the user's request.) */

/* ---- 17.8 SEARCH + CATEGORY MENU sidebar blocks (v1.2 builder) -------- */
.sp-block-search .sp-search-form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 6px;
        background: var(--sp-content-bg, #fff);
        border-radius: 8px;
        box-shadow: 0 2px 8px -5px rgba(15, 18, 25, .16);
        padding: 8px;
}

.sp-block-search .sp-search-form input[type="search"] {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
        border: 1px solid var(--sp-border, #e4e6ea);
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 13.5px;
        line-height: 1.3;
        background: transparent;
        color: var(--sp-text-body, #3d4350);
}

.sp-block-search .sp-search-form button {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        border: 0;
        border-radius: 6px;
        background: var(--sp-accent, #c70909);
        color: var(--sp-on-accent, #fff);
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        line-height: 1.35;
}

.sp-block-search .sp-search-form button:hover {
        background: var(--sp-accent-2, #9c0710);
        color: var(--sp-on-accent-2, #fff);
}

.sp-block-cats {
        background: var(--sp-content-bg, #fff);
        border-radius: 8px;
        box-shadow: 0 2px 8px -5px rgba(15, 18, 25, .16);
        padding: 6px 8px;
}

.sp-block-cats .sp-cat-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        gap: 8px;
        padding: 6px 8px;
        border-radius: 6px;
        font-size: 13.5px;
        color: var(--sp-text-body, #3d4350);
        text-decoration: none;
}

.sp-block-cats .sp-cat-item:hover {
        background: var(--sp-tint, rgba(199, 9, 9, .07));
        color: var(--sp-accent, #c70909);
}

.sp-block-cats .sp-cat-name-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 8px;
        min-width: 0;
}

.sp-block-cats .sp-cat-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.sp-block-cats .sp-cat-item .sp-cat-icon {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-size: 11px;
        color: var(--sp-on-accent, #fff);
        background: var(--sp-accent, #c70909);
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
}

/* (v1.4) post counts removed from the design - no .sp-cat-count styles */

/* mobile ticker keeps working with the label hidden */
@media (max-width: 767.98px) {
        .mg-latest-news .bn_title h2.title {
                display: none;
        }

        .mg-latest-news .bn_title {
                border-right: 0;
        }

        .mg-latest-news .mg-latest-news-slider {
                padding-left: 12px;
                line-height: 34px;
                height: 34px;
        }

        .mg-latest-news .mg-latest-news-slider a {
                line-height: 34px;
        }
}

/* ======================================================================
 18. v1.3 LAYER - logo position, numbered-slider sizes for the slideshow
     and section headings, classic widget-card sidebar look.
====================================================================== */

/* ---- 18.1 LOGO POSITION (v1.9.8: see layer 29.1) --------------------------
   v1.3 put the logo inline with margin-left:auto; v1.8-v1.9.7 aligned that
   inline logo with the page-box edge - but the header BAND spans the whole
   viewport, so on wide screens the container margin still sat between the
   logo and the band edge ("logo not going all the way to the right edge",
   reported again in v1.9.7). v1.9.8 renders the logo in .sp-logo-edge,
   absolutely pinned to the BAND's true right edge (29.1 below). What is
   left here: the text block takes the full brand column when the logo is
   on the right. */
body.sp-logo-right .newses-brand-inline .site-branding-text {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        margin-left: 0;
}

/* the tablet override in style.css (38px !important) must follow the slider */
@media (min-width: 768px) and (max-width: 991px) {
        .site-branding-text .site-title a {
                font-size: min(38px, var(--sp-title-size, 30px)) !important;
        }
        .site-branding-text p.site-description {
                font-size: var(--sp-sub-size, 13px);
        }
}

/* ---- 18.2 SLIDESHOW SIZES (Design Studio > Slideshow: Sizes & Info Banner) */
.mg-blog-post-3.lg,
.homemain .mg-blog-post-3 {
        height: var(--sp-slide-h, 450px);
}
@media (min-width: 1440px) {
        .mg-blog-post-3.lg {
                height: calc(var(--sp-slide-h, 450px) + 30px);
        }
}
@media (min-width: 1600px) {
        .mg-blog-post-3.lg {
                height: calc(var(--sp-slide-h, 450px) + 70px);
        }
}
.newses-slide-info-banner {
        padding: var(--sp-slide-banner-pad, 10px) 14px calc(var(--sp-slide-banner-pad, 10px) + 1px);
}
.newses-slide-info-banner .newses-slide-title {
        font-size: var(--sp-slide-title-size, 21px);
}
@media (min-width: 1600px) {
        .newses-slide-info-banner .newses-slide-title {
                font-size: calc(var(--sp-slide-title-size, 21px) + 3px);
        }
}
.newses-slide-info-banner.newses-slide-banner-sm .newses-slide-title {
        font-size: var(--sp-slide-side-title-size, 15px);
}
.sp-slide-left .recentarea .content .inner h5,
.sp-slide-left .inner h5 {
        font-size: var(--sp-slide-side-title-size, 15px);
}
.sp-slide-right .mg-blog-post-box article h4.title,
.sp-slide-right article h4.title {
        font-size: var(--sp-slide-right-title-size, 15px);
}
.sp-slide-bottom .mg-blog-post-box article h4.title,
.sp-slide-bottom article h4.title {
        font-size: var(--sp-slide-bottom-title-size, 14px);
}
/* mobile keeps friendly caps but still follows the sliders */
@media (max-width: 767.98px) {
        .mg-blog-post-3.lg,
        .homemain .mg-blog-post-3 {
                height: min(340px, var(--sp-slide-h, 450px));
                min-height: min(340px, var(--sp-slide-h, 450px));
        }
        .newses-slide-info-banner .newses-slide-title {
                font-size: min(17px, var(--sp-slide-title-size, 21px));
        }
}

/* ---- 18.3 SECTION HEADINGS + VERTICAL RHYTHM -------------------------- */
.mg-wid-title h6,
.mg-wid-title h6 span.bg,
.sp-block-heading h6,
.sp-block-heading h6 span.bg,
.mg-sec-title h4,
.mg-sec-title h4 span.bg,
.mg-sec-title.st3 span.bg {
        font-size: var(--sp-section-title-size, 13px);
}
.mg-fea-area {
        margin-bottom: var(--sp-section-gap, 10px);
        /* v1.8: the spacing slider now also pulls the slideshow UP toward
         * the menu / ticker (it used to only affect everything BELOW the
         * divider line). */
        margin-top: var(--sp-section-gap, 10px);
}
/* v1.9: when the breaking-news ticker sits directly above the slideshow
 * there is exactly ONE section gap between them (the ticker's bottom
 * margin) - the section's own top margin is dropped so the Section
 * spacing slider controls the FULL visible space between the two bars. */
.sp-ticker-wrap + .mg-fea-area {
        margin-top: 0;
}
/* v1.9: the slideshow row starts at the very top of its container - the
 * classic .my-3 top margin used to add a fixed 16px nobody could control
 * (bootstrap's .my-3 is !important AND it collapsed straight through the
 * section, so the visible ticker->slideshow gap could never go below 16px
 * no matter what the Section spacing slider said). */
.mg-fea-area .container.mg-padding > .row.my-3 {
        margin-top: 0 !important;
}
.sp-ticker-wrap {
        margin-top: var(--sp-section-gap, 10px) !important;
        margin-bottom: var(--sp-section-gap, 10px) !important;
}
.mg-posts-sec,
.missed-inner.wd-back {
        margin-bottom: var(--sp-section-gap, 10px);
}

/* ---- 18.4 SIDEBAR BLOCKS - the classic widget-card look (user favorite) */
.sp-block {
        margin-bottom: 16px;
}
.sp-block-cats,
.sp-block-html,
.sp-block-posts,
.sp-block-search {
        background: var(--sp-content-bg, #fff);
        border: 1px solid var(--sp-border, #e4e6ea);
        border-radius: 6px;
        box-shadow: none;
        padding: 12px;
}
.sp-block-search .sp-search-form {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
}
.sp-block-cats .mg-wid-title,
.sp-block-html .mg-wid-title,
.sp-block-posts .mg-wid-title,
.sp-block-search .mg-wid-title,
.sp-block-cats .sp-block-heading,
.sp-block-html .sp-block-heading,
.sp-block-posts .sp-block-heading,
.sp-block-search .sp-block-heading {
        margin: -12px -12px 12px;
}
.sp-block-image {
        border: 1px solid var(--sp-border, #e4e6ea);
        border-radius: 6px;
        box-shadow: none;
}
.sp-block-cats .sp-cats-list {
        padding: 0 2px;
}
.sp-block-cats .sp-cat-item {
        border-radius: 0;
        border-bottom: 1px solid var(--sp-border, #ececec);
        padding: 7px 4px;
        margin: 0;
}
.sp-block-cats .sp-cat-item:last-child {
        border-bottom: 0;
}
.sp-block-posts .sp-block-posts-list {
        margin: 0;
        padding: 0 2px;
}
.sp-block-posts .sp-block-posts-list li {
        border-bottom: 1px solid var(--sp-border, #ececec);
}
.sp-block-posts .sp-block-post-link {
        padding: 8px 2px;
}

/* ======================================================================
 19. v1.4 COMPACT LAYER - "less spacing between blocks & elements".
     Tighter defaults everywhere: cards, sidebar stack, section rhythm,
     footer air, grid gutters. Sizes stay controlled by the Design
     Studio sliders; this layer only removes the dead space.
====================================================================== */

/* ---- 19.1 GRID GUTTERS: 30px gaps between cards -> 20px --------------- */
@media (min-width: 768px) {
        #content .row,
        .mg-fea-area .row,
        .missed-inner .row {
                margin-left: -10px;
                margin-right: -10px;
        }
        #content .row > [class*="col-"],
        .mg-fea-area .row > [class*="col-"],
        .missed-inner .row > [class*="col-"] {
                padding-left: 10px;
                padding-right: 10px;
        }
}

/* ---- 19.2 VERTICAL RHYTHM ---------------------------------------------- */
.mg-fea-area .mg-padding {
        /* v1.9: top padding removed - the gap between the breaking-news
         * bar and the slideshow is now ONLY the Section spacing slider. */
        padding-top: 0;
        padding-bottom: 6px;
}

.container.mt-4.mg-padding {
        margin-top: 10px !important;
}

.mg-blog-post-box,
.mg-blog-post-lts {
        margin-bottom: 12px;
}

.mg-sec-title {
        margin-bottom: 8px;
}

/* ---- 19.3 CARD PADDING - hug the content ------------------------------- */
.mg-blog-post-box article.small {
        padding: 10px 12px 12px;
        /* v1.9.2 THE WHITE-ARTICLE FIX: the classic style.css rule
         * ".mg-blog-post-box .small { background: #fff }" painted the
         * article area of EVERY card white - on dark palettes the card
         * BOX was dark (palette-skins 9/9b + the inline guarantee) but
         * the white article sat ON TOP of it, so the right column, the
         * bottom row and You Missed showed white cards while the left
         * column (different markup, .inner) stayed dark. The article now
         * follows the palette token (light palettes keep #fff). */
        background: var(--sp-content-bg, #fff);
}

.mg-blog-post-box article.small.p-3 {
        padding: 10px 12px 12px;
}

.mg-posts-sec-post .mg-sec-top-post {
        padding: 12px 14px 4px;
}

.recentarea .content .inner {
        padding: 8px 10px;
}

.mg-blog-post-box h4.title,
.mg-blog-post-box h4.title a {
        font-size: 15.5px;
        line-height: 1.3;
}

/* ---- 19.4 SIDEBAR STACK - tighter cards --------------------------------- */
.mg-sidebar .mg-widget {
        padding: 12px 12px 14px;
        margin-bottom: 12px;
}

.mg-sidebar .mg-widget .mg-wid-title {
        margin: -12px -12px 10px;
}

.mg-widget .mg-wid-title {
        margin-bottom: 10px;
}

.sp-block {
        margin-bottom: 10px;
}

.sp-block-heading {
        margin-bottom: 8px;
}

.sp-block-cats,
.sp-block-html,
.sp-block-posts,
.sp-block-search {
        padding: 10px;
}

.sp-block-cats .mg-wid-title,
.sp-block-html .mg-wid-title,
.sp-block-posts .mg-wid-title,
.sp-block-search .mg-wid-title,
.sp-block-cats .sp-block-heading,
.sp-block-html .sp-block-heading,
.sp-block-posts .sp-block-heading,
.sp-block-search .sp-block-heading {
        margin: -10px -10px 10px;
}

.sp-block-cats .sp-cat-item {
        padding: 6px 4px;
}

.sp-block-posts .sp-block-post-link {
        padding: 7px 2px;
}

.sp-block-caption {
        padding: 6px 8px 8px;
}

.newses-cat-sidebar-image {
        margin-bottom: 12px;
}

.newses-ad-slot {
        margin: 0 0 12px;
}

/* ---- 19.5 CATEGORY BANNER + SINGLE POST - less air ---------------------- */
.newses-cat-banner {
        margin-bottom: 12px;
}

.newses-cat-banner-inner {
        padding: 10px 14px 10px 18px;
        gap: 4px 10px;
}

.newses-cat-banner-title {
        font-size: 22px;
}

.mg-header.mb-30 {
        padding: 14px 16px;
        margin-bottom: 12px !important;
}

.mg-header h1.title {
        margin: 6px 0 8px;
}

.mg-blog-post-box article.small.single {
        padding: 16px 18px !important;
}

/* ---- 19.6 NAVBAR - denser menu row -------------------------------------- */
.mg-menu-full .navbar-wp {
        min-height: calc(var(--sp-bar-nav, 8px) * 2 + 22px);
}

.navbar-wp .navbar-nav > li > a {
        /* v1.8: follows the Main menu bar height slider */
        padding: var(--sp-bar-nav, 8px) 12px;
        font-size: 14px;
}

/* ---- 19.7 FOOTER - slimmer strip ---------------------------------------- */
footer.sp-footer .mg-footer-widget-area {
        padding: 18px 0 6px;
}

.sp-footer-main {
        padding: 16px 0 4px;
}

footer .mg-widget {
        margin-bottom: 12px;
}

.mg-footer-copyright {
        /* v1.8: follows the rights-bar height slider */
        padding: var(--sp-bar-copy, 7px) 0;
}

/* ---- 19.8 DARK-PALETTE BADGES: follow the readable on-accent text ------- */
body.sp-dark-palette .newses-slide-info-banner .newses-slide-cat a,
body.sp-dark-palette .mg-blog-category a,
body.sp-dark-palette .mg-blog-category a.newses-categories,
body.sp-dark-palette .mg-wid-title h6,
body.sp-dark-palette .mg-wid-title h6 span.bg,
body.sp-dark-palette .mg-sec-title.st3 span.bg {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

/* ---- 19.9 COMPACT PRESETS (v1.4): optional even-tighter mode ----------- */
body.sp-compact .mg-fea-area .mg-padding {
        padding-top: 4px;
        padding-bottom: 2px;
}
body.sp-compact .mg-blog-post-box,
body.sp-compact .mg-blog-post-lts {
        margin-bottom: 8px;
}
body.sp-compact .sp-block {
        margin-bottom: 6px;
}
body.sp-compact .mg-sidebar .mg-widget {
        margin-bottom: 8px;
        padding: 10px 10px 12px;
}
body.sp-compact .mg-sidebar .mg-widget .mg-wid-title {
        margin: -10px -10px 8px;
}
body.sp-compact .mg-wid-title h6,
body.sp-compact .mg-wid-title h6 span.bg,
body.sp-compact .sp-block-heading h6,
body.sp-compact .sp-block-heading h6 span.bg {
        padding: 4px 8px;
}
body.sp-compact .navbar-wp .navbar-nav > li > a {
        padding: var(--sp-bar-nav, 5px) 10px;
}
body.sp-compact .mg-menu-full .navbar-wp {
        min-height: calc(var(--sp-bar-nav, 5px) * 2 + 20px);
}

/* ======================================================================
 21. v1.7 LAYER - slideshow separator, section alignment (one rectangle),
     logo right-edge alignment + centering control, right column title size
====================================================================== */

/* ---- 21.1 SEPARATOR between the slideshow and the articles below ------
   Design Studio > Homepage: Slideshow > SEPARATOR (show/hide + design).
   The div is printed by header.php right after the slideshow section. */
.sp-slide-sep-wrap {
        padding-top: 6px;
        padding-bottom: 6px;
        margin-bottom: 6px;
}
.sp-slide-sep {
        position: relative;
        height: 0;
        border-top: 2px solid var(--sp-border, #e2e5ea);
}
/* style: accent rule (default) - strong color line fading to the right */
.sp-slide-sep[data-style="accent-rule"] {
        border: 0;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg,
                var(--sp-accent, #C70909) 0%,
                rgba(var(--sp-accent-rgb, 199,9,9), .35) 60%,
                transparent 100%);
}
/* style: bold bar - solid full-width accent band */
.sp-slide-sep[data-style="bold-bar"] {
        border: 0;
        height: 6px;
        border-radius: 3px;
        background: var(--sp-accent, #C70909);
}
/* style: double line - two thin classic rules */
.sp-slide-sep[data-style="double"] {
        height: 5px;
        border-top: 1px solid var(--sp-border, #c8c8cd);
        border-bottom: 1px solid var(--sp-border, #c8c8cd);
}
/* style: dotted */
.sp-slide-sep[data-style="dotted"] {
        border-top: 3px dotted var(--sp-accent, #C70909);
}
/* style: gradient fade - soft tinted band */
.sp-slide-sep[data-style="gradient"] {
        border: 0;
        height: 14px;
        border-radius: 7px;
        background: linear-gradient(90deg,
                rgba(var(--sp-accent-rgb, 199,9,9), .16),
                rgba(var(--sp-accent-rgb, 199,9,9), .03));
}
/* style: shadow band - soft elevation divider */
.sp-slide-sep[data-style="shadow"] {
        border: 0;
        height: 12px;
        border-radius: 8px;
        box-shadow: inset 0 5px 8px -6px rgba(15, 18, 25, .35);
        background: var(--sp-muted-bg, #f3eeee);
}

/* ---- 21.2 SLIDESHOW SECTIONS ALIGNED INTO ONE RECTANGLE ----------------
   Design Studio > Homepage: Slideshow > "Align columns into one
   rectangle" (body.sp-slide-align). The LEFT column box stretches to
   the full slideshow height, the RIGHT column cards share the height
   and grow their cover photos, and the BOTTOM row keeps its cards equal
   - the four sections form a clean rectangular block. */
body.sp-slide-align .mg-fea-area .row.my-3 {
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
}
/* v1.9.1: desktop/tablet only - on phones the side columns must stay
 * HIDDEN (bootstrap d-none). Without this media scope the !important
 * flex beaters overrode d-none and forced the side columns onto the
 * mobile feed. */
@media (min-width: 768px) {
body.sp-slide-align .mg-fea-area .row.my-3 > [class*="col-"] {
        /* !important beats bootstrap's .d-md-block { display:block !important }
         * on the LEFT / RIGHT columns - without it the flex chain never
         * reaches their inner .row and the "one rectangle" breaks. */
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
}
}
/* LEFT column: the trending box fills the full height and spreads its
 * items evenly (extra space lands between the items, never outside).
 * v1.9.1: >= 768px only (phones keep the columns hidden). */
@media (min-width: 768px) {
body.sp-slide-align .sp-slide-left {
        /* !important beats bootstrap's d-none d-md-block utilities */
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
}
}
/* v1.9.3 TABLET / CUSTOMIZER-PREVIEW CENTER COLLAPSE FIX:
 * the >=768 flex rule above turns the CENTER column into a flex column
 * on tablets (768-991) too - but the v1.9.2 width:100% fix only existed
 * in the >=992 block, so the center swiper (whose CSS carries
 * margin-left/right:auto) lost its stretch, fell back to fit-content = 0
 * and the CENTER IMAGE VANISHED (homemain 0x450, verified in a real
 * browser). Un-scoped width + zeroed margins fix real tablets AND the
 * narrow Customizer preview iframe; below 768 the element is a plain
 * block so the rule is a no-op there. */
body.sp-slide-align .homemain {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
}
body.sp-slide-align .sp-slide-left .recentarea.wd-back {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
}
body.sp-slide-align .sp-slide-left .recentarea-slider {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
}
/* RIGHT column: cards split the available height; the cover photo area
 * grows (background-size: cover keeps the image clean).
 * v1.9.1: >= 768px only (phones keep the columns hidden). */
@media (min-width: 768px) {
body.sp-slide-align .sp-slide-right {
        /* !important beats bootstrap's d-none d-md-block utilities */
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
}
}
body.sp-slide-align .sp-slide-right > .row {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        margin-left: 0;
        margin-right: 0;
}
body.sp-slide-align .sp-slide-right > .row > .col-md-12 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-left: 0;
        padding-right: 0;
}
body.sp-slide-align .sp-slide-right .mg-blog-post-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
}
body.sp-slide-align .sp-slide-right .mg-blog-thumb.lg {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        /* v1.9.8: the CARD PICTURE HEIGHT (tile size) slider is the tile's
         * EXACT height. v1.9.7 had flex:1 1 auto here (the tile could only
         * GROW past the slider, never shrink to it), so dragging the slider
         * down never visibly shrank the banner - "it doesn't make the tile
         * banner shrink". Natural height = the slider value, always. */
        height: var(--sp-slide-r-thumb-h, 190px);
        min-height: 60px;
        background-size: cover;
        background-position: center;
}
/* full titles instead of the 73px clamp when aligned */
body.sp-slide-align .mg-blog-post-box .small.minh {
        height: auto;
        min-height: 0;
}
/* the last card never adds bottom margin inside the stretched column */
body.sp-slide-align .sp-slide-right .col-md-12:last-child .mg-blog-post-box {
        margin-bottom: 0;
}

/* ---- 21.3 RIGHT COLUMN TITLE SIZE (own control, like every section) --- */
.sp-slide-right .mg-blog-post-box article h4.title,
.sp-slide-right article h4.title {
        font-size: var(--sp-slide-right-title-size, 15px);
}

/* ---- 21.4 LOGO ON THE RIGHT (v1.9.8: superseded by 29.1) -------------------
   The logo now lives in .sp-logo-edge (header.php), pinned to the header
   band's true right edge; the old col-padding / margin gymnastics for the
   INLINE logo are gone. --sp-logo-right-inset still pulls it toward the
   center (29.1). */
body.sp-logo-right .sp-brand-col {
        padding-right: 0;
}

/* ======================================================================
 22. v1.8 LAYER - per-section slideshow controls, one-rectangle fix,
     global line-height, logo-right page-box fix, footer customization,
     banner ad slots, sidebar ad fill
====================================================================== */

/* ---- 22.1 PER-AREA SLIDESHOW TYPOGRAPHY + SPACING + IMAGE HEIGHTS ----
   Every slideshow area (CENTER / LEFT / RIGHT / BOTTOM) now has the SAME
   control set in the Customizer: title size, LINE-HEIGHT, text (meta)
   font size, inner spacing and image height. Vars (all live-previewable):
     CENTER : --sp-slide-c-lh / --sp-slide-c-fs   (+ --sp-slide-h,
              --sp-slide-title-size, --sp-slide-banner-pad from v1.3)
     LEFT   : --sp-slide-l-lh / --sp-slide-l-fs / --sp-slide-l-pad /
              --sp-slide-l-thumb-h (+ --sp-slide-side-title-size)
     RIGHT  : --sp-slide-r-lh / --sp-slide-r-fs / --sp-slide-r-pad /
              --sp-slide-r-thumb-h (+ --sp-slide-right-title-size)
     BOTTOM : --sp-slide-b-lh / --sp-slide-b-fs / --sp-slide-b-pad /
              --sp-slide-b-thumb-h (+ --sp-slide-bottom-title-size) */

/* CENTER info banner */
.newses-slide-info-banner .newses-slide-title {
        line-height: var(--sp-slide-c-lh, 1.28);
}
.newses-slide-info-banner .newses-slide-meta,
.newses-slide-info-banner .newses-slide-date,
.newses-slide-info-banner .newses-slide-author {
        font-size: var(--sp-slide-c-fs, 12px);
}

/* LEFT column (trending) */
.sp-slide-left .recentarea .content .inner {
        padding: var(--sp-slide-l-pad, 8px) 10px;
}
.sp-slide-left .inner h5,
.sp-slide-left .recentarea .content .inner h5 {
        line-height: var(--sp-slide-l-lh, 1.3);
}
.sp-slide-left .content .back-img,
.sp-slide-left .recentarea .back-img {
        height: var(--sp-slide-l-thumb-h, 84px);
        width: var(--sp-slide-l-thumb-h, 84px);
}
.sp-slide-left .inner .sp-item-cat,
.sp-slide-left .content .inner .sp-item-cat {
        font-size: var(--sp-slide-l-fs, 11px);
}

/* RIGHT column (editorials) */
.sp-slide-right .mg-blog-post-box article.small {
        padding: var(--sp-slide-r-pad, 10px) 12px 12px;
}
.sp-slide-right .mg-blog-post-box article h4.title,
.sp-slide-right article h4.title {
        line-height: var(--sp-slide-r-lh, 1.3);
}
.sp-slide-right .mg-blog-post-box .mg-blog-thumb.lg {
        height: var(--sp-slide-r-thumb-h, 190px);
}
.sp-slide-right .sp-item-cat,
.sp-slide-right .mg-blog-post-box .sp-item-cat {
        font-size: var(--sp-slide-r-fs, 11px);
}

/* BOTTOM row (3 posts) */
.sp-slide-bottom .mg-blog-post-box article.small {
        padding: var(--sp-slide-b-pad, 10px) 12px 12px;
}
.sp-slide-bottom .mg-blog-post-box article h4.title,
.sp-slide-bottom article h4.title {
        line-height: var(--sp-slide-b-lh, 1.3);
}
.sp-slide-bottom .mg-blog-post-box .mg-blog-thumb.sm {
        height: var(--sp-slide-b-thumb-h, 120px);
}
.sp-slide-bottom .sp-item-cat,
.sp-slide-bottom .mg-blog-post-box .sp-item-cat {
        font-size: var(--sp-slide-b-fs, 11px);
}

/* ---- 22.2 GLOBAL LINE-HEIGHT (Design Studio > Bars, Spacing & Text) ---
   One slider sets the reading line-height for the whole site: body text,
   articles, sidebars, footers. Headline clamps stay per-area above. */
body,
.mg-blog-post-box article.small,
.mg-blog-post article,
.mg-posts-sec-post .mg-sec-top-post,
.widget p, .mg-widget p,
.sp-block-html-inner {
        line-height: var(--sp-line-h, 1.6);
}
.mg-blog-post-box h4.title,
.mg-blog-post-box h4.title a {
        /* v1.9: card titles follow the global TITLE line-height slider
         * (was tied to the bottom-row slideshow line-height). */
        line-height: var(--sp-title-lh, 1.25);
}

/* ---- 22.3 BRAND ROW COLUMNS (v1.9.8: simplified) ---------------------------
   v1.7-v1.9.7: the brand column grew to fill the row when the ad column was
   absent, and in logo-right mode the ad column wrapped onto its own line
   via flex tricks. v1.9.8: header.php already prints col-lg-12 (right) or
   col-lg-9 (left) and the ad / tags column sits in its own .sp-brand-ad
   row below; the grow rule stays for the LEFT layout with no ad. */
.sp-brand-col {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;   /* fills the row when the ad column is absent */
}
body.sp-logo-right .sp-brand-ad {
        margin-top: 2px;
        margin-bottom: 2px;
}
body.sp-logo-right .sp-brand-ad .mg-tpt-tag-area {
        padding: 0;
}

/* ---- 22.4 ONE RECTANGLE - v1.9 REWORK: screen-sized, settings ignored ---
   User spec: "it should ignore the settings below and resize based on
   screen into a rectangle". With alignment ON the center photo gets a
   16:10 aspect-ratio floor derived from ITS OWN column width (so the
   block grows on large screens and shrinks on small ones), the swiper
   chain underneath gets definite heights (the "center image error" /
   "not showing after publish" cases), the LEFT and RIGHT columns
   stretch to the exact same total height (center + bottom row) and the
   BOTTOM row closes the rectangle. The "Slideshow height" slider is
   IGNORED in this mode - it still applies when alignment is OFF and
   on mobile (< 992px). */
@media (min-width: 992px) {
        body.sp-slide-align .mg-fea-area .row.my-3 > .col-12.col-md-6 {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
        }
        body.sp-slide-align .homemain {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;    /* v1.9.1: FIRM - the center keeps its own
                                      screen-based size and never grows with
                                      the side columns (that growth is what
                                      made the photo "too big / off screen"). */
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                /* v1.9.2 CENTER COLLAPSE FIX: a flex item with
                 * aspect-ratio + auto width inside the column flex
                 * container computes its width from its (empty) content
                 * and collapses to 0x0 - the whole center slide then
                 * "breaks" and the rectangle dies. Real-browser verified
                 * with the full JS stack (jquery + swiper + custom.js):
                 * width auto = 0x0, width 100% = full column + correct
                 * 16:10 height. */
                width: 100%;
                /* screen-based rectangle: 16/10 of the column width... */
                aspect-ratio: 16 / 10;
                /* ...but v1.9.7: never SMALLER than the Slide height slider -
                 * 16:10 of a 540px column is only ~335px, which read as
                 * "center image gets shrunk when rectangle is selected".
                 * Height = max(16:10-of-width, slider), still capped by
                 * max-height below. The slider stays meaningful in BOTH
                 * modes (it was greyed out here before). */
                min-height: var(--sp-slide-h, 450px);
                height: auto;        /* respects aspect-ratio when it is taller */
                /* never taller than the viewport - the "goes off screen" cap */
                max-height: 82vh;
                overflow: hidden;
        }
        body.sp-slide-align .homemain .swiper-wrapper {
                -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                flex: 1 1 auto;
                height: 100%;
                min-height: 0;
        }
        body.sp-slide-align .homemain .swiper-slide {
                height: 100%;
                min-height: 100%;
        }
        body.sp-slide-align .homemain .mg-blog-post-3.lg {
                height: 100%;
                min-height: 0;
                background-size: cover;
                background-position: center;
        }
}
/* old browsers without aspect-ratio support keep the v1.8 fixed floor */
@supports not (aspect-ratio: 16 / 10) {
        body.sp-slide-align .homemain {
                min-height: var(--sp-slide-h, 450px);
        }
}
/* the bottom row keeps its natural height and closes the rectangle's
 * bottom edge together with the stretched LEFT / RIGHT columns */
body.sp-slide-align .sp-slide-bottom {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-top: 14px !important;
}

/* ---- 22.5 FOOTER CUSTOMIZATION ------------------------------------------
   Footer section: 1-4 widget blocks, footer logo + site name sizes,
   row order and the small logo inside the all-rights-reserved bar. */
footer.sp-footer.sp-footer-cols-2 .mg-footer-widget-area .row,
footer.sp-footer.sp-footer-cols-3 .mg-footer-widget-area .row,
footer.sp-footer.sp-footer-cols-4 .mg-footer-widget-area .row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
}
footer.sp-footer.sp-footer-cols-3 .mg-footer-widget-area .row {
        grid-template-columns: repeat(3, 1fr);
}
footer.sp-footer.sp-footer-cols-4 .mg-footer-widget-area .row {
        grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991px) {
        footer.sp-footer.sp-footer-cols-3 .mg-footer-widget-area .row,
        footer.sp-footer.sp-footer-cols-4 .mg-footer-widget-area .row {
                grid-template-columns: repeat(2, 1fr);
        }
}
@media (max-width: 575px) {
        footer.sp-footer.sp-footer-cols-2 .mg-footer-widget-area .row,
        footer.sp-footer.sp-footer-cols-3 .mg-footer-widget-area .row,
        footer.sp-footer.sp-footer-cols-4 .mg-footer-widget-area .row {
                grid-template-columns: 1fr;
        }
}
/* main row order options (Design Studio > Footer) */
footer.sp-footer.sp-fo-menu-first .sp-footer-brand { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
footer.sp-footer.sp-fo-menu-first .sp-footer-menu  { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
footer.sp-footer.sp-fo-socials-last .sp-footer-social { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
footer.sp-footer.sp-fo-socials-last .sp-footer-menu   { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
/* small site logo inside the copyright / all-rights-reserved bar */
.sp-copy-row.sp-copy-has-logo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 10px;
}
.sp-copy-logo {
        display: inline-block;
        line-height: 0;
}
.sp-copy-logo img {
        height: var(--sp-footer-rights-logo-h, 24px);
        width: auto;
        max-width: 160px;
}

/* ---- 22.6 BANNER AD SLOTS ------------------------------------------------
   Show / hide ad banners at: below the slideshow, bottom of the page
   BEFORE the You Missed section and AFTER it (Banner Advertisements
   section in the Customizer). Rendered by sportypress_render_banner_slot(). */
.sp-banner-slot {
        margin: var(--sp-section-gap, 10px) auto;
        text-align: center;
}
.sp-banner-slot .sp-banner-slot-inner {
        display: inline-block;
        max-width: 100%;
}
.sp-banner-slot img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
}
.sp-banner-slot a {
        display: inline-block;
}

/* ---- 22.7 SIDEBAR AD FILL ------------------------------------------------
   "Same length as the article": the sidebar stretches to match the content
   column and the leftover space is filled with 1, 2, 3... copies of the
   fill-ad block (js/sp-front.js clones the template as many times as the
   available room allows - never more than the Customizer maximum). */
.sp-fill-ad {
        margin-bottom: 12px;
        text-align: center;
}
.sp-fill-ad img {
        max-width: 100%;
        height: auto;
}
.sp-fill-ad:first-of-type {
        margin-top: 12px;
}

/* ---- 22.8 MISC SURFACE POLISH -------------------------------------------- */
/* .shd cards: the classic light border becomes the palette border so dark
   palettes do not show a bright #eee frame around near-black cards. */
.mg-blog-post-box.shd {
        border: 1px solid var(--sp-border, #eee);
}
/* v1.8: the classic "footer .mg-footer-copyright { padding: 25px 0 }" has
   higher specificity (0,1,1) than a bare class - the rights-bar height
   slider needs this (0,2,1) form to actually win. */
footer .mg-footer-copyright,
footer.sp-footer .mg-footer-copyright {
        padding: var(--sp-bar-copy, 7px) 0;
}

/* ======================================================================
 23. v1.9 LAYER - global TITLE line-height, header logo centering,
     ticker -> slideshow spacing polish
====================================================================== */

/* ---- 23.1 GLOBAL TITLE LINE-HEIGHT --------------------------------------
   One slider (Design Studio > Bars, Spacing & Text > "Line-height of
   TITLES across the whole website", --sp-title-lh) sets the rhythm of
   EVERY headline on the site: section headings, widget headings, card
   titles, You Missed, article headlines, archive titles. The slideshow
   areas keep their own per-area line-height controls - those selectors
   are more specific and win inside the slideshow block. */
.mg-sec-title h4,
.mg-sec-title h4 span.bg,
.mg-sec-title.st3 h4,
.mg-sec-title.st3 span.bg,
.mg-wid-title h6,
.mg-wid-title h6 span.bg,
.sp-block-heading h6,
.sp-block-heading h6 span.bg,
.missed-inner .small-list-post h4.title,
.missed-inner .small-list-post h4.title a,
.mg-posts-sec-post .mg-sec-top-post .title,
.mg-posts-sec-post .mg-sec-top-post .title a,
h1.entry-title, h2.entry-title, h1.page-title,
.entry-title a {
        line-height: var(--sp-title-lh, 1.25);
}

/* ---- 23.2 HEADER LOGO: dead-center against the title + subline ----------
   The brand row is a flex line; the logo cell centers itself on the
   exact middle of the (title + subtitle) block height, whatever the
   logo size slider says - and the logo link cell never stretches. */
.newses-brand-inline .site-logo {
        -ms-flex-item-align: center;
        -webkit-align-self: center;
        align-self: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
}
.newses-brand-inline .site-logo .custom-logo-link {
        -ms-flex-item-align: center;
        -webkit-align-self: center;
        align-self: center;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
}
body.sp-logo-right .newses-brand-inline {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
}

/* ---- 23.3 TICKER -> SLIDESHOW: the slider is the whole gap --------------
   Belt-and-suspenders for section 18.3: the first slideshow element
   (the container) starts flush under the ticker - combined with
   .sp-ticker-wrap's bottom margin the Section spacing slider equals
   the visible space between the breaking-news bar and the photos. */
.sp-ticker-wrap + .mg-fea-area .overlay .container.mg-padding {
        padding-top: 0;
}

/* ======================================================================
 24. v1.9.1 LAYER - SMART POSTS-PER-SECTION CLAMPS + rectangle helpers
====================================================================== */

/* ---- 24.1 "SHOW ONLY WHAT FITS" (same philosophy as the left column) -----
   The LEFT trending column never breaks: it has a fixed height with
   overflow hidden, so it only shows the posts that fit. The BOTTOM row
   and the RIGHT column used to try to show EVERY post - 7 bottom cards
   wrapped into 3 ragged rows and 7 right cards stretched the slideshow
   far past the screen. Now:
     BOTTOM row  = ONE clean row of exactly 3 cards, >= 992px and on
                   tablets alike (the col-lg-4 / col-md-4 classes in
                   hooks.php - v1.9.12: the rectangle's fixed bottom row).
     RIGHT column = whole-card fit by sp-front.js in BOTH modes
                   (v1.9.2 - classic mode used to stretch without any
                   cap); the stack is height-capped here (24.1b) and
                   these counts are the no-JS / first-paint floor.
   The user's "Number of posts" setting stays the category preference
   (the DOM pool is backfilled + capped in hooks.php). */

/* BOTTOM row: one row, always - the rectangle's fixed 3 cards */
@media (min-width: 992px) {
        .sp-slide-bottom > .col-lg-4:nth-child(n+4) { display: none; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
        .sp-slide-bottom > .col-md-4:nth-child(n+4) { display: none; }
}

/* RIGHT column fallback counts. v1.9.12: the DOM pool carries at most
   3 cards (hooks.php caps it) and the fit-rectangle layout is 2 CARDS
   ("just make fit 2 posts on the right column") - so the no-JS /
   first-paint floor is 2 cards at every desktop width; the JS refines
   to whole cards at pixel precision (AUTO: exactly 2; MANUAL: 2-3 as
   they fit). The html body prefix out-ranks the v1.7 display:flex rule
   (0,4,1) that would otherwise keep every card visible. */
@media (min-width: 992px) {
        html body .sp-slide-right [data-sp-fit-cards] > .col-md-12:nth-child(n+3) { display: none; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
        html body .sp-slide-right [data-sp-fit-cards] > .col-md-12:nth-child(n+3) { display: none; }
}

/* ---- 24.1b v1.9.2 RIGHT COLUMN CAP IN CLASSIC MODE -----------------------
   "Right column breaks trying to fit all posts on that category" was
   reported with alignment OFF: every picked post rendered at natural
   height, so 5-7 posts tripled the slideshow height. The column now
   obeys the LEFT column's fixed-height philosophy in classic mode too:
   the card stack is capped at the classic slideshow height (center
   slide height + the bottom row) and crops what does not fit; the JS
   hides WHOLE cards so nothing is ever cut mid-card when it runs. */
@media (min-width: 992px) {
        html body .sp-slide-right {
                overflow: hidden;
        }
        /* v1.9.10: [data-sp-height-set] guard - the JS now syncs the exact
         * rectangle height in MANUAL mode too (classic), and the cap must
         * not clip a column whose real budget exceeds this estimate
         * (same guard as 25.2). */
        html body .sp-slide-right:not([data-sp-height-set]) > .row[data-sp-fit-cards] {
                /* v1.9.7: the old fixed "+210px" budget ignored a taller
                 * bottom row (its thumb slider) and clipped the LAST visible
                 * card mid-tile ("tile on second post is broken"). The cap
                 * now derives from the same two sliders that build the
                 * column's real budget. */
                max-height: calc(var(--sp-slide-h, 450px) + var(--sp-slide-b-thumb-h, 120px) + 230px);
                overflow: hidden;
        }
}

/* ---- 24.2 RECTANGLE SYNC (sp-front.js sets the exact pixel heights) ------
   In align mode the CENTER column owns the rectangle height (16:10 of its
   width + the bottom row). The JS copies that height onto the LEFT and
   RIGHT columns so they can never grow the block, then fits each side
   column the SAME way: only as many WHOLE cards / items as fit at their
   natural (slider-driven) size stay visible - extras hide via
   [data-sp-hidden]. Without JS the capped counts above keep the layout
   sane.
   v1.9.8 CRITICAL FIX: the stack is a bootstrap .row (flex-direction: ROW
   by default). The v1.9.7 "flex: 1 1 0" cards therefore shared the row's
   WIDTH - every visible card sat SIDE BY SIDE, stretched to the full
   column height ("squished side by side trying to fit them all", "the
   tile card is stretched"). The stack is now a COLUMN: cards stack one on
   top of the other (2, maybe 3), keep their natural size, and the visible
   ones spread with space-between so the rectangle still closes at the
   bottom - exactly the LEFT column's v1.9.7 treatment. */
@media (min-width: 992px) {
        body.sp-slide-align .sp-slide-left,
        body.sp-slide-align .sp-slide-right {
                overflow: hidden;
        }
        body.sp-slide-align .sp-slide-right [data-sp-fit-cards] {
                -ms-flex: 1 1 0;
                flex: 1 1 0;            /* the stack fills the column height */
                min-height: 0;
                margin-left: 0;
                margin-right: 0;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;  /* v1.9.8: STACK, not side-by-side */
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                -ms-flex-pack: justify;
                -webkit-box-pack: justify;
                justify-content: space-between;
        }
        body.sp-slide-align .sp-slide-right [data-sp-fit-cards] > .col-md-12 {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;          /* v1.9.8: natural size (was 1 1 0:
                                            equal-split stretched the card) */
                min-height: 0;
                padding-left: 0;
                padding-right: 0;
        }
        body.sp-slide-align .sp-slide-right [data-sp-fit-cards] > .col-md-12[data-sp-hidden] {
                display: none !important; /* v1.9.11: hidden beats every count fallback */
        }
        body.sp-slide-align .sp-slide-right [data-sp-fit-cards] > .col-md-12 .mg-blog-post-box {
                /* v1.9.8: height:100% removed - the card keeps its natural
                 * height (thumb slider + title box); the stack's
                 * space-between handles the leftover. mb-4 is off here -
                 * the spread owns the gaps.
                 * v1.9.9: !important added - bootstrap's .mb-4 utility is
                 * also !important, so the old margin-bottom:0 lost the
                 * cascade and every card kept a phantom 24px margin: the
                 * JS whole-card fit measured slot = card + 24 and dropped
                 * to ONE visible card ("rectangle not fixed" - one card
                 * plus a hole) whenever 2 natural cards *almost* filled
                 * the column. */
                min-height: 0;
                margin-bottom: 0 !important;
        }
        body.sp-slide-align .sp-slide-right [data-sp-fit-cards] > .col-md-12 .mg-blog-thumb.lg {
                min-height: 60px;
        }
        /* LEFT column: the trending box never pushes the rectangle either */
        body.sp-slide-align .sp-slide-left .recentarea.wd-back {
                -ms-flex: 1 1 0;
                flex: 1 1 0;
                min-height: 0;
                overflow: hidden;
        }
        body.sp-slide-align .sp-slide-left .recentarea-slider {
                overflow: hidden;
        }
        /* v1.9.7: LEFT items keep their NATURAL size (flex-shrink off).
         * Before, the column crammed every item into the box - crushed
         * tiles or mid-card clipping ("left column forcing ALL posts into
         * the block"). Whole items that do not fit are now hidden cleanly
         * by sp-front.js ([data-sp-hidden]); the visible ones spread with
         * space-between so the rectangle still closes at the bottom. */
        body.sp-slide-align .sp-slide-left .recentarea-slider > .content {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        }
        body.sp-slide-align .sp-slide-left .recentarea-slider > .content[data-sp-hidden] {
                display: none !important; /* v1.9.11 */
        }
}

/* ---- 24.3 FOOTER ROW ORDER - all six permutations -------------------------
   v1.8 shipped three fixed orders; the footer row order control now offers
   every arrangement (brand | menu | socials). The classes land on
   footer.sp-footer (footer.php). */
footer.sp-footer.sp-fo-menu-social-brand .sp-footer-brand  { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
footer.sp-footer.sp-fo-menu-social-brand .sp-footer-menu   { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
footer.sp-footer.sp-fo-menu-social-brand .sp-footer-social { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
footer.sp-footer.sp-fo-social-brand-menu .sp-footer-brand  { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
footer.sp-footer.sp-fo-social-brand-menu .sp-footer-menu   { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
footer.sp-footer.sp-fo-social-brand-menu .sp-footer-social { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
footer.sp-footer.sp-fo-social-menu-brand .sp-footer-brand  { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
footer.sp-footer.sp-fo-social-menu-brand .sp-footer-menu   { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
footer.sp-footer.sp-fo-social-menu-brand .sp-footer-social { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }

/* ======================================================================
 25. v1.9.2 LAYER - rectangle hardening (no-JS safety nets),
     slideshow -> separator gap
====================================================================== */

/* ---- 25.1 SLIDESHOW -> SEPARATOR: no dead space -----------------------
   "There is a lot of space between the slideshow and the space divider -
   isn't there something holding space?" Three holders stacked up: the
   slideshow container's bottom padding (10px), bootstrap's .my-3 BOTTOM
   margin (16px !important - v1.9 only zeroed the TOP margin) and the
   separator wrap's own top padding. The divider now hugs the slideshow
   block; any extra breathing room comes from the Section spacing slider
   (--sp-section-gap) through .sp-slide-sep-wrap's top margin. */
.mg-fea-area .container.mg-padding > .row.my-3 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;   /* v1.9.2: the bottom too (was 16px) */
}
.mg-fea-area .mg-padding {
        padding-bottom: 0;             /* v1.9.2: was 10px */
}
.sp-slide-sep-wrap {
        padding-top: 0;                /* v1.9.2: was 6px */
        margin-top: var(--sp-section-gap, 10px);
        margin-bottom: 4px;
}

/* ---- 25.2 RECTANGLE WITHOUT JS: dynamic caps for the side columns ------
   v1.9.1 synced the LEFT / RIGHT column heights with JavaScript only.
   Before the script ran - or whenever it could not run at all - the LEFT
   column rendered ALL of its posts and pushed the block far below the
   screen. The side columns carry a max-height safety net. v1.9.7: the
   caps are no longer fixed pixel numbers (600 / 720) - those fought the
   JS sync (which sets the column height to the REAL center column
   height) whenever the Slide height or Bottom picture sliders were set
   above their defaults: max-height always beats the inline height, so
   the side columns were clipped SHORTER than the center column and the
   rectangle's bottom edge went unaligned ("bottom edge unaligned",
   reported with big slider values). The caps now derive from the same
   sliders + generous slack, so they contain only the runaway case.
   v1.9.9: sp-front.js marks each synced column with
   [data-sp-height-set] - on a synced column the exact pixel height is
   authoritative and the cap is SKIPPED (max-height would still beat the
   inline height and clip tall centers). The nets below now only guard
   the no-JS / pre-JS window. */
@media (min-width: 992px) and (max-width: 1199.98px) {
        body.sp-slide-align .sp-slide-left:not([data-sp-height-set]),
        body.sp-slide-align .sp-slide-right:not([data-sp-height-set]) {
                max-height: calc(var(--sp-slide-h, 450px) + var(--sp-slide-b-thumb-h, 120px) + 320px);
                overflow: hidden;
        }
}
@media (min-width: 1200px) {
        body.sp-slide-align .sp-slide-left:not([data-sp-height-set]),
        body.sp-slide-align .sp-slide-right:not([data-sp-height-set]) {
                max-height: calc(var(--sp-slide-h, 450px) + var(--sp-slide-b-thumb-h, 120px) + 400px);
                overflow: hidden;
        }
}

/* ---- 25.3 WHOLE-CARD EXCLUSION IN CLASSIC MODE ------------------------
   The [data-sp-hidden] marker (set by sp-front.js for right-column cards
   that do not fit) must hide the card in BOTH slideshow modes - v1.9.1
   only styled it while the rectangle alignment was ON. */
@media (min-width: 992px) {
        html body .sp-slide-right [data-sp-fit-cards] > .col-md-12[data-sp-hidden] {
                display: none !important; /* v1.9.11 */
        }
}

/* ======================================================================
 26. v1.9.3 LAYER - one color per category (palette-skins.css 10),
     preview "desktop lens", footer row blocks, left header box
====================================================================== */

/* ---- 26.1 LEFT COLUMN HEADER BOX: fills the column width ----------------
   "left column header box doesn't adjust to fit left column width" - the
   classic .mg-sec-title span.bg is an inline-block that hugs its text, so
   the colored Trending box stopped ~20px short of the column edge. The
   classic .mg-sec-title is itself a flex row (title left, filter buttons
   right) which shrinks the h4 to its content - in the slideshow LEFT
   column the title box becomes a plain block that spans the full column
   width (right column + You Missed keep the classic text-hugging box). */
.sp-slide-left .mg-sec-title {
        display: block;
        margin-bottom: 8px;
        padding-bottom: 0;
}
.sp-slide-left .mg-sec-title h4 {
        margin: 0;
        display: block;
        width: 100%;
}
.sp-slide-left .mg-sec-title h4 span.bg {
        display: block;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
}

/* ---- 26.2 FOOTER ROW BLOCKS (4 orderable slots) ---------------------------
   v1.9.3 replaces the six fixed "row order" permutations with FOUR
   dropdown-selected slots: Site info (brand) / Menu / Social icons /
   Search box / Image / Widget area / None. footer.php renders the chosen
   blocks in order (plus hidden templates of the others so the Customizer
   can preview any combination live); the row wraps gracefully on phones. */
.sp-footer-row {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 14px 18px;
}
.sp-fo-block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        min-width: 0;
}
.sp-fo-block-brand {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 260px;
        flex: 1 1 260px;
}
.sp-fo-block-menu {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 200px;
        flex: 1 1 200px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
}
.sp-fo-block-menu .sp-footer-menu {
        width: 100%;
}
.sp-fo-block-social {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
}
.sp-fo-block-search {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 250px;
        flex: 0 1 250px;
}
.sp-fo-block-search .sp-footer-search {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
}
.sp-fo-block-search .sp-footer-search .input-group {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
}
.sp-fo-block-search .sp-footer-search .form-control {
        min-width: 0;
        height: 34px;
        border: 0;
        border-radius: 4px 0 0 4px;
        background: rgba(255, 255, 255, .14);
        color: inherit;
        font-size: 13px;
        -webkit-box-shadow: none;
        box-shadow: none;
}
.sp-fo-block-search .sp-footer-search .form-control::-webkit-input-placeholder { color: rgba(255,255,255,.6); }
.sp-fo-block-search .sp-footer-search .form-control:-ms-input-placeholder { color: rgba(255,255,255,.6); }
.sp-fo-block-search .sp-footer-search .form-control::-ms-input-placeholder { color: rgba(255,255,255,.6); }
.sp-fo-block-search .sp-footer-search .form-control::placeholder { color: rgba(255,255,255,.6); }
.sp-fo-block-search .sp-footer-search button,
.sp-fo-block-search .sp-footer-search input[type="submit"] {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        height: 34px;
        margin: 0;
        border: 0;
        border-radius: 0 4px 4px 0;
        padding: 0 12px;
        background: var(--sp-accent, #c70909);
        color: var(--sp-on-accent, #fff);
        font-size: 13px;
        cursor: pointer;
}
.sp-fo-block-image {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
}
.sp-fo-block-image img {
        max-height: var(--sp-footer-logo-h, 44px);
        width: auto;
        max-width: 100%;
        border-radius: 4px;
}
.sp-fo-block-widget {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 260px;
        flex: 1 1 260px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        min-width: 0;
}
.sp-fo-block-widget .mg-widget {
        margin-bottom: 0;
        width: 100%;
}
.sp-fo-block[data-sp-fo="none"] {
        display: none;
}
/* hidden live-preview templates (never rendered on the published page
   unless chosen; the widget template only prints in the Customizer) */
.sp-fo-block.sp-fo-template {
        display: none;
}
@media (max-width: 767.98px) {
        .sp-footer-row > .sp-fo-block {
                -ms-flex: 1 1 100%;
                flex: 1 1 100%;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
        }
}

/* ---- 26.3 CUSTOMIZER PREVIEW "DESKTOP LENS" --------------------------------
   THE ROOT CAUSE behind half a dozen "preview does not update" reports:
   the Customizer preview iframe is the browser window MINUS the Customizer
   pane (~350-450px). On a 1280-1440px laptop that leaves 830-1090px -
   often BELOW the 992px bootstrap desktop breakpoint. Every min-width:992
   rule (the whole one-rectangle layer, the Sidebar Width slider, the
   desk-header with the Watch button, the navbar social icons) then
   evaluated for TABLET inside the preview while the published site
   rendered DESKTOP - so the logo stopped at the 54px tablet cap ("only
   updates half way, full size after publish"), the sidebar stayed at the
   bootstrap 25%, the Watch button toggle looked dead and the rectangle
   collapsed (center 0px wide via the tablet flex rule).

   THE LENS: when the Customizer previews the DESKTOP device (js/
   customizer-preview.js reads the pane's previewedDevice state and toggles
   body.sp-preview-desktop), the rules below re-apply the DESKTOP layout
   inside the narrow iframe so the preview finally matches what Publish
   will produce. Tablet / mobile device buttons keep the honest responsive
   rendering - the lens class is removed for them. */
/* logo + title: the tablet / phone caps do not apply while lensing */
body.sp-preview-desktop .newses-brand-inline .site-logo img,
body.sp-preview-desktop .newses-brand-inline .navbar-brand img,
body.sp-preview-desktop .sp-logo-edge img.custom-logo {
        height: var(--sp-logo-h, 64px);
        max-height: var(--sp-logo-h, 64px);
}
body.sp-preview-desktop .newses-brand-inline .site-title a,
body.sp-preview-desktop .newses-brand-inline .site-title,
body.sp-preview-desktop .site-branding-text .site-title a {
        font-size: var(--sp-title-size, 30px) !important;
}
body.sp-preview-desktop .newses-brand-inline .site-description {
        font-size: var(--sp-sub-size, 13px);
        margin-top: 3px;
}
/* sidebar width slider: desktop flex sizing at any iframe width */
body.sp-preview-desktop #content .row > aside.col-md-4,
body.sp-preview-desktop #content .row > aside.col-md-3,
body.sp-preview-desktop #content .row > aside.col-lg-4,
body.sp-preview-desktop #content .row > aside.col-lg-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 var(--sp-sidebar-w, 300px);
        flex: 0 0 var(--sp-sidebar-w, 300px);
        max-width: var(--sp-sidebar-w, 300px);
}
body.sp-preview-desktop #content .row > div.col-md-8,
body.sp-preview-desktop #content .row > div.col-lg-8,
body.sp-preview-desktop #content .row > div.col-lg-9 {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 0%;
        flex: 1 1 0%;
        width: auto;
        max-width: 100%;
}
/* Watch button (desk-header) + navbar social icons: visible while lensing */
html body.sp-preview-desktop .desk-header {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
}
html body.sp-preview-desktop .sp-navbar-social {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
}
/* the slideshow columns keep their desktop shape while lensing */
html body.sp-preview-desktop .sp-slide-left,
html body.sp-preview-desktop .sp-slide-right {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
}
html body.sp-preview-desktop .sp-slide-bottom {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-top: 14px !important;
}
/* v1.9.9: the bottom row keeps its DESKTOP shape while lensing. The lens
 * iframe's real width can sit in the 768-991 tablet band, so these
 * mirrors re-apply the >= 992px published shape at any lensed width.
 * v1.9.12: the published shape is the rectangle's FIXED 3-card row
 * (col-lg-4 = 3 x 1/3), 4th+ hidden. */
html body.sp-preview-desktop .sp-slide-bottom > .col-lg-4,
html body.sp-preview-desktop .sp-slide-bottom > .col-md-4 {
        /* display beats the tablet count rule (24.1) at real 768-991
         * lens widths; sizing = published >= 992 (3 x 1/3). */
        display: block;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333%;
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
}
html body.sp-preview-desktop .sp-slide-bottom > .col-lg-4:nth-child(n+4),
html body.sp-preview-desktop .sp-slide-bottom > .col-md-4:nth-child(n+4) {
        display: none !important;
}
/* one-rectangle core (22.4 essentials) inside the lens */
body.sp-preview-desktop.sp-slide-align .mg-fea-area .row.my-3 > .col-12.col-md-6 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
}
body.sp-preview-desktop.sp-slide-align .homemain {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        aspect-ratio: 16 / 10;
        /* v1.9.7: same floor as the published >= 992px rectangle */
        min-height: var(--sp-slide-h, 450px);
        height: auto;
        max-height: 82vh;
        overflow: hidden;
}
body.sp-preview-desktop.sp-slide-align .homemain .swiper-wrapper {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
}
body.sp-preview-desktop.sp-slide-align .homemain .swiper-slide {
        height: 100%;
        min-height: 100%;
}
body.sp-preview-desktop.sp-slide-align .homemain .mg-blog-post-3.lg {
        height: 100%;
        min-height: 0;
        background-size: cover;
        background-position: center;
}
/* right-column whole-card fit (24.2 v1.9.8 essentials) inside the lens */
body.sp-preview-desktop .sp-slide-right {
        overflow: hidden;
}
body.sp-preview-desktop .sp-slide-right:not([data-sp-height-set]) > .row[data-sp-fit-cards] {
        /* v1.9.10: same [data-sp-height-set] guard as 24.1b - the JS syncs
         * the exact height in manual (classic) lensing too, and the cap
         * must not clip a taller synced column. */
        max-height: calc(var(--sp-slide-h, 450px) + var(--sp-slide-b-thumb-h, 120px) + 230px);
        overflow: hidden;
}
body.sp-preview-desktop.sp-slide-align .sp-slide-left:not([data-sp-height-set]),
body.sp-preview-desktop.sp-slide-align .sp-slide-right:not([data-sp-height-set]) {
        /* v1.9.9: skipped while [data-sp-height-set] marks the JS-synced
         * exact height - the cap was clipping lensed columns whose real
         * center budget exceeded slide-h + bottom-thumb + 400. */
        max-height: calc(var(--sp-slide-h, 450px) + var(--sp-slide-b-thumb-h, 120px) + 400px);
        overflow: hidden;
}
body.sp-preview-desktop.sp-slide-align .sp-slide-right [data-sp-fit-cards] {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        min-height: 0;
        margin-left: 0;
        margin-right: 0;
        /* v1.9.8 lens mirror: STACKED column - the v1.9.7 lens showed the
         * cards side by side inside the preview exactly like the published
         * bug ("squished side by side"). */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
}
body.sp-preview-desktop.sp-slide-align .sp-slide-right [data-sp-fit-cards] > .col-md-12 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0;
        padding-left: 0;
        padding-right: 0;
        /* the real iframe width is < 992, so bootstrap would still apply
         * col-sm-6 (max-width 50%) to the cards - full-width stacked cards
         * inside the lens need the desktop column width instead. */
        width: 100%;
        max-width: 100%;
}
html body.sp-preview-desktop .sp-slide-right [data-sp-fit-cards] > .col-md-12[data-sp-hidden] {
        display: none !important; /* v1.9.11 */
}
body.sp-preview-desktop.sp-slide-align .sp-slide-right [data-sp-fit-cards] > .col-md-12 .mg-blog-post-box {
        min-height: 0;
        margin-bottom: 0 !important;  /* v1.9.9: same !important as 24.2 - bootstrap .mb-4 is !important */
}
body.sp-preview-desktop.sp-slide-align .sp-slide-right [data-sp-fit-cards] > .col-md-12 .mg-blog-thumb.lg {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        height: var(--sp-slide-r-thumb-h, 190px);
        min-height: 60px;
}
body.sp-preview-desktop.sp-slide-align .sp-slide-left .recentarea.wd-back {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
}
/* v1.9.7 lens mirrors of the >= 992px LEFT-column whole-item rules */
body.sp-preview-desktop.sp-slide-align .sp-slide-left .recentarea-slider > .content {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}
body.sp-preview-desktop.sp-slide-align .sp-slide-left .recentarea-slider > .content[data-sp-hidden] {
        display: none !important; /* v1.9.11 */
}

/* ---- 26.4b v1.9.8: THE PREVIEW MENU - real desktop navbar -------------------
   v1.9.7 force-show the collapse with display:block - but the narrow
   preview iframe (real width < 992) never applied bootstrap's desktop
   .navbar-nav { flex-direction: row }, so every menu item stacked
   VERTICALLY and the expanded list took over the whole header ("menu
   items expanded showing all elements taking over the entire header").
   The lens now mirrors the real >= 992px navbar exactly: the collapse is
   a flex row, the menu items lay out horizontally, and the mobile header
   (.m-header: burger + mobile search) stays hidden (that combination was
   the v1.9.7 "two search icons" fix - preserved). */
html body.sp-preview-desktop .m-header {
        display: none !important;
}
html body.sp-preview-desktop .navbar-expand-lg {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
}
html body.sp-preview-desktop .navbar-expand-lg .navbar-collapse {
        display: -ms-flexbox !important;
        display: -webkit-box !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
}
html body.sp-preview-desktop .navbar-expand-lg .navbar-nav {
        -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
}
html body.sp-preview-desktop .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
}
html body.sp-preview-desktop .navbar-expand-lg .navbar-toggler {
        display: none;
}

/* ======================================================================
 27. v1.9.4 LAYER - adaptive card text boxes, single-article sizes,
     You Missed author/date toggles, preview-lens logo edge
====================================================================== */

/* ---- 27.1 SLIDESHOW CARD TEXT BOXES GROW WITH THE TEXT --------------------
   "changing right tile size text doesn't adjust - tile size and tile
   inline height do the same thing". Root cause: the classic
   .mg-blog-post-box .small.minh hard-codes height:73px + overflow:hidden,
   so a bigger title was simply CLIPPED inside a never-changing box - the
   Title size and Title line-height sliders both looked dead. The box now
   starts at the classic 73px and GROWS with the title (the 2-line clamp
   from style.css still caps the text). This is what makes the RIGHT column
   and BOTTOM row Title size / line-height sliders visibly distinct:
   size = bigger letters, line-height = more air between the two lines. */
.mg-blog-post-box .small.minh {
        height: auto;
        min-height: 73px;
}

/* ---- 27.2 (REMOVED in v1.9.7) ---------------------------------------------
   The v1.9.4 "single article sizes" layer (headline / meta / avatar /
   featured picture CSS vars) was a misread requirement: the user did NOT
   want single-article size controls - they wanted the ARTICLE CARDS on
   category pages and the home grid to be controllable. The controls, the
   generated vars and these CSS rules are gone; single post pages render
   exactly like they did before v1.9.4 (the classic style.css values). */

/* ---- 27.3 YOU MISSED - own Show/Hide Author + Date (v1.9.4) ---------------
   The elements always render (hook-footer.php) and these body classes hide
   them, so the Customizer preview flips them in BOTH directions live. */
body.sp-missed-no-date .missed-inner .sp-missed-date {
        display: none !important;
}
body.sp-missed-no-author .missed-inner .sp-missed-author {
        display: none !important;
}

/* ---- 27.4 (REMOVED in v1.9.7) ---------------------------------------------
   The old preview-lens logo margin hack ("-5px") compensated for the
   v1.8 "+15px page-box compensation" that 21.4 below no longer applies.
   With 21.4 fixed the logo rides the page-box edge at every width - no
   lens-specific adjustment is needed anymore. */

/* ======================================================================
 28. v1.9.7 LAYER - article card controls (Category pages + Home grid),
     rectangle rework: whole-card fit, center min-height, dynamic caps
====================================================================== */

/* ---- 28.1 ARTICLE CARDS: picture height, title size, list image width ----
   The user asked for control over the ARTICLE CARDS on Category pages and
   the home page below the divider (NOT single articles): "control of those
   Articles card, tile size, picture size, show hide author, date etc".
   Scope: the .sp-article-cards marker class printed by content.php (LIST),
   content-grid.php (GRID) and search.php - category / archive / search
   pages and the home page below the divider load exactly these templates.
   The marker is DELIBERATE: the sidebar "Latest news" widget renders a
   structural clone of the list layout, so plain class selectors would
   have leaked the controls into it (setting conflict). The slideshow,
   the sidebar widgets and You Missed keep their own dedicated controls. */
.sp-article-cards .mg-posts-sec-post .mg-blog-thumb.md,
.sp-article-cards .mg-blog-post-box .mg-blog-thumb.md {
        height: var(--sp-cards-thumb-h, 300px);
}
.sp-article-cards .mg-posts-sec-post h4.title,
.sp-article-cards .mg-blog-post-box h4.title {
        font-size: var(--sp-cards-title-size, 22px);
}
@media (min-width: 768px) {
        /* LIST layout: how wide the picture column is (text takes the rest) */
        .sp-article-cards .mg-posts-sec-post > .col-12.col-md-6 {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 var(--sp-cards-list-img-w, 50%);
                flex: 0 0 var(--sp-cards-list-img-w, 50%);
                max-width: var(--sp-cards-list-img-w, 50%);
        }
}

/* ---- 28.2 ARTICLE CARDS: Show/Hide Author + Date ---------------------------
   Same always-render + body-class pattern as You Missed (27.3), so the
   Customizer preview flips both directions live. Scoped to the marker so
   single posts (their own global Date & Author setting) and widgets are
   untouched. */
body.sp-cards-no-date .sp-article-cards .mg-blog-meta .sp-card-date {
        display: none !important;
}
body.sp-cards-no-author .sp-article-cards .mg-blog-meta .sp-card-author {
        display: none !important;
}

/* ======================================================================
 29. v1.9.8 LAYER - logo at the BAND's true right edge, rectangle
     card stacking (side-by-side fix), preview menu row, You Missed tiles
====================================================================== */

/* ---- 29.1 LOGO AT THE TRUE RIGHT EDGE (the header band's edge) ------------
   Six rounds of "logo not going all the way to the right edge": the logo
   was inline inside the centered page box, so on wide screens (and inside
   the Customizer preview iframe) the CONTAINER MARGIN stayed visible
   between the logo and the band edge. header.php v1.9.8 renders the logo
   in .sp-logo-edge - a direct child of .sp-brand-row (the full-width
   wrapper inside the band) - so `right: 0` is the BAND's right edge: the
   true right edge of the header, at every screen width, boxed layout
   frame included, with no vw / scrollbar math. The site title stays at
   the page-box left edge; the "Distance from the Right Edge" slider
   (--sp-logo-right-inset) pulls the logo toward the center, 0 = flush. */
.sp-brand-row {
        position: relative;
}
.sp-logo-edge {
        position: absolute;
        top: 50%;
        right: var(--sp-logo-right-inset, 0px);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin: 0;
        padding: 0;
        line-height: 0;
        z-index: 5;
}
.sp-logo-edge .custom-logo-link,
.sp-logo-edge a {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        margin: 0;
        padding: 0;
}
.sp-logo-edge img.custom-logo {
        display: block;
        height: var(--sp-logo-h, 64px);
        max-height: var(--sp-logo-h, 64px);
        width: auto;
}
/* RTL: the far edge is the left one */
[dir="rtl"] .sp-logo-edge {
        right: auto;
        left: var(--sp-logo-right-inset, 0px);
}
/* the brand text keeps the page-box alignment; no inline logo exists in
   this mode, so nothing may push it around */
body.sp-logo-right .newses-brand-inline {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

/* ---- 29.2 YOU MISSED TILES FOLLOW THE ARTICLE-CARD TILE SIZE -------------
   "bottom row tile size slider doesn't make the tile banner shrink": the
   user's homepage bottom row is the YOU MISSED card row below the
   divider. Its .mg-blog-thumb.md pictures were hard-coded (300px classic
   / 250px tablet) and ignored the "Article Cards: Card picture height
   (tile size)" slider. The slider now drives them too - same var, same
   default, so nothing changes until the user touches the slider. */
.missed-inner .mg-blog-post-box .mg-blog-thumb.md {
        height: var(--sp-cards-thumb-h, 300px);
}

/* ---- 29.3 SLIDESHOW TILES: NO HEIGHT TRANSITION ----------------------------
   The classic .mg-blog-thumb { transition: all ease .4s } (style.css) also
   animated HEIGHT. The rectangle fit (sp-front.js) measures the natural
   card size right after a tile slider changes - mid-transition it read
   interpolated heights (e.g. 179.9px during a 190->80 change), so the
   whole-card fit was computed from values that exist in NO final layout:
   the card count came out wrong and the tile looked "stretched" while
   settling. Only the hover zoom (transform) keeps animating now - the
   sliders snap to their exact heights and the fit measures the truth.
   v1.9.10: the CENTER slide chain joins the rule. The center post is a
   .back-img too (same 400ms all-transition), so toggling Rectangle fit
   ON/OFF live (or dragging the slide-height slider) animated the post's
   height 0 -> 48 -> 520 over 400ms - the sync read the mid-animation
   value (homemain 0) and wrote a wrong rectangle height that only
   self-corrected seconds later ("the rectangle breaks when I turn the
   fit off"). Swiper's own slide animation is unaffected: it sets its
   transition-duration INLINE on the wrapper, which beats this sheet. */
.sp-slide-right .mg-blog-thumb,
.sp-slide-bottom .mg-blog-thumb,
.sp-slide-left .content .back-img,
.sp-slide-left .recentarea .back-img,
.sp-article-cards .mg-blog-thumb,
.missed-inner .mg-blog-thumb,
.mg-fea-area .mg-blog-post-3,
.mg-fea-area .homemain,
.mg-fea-area .homemain .swiper-wrapper,
.mg-fea-area .homemain .swiper-slide {
        -webkit-transition: -webkit-transform .3s ease;
        transition: transform .3s ease;
}

/* ======================================================================
 30. v1.9.11/12 LAYER - THE RECTANGLE IN BOTH MODES (AUTO / MANUAL)
     User spec (round 10): "just make fit 2 posts on the right column,
     3 posts on the bottom row, a center image and on left column
     7 posts. the entire group should look like a perfect rectangle.
     that would be the fit rectangle option - it automatically arranges
     and shrinks the post cards depending on the screen size to keep
     the rectangle shape of the whole group. And the customize control
     sliders should be OFF when rectangle fit is ON. When rectangle fit
     is OFF it should keep the rectangle shape of the group but I
     should be able to make the banner height fit better the text and
     the spacing inside the card."

     AUTO (fit ON):  the FIXED 7 / 1 / 2 / 3 layout arranges itself -
     sp-front.js scales the slider design bases by one factor,
     k = slide height / 450 (capped at 1 - AUTO only shrinks), with
     readable floors, then fits each column's FIXED count (whole cards
     and items shrink together when needed). The size sliders are
     LOCKED in the Customizer pane (sp-controls.js).
     MANUAL (fit OFF): the slider values apply as-is (banner heights,
     spacing, fonts) and the columns show as many WHOLE cards / items
     as fit at those sizes.
     The GEOMETRY below is identical in BOTH modes, so the rectangle
     is always maintained: vertical stacks, whole-card fit,
     space-between closing, JS-synced exact column heights, whole-card
     scale rescue - and [data-sp-hidden] always wins over the no-JS
     count fallbacks (v1.9.11: the n+6 lens fallback used to un-hide
     JS-hidden left items in MANUAL lens mode, packing the column and
     opening a hole under it - "no rectangle").
====================================================================== */

/* ---- 30.0 AUTO-MODE TITLE CLAMP (sp-front.js adds .sp-auto-fit) -----------
   While the rectangle engine owns the sizes (fit ON), the left-column
   item titles clamp at 3 lines instead of the base 4: in a narrow
   column a long headline wraps deep and floor-locks the item height,
   which used to push the rectangle's 7th item out of the budget. The
   whole-item scale in sp-front.js handles the rest (thumb, fonts,
   padding, margin). MANUAL mode (fit OFF) keeps the full 4-line clamp -
   the user sizes the column themselves. */
.mg-fea-area.sp-auto-fit .sp-slide-left .recentarea-slider .content .inner h5,
.mg-fea-area.sp-auto-fit .sp-slide-left .inner h5 {
        -webkit-line-clamp: 3;
        line-clamp: 3;
}

/* ---- 30.1 MANUAL MODE GETS THE SAME RECTANGLE GEOMETRY ---------------------
   These rules re-state the v1.9.8 align-mode geometry (21.2 / 24.2)
   WITHOUT the body.sp-slide-align scope. In align mode they duplicate
   the existing rules (same values, no visual change); in classic mode
   they give the columns the same stack + spread + whole-item machinery,
   so turning the fit OFF keeps the rectangle and only hands the sizes
   back to the sliders. !important beats bootstrap's .d-md-block /
   .mb-4 utilities (they are !important too - same pattern as 21.2). */
@media (min-width: 992px) {
        html body .mg-fea-area .row.my-3 > [class*="col-"] {
                display: -webkit-box !important;
                display: -ms-flexbox !important;
                display: flex !important;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column !important;
        }
        html body .sp-slide-left,
        html body .sp-slide-right {
                overflow: hidden;
        }
        /* RIGHT column: the card stack fills the synced column height,
         * stacks ONE CARD PER ROW (never side by side), keeps natural
         * sizes and spreads the visible cards with space-between so the
         * rectangle closes at the bottom edge. */
        html body .sp-slide-right > .row[data-sp-fit-cards] {
                -ms-flex: 1 1 0;
                flex: 1 1 0;
                min-height: 0;
                margin-left: 0;
                margin-right: 0;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                overflow: hidden;
        }
        html body .sp-slide-right > .row[data-sp-fit-cards] > .col-md-12 {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;
                min-height: 0;
                padding-left: 0;
                padding-right: 0;
                width: 100%;
                max-width: 100%;
        }
        html body .sp-slide-right > .row[data-sp-fit-cards] > .col-md-12[data-sp-hidden] {
                /* v1.9.11: !important - the no-JS count fallbacks below must
                 * never bring a JS-hidden whole card back into the stack
                 * (same class of bug as the left-column n+6 lens rule). */
                display: none !important;
        }
        html body .sp-slide-right > .row[data-sp-fit-cards] > .col-md-12 .mg-blog-post-box {
                /* the spread owns the gaps - bootstrap's .mb-4 (24px,
                 * !important) must not fight the whole-card fit's slot
                 * measurement (v1.9.9 phantom-margin lesson). */
                min-height: 0;
                margin-bottom: 0 !important;
        }
        /* LEFT column: the trending box and its item stack fill the synced
         * height; items keep their natural size and spread with
         * space-between (whole items that do not fit hide via
         * [data-sp-hidden] - MORE show when the rectangle is taller). */
        html body .sp-slide-left .recentarea.wd-back {
                -ms-flex: 1 1 0;
                flex: 1 1 0;
                min-height: 0;
                overflow: hidden;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
        }
        html body .sp-slide-left .recentarea-slider {
                /* flex-basis auto rides on the classic fixed heights
                 * (578px) but grows / shrinks to the synced column. */
                -ms-flex: 1 1 auto;
                flex: 1 1 auto;
                min-height: 0;
                overflow: hidden;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
        }
        html body .sp-slide-left .recentarea-slider > .content {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        }
        html body .sp-slide-left .recentarea-slider > .content[data-sp-hidden] {
                /* v1.9.11: !important - see the right-column twin above. */
                display: none !important;
        }
        /* v1.9.10: no-JS / pre-JS desktop fallback count for the bigger
         * item pool (the DOM now prints up to 9 items so the column can
         * FILL). Whole-item hiding only - never a mid-item clip. Once the
         * JS syncs the column ([data-sp-height-set]) this steps aside and
         * the exact fit decides. */
        html body .sp-slide-left:not([data-sp-height-set]) .recentarea-slider > .content:nth-child(n+7) {
                display: none;
        }
}

/* v1.9.10: tablets (768-991, the JS never runs there): the stack is the
 * fixed 493px from style.css = 5 whole items - hide the rest whole. */
@media (min-width: 768px) and (max-width: 991.98px) {
        html body .sp-slide-left .recentarea-slider > .content:nth-child(n+6) {
                display: none;
        }
}

/* ---- 30.2 LENS MIRRORS FOR MANUAL MODE -------------------------------------
   The desktop lens (body.sp-preview-desktop) fakes a >= 992px layout
   inside a physically narrow iframe, so 30.1's media query never fires
   there. In ALIGN lensing the 26.4 mirrors already carry the geometry;
   MANUAL (classic) lensing now gets its own mirrors so the preview
   shows the same maintained rectangle as a real desktop. */
body.sp-preview-desktop .sp-slide-right > .row[data-sp-fit-cards] {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        min-height: 0;
        margin-left: 0;
        margin-right: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        overflow: hidden;
}
body.sp-preview-desktop .sp-slide-right > .row[data-sp-fit-cards] > .col-md-12 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        min-height: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
}
html body.sp-preview-desktop .sp-slide-right > .row[data-sp-fit-cards] > .col-md-12[data-sp-hidden] {
        /* v1.9.11: !important - hidden is hidden, whatever count fallback
         * says (the left-column n+6 lesson: same specificity loses to the
         * LATER rule in the file). */
        display: none !important;
}
body.sp-preview-desktop .sp-slide-right > .row[data-sp-fit-cards] > .col-md-12 .mg-blog-post-box {
        min-height: 0;
        margin-bottom: 0 !important;
}
body.sp-preview-desktop .sp-slide-left .recentarea.wd-back {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
}
body.sp-preview-desktop .sp-slide-left .recentarea-slider {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
}
body.sp-preview-desktop .sp-slide-left .recentarea-slider > .content {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}
body.sp-preview-desktop .sp-slide-left .recentarea-slider > .content[data-sp-hidden] {
        /* v1.9.11: !important - without it the n+6 lens fallback below
         * (same specificity, LATER in the file) turned the JS-hidden
         * items back to display:block inside the MANUAL lens: they
         * re-entered the flex flow, the space-between spread died, the
         * visible items packed at the top and a hole opened under the
         * left column ("no rectangle"). */
        display: none !important;
}
/* v1.9.11: the lens re-applies the DESKTOP shape at any physical width -
 * the 30.1 tablet fallback count (n+6, matches the iframe's real 768-991
 * width) must not thin the lensed stack (same pattern as 26.4's bottom
 * row). :not([data-sp-hidden]) keeps this un-hide rule away from the
 * JS-hidden whole items - it used to tie with the hidden rule on
 * specificity and win by file order, packing the MANUAL-mode left column
 * and opening a hole under it. */
html body.sp-preview-desktop .sp-slide-left .recentarea-slider > .content:nth-child(n+6):not([data-sp-hidden]) {
        display: block;
}

/* ======================================================================
 31. v1.9.13 LAYER - THE BANNER FITS THE TEXT, THE PICTURE TAKES THE REST
     User spec (round 11): "the posts card banner it shows 2 lines of
     text but there is to much room, it could fit 3 or 4 lines. can you
     shrink it to just fit 2 lines? The center image, bottom row and
     right column they all should have the banner to fit the Category
     labels and 2 lines of text, the rest it should be taken by the image
     above each post card. ... too much empty white space on the bottom
     row and too much empty space that could be filled up with image
     posts, there is too much empty space between the two posts on the
     right. keep all text in a readable size."

     THE CARD MODEL (right column + bottom row, BOTH fit modes):
       [ picture  ]  flex-fill  - absorbs EVERY size change, min 60px
       [ banner   ]  fits the category label + exactly 2 title lines

     Root causes this layer fixes (all reproduced in a real browser on
     the v1.9.12 code):
       1. THE BANNER WHITE SPACE: the v1.7 rule (14: "equal-height cards
          inside grid rows") gives article.small flex:1 1 auto - the text
          strip GREW to fill whatever the card stretched to. In the
          bottom row the stretch came from (a) the tallest sibling card
          and (b) a phantom 12px card margin (19.x) that inflated every
          col via bootstrap's align-items:stretch -> the strip showed
          2 lines of text inside a box with room for 3-4 lines.
       2. THE RIGHT-COLUMN SPREAD HOLE: the two cards kept their natural
          size (picture slider + strip) and the leftover column height
          became a space-between GAP between them (122px at the default
          1440 layout) - "too much empty space between the two posts on
          the right".

     The fix inverts the flex roles: the PICTURE becomes the flex-grow
     element and the banner becomes flex:0 0 auto with the title box
     reserving EXACTLY two lines (min-height: 2em x line-height), so the
     three bottom strips and the two right strips align across cards
     with zero dead space, and every freed or needed pixel is traded
     with the picture - the text NEVER shrinks or stretches ("keep all
     text in a readable size"). The right column's two cards now SPLIT
     the column equally (flex:1 1 0) with a tight 14px gap - the stack
     never spreads again.
     New Customizer vars (both locked while Rectangle fit is ON):
       --sp-slide-r-banner-min  (right "Banner height (text strip)")
       --sp-slide-b-banner-min  (bottom "Banner height (text strip)")
     They set a MINIMUM strip height for users who want extra text room;
     min() caps them so the picture always keeps at least ~66px.
====================================================================== */

/* ---- 31.1 THE TEXT STRIP: category label + exactly 2 title lines -------
   Applies at every width inside the slideshow (the fill chain only
   matters where the cards are flex-stretched, but the 2-line title
   reservation is correct everywhere). Higher specificity than the v1.7
   grow rule (14) and the v1.9.4 minh box (27.1). The title box always
   reserves exactly TWO lines - a 1-line headline keeps the second
   line's room so all the strips in the row / stack line up perfectly
   (no ragged picture / strip boundaries across cards). */
html body .mg-fea-area .sp-slide-right article h4.title {
        min-height: calc(2em * var(--sp-slide-r-lh, 1.3));
}
html body .mg-fea-area .sp-slide-bottom article h4.title {
        min-height: calc(2em * var(--sp-slide-b-lh, 1.3));
}

/* ---- 31.2 PUBLISHED >= 992px: the fill model (both fit modes) ---------- */
@media (min-width: 992px) {

        /* BOTTOM ROW: the picture keeps the slider height as its BASE
         * and GROWS into the sibling stretch (tallest card in the row);
         * the strip below it never grows, never pads. The v1.9 "card
         * margin-bottom: 12px" phantom (it inflated every card through
         * bootstrap's equal-height stretch) is gone inside the
         * slideshow. */
        html body .mg-fea-area .sp-slide-bottom > [class*="col-"] > .mg-blog-post-box {
                margin-bottom: 0;
                height: 100%;
        }
        html body .mg-fea-area .sp-slide-bottom .mg-blog-post-box .mg-blog-thumb.sm {
                -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                flex: 1 1 auto;             /* takes the stretch */
                height: var(--sp-slide-b-thumb-h, 120px); /* slider = base */
                min-height: 60px;           /* readable picture floor */
        }
        html body .mg-fea-area .sp-slide-bottom > [class*="col-"] > .mg-blog-post-box article.small {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;             /* was 1 1 auto (v1.7) - the
                                              strip NEVER grows again */
                height: auto;
                /* the optional manual strip minimum (new v1.9.13 control),
                 * capped so the picture above always keeps ~66px */
                min-height: min(var(--sp-slide-b-banner-min, 0px), calc(100% - 66px));
        }

        /* RIGHT COLUMN: the two cards SPLIT the synced column height
         * equally (flex:1 1 0) with one tight 14px gap - the v1.9.8
         * space-between spread (the 122px hole) is gone. Inside each
         * card the picture fills everything the strip does not need. */
        html body .mg-fea-area .sp-slide-right [data-sp-fit-cards] {
                -ms-flex: 1 1 0;
                flex: 1 1 0;
                min-height: 0;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start;   /* was space-between - the
                                                 cards fill, they never
                                                 spread */
                row-gap: 14px;                  /* the one tight gap between
                                                 the two cards (matches the
                                                 14px under the center) */
                overflow: hidden;
        }
        html body .mg-fea-area .sp-slide-right [data-sp-fit-cards] > .col-md-12 {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex: 1 1 0;
                flex: 1 1 0;                 /* equal halves of the column */
                min-height: 0;
                padding-left: 0;
                padding-right: 0;
                width: 100%;
                max-width: 100%;
        }
        html body .mg-fea-area .sp-slide-right [data-sp-fit-cards] > .col-md-12 .mg-blog-post-box {
                height: 100%;
                min-height: 0;
                margin-bottom: 0 !important;  /* bootstrap .mb-4 fight (24.2) */
        }
        html body .mg-fea-area .sp-slide-right [data-sp-fit-cards] > .col-md-12 .mg-blog-post-box .mg-blog-thumb.lg {
                -webkit-box-flex: 1;
                -ms-flex: 1 1 0;
                flex: 1 1 0;                 /* THE PICTURE TAKES THE REST */
                height: auto;                /* was the r-thumb slider - the
                                              picture is now computed from
                                              the rectangle itself. The deep
                                              selector out-ranks the v1.9.8
                                              align + lens rules that still
                                              pin height: var(--sp-slide-r-thumb-h) */
                min-height: 60px;
                background-size: cover;
                background-position: center;
        }
        html body .mg-fea-area .sp-slide-right [data-sp-fit-cards] > .col-md-12 .mg-blog-post-box article.small {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;             /* the strip never grows */
                height: auto;
                min-height: min(var(--sp-slide-r-banner-min, 0px), calc(100% - 66px));
        }
}

/* ---- 31.3 LENS MIRRORS (the Customizer desktop preview) -----------------
   Same fill model while lensing - the lens iframe's real width sits
   below 992, so 31.2's media query never fires there without these. */
html body.sp-preview-desktop .mg-fea-area .sp-slide-bottom > [class*="col-"] > .mg-blog-post-box {
        margin-bottom: 0;
        height: 100%;
}
html body.sp-preview-desktop .mg-fea-area .sp-slide-bottom .mg-blog-post-box .mg-blog-thumb.sm {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        height: var(--sp-slide-b-thumb-h, 120px);
        min-height: 60px;
}
html body.sp-preview-desktop .mg-fea-area .sp-slide-bottom > [class*="col-"] > .mg-blog-post-box article.small {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        height: auto;
        min-height: min(var(--sp-slide-b-banner-min, 0px), calc(100% - 66px));
}
html body.sp-preview-desktop .mg-fea-area .sp-slide-right [data-sp-fit-cards] {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        min-height: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        row-gap: 14px;
        overflow: hidden;
}
html body.sp-preview-desktop .mg-fea-area .sp-slide-right [data-sp-fit-cards] > .col-md-12 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        min-height: 0;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
}
html body.sp-preview-desktop .mg-fea-area .sp-slide-right [data-sp-fit-cards] > .col-md-12 .mg-blog-post-box {
        height: 100%;
        min-height: 0;
        margin-bottom: 0 !important;
}
/* the deep selector matters here: the v1.9.8 lens-ALIGN thumb rule
 * (body.sp-preview-desktop.sp-slide-align ... .mg-blog-thumb.lg,
 * specificity (0,7,1)) still pins height: var(--sp-slide-r-thumb-h) -
 * this (0,7,2) rule must out-rank it or the picture stops filling the
 * moment the Customizer previews the AUTO mode (found by the v1.9.13
 * real-browser suite: thumb stuck at 190px, 48px dead space per card). */
html body.sp-preview-desktop .mg-fea-area .sp-slide-right [data-sp-fit-cards] > .col-md-12 .mg-blog-post-box .mg-blog-thumb.lg {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        height: auto;
        min-height: 60px;
        background-size: cover;
        background-position: center;
}
html body.sp-preview-desktop .mg-fea-area .sp-slide-right [data-sp-fit-cards] > .col-md-12 .mg-blog-post-box article.small {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        height: auto;
        min-height: min(var(--sp-slide-r-banner-min, 0px), calc(100% - 66px));
}


/* ======================================================================
 32. v1.9.14 LAYER - ONE ALIGNED BOTTOM EDGE + THE CENTER IN MANUAL MODE
     User spec (round 12): "Bottom row still has extra white space at
     the bottom of the card and the same on the right column. Is it
     because they have round corners? the left column doesn't have
     round corners, is it that the reason the bottom edge is never
     aligned. Please make either all no rounded edges or all rounded
     edges, I want the bottom edge line to be aligned. also on when the
     fir rectangle is off, the center image is not showed."

     ROOT CAUSES (both reproduced in a real browser with the REAL JS
     stack - jquery + swiper + custom.js + sp-front.js; jquery had
     silently 404'd in every earlier test harness, so custom.js and
     Swiper never actually ran there and the width collapse below went
     unseen):
       1. CENTER COLLAPSE IN MANUAL MODE: the center swiper's ENTIRE
          geometry (the v1.9.3 width:100% + margin:0 collapse fix, the
          >= 992 flex chain, aspect-ratio, min/max height, the
          wrapper / slide / post height chain) was scoped to
          body.sp-slide-align - i.e. RECTANGLE FIT ON ONLY. With the
          fit OFF, the v1.9.11+ manual rectangle still turns the center
          column into a flex column (30.1), and a .swiper-container
          flex item with margin-left/right:auto sizes to its EMPTY
          content: measured 480px tall but 0px WIDE at the default
          1440 layout - the center image was a zero-width sliver,
          i.e. "not showed".
       2. THE BOTTOM EDGE NEVER ALIGNED: the base .recentarea carries
          margin-bottom: 30px (style.css) - the LEFT column's white box
          (and its last item's dashed rule) stopped exactly 30px ABOVE
          the bottom edge line that the right column's cards, the
          bottom row and the center column all close (measured: left
          box 702 vs the common line 732). The corners were ALSO
          mixed: right / bottom cards 10px rounded, the left box and
          the center square - "is it because they have round corners?"
     THE FIX:
       32.1  the center gets exactly the same geometry in MANUAL mode
             as in AUTO (published >= 992 + lens twin) - the center
             image is visible in BOTH fit positions;
       32.2  the left box's 30px phantom margin is gone inside the
             slideshow - its bottom edge lands ON the common line;
       32.3  ONE corner treatment inside the slideshow group: every
             surface is SQUARE - the group reads as ONE strict
             rectangle with a crisp, continuous bottom edge line;
       32.4  the strips end snug: the title's classic 10px bottom
             margin is gone inside the slideshow and the strip's
             bottom padding is trimmed to (slider - 6px, 2px floor) -
             the category label + 2 title lines sit tight above the
             card edge, no extra white band under the text.
====================================================================== */

/* ---- 32.1 THE CENTER IMAGE IN MANUAL MODE --------------------------------
   The same center geometry the align mode has had since v1.9.8: the
   swiper keeps a real width (the v1.9.3 collapse fix - a flex item
   with auto margins and no width computes 0), never grows with the
   side columns (flex 0 0 auto), sizes itself 16:10 but never smaller
   than the Slide height slider and never taller than 82vh, and the
   wrapper / slide / post chain fills it. In align mode these rules
   duplicate 21.x with identical values (no visual change); in manual
   mode they are what makes the center image SHOW. The bottom row
   closes the column with the same tight 14px gap in both modes. */
@media (min-width: 992px) {
        html body .mg-fea-area .homemain {
                width: 100%;
                margin-left: 0;
                margin-right: 0;
                -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                aspect-ratio: 16 / 10;
                min-height: var(--sp-slide-h, 450px);
                height: auto;
                max-height: 82vh;
                overflow: hidden;
        }
        html body .mg-fea-area .homemain .swiper-wrapper {
                -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                flex: 1 1 auto;
                height: 100%;
                min-height: 0;
        }
        html body .mg-fea-area .homemain .swiper-slide {
                height: 100%;
                min-height: 100%;
        }
        html body .mg-fea-area .homemain .mg-blog-post-3.lg {
                height: 100%;
                min-height: 0;
                background-size: cover;
                background-position: center;
        }
        /* the bottom row closes the center column with the same tight
         * 14px gap in MANUAL mode (align twin: 21.x, lens twin: 26.4) */
        html body .mg-fea-area .sp-slide-bottom {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;
                margin-top: 14px !important;
        }
}
/* lens twin - the desktop lens iframe can be physically narrower than
 * 992px, so the media block above never fires there without this.
 * Same values as the align lens rules (3542+): in AUTO lensing they
 * duplicate, in MANUAL lensing they carry the whole center. */
html body.sp-preview-desktop .mg-fea-area .homemain {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        aspect-ratio: 16 / 10;
        min-height: var(--sp-slide-h, 450px);
        height: auto;
        max-height: 82vh;
        overflow: hidden;
}
html body.sp-preview-desktop .mg-fea-area .homemain .swiper-wrapper {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
}
html body.sp-preview-desktop .mg-fea-area .homemain .swiper-slide {
        height: 100%;
        min-height: 100%;
}
html body.sp-preview-desktop .mg-fea-area .homemain .mg-blog-post-3.lg {
        height: 100%;
        min-height: 0;
        background-size: cover;
        background-position: center;
}

/* ---- 32.2 THE LEFT BOX REACHES THE BOTTOM LINE ----------------------------
   The base .recentarea carries margin-bottom: 30px (style.css) - a
   classic-layout leftover. Inside the rectangle it meant the left
   column's white box stopped 30px ABOVE the bottom edge line the right
   column and the bottom row close (measured: box 702 vs line 732 at
   the default 1440 layout). Inside the slideshow the box bottom IS
   the rectangle's bottom-left corner - the margin is gone in BOTH fit
   modes, published >= 992 and while lensing. */
@media (min-width: 992px) {
        html body .mg-fea-area .sp-slide-left .recentarea {
                margin-bottom: 0;
        }
}
html body.sp-preview-desktop .mg-fea-area .sp-slide-left .recentarea {
        margin-bottom: 0;
}

/* ---- 32.3 ONE CORNER TREATMENT: SQUARE ------------------------------------
   The user: "make either all no rounded edges or all rounded edges -
   I want the bottom edge line to be aligned." The rectangle group gets
   ONE treatment: SQUARE. The right / bottom cards lose their 10px
   radius, the left column's items and thumbnails lose their 8px, the
   center swiper and its post are square already (made explicit), and
   the little category chips join in - no half-rounded group. Every
   surface of the group now meets the shared bottom edge at a crisp
   90-degree corner, so the whole block reads as ONE strict rectangle.
   Rounded corners stay everywhere OUTSIDE the slideshow (article
   cards, category pages, widgets...). */
html body .mg-fea-area .sp-slide-left .recentarea,
html body .mg-fea-area .sp-slide-left .recentarea .content,
html body .mg-fea-area .sp-slide-left .recentarea .back-img,
html body .mg-fea-area .sp-slide-right .mg-blog-post-box,
html body .mg-fea-area .sp-slide-right .mg-blog-post-box .mg-blog-thumb,
html body .mg-fea-area .sp-slide-bottom .mg-blog-post-box,
html body .mg-fea-area .sp-slide-bottom .mg-blog-post-box .mg-blog-thumb,
html body .mg-fea-area .homemain,
html body .mg-fea-area .homemain .mg-blog-post-3,
html body .mg-fea-area .sp-item-cat a,
html body .mg-fea-area .newses-slide-cat a {
        border-radius: 0;
}

/* ---- 32.4 SNUG STRIPS (no white band under the text) ----------------------
   Round 11 made the strips fit the category label + exactly 2 title
   lines - but the classic h4 margin (10px bottom) plus the strip's
   12px bottom padding still left a ~22px white band under the last
   text line ("extra white space at the bottom of the card"). Inside
   the slideshow the title margin-bottom is gone and the bottom
   padding tracks the section spacing slider minus 6px (2px floor):
   the text ends snug against the card edge, the picture above takes
   the freed pixels, and the slider still adds air when raised. */
html body .mg-fea-area .sp-slide-right article h4.title,
html body .mg-fea-area .sp-slide-bottom article h4.title {
        margin-bottom: 0;
}
html body .mg-fea-area .sp-slide-right .mg-blog-post-box article.small {
        padding: var(--sp-slide-r-pad, 10px) 12px max(2px, calc(var(--sp-slide-r-pad, 10px) - 6px));
}
html body .mg-fea-area .sp-slide-bottom .mg-blog-post-box article.small {
        padding: var(--sp-slide-b-pad, 10px) 12px max(2px, calc(var(--sp-slide-b-pad, 10px) - 6px));
}