/*
 * The CSR Universe — UI system (final layer)
 *
 * Loaded after every other site stylesheet (see inc/header.php). The older layers
 * (style.css → homepage-final.css → nav-final.css → editorial-ecosystem.css) each
 * redefine the same components with !important, so this file is the single place
 * where the shared tokens — colour, type, spacing, radius, containers — are set
 * and applied to the shared components: header, cards, buttons, article page,
 * listing pages, image fallbacks and empty rails.
 *
 * Presentation only. No markup, route or script depends on anything here.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    --ui-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    --ui-bg: #ffffff;
    --ui-surface: #f6f7f9;
    --ui-line: #e5e7eb;
    --ui-line-strong: #d1d5db;
    --ui-ink: #0f1419;
    --ui-ink-2: #374151;
    --ui-muted: #6b7280;
    --ui-brand: #1f7a3a;
    --ui-brand-dark: #17602d;
    --ui-brand-pale: #ecf6ef;

    --ui-s1: 4px;
    --ui-s2: 8px;
    --ui-s3: 12px;
    --ui-s4: 16px;
    --ui-s5: 24px;
    --ui-s6: 32px;
    --ui-s7: 48px;

    --ui-radius: 8px;
    --ui-radius-sm: 6px;
    --ui-shadow-hover: 0 8px 24px rgba(15, 23, 42, .08);
    --ui-ease: 180ms ease;

    --ui-container: 1600px;
    --ui-gutter: 24px;
    --ui-header-h: 60px;

    /* Re-point the older layers' tokens at this system. */
    --csru-paper: var(--ui-bg);
    --csru-canvas: var(--ui-bg);
    --csru-ink: var(--ui-ink);
    --csru-ink-soft: var(--ui-ink-2);
    --csru-muted: var(--ui-muted);
    --csru-brand: var(--ui-brand);
    --csru-brand-dark: var(--ui-brand-dark);
    --csru-line: var(--ui-line);
    --csru-line-strong: var(--ui-line-strong);
    --csru-serif: var(--ui-font);
    --csru-sans: var(--ui-font);
    --csru-radius-sm: var(--ui-radius);
    --csru-radius-md: var(--ui-radius);
    --csru-radius-lg: var(--ui-radius);
    --csru-shadow-sm: none;
    --csru-container: var(--ui-container);
}

@media (max-width: 767px) {
    :root {
        --ui-gutter: 16px;
        --ui-header-h: 56px;
    }
}

/* ==========================================================================
   2. Base: white page, one type family
   ========================================================================== */

html,
body,
body.bg-white,
.csru-newsroom,
.csru-news-content,
.main-list,
.csru-article-detail-page {
    background-color: var(--ui-bg) !important;
}

body {
    color: var(--ui-ink);
    font-family: var(--ui-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body button,
body input,
body select,
body textarea {
    font-family: var(--ui-font);
}

/*
 * Headings: one family everywhere. The :not(#…) pair lifts specificity above the
 * page-level heading rules that hard-code Cormorant / Oswald / PT Serif with
 * !important, without having to chase each of them.
 */
body :is(h1, h2, h3, h4, h5, h6, .h1heading):not(#ui-a):not(#ui-b) {
    font-family: var(--ui-font) !important;
    font-style: normal;
    letter-spacing: -0.012em;
}

/* Keyboard focus that is visible on every component. */
body :focus-visible {
    outline: 2px solid var(--ui-brand) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.csru-btn,
.csru-subscribe-trigger,
.headersticky .login-btn a.login,
.live-promo-btn,
a.sica-header-btn {
    font-family: var(--ui-font) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: background-color var(--ui-ease), border-color var(--ui-ease), color var(--ui-ease), box-shadow var(--ui-ease), transform var(--ui-ease) !important;
}

body .csru-home .csru-btn {
    min-height: 40px;
    padding: 0 18px !important;
    border-radius: var(--ui-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

body .csru-home .csru-btn-sm {
    min-height: 34px;
    padding: 0 14px !important;
    font-size: 13px !important;
}

/* ==========================================================================
   4. Header
   ========================================================================== */

/* 4a. Top subscribe strip — neutral, slim, collapses on scroll. */
.headersticky #subscribe.header-sub-container {
    align-items: center;
    justify-content: center;
    gap: var(--ui-s3);
    min-height: 0 !important;
    max-height: 48px;
    padding: 6px var(--ui-gutter) !important;
    overflow: hidden !important;
    background: var(--ui-surface) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    color: var(--ui-ink-2) !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    transition: max-height var(--ui-ease), padding var(--ui-ease), opacity var(--ui-ease), border-color var(--ui-ease);
}

.headersticky #subscribe .subscribe-scroller,
.headersticky #subscribe .subscribe-scroller span {
    color: var(--ui-ink-2) !important;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.headersticky #subscribe .header-sub-btn a.csru-subscribe-trigger {
    display: inline-flex !important;
    align-items: center;
    height: 28px;
    padding: 0 14px !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-brand) !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    text-decoration: none !important;
}

.headersticky #subscribe .header-sub-btn a.csru-subscribe-trigger:hover {
    background: var(--ui-brand-dark) !important;
}

.headersticky.header-scrolled #subscribe.header-sub-container,
.headersticky.header-scrolled #live-promo-sticky-banner {
    max-height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-color: transparent !important;
    opacity: 0;
    overflow: hidden !important;
    pointer-events: none;
}

/* Desktop only: on phones the header's own Subscribe button is the single entry point. */
@media (min-width: 992px) {
    .headersticky #subscribe.header-sub-container {
        display: flex !important;
    }
}

@media (max-width: 991px) {
    .headersticky #subscribe.header-sub-container {
        display: none !important;
    }
}

#live-promo-sticky-banner {
    max-height: 120px;
    transition: max-height var(--ui-ease), padding var(--ui-ease), opacity var(--ui-ease);
}

/* Desktop header is fixed; reserve its height before sticky-header.js measures it.
   Not !important: the script's inline value (exact height) still wins. */
@media (min-width: 992px) {
    body:has(> header.headersticky #subscribe) {
        padding-top: 101px;
    }

    body:has(> header.headersticky #live-promo-sticky-banner) {
        padding-top: 130px;
    }
}

/* 4b. Main bar — desktop. */
@media (min-width: 992px) {
    .headersticky {
        box-shadow: 0 1px 0 var(--ui-line) !important;
        border-bottom: 0 !important;
    }

    body .headersticky .header {
        min-height: var(--ui-header-h) !important;
        height: auto !important;
        padding: 0 var(--ui-gutter) !important;
        gap: var(--ui-s5) !important;
    }

    body .headersticky .logo img,
    body .headersticky.header-scrolled .logo img {
        width: auto !important;
        min-width: 0 !important;
        max-width: 150px !important;
        height: 42px !important;
        max-height: 42px !important;
        object-fit: contain !important;
    }

    body .headersticky .main-menu {
        align-self: stretch;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* nav-final.css adds an 18px right margin (and a negative left offset), which
       made the gap before Login wider than the gap after the logo. */
    body .headersticky .logo:not(#ui-a) {
        margin: 0 !important;
    }

    body .headersticky .bottom-menu:not(#ui-a) {
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;
    }

    body .headersticky .bottom-menu > ul:not(#ui-a) {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Items spread across the bar: the first sits one gap from the logo and the
       last one gap from Login, with even spacing in between. */
    body .headersticky .bottom-menu > ul {
        justify-content: space-between !important;
        gap: 2px !important;
    }

    body .headersticky .bottom-menu > ul > li > a,
    body .headersticky.header-scrolled .bottom-menu > ul > li > a {
        padding: 8px 8px !important;
        color: var(--ui-ink) !important;
        font-family: var(--ui-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: -0.005em !important;
        line-height: 1.2 !important;
        border-radius: var(--ui-radius-sm) !important;
    }

    body .headersticky .bottom-menu > ul > li.dropdown > a {
        padding-right: 19px !important;
    }

    /* Hover / open state: colour plus one 2px underline. The older layers each
       added their own bar (4px border + 2px line) and a tint, which stacked. */
    body .headersticky .bottom-menu > ul > li > a,
    body .headersticky .bottom-menu > ul > li > a:hover,
    body .headersticky .bottom-menu > ul > li:hover > a,
    body .headersticky .bottom-menu > ul > li:focus-within > a {
        border-bottom: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    body .headersticky .bottom-menu > ul > li > a:hover,
    body .headersticky .bottom-menu > ul > li:hover > a,
    body .headersticky .bottom-menu > ul > li:focus-within > a {
        color: var(--ui-brand) !important;
    }

    body .headersticky .bottom-menu > ul > li > a::after {
        left: 8px !important;
        right: 8px !important;
        bottom: 1px !important;
        height: 2px !important;
        border-radius: 2px;
        background: var(--ui-brand) !important;
    }

    /* Subscribe lives in the top strip only; no second copy in the main bar. */
    .headersticky .header-desktop-sub-btn {
        display: none !important;
    }

    body .headersticky .login-btn a.login,
    body .headersticky.header-scrolled .login-btn a.login {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 16px !important;
        border-radius: var(--ui-radius-sm) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
    }
}

/*
 * Menu items keep their natural width (no squashing); whatever does not fit moves
 * into the "More" dropdown built by sticky-header.js.
 */
body .headersticky > .container-fluid > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body .headersticky > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (min-width: 992px) {
    body .headersticky .bottom-menu > ul {
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    body .headersticky .bottom-menu > ul > li {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .headersticky .ui-nav-more {
        position: relative;
        margin-left: 0 !important;
    }

    .headersticky .ui-nav-more-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 8px;
        border: 0;
        border-radius: var(--ui-radius-sm);
        background: none;
        color: var(--ui-ink);
        font: 600 14px/1.2 var(--ui-font);
        cursor: pointer;
        transition: background-color var(--ui-ease), color var(--ui-ease);
    }

    .headersticky .ui-nav-more-btn::after {
        content: "";
        width: 6px;
        height: 6px;
        margin-top: -3px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
    }

    .headersticky .ui-nav-more-btn:hover,
    .headersticky .ui-nav-more.is-open .ui-nav-more-btn {
        color: var(--ui-brand);
    }

    .headersticky .ui-nav-more-list {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 60;
        display: none;
        min-width: 240px;
        margin: 0;
        padding: 6px;
        list-style: none;
        background: var(--ui-bg);
        border: 1px solid var(--ui-line);
        border-radius: var(--ui-radius);
        box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    }

    .headersticky .ui-nav-more:hover .ui-nav-more-list,
    .headersticky .ui-nav-more:focus-within .ui-nav-more-list,
    .headersticky .ui-nav-more.is-open .ui-nav-more-list {
        display: block;
    }

    /* Hover bridge so the list does not close while the pointer crosses the gap. */
    .headersticky .ui-nav-more-list::before {
        content: "";
        position: absolute;
        inset: -8px 0 auto;
        height: 8px;
    }

    .headersticky .ui-nav-more-list > li {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body .headersticky .ui-nav-more-list > li > a {
        display: block !important;
        width: 100%;
        padding: 9px 12px !important;
        color: var(--ui-ink) !important;
        font: 600 14px/1.3 var(--ui-font) !important;
        white-space: normal !important;
        border-radius: var(--ui-radius-sm);
    }

    body .headersticky .ui-nav-more-list > li > a::before,
    body .headersticky .ui-nav-more-list > li > a::after {
        content: none !important;
    }

    body .headersticky .ui-nav-more-list > li > a:hover {
        background: var(--ui-brand-pale) !important;
        color: var(--ui-brand) !important;
    }

    /* Mega-menus of moved items stay hidden; their top link still works. */
    body .headersticky .ui-nav-more-list .menu-i,
    body .headersticky .ui-nav-more-list .dropdown-menu,
    body .headersticky .ui-nav-more-list .plusminuse {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body .headersticky .header {
        padding: 0 16px !important;
        gap: 14px !important;
    }

    body .headersticky .logo img,
    body .headersticky.header-scrolled .logo img {
        max-width: 120px !important;
        height: 36px !important;
    }

    body .headersticky .bottom-menu > ul > li > a,
    body .headersticky.header-scrolled .bottom-menu > ul > li > a,
    .headersticky .ui-nav-more-btn {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 13.5px !important;
    }

    body .headersticky .bottom-menu > ul > li.dropdown > a {
        padding-right: 17px !important;
    }
}

/* 4c. Main bar — mobile/tablet: compact, single row. */
@media (max-width: 991px) {
    body .headersticky .header {
        min-height: var(--ui-header-h) !important;
        padding: 6px var(--ui-gutter) !important;
    }

    body .headersticky .logo img,
    body .headersticky.header-scrolled .logo img {
        width: auto !important;
        min-width: 0 !important;
        max-width: 132px !important;
        height: 40px !important;
        max-height: 40px !important;
    }

    /* No leftover right margin after Login: the header ends on the 16px gutter. */
    body .headersticky .login-btn a.login:not(#ui-a) {
        margin: 0 !important;
    }

    body .headersticky .header-desktop-sub-btn a.btn-subscribe-top,
    body .headersticky .login-btn a.login {
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: var(--ui-radius-sm) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
    }
}

/* Ad containers that rendered nothing but their tracking <script> keep their
   margins and open a gap above the hero; drop them. */
.csru-hero-ad-container:not(:has(> :not(script))),
.csr-ad-wrapper:not(:has(> :not(script))) {
    display: none !important;
}

/* ==========================================================================
   5. Images: skeleton → image → fallback
   ========================================================================== */

/* Loaded images never sit under the shimmer sweep. */
.csru-lazy-image-wrapper.loaded::after {
    content: none !important;
}

/* Shown when an image is missing or fails (also used by skeleton-loader.js). */
.csru-card-media-empty,
img.ui-img-fallback {
    background-color: var(--ui-surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23c2c7cf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 40px 40px !important;
}

.csru-card-media-empty {
    width: 100%;
    height: 100%;
    min-height: 120px;
}

.csru-card-media-empty svg {
    display: none;
}

img.ui-img-fallback {
    object-fit: none !important;
}

/* ==========================================================================
   6. Card system — shared by homepage, listing, category and related cards
   ========================================================================== */

/* 6a. Frame */
body .csru-home .csru-card,
body .csru-news-card,
body .csru-article-detail-page .Related-artical .sanitation {
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-bg) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: box-shadow var(--ui-ease), transform var(--ui-ease), border-color var(--ui-ease) !important;
}

@media (hover: hover) {
    body .csru-home .csru-card:hover,
    body .csru-home .csru-hero-card:hover,
    body .csru-home .csru-hero-card-lead:hover,
    body .csru-home .csru-article-card:hover,
    body .csru-home .csru-card--interview:hover,
    body .csru-news-card:hover,
    body .csru-article-detail-page .Related-artical .sanitation:hover {
        border-color: var(--ui-line-strong) !important;
        box-shadow: var(--ui-shadow-hover) !important;
        transform: translateY(-2px) !important;
    }
}

/* 6b. Media keeps a fixed 16:9 box so text never jumps while it loads. */
body .csru-news-card .csru-news-card-media {
    aspect-ratio: 16 / 9;
    background: var(--ui-surface) !important;
}

body .csru-home .csru-card-media,
body .csru-home .csru-lazy-image-wrapper {
    background: var(--ui-surface) !important;
}

/* Interview portraits are contained, so their letterbox should be white, not grey. */
body .csru-home .csru-card--interview .csru-card-media,
body .csru-home .csru-card--interview .csru-lazy-image-wrapper.loaded {
    background: var(--ui-bg) !important;
}

body .csru-home .csru-card-image-caption,
body .csru-news-card .csru-card-image-caption {
    padding: 5px var(--ui-s4) !important;
    background: var(--ui-bg) !important;
    border-bottom: 1px solid var(--ui-line) !important;
    color: var(--ui-muted) !important;
    font-size: 11px !important;
    font-style: normal !important;
}

/* 6c. Body */
body .csru-home .csru-card-body,
body .csru-home .csru-hero-card:not(.csru-hero-card-lead) .csru-card-body,
body .csru-home-content-column .csru-card-body,
body .csru-news-card-body,
body .course-list .list-armg .csru-news-card .csru-news-card-body,
body .csru-article-detail-page .Related-artical .artical-details {
    min-height: 0 !important;
    padding: 14px var(--ui-s4) var(--ui-s4) !important;
}

/* Category / label line */
body .csru-home .csru-card-tags,
body .csru-home-content-column .csru-card-tags span,
body .csru-article-detail-page .Related-artical .csru-news-kicker {
    min-height: 0 !important;
    padding: 0 !important;
    color: var(--ui-brand) !important;
    font-family: var(--ui-font) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    background: none !important;
}

/* Title */
body .csru-home .csru-card-title,
body .csru-home .csru-hero-card:not(.csru-hero-card-lead) .csru-card-title,
body .csru-home-content-column .csru-card-title,
body .csru-news-card h3,
body .course-list .list-armg .csru-news-card .artical-details h3,
body .csru-article-detail-page .Related-artical .artical-details h3 {
    min-height: 0 !important;
    margin: 6px 0 0 !important;
    color: var(--ui-ink) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    letter-spacing: -0.01em !important;
}

@media (min-width: 768px) {
    body .csru-home .csru-card-title,
    body .csru-news-card h3,
    body .csru-article-detail-page .Related-artical .artical-details h3 {
        min-height: calc(3 * 1.32em) !important;
    }

    body .csru-home .csru-hero-card-lead .csru-card-title {
        min-height: 0 !important;
    }
}

body .csru-news-card h3 a,
body .csru-article-detail-page .Related-artical .artical-details h3 a {
    color: inherit !important;
}

body .csru-home .csru-card-title a:hover,
body .csru-news-card h3 a:hover,
body .csru-article-detail-page .Related-artical .artical-details h3 a:hover {
    color: var(--ui-brand) !important;
}

/* Excerpt */
body .csru-home .csru-card-desc,
body .csru-home-content-column .csru-card-desc,
body .csru-news-card-excerpt {
    min-height: 0 !important;
    margin: 6px 0 0 !important;
    color: var(--ui-ink-2) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 2 !important;
}

/* Metadata: sits directly under the content, never beside the CTA. */
body .csru-home .csru-card-meta,
body .csru-home-content-column .csru-card-meta,
body .csru-news-card .artical-meta {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px !important;
    margin: 8px 0 0 !important;
    color: var(--ui-muted) !important;
    font-family: var(--ui-font) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    white-space: normal !important;
}

body .csru-home .csru-card-meta svg {
    width: 14px !important;
    height: 14px !important;
}

/* Footer row: date on the left, CTA on the right, always one line, pinned to the
   bottom of the card so footers line up across a row. */
body .csru-card-foot:not(#ui-a) {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-s3);
    width: 100%;
    margin: auto 0 0 !important;
    padding: var(--ui-s3) 0 0 !important;
    border-top: 1px solid var(--ui-line) !important;
}

/* A little air between the text above and the divider. */
body .csru-card-body > :nth-last-child(2),
body .csru-news-card-body > :nth-last-child(2),
body .artical-details > :nth-last-child(2) {
    margin-bottom: var(--ui-s3) !important;
}

body .csru-card-foot .csru-card-meta:not(#ui-a),
body .csru-card-foot .artical-meta:not(#ui-a) {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    color: var(--ui-muted) !important;
    font-family: var(--ui-font) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
}

body .csru-card-foot .csru-card-meta svg {
    flex: 0 0 auto;
    width: 14px !important;
    height: 14px !important;
}

body .csru-card-foot .csru-card-link:not(#ui-a),
body .csru-card-foot .read-more:not(#ui-a) {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
    width: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    color: var(--ui-brand) !important;
    font-family: var(--ui-font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body .csru-card-foot .csru-card-link:hover,
body .csru-card-foot .read-more:hover {
    color: var(--ui-brand-dark) !important;
}

body .csru-card-foot .csru-card-link svg {
    width: 15px !important;
    height: 15px !important;
    transition: transform var(--ui-ease);
}

body .csru-card-foot .read-more i,
body .csru-card-foot .read-more span {
    font-size: 11px !important;
    transition: transform var(--ui-ease);
}

body .csru-card:hover .csru-card-foot .csru-card-link svg {
    transform: translate(2px, -2px);
}

body .csru-news-card:hover .csru-card-foot .read-more i,
body .Related-artical .sanitation:hover .csru-card-foot .read-more span {
    transform: translateX(3px);
}

body .csru-article-detail-page .Related-artical .artical-details {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

/* ==========================================================================
   6d. Card images: one 16:9 frame in every card so cards in a row line up.
   The whole image is always shown (contain, never cropped); when its shape is
   not 16:9 the spare edges are filled with a soft blurred copy of the same
   image (set as --img by skeleton-loader.js) instead of blank bars. Because the
   frame size is fixed before the image arrives, nothing shifts when it loads.
   Video thumbnails keep cover: YouTube's hqdefault has black bars baked in.
   ========================================================================== */

body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
):not(#ui-a) {
    display: block !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    isolation: isolate;
    background-color: var(--ui-surface) !important;
}

body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
)::before {
    content: "";
    position: absolute;
    inset: -24px;
    z-index: 0;
    background: var(--img, none) center / cover no-repeat;
    filter: blur(22px) saturate(1.1);
    opacity: .55;
    transform: translateZ(0);
}

body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
) .csru-lazy-image-wrapper {
    display: block !important;
    position: absolute !important;
    inset: 0;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
}

body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
) img:not(#ui-a) {
    position: relative;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}

/* Missing-image placeholder fills the same frame. */
body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
) .csru-card-media-empty {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100% !important;
    min-height: 0 !important;
}

/* Photo credits sit over the foot of the image, so every card's text starts at
   the same height whether or not it has a credit line. */
body :is(.csru-home .csru-card, .csru-news-card, .Related-artical .sanitation) > .csru-card-image-caption {
    position: relative;
    z-index: 2;
    margin-top: -24px !important;
    padding: 6px var(--ui-s3) 5px !important;
    border: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 100%) !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   6e. Loading: skeleton shimmer in the image frame until the pixels arrive,
   then a short fade. Text is server-rendered and is never hidden. The hide
   step only runs once skeleton-loader.js has started (html.ui-img-ready), so a
   blocked script can never leave images invisible. LCP images are excluded.
   ========================================================================== */

@keyframes ui-skeleton {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}

body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
),
body .csru-article-detail-page .view-img {
    background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%) !important;
    background-size: 200% 100% !important;
    background-repeat: no-repeat !important;
    animation: ui-skeleton 1.2s ease-in-out infinite;
}

body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
):has(img.is-loaded, .ui-img-fallback, .csru-card-media-empty),
body .csru-article-detail-page .view-img:has(img.is-loaded) {
    background-image: none !important;
    animation: none;
}

/* The old overlay shimmer sat on top of loaded images; the frame shimmer replaces it. */
body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
) .csru-shimmer::after {
    content: none !important;
}

html.ui-img-ready body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
) img:not(.is-loaded):not(.ui-img-fallback):not([fetchpriority="high"]) {
    opacity: 0;
}

body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
) img {
    transition: opacity 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
    body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
),
    body .csru-article-detail-page .view-img {
        animation: none;
    }

    body :is(
    .csru-home .csru-card:not(.csru-video-card) .csru-card-media:not(.csru-card-media--logo):not(.csru-card-media--cover),
    .csru-news-card .csru-news-card-media,
    .csru-article-detail-page .Related-artical .artical-img,
    .csru-article-detail-page .csru-post-article-discovery .projectli .project-img
) img {
        transition: none;
    }
}

/* ==========================================================================
   7. Homepage
   ========================================================================== */

.csru-home {
    --page: var(--ui-bg);
    --soft: var(--ui-surface);
    --ink: var(--ui-ink);
    --brand: var(--ui-brand);
    --brand-dark: var(--ui-brand-dark);
    --brand-tint: var(--ui-line);
    --slate-200: var(--ui-line);
    --slate-500: var(--ui-muted);
    --slate-600: var(--ui-ink-2);
    --radius: var(--ui-radius);
    --card-shadow: none;
    --font-display: var(--ui-font);
    --font-mono: var(--ui-font);
    --section-gap: 40px;
    --head-gap: 20px;
    --gutter: var(--ui-gutter);
}

body .csru-home .main-banner.csru-hero {
    padding: var(--ui-s5) 0 var(--ui-s6) !important;
    background: var(--ui-bg) !important;
}

/* One container width for every homepage band so all edges line up. */
@media (min-width: 1024px) {
    body .csru-home > section > .container,
    body .csru-home .csru-home-full-width .container,
    body .csru-home #archive .container,
    body .csru-home #partners .container,
    body .csru-home #videos .container,
    body .csru-home #csr-policy .container {
        width: calc(100% - (var(--ui-gutter) * 2)) !important;
        max-width: var(--ui-container) !important;
        padding: 0 !important;
    }
}

/* Section heads */
body .csru-home .csru-eyebrow-text {
    margin: 0 0 6px !important;
    font-family: var(--ui-font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}

body .csru-home .csru-section-title {
    font-size: clamp(22px, 2vw, 28px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
}

body .csru-home .csru-section-title::after {
    width: 32px;
    height: 3px;
    margin-top: 8px;
}

body .csru-home .csru-section-sub {
    margin-top: 6px !important;
    color: var(--ui-muted) !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
}

/* Hero grid: the lead story's excerpt gets more lines so its card fills the
   height of the two stacked cards beside it. */
@media (min-width: 1024px) {
    body .csru-home .csru-hero-grid {
        gap: 20px;
        grid-auto-rows: 1fr !important;
        align-items: stretch !important;
    }

    body .csru-home .csru-hero-grid > .csru-card {
        height: 100% !important;
    }

    body .csru-home .csru-hero-card-lead .csru-card-body {
        flex: 1 1 auto !important;
        padding: 18px 20px 20px !important;
    }

    body .csru-home .csru-hero-card-lead .csru-card-title {
        font-size: clamp(24px, 2vw, 30px) !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
        -webkit-line-clamp: 3 !important;
    }

    body .csru-home .csru-hero-card-lead .csru-card-desc {
        margin-top: 8px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        -webkit-line-clamp: 6 !important;
    }
}

/* Empty ad rails: when every slot in a rail has nothing to show (no house ad and
   AdSense reported "unfilled"), drop the rail so the content column takes the
   width instead of leaving a blank 300px column. */
body .csru-home:not(.ad-preview-active) .csru-home-sidebar:not(:has(.csru-sidebar-slot:not(:has(ins.adsbygoogle[data-ad-status="unfilled"])))),
body .csru-article-detail-page .csru-article-sidebar:not(:has(.csru-sidebar-slot:not(:has(ins.adsbygoogle[data-ad-status="unfilled"])))) {
    display: none !important;
}

/* Without any rail, the content column uses the standard container width. */
@media (min-width: 992px) {
    body .csru-home .csru-home-rail-container:not(:has(> .csru-home-sidebar .csru-sidebar-slot:not(:has(ins.adsbygoogle[data-ad-status="unfilled"])))) {
        max-width: calc(var(--ui-container) + 30px) !important;
    }
}

@media (max-width: 767px) {
    .csru-home {
        --section-gap: 24px;
    }

    body .csru-home .main-banner.csru-hero {
        padding: var(--ui-s4) 0 var(--ui-s5) !important;
    }

    body .csru-home .container {
        padding: 0 var(--ui-gutter) !important;
    }

    body .csru-home .csru-hero-grid .csru-card-body {
        padding: 14px var(--ui-s4) var(--ui-s4) !important;
    }

    body .csru-home .csru-hero-grid .csru-card-title,
    body .csru-home .csru-card-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 3 !important;
    }

    body .csru-home .csru-hero-grid .csru-hero-card-lead .csru-card-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    body .csru-home .csru-hero-grid .csru-card-desc {
        -webkit-line-clamp: 3 !important;
        margin-bottom: 0 !important;
    }

    body .csru-home .csru-section-head {
        margin-bottom: var(--ui-s3) !important;
    }
}

/* ==========================================================================
   8. Listing & category pages (editorial ecosystem)
   ========================================================================== */

body .csru-newsroom .container {
    width: calc(100% - (var(--ui-gutter) * 2)) !important;
}

body .csru-news-hero {
    padding: var(--ui-s6) 0 var(--ui-s6) !important;
}

body .csru-news-hero::after {
    content: none !important;
}

body .csru-breadcrumb {
    margin-bottom: var(--ui-s5) !important;
    font-size: 12px !important;
    letter-spacing: 0.03em !important;
}

body .csru-news-hero-grid {
    align-items: center !important;
    gap: var(--ui-s6) !important;
}

body .csru-news-hero h1 {
    font-size: clamp(32px, 3.4vw, 48px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

body .csru-news-hero-copy > p:last-child {
    margin-top: var(--ui-s3) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

body .csru-news-content {
    padding: var(--ui-s6) 0 var(--ui-s7) !important;
}

body .csru-listing-toolbar {
    margin-bottom: var(--ui-s5) !important;
    padding-bottom: var(--ui-s3) !important;
    border-bottom-color: var(--ui-line) !important;
}

body .csru-listing-toolbar h2 {
    font-size: clamp(24px, 2.2vw, 30px) !important;
    font-weight: 800 !important;
    font-style: normal !important;
}

body .csru-news-kicker {
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
}

@media (max-width: 767px) {
    body .csru-news-hero {
        padding: var(--ui-s5) 0 !important;
    }

    body .csru-news-hero h1 {
        font-size: 30px !important;
    }

    body .csru-news-content {
        padding: var(--ui-s5) 0 var(--ui-s6) !important;
    }
}

/* ==========================================================================
   9. Article page
   ========================================================================== */

body .main-list.csru-article-detail-page {
    padding-top: var(--ui-s4) !important;
}

/* Breadcrumb: one quiet line. */
body .csru-article-detail-page > .container > .breadcrumb {
    margin: 0 0 var(--ui-s3) !important;
    padding: 0 !important;
    background: none !important;
}

body .csru-article-detail-page > .container > .breadcrumb ul {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    list-style: none;
}

body .csru-article-detail-page > .container > .breadcrumb li,
body .csru-article-detail-page > .container > .breadcrumb li a {
    color: var(--ui-muted) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

body .csru-article-detail-page > .container > .breadcrumb li:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Header: editorial, not a boxed card. */
body .csru-article-detail-page .csru-article-header {
    margin: 0 0 var(--ui-s4) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

body .csru-article-detail-page .csru-article-kicker {
    display: flex !important;
    align-items: center;
    gap: 6px !important;
    margin: 0 0 var(--ui-s2) !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--ui-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
}

body .csru-article-detail-page .csru-article-kicker .csru-article-category {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--ui-brand) !important;
    font-size: inherit !important;
    font-weight: 700 !important;
}

body .csru-article-detail-page h1.h1heading {
    margin: 0 0 var(--ui-s3) !important;
    color: var(--ui-ink) !important;
    font-size: clamp(28px, 2.6vw, 38px) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.022em !important;
}

/* Byline: By Author · Published · Updated, one line that wraps cleanly. */
body .csru-article-detail-page .csru-article-byline {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 var(--ui-s3) !important;
}

body .csru-article-detail-page .csru-article-byline .csru-byline-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

body .csru-article-detail-page .csru-article-byline span.csru-byline-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-brand-pale);
    color: var(--ui-brand);
    font-size: 15px;
    font-weight: 700;
}

body .csru-article-detail-page .csru-byline-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
    color: var(--ui-muted);
    font-size: 13.5px;
    line-height: 1.4;
}

body .csru-article-detail-page .csru-byline-text .csru-byline-author {
    color: var(--ui-ink-2);
}

body .csru-article-detail-page .csru-byline-text .csru-byline-author strong {
    color: var(--ui-ink);
    font-weight: 700;
}

body .csru-article-detail-page .csru-byline-text .csru-byline-sep {
    color: var(--ui-line-strong);
}

/* Share row: inline, no box. */
body .csru-article-detail-page .csru-article-header .report-price {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body .csru-article-detail-page .csru-article-social {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ui-s2) var(--ui-s3);
    padding: var(--ui-s3) 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ui-line) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

body .csru-article-detail-page .csru-social-label {
    margin: 0 !important;
    color: var(--ui-muted) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

/* Hero image: column width, natural aspect, never taller than the fold. */
body .csru-article-detail-page .view-img {
    margin: 0 0 var(--ui-s5) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-bg) !important;
}

body .csru-article-detail-page .view-img img {
    max-height: 640px !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

body .csru-article-detail-page .view-img p {
    padding: 6px var(--ui-s3) !important;
    background: var(--ui-bg);
    color: var(--ui-muted) !important;
    font-size: 12.5px !important;
    text-align: left !important;
}

/* Body copy */
body .csru-article-detail-page .singleartilepage {
    color: #1f2937 !important;
    font-family: var(--ui-font) !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}

body .csru-article-detail-page .singleartilepage p {
    margin: 0 0 1.05em !important;
    color: #1f2937 !important;
}

body .csru-article-detail-page .singleartilepage > p:first-of-type::first-letter {
    float: none !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

body .csru-article-detail-page .singleartilepage :is(h2, h3, h4) {
    margin: 1.4em 0 0.5em !important;
    color: var(--ui-ink) !important;
    line-height: 1.3 !important;
}

/* Wider reading column. Both 300px rails only where the viewport can carry
   them next to a comfortable ~800px column; below that the left rail yields. */
@media (min-width: 992px) {
    body .csru-article-detail-page .single-artical > .container {
        width: calc(100% - (var(--ui-gutter) * 2)) !important;
        max-width: 1560px !important;
        padding: 0 !important;
    }

    body .csru-article-body-layout {
        gap: 32px !important;
    }

    body .csru-article-body-layout .csru-reading-column {
        max-width: 840px !important;
        margin: 0 !important;
    }
}

@media (min-width: 992px) and (max-width: 1599px) {
    body .csru-article-body-layout .csru-sidebar-left {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body .csru-article-body-layout .csru-sidebar-right {
        flex-basis: 260px !important;
        width: 260px !important;
        max-width: 260px !important;
    }
}

@media (max-width: 991px) {
    body .main-list.csru-article-detail-page {
        padding-top: var(--ui-s3) !important;
    }

    body .csru-article-detail-page .single-artical > .container,
    body .csru-article-detail-page.single-artical > .container {
        padding-left: var(--ui-gutter) !important;
        padding-right: var(--ui-gutter) !important;
    }

    body .csru-article-detail-page h1.h1heading {
        font-size: 25px !important;
        line-height: 1.22 !important;
        margin-bottom: var(--ui-s3) !important;
    }

    body .csru-article-detail-page .csru-article-header {
        margin-bottom: var(--ui-s3) !important;
    }

    body .csru-article-detail-page .view-img {
        margin-bottom: var(--ui-s4) !important;
    }

    body .csru-article-detail-page .singleartilepage,
    body .csru-article-detail-page .csru-reading-column {
        font-size: 17px !important;
        line-height: 1.65 !important;
    }
}

/*
 * In-article ad slots sit between paragraphs. Until AdSense reports a filled ad
 * they take no height (width is kept, so AdSense can still measure and fill),
 * so readers never see a blank band between paragraphs.
 */
body .csru-article-detail-page .singleartilepage .csru-in-article-ad:not(:has(ins[data-ad-status="filled"])) {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body .csru-article-detail-page .singleartilepage .csru-in-article-ad:has(ins[data-ad-status="filled"]) {
    margin: var(--ui-s5) 0 !important;
}

/* Empty paragraphs from the editor (&nbsp; only) add no gap. */
body .csru-article-detail-page .singleartilepage p:empty {
    display: none !important;
}

/* Byline stays on one line on every screen. */
body .csru-article-detail-page .csru-article-byline:not(#ui-a) {
    flex-wrap: nowrap !important;
    border: 0 !important;
}

body .csru-article-detail-page .csru-byline-text {
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    overflow: hidden;
}

body .csru-article-detail-page .csru-byline-text .csru-byline-author {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .csru-article-detail-page .csru-byline-text time {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    body .csru-article-detail-page .csru-article-byline {
        gap: 8px !important;
    }

    body .csru-article-detail-page .csru-article-byline .csru-byline-avatar {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    body .csru-article-detail-page .csru-byline-text {
        gap: 6px;
        font-size: 13px;
    }
}

/* Related stories */
body .csru-article-detail-page .Related-artical {
    margin: var(--ui-s6) 0 var(--ui-s5) !important;
}

body .csru-article-detail-page .Related-artical .heading h2 {
    font-size: clamp(22px, 2vw, 26px) !important;
    font-weight: 800 !important;
    color: var(--ui-ink) !important;
}

/* ==========================================================================
   10. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body .csru-home .csru-card,
    body .csru-news-card,
    .headersticky #subscribe.header-sub-container,
    #live-promo-sticky-banner {
        transition: none !important;
    }

    body .csru-home .csru-card:hover,
    body .csru-news-card:hover {
        transform: none !important;
    }
}

/* Phones: drop the byline avatar so author + date fit one line without truncation. */
@media (max-width: 767px) {
    body .csru-article-detail-page .csru-article-byline .csru-byline-avatar {
        display: none !important;
    }
}

/* ==========================================================================
   11. Article page discovery lists (Top Stories / Featured) and Related
   ========================================================================== */

/* Rows size to their own card: with one card per row on phones, the old
   equal-height rows stretched every card to the tallest one, leaving a blank
   band under short descriptions. */
body .csru-article-detail-page .csru-post-article-discovery .projectli ul {
    grid-auto-rows: auto !important;
}

@media (max-width: 991px) {
    body .csru-article-detail-page .csru-post-article-discovery .projectli ul {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        gap: var(--ui-s4) !important;
    }

    /* editorial-ecosystem.css fixes these cards at 420px on mobile. */
    body .csru-article-detail-page .csru-post-article-discovery .projectli li:not(#ui-a) {
        height: auto !important;
        min-height: 0 !important;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    body .csru-article-detail-page .csru-post-article-discovery .projectli ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
    }
}

/* Same card language as the rest of the site. */
body .csru-article-detail-page .csru-post-article-discovery .projectli li:not(#ui-a) {
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
}

body .csru-article-detail-page .csru-post-article-discovery .projectli .project-img:not(#ui-a) {
    max-height: none !important;
}

body .csru-article-detail-page .csru-post-article-discovery .projectli .projectdet:not(#ui-a) {
    padding: 14px var(--ui-s4) var(--ui-s4) !important;
}

body .csru-article-detail-page .csru-post-article-discovery .projectli .projectdet h4:not(#ui-a) {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.32 !important;
}

body .csru-article-detail-page .csru-post-article-discovery .projectli .projectdet p:not(#ui-a) {
    margin: 6px 0 0 !important;
    color: var(--ui-ink-2) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Related Articles heading sits flush with its label. */
body .csru-article-detail-page .Related-artical .heading h2:not(#ui-a) {
    margin: 0 0 var(--ui-s4) !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

body .csru-article-detail-page .Related-artical .heading:not(#ui-a) {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* "Top Stories" / "Featured" headings match the other section headings. */
body .csru-article-detail-page .csru-rail-heading:not(#ui-a) {
    margin: 0 0 var(--ui-s4) !important;
    color: var(--ui-ink) !important;
    font-size: clamp(22px, 2vw, 26px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   12. Mobile & tablet navigation: header menu button + slide-out drawer
   (markup in inc/header.php, behaviour in sticky-header.js). The drawer lists
   the same admin-managed menu as the desktop bar. The old bottom dock is gone.
   ========================================================================== */

.ui-menu-btn,
.ui-drawer,
.ui-drawer-backdrop {
    display: none;
}

@media (max-width: 991px) {
    /* Header: logo | Subscribe | menu. Login and the old burger panel live in the drawer now. */
    body .headersticky .toggle-button:not(#ui-a),
    body .headersticky .bottom-menu:not(#ui-a),
    body .headersticky .top-menu .login-btn:not(#ui-a),
    body .headersticky .top-menu .user-profile-dropdown:not(#ui-a) {
        display: none !important;
    }

    body .headersticky .header-right-actions:not(#ui-a) {
        gap: 8px !important;
    }

    .headersticky .ui-menu-btn {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        margin: 0 -8px 0 4px;
        padding: 0;
        border: 0;
        border-radius: var(--ui-radius-sm);
        background: transparent;
        color: var(--ui-ink);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .headersticky .ui-menu-btn span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    .headersticky .ui-menu-btn:active {
        background: var(--ui-surface);
    }

    /* Drawer */
    .ui-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2147483000;
        display: flex;
        flex-direction: column;
        width: min(86vw, 360px);
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--ui-bg);
        box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 240ms ease, visibility 0s linear 240ms;
        font-family: var(--ui-font);
    }

    html.ui-drawer-open .ui-drawer {
        transform: none;
        visibility: visible;
        transition: transform 240ms ease;
    }

    .ui-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 2147482999;
        display: block;
        background: rgba(15, 23, 42, .45);
        animation: ui-fade-in 200ms ease;
    }

    .ui-drawer-backdrop[hidden] {
        display: none;
    }

    @keyframes ui-fade-in {
        from { opacity: 0; }
    }

    html.ui-drawer-open,
    html.ui-drawer-open body {
        overflow: hidden !important;
    }

    .ui-drawer-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 60px;
        padding: 8px 8px 8px var(--ui-s4);
        background: var(--ui-bg);
        border-bottom: 1px solid var(--ui-line);
    }

    .ui-drawer-logo img {
        display: block;
        width: auto;
        height: 36px;
    }

    .ui-drawer-close {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: var(--ui-radius-sm);
        background: transparent;
        color: var(--ui-ink);
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
    }

    .ui-drawer-list,
    .ui-drawer-list ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .ui-drawer-list > li {
        border-bottom: 1px solid var(--ui-line);
    }

    .ui-drawer-list > li > a,
    .ui-drawer-list summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        padding: 12px var(--ui-s4);
        color: var(--ui-ink) !important;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
        text-decoration: none !important;
        cursor: pointer;
        list-style: none;
    }

    .ui-drawer-list summary::-webkit-details-marker {
        display: none;
    }

    .ui-drawer-list summary::after {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin: -4px 4px 0 12px;
        border-right: 2px solid var(--ui-muted);
        border-bottom: 2px solid var(--ui-muted);
        transform: rotate(45deg);
        transition: transform var(--ui-ease);
    }

    .ui-drawer-list details[open] > summary {
        color: var(--ui-brand) !important;
    }

    .ui-drawer-list details[open] > summary::after {
        margin-top: 4px;
        transform: rotate(-135deg);
        border-color: var(--ui-brand);
    }

    .ui-drawer-list details ul {
        padding: 0 0 10px;
    }

    .ui-drawer-list details ul a {
        display: block;
        padding: 10px var(--ui-s4) 10px 28px;
        color: var(--ui-ink-2) !important;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.35;
        text-decoration: none !important;
    }

    .ui-drawer-list a:active,
    .ui-drawer-list summary:active {
        background: var(--ui-surface);
    }

    .ui-drawer-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: var(--ui-s4);
    }

    .ui-drawer-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 16px;
        border-radius: var(--ui-radius-sm);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none !important;
    }

    .ui-drawer-btn-outline {
        border: 1.5px solid var(--ui-brand);
        color: var(--ui-brand) !important;
    }

    .ui-drawer-btn-solid {
        background: var(--ui-brand);
        color: #fff !important;
    }

    .ui-drawer-account {
        gap: 0;
        padding-top: 0;
        padding-bottom: calc(var(--ui-s5) + env(safe-area-inset-bottom, 0px));
    }

    .ui-drawer-account a:not(#ui-a) {
        display: block;
        padding: 12px 0;
        border: 0 !important;
        border-top: 1px solid var(--ui-line) !important;
        background: none !important;
        color: var(--ui-ink) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-align: left;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    /* AI Assistant: the only floating control, a round icon bottom-right. */
    body .whatsapp-float-wrapper:not(#ui-a) {
        display: none !important;
    }

    body .chatbot-float-wrapper:not(#ui-a) {
        display: flex !important;
        right: 16px !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body .chatbot-float-btn:not(#ui-a) {
        justify-content: center !important;
        width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    body .chatbot-float-btn .chatbot-btn-text {
        display: none !important;
    }

    /* The dock's reserved space at the foot of every page is no longer needed. */
    body:not(#ui-a) {
        padding-bottom: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-drawer,
    html.ui-drawer-open .ui-drawer {
        transition: none;
    }
}