/* ==========================================================================
   YUBEEN NEWS & INSIGHTS — LANDING PAGE
   CONSOLIDATED PRODUCTION CSS
   2026-09-09

   Owns:
   - Screen 01 — Editorial Hero
   - Screen 02 — Dynamic Featured Story
   - Screen 03 — Dynamic Latest Stories / Category Filter / Pagination
   - Screen 04 — News Closing

   Elementor should contain markup / shortcodes only.
   Do not duplicate these styles inside Elementor HTML widgets.
   ========================================================================== */


/* ==========================================================================
   SCREEN 01 — EDITORIAL HERO
   ========================================================================== */

/* ==========================================================================
   YUBEEN NEWS & INSIGHTS
   SCREEN 01 — EDITORIAL HERO
   VERSION 1.2
   ========================================================================== */


/* ==========================================================================
   01. CORE VARIABLES
   ========================================================================== */

.yb-news-hero-v2 {

    --yb-news-bg:
        #f7f5f1;

    --yb-news-ink:
        #111315;

    --yb-news-muted:
        rgba(17,19,21,.61);

    --yb-news-soft:
        rgba(17,19,21,.42);

    --yb-news-line:
        rgba(17,19,21,.11);

    --yb-news-red:
        #e31e24;

    --yb-news-max-width:
        1500px;


    /* --------------------------------------------------------------
       CURRENT NEWS HERO IMAGE
       -------------------------------------------------------------- */

    --yb-news-hero-image:
        url(
            "/wp-content/uploads/2026/09/yubeen-news-hero-mountain-editorial-2026-scaled.webp"
        );


    position:
        relative;

    width:
        100%;

    min-height:
        420px;

    overflow:
        hidden;

    isolation:
        isolate;

    color:
        var(--yb-news-ink);

    background:
        var(--yb-news-bg);

    border-bottom:
        1px solid
        var(--yb-news-line);

    font-family:
        Manrope,
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}



/* ==========================================================================
   02. BACKGROUND PHOTOGRAPH
   ========================================================================== */

.yb-news-hero-v2__photo {

    position:
        absolute;

    z-index:
        -3;


    /*
     * The photograph begins well into the right half of the Hero.
     *
     * This keeps the left typography area visually quiet.
     */

    inset:
        0
        0
        0
        30%;


    background-image:
        var(--yb-news-hero-image);

    background-repeat:
        no-repeat;

    background-size:
        cover;


    /*
     * Tuned for:
     * yubeen-news-hero-mountain-editorial-2026-scaled.webp
     */

    background-position:
        63% 60%;


    /*
     * Slightly stronger than v1.1 because the technical decorations
     * have now been removed from the right side.
     */

    opacity:
        .31;


    /*
     * Horizontal fade protects the text area while allowing the
     * principal mountain ridge to remain visible on the right.
     */

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.07) 10%,
            rgba(0,0,0,.36) 28%,
            rgba(0,0,0,.78) 54%,
            #000 82%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.07) 10%,
            rgba(0,0,0,.36) 28%,
            rgba(0,0,0,.78) 54%,
            #000 82%,
            #000 100%
        );

}



/* ==========================================================================
   03. ATMOSPHERIC OVERLAY
   ========================================================================== */

.yb-news-hero-v2__atmosphere {

    position:
        absolute;

    z-index:
        -2;

    inset:
        0;

    pointer-events:
        none;


    /*
     * Main purpose:
     *
     * 1. Maintain clean typography on the left.
     * 2. Blend the mountain naturally into #F7F5F1.
     * 3. Keep the right side visible without becoming a photo Hero.
     */

    background:

        radial-gradient(
            ellipse at 78% 82%,
            rgba(108,116,118,.075) 0%,
            rgba(108,116,118,.035) 32%,
            rgba(108,116,118,0) 62%
        ),

        linear-gradient(
            90deg,
            rgba(247,245,241,1) 0%,
            rgba(247,245,241,.995) 31%,
            rgba(247,245,241,.93) 47%,
            rgba(247,245,241,.67) 69%,
            rgba(247,245,241,.31) 100%
        );

}



/* ==========================================================================
   04. INNER GRID
   ========================================================================== */

.yb-news-hero-v2__inner {

    position:
        relative;

    z-index:
        2;


    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(230px, 290px);

    align-items:
        center;


    gap:
        clamp(
            64px,
            8vw,
            124px
        );


    width:
        min(
            calc(100% - 96px),
            var(--yb-news-max-width)
        );


    min-height:
        419px;

    margin:
        0
        auto;

    padding:
        56px
        0;

}



/* ==========================================================================
   05. LEFT MAIN CONTENT
   ========================================================================== */

.yb-news-hero-v2__main {

    width:
        min(
            100%,
            890px
        );

}



/* ==========================================================================
   06. EYEBROW

   No decorative red line.

   The text itself carries the brand accent.
   ========================================================================== */

.yb-news-hero-v2__eyebrow {

    margin-bottom:
        23px;

    color:
        var(--yb-news-red);

    font-size:
        11px;

    font-weight:
        750;

    line-height:
        1;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}



/* ==========================================================================
   07. MAIN H1

   No forced line break.
   No red underline.
   ========================================================================== */

.yb-news-hero-v2__title {

    max-width:
        880px;

    margin:
        0;

    color:
        var(--yb-news-ink);


    font-size:
        clamp(
            60px,
            5vw,
            78px
        );


    font-weight:
        680;

    line-height:
        .98;

    letter-spacing:
        -.052em;

}



/* ==========================================================================
   08. LEAD
   ========================================================================== */

.yb-news-hero-v2__lead {

    max-width:
        710px;

    margin:
        34px
        0
        0;

    color:
        var(--yb-news-ink);


    font-size:
        clamp(
            21px,
            1.55vw,
            26px
        );


    font-weight:
        470;

    line-height:
        1.28;

    letter-spacing:
        -.026em;

}



/* ==========================================================================
   09. DESCRIPTION
   ========================================================================== */

.yb-news-hero-v2__description {

    max-width:
        610px;

    margin:
        12px
        0
        0;

    color:
        var(--yb-news-muted);

    font-size:
        15px;

    font-weight:
        430;

    line-height:
        1.58;

    letter-spacing:
        -.012em;

}



/* ==========================================================================
   10. RIGHT EDITORIAL META
   ========================================================================== */

.yb-news-hero-v2__meta {

    align-self:
        end;

    justify-self:
        end;


    width:
        min(
            100%,
            270px
        );


    margin-bottom:
        51px;

}



/* Label ---------------------------------------------------------------- */

.yb-news-hero-v2__meta-label {

    margin-bottom:
        18px;

    color:
        rgba(17,19,21,.84);

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}



/* Topics --------------------------------------------------------------- */

.yb-news-hero-v2__meta-topics {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    color:
        var(--yb-news-soft);

    font-size:
        10px;

    font-weight:
        620;

    line-height:
        1.3;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

}



/* ==========================================================================
   11. INITIAL REVEAL

   One-shot only.

   Performance:
   - opacity
   - translate3d
   - no blur
   - no continuous animation
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    .yb-news-hero-v2__eyebrow,
    .yb-news-hero-v2__title,
    .yb-news-hero-v2__lead,
    .yb-news-hero-v2__description,
    .yb-news-hero-v2__meta {

        opacity:
            0;

        transform:
            translate3d(
                0,
                9px,
                0
            );

        animation:
            yb-news-hero-v2-reveal
            600ms
            cubic-bezier(.22,.61,.36,1)
            forwards;

    }


    .yb-news-hero-v2__eyebrow {

        animation-delay:
            35ms;

    }


    .yb-news-hero-v2__title {

        animation-delay:
            95ms;

    }


    .yb-news-hero-v2__lead {

        animation-delay:
            160ms;

    }


    .yb-news-hero-v2__description {

        animation-delay:
            215ms;

    }


    .yb-news-hero-v2__meta {

        animation-delay:
            260ms;

    }


    @keyframes yb-news-hero-v2-reveal {

        to {

            opacity:
                1;

            transform:
                translate3d(
                    0,
                    0,
                    0
                );

        }

    }

}



/* ==========================================================================
   12. LARGE DESKTOP
   ========================================================================== */

@media (min-width:1600px) {

    .yb-news-hero-v2 {

        min-height:
            440px;

    }


    .yb-news-hero-v2__inner {

        min-height:
            439px;

        padding:
            60px
            0;

    }


    .yb-news-hero-v2__title {

        font-size:
            80px;

    }


    .yb-news-hero-v2__photo {

        background-position:
            61% 60%;

    }

}



/* ==========================================================================
   13. LAPTOP / SMALL DESKTOP
   ========================================================================== */

@media (max-width:1180px) {

    .yb-news-hero-v2 {

        min-height:
            400px;

    }


    .yb-news-hero-v2__inner {

        grid-template-columns:
            minmax(0,1fr)
            220px;

        gap:
            54px;

        width:
            calc(100% - 72px);

        min-height:
            399px;

        padding:
            48px
            0;

    }


    .yb-news-hero-v2__title {

        font-size:
            clamp(
                55px,
                5.8vw,
                68px
            );

    }


    .yb-news-hero-v2__lead {

        margin-top:
            29px;

        font-size:
            21px;

    }


    .yb-news-hero-v2__photo {

        inset:
            0
            0
            0
            27%;

        background-position:
            64% 60%;

        opacity:
            .28;

    }


    .yb-news-hero-v2__meta {

        margin-bottom:
            35px;

    }

}



/* ==========================================================================
   14. TABLET
   ========================================================================== */

@media (max-width:900px) {

    .yb-news-hero-v2 {

        min-height:
            370px;

    }


    .yb-news-hero-v2__inner {

        grid-template-columns:
            minmax(0,1fr)
            175px;

        gap:
            28px;

        width:
            calc(100% - 48px);

        min-height:
            369px;

        padding:
            42px
            0;

    }


    .yb-news-hero-v2__title {

        font-size:
            clamp(
                47px,
                6.7vw,
                58px
            );

    }


    .yb-news-hero-v2__lead {

        max-width:
            520px;

        margin-top:
            26px;

        font-size:
            19px;

    }


    .yb-news-hero-v2__description {

        max-width:
            500px;

        font-size:
            14px;

    }


    .yb-news-hero-v2__photo {

        inset:
            0
            -4%
            0
            35%;

        background-position:
            68% 59%;

        opacity:
            .21;

    }


    .yb-news-hero-v2__meta {

        width:
            170px;

        margin-bottom:
            28px;

    }


    .yb-news-hero-v2__meta-topics {

        font-size:
            9px;

    }

}



/* ==========================================================================
   15. MOBILE
   ========================================================================== */

@media (max-width:700px) {

    .yb-news-hero-v2 {

        min-height:
            350px;

    }


    /*
     * Mobile:
     *
     * Remove secondary editorial metadata.
     * The page should become simpler as the viewport gets smaller.
     */

    .yb-news-hero-v2__meta {

        display:
            none;

    }


    .yb-news-hero-v2__inner {

        display:
            block;

        width:
            calc(100% - 38px);

        min-height:
            349px;

        padding:
            42px
            0
            48px;

    }


    .yb-news-hero-v2__main {

        width:
            100%;

    }


    .yb-news-hero-v2__eyebrow {

        margin-bottom:
            18px;

        font-size:
            9.5px;

    }


    .yb-news-hero-v2__title {

        max-width:
            100%;

        font-size:
            clamp(
                45px,
                13.8vw,
                59px
            );

        line-height:
            .94;

        letter-spacing:
            -.049em;

    }


    .yb-news-hero-v2__lead {

        max-width:
            430px;

        margin-top:
            26px;

        font-size:
            18.5px;

        line-height:
            1.3;

    }


    .yb-news-hero-v2__description {

        max-width:
            430px;

        margin-top:
            9px;

        font-size:
            13.5px;

        line-height:
            1.55;

    }


    /*
     * Mobile photograph:
     *
     * Only the lower-right area is visible.
     * This prevents it from interfering with the typography.
     */

    .yb-news-hero-v2__photo {

        inset:
            33%
            -18%
            0
            22%;

        background-position:
            75% 58%;

        opacity:
            .15;


        -webkit-mask-image:
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(0,0,0,.12) 17%,
                rgba(0,0,0,.70) 56%,
                #000 100%
            );

        mask-image:
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(0,0,0,.12) 17%,
                rgba(0,0,0,.70) 56%,
                #000 100%
            );

    }


    .yb-news-hero-v2__atmosphere {

        background:

            radial-gradient(
                ellipse at 83% 90%,
                rgba(108,116,118,.07) 0%,
                rgba(108,116,118,0) 58%
            ),

            linear-gradient(
                180deg,
                rgba(247,245,241,1) 0%,
                rgba(247,245,241,.98) 57%,
                rgba(247,245,241,.79) 100%
            );

    }

}



/* ==========================================================================
   16. SMALL MOBILE
   ========================================================================== */

@media (max-width:420px) {

    .yb-news-hero-v2 {

        min-height:
            340px;

    }


    .yb-news-hero-v2__inner {

        width:
            calc(100% - 32px);

        min-height:
            339px;

        padding-top:
            37px;

    }


    .yb-news-hero-v2__title {

        font-size:
            clamp(
                43px,
                13.7vw,
                55px
            );

    }


    .yb-news-hero-v2__lead {

        font-size:
            17.5px;

    }


    .yb-news-hero-v2__description {

        font-size:
            13px;

    }

}



/* ==========================================================================
   17. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width:360px) {

    .yb-news-hero-v2__title {

        font-size:
            42px;

    }


    .yb-news-hero-v2__lead {

        font-size:
            17px;

    }

}



/* ==========================================================================
   18. REDUCED MOTION ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .yb-news-hero-v2 *,
    .yb-news-hero-v2 *::before,
    .yb-news-hero-v2 *::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}



/* ==========================================================================
   SCREEN 02 + SCREEN 03 — DYNAMIC NEWS CONTENT
   ========================================================================== */

/* ========================================================================== 
   SHARED DYNAMIC IMAGE FALLBACK
   ========================================================================== */

.yb-news-dynamic-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 180px;
    background:
        linear-gradient(135deg, rgba(17, 19, 21, .045), rgba(17, 19, 21, .085));
}


/* ========================================================================== 
   SCREEN 02 — FEATURED STORY
   ========================================================================== */

.yb-news-featured-v1 {
    --yb-featured-bg: #fbfaf7;
    --yb-featured-ink: #111315;
    --yb-featured-muted: rgba(17, 19, 21, .61);
    --yb-featured-soft: rgba(17, 19, 21, .43);
    --yb-featured-red: #e31e24;
    --yb-featured-max-width: 1500px;

    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--yb-featured-ink);
    background: var(--yb-featured-bg);
    font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.yb-news-featured-v1__inner {
    width: min(calc(100% - 96px), var(--yb-featured-max-width));
    margin: 0 auto;
    padding: 66px 0 78px;
}

.yb-news-featured-v1__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.yb-news-featured-v1__section-label {
    margin: 0;
    color: rgba(17, 19, 21, .78);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.yb-news-featured-v1__article {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(330px, 1fr);
    align-items: stretch;
    gap: clamp(40px, 4.8vw, 72px);
}

.yb-news-featured-v1__media {
    min-width: 0;
    margin: 0;
}

.yb-news-featured-v1__image-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--yb-featured-bg);
    text-decoration: none;
}

.yb-news-featured-v1__image,
.yb-news-featured-v1__image-frame > .yb-news-dynamic-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yb-news-featured-v1__image {
    object-position: 48% 50%;
    transform: scale(1.001);
}

.yb-news-featured-v1__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: clamp(10px, 1.1vw, 18px) 0;
}

.yb-news-featured-v1__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 17px;
    width: 100%;
    margin-bottom: 27px;
}

.yb-news-featured-v1__category {
    color: var(--yb-featured-red);
    font-size: 10px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.yb-news-featured-v1__date {
    color: var(--yb-featured-soft);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.yb-news-featured-v1__title {
    max-width: 520px;
    margin: 0;
    color: var(--yb-featured-ink);
    font-size: clamp(36px, 3vw, 48px);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -.044em;
}

.yb-news-featured-v1__title a {
    color: inherit;
    text-decoration: none;
}

.yb-news-featured-v1__excerpt {
    max-width: 500px;
    margin: 24px 0 0;
    color: var(--yb-featured-muted);
    font-size: 15px;
    font-weight: 430;
    line-height: 1.62;
    letter-spacing: -.01em;
}

.yb-news-featured-v1__read {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 31px;
    padding-bottom: 7px;
    color: var(--yb-featured-ink);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
}

.yb-news-featured-v1__read::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(17, 19, 21, .26);
}

.yb-news-featured-v1__read-arrow {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    transform: translateX(0);
    transition: transform 180ms ease;
}

.yb-news-featured-v1 a:focus-visible {
    outline: 2px solid var(--yb-featured-red);
    outline-offset: 4px;
}

@media (hover:hover) and (pointer:fine) {
    .yb-news-featured-v1__image {
        transition: transform 620ms cubic-bezier(.22, .61, .36, 1);
    }

    .yb-news-featured-v1__article:hover .yb-news-featured-v1__image {
        transform: scale(1.012);
    }

    .yb-news-featured-v1__read:hover .yb-news-featured-v1__read-arrow,
    .yb-news-featured-v1__read:focus-visible .yb-news-featured-v1__read-arrow {
        transform: translateX(3px);
    }
}


/* ========================================================================== 
   SCREEN 03 — LATEST STORIES
   ========================================================================== */

.yb-news-latest-v1 {
    --yb-latest-bg: #f7f5f1;
    --yb-latest-card: #fbfaf7;
    --yb-latest-ink: #111315;
    --yb-latest-muted: rgba(17, 19, 21, .60);
    --yb-latest-soft: rgba(17, 19, 21, .42);
    --yb-latest-line: rgba(17, 19, 21, .11);
    --yb-latest-red: #e31e24;
    --yb-latest-max-width: 1500px;

    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--yb-latest-ink);
    background: var(--yb-latest-bg);
    border-top: 1px solid var(--yb-latest-line);
    font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.yb-news-latest-v1__inner {
    width: min(calc(100% - 96px), var(--yb-latest-max-width));
    margin: 0 auto;
    padding: 70px 0 86px;
}

.yb-news-latest-v1__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.yb-news-latest-v1__heading {
    margin: 0;
    color: var(--yb-latest-ink);
    font-size: 14px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.yb-news-latest-v1__categories {
    display: flex;
    align-items: center;
    gap: 31px;
    width: 100%;
    margin-top: 27px;
    padding-bottom: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--yb-latest-line);
    scrollbar-width: none;
}

.yb-news-latest-v1__categories::-webkit-scrollbar {
    display: none;
}

.yb-news-latest-v1__category-nav {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 26px;
    color: rgba(17, 19, 21, .63);
    font-size: 11px;
    font-weight: 560;
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.yb-news-latest-v1__category-nav.is-active {
    color: var(--yb-latest-red);
    font-weight: 680;
}

.yb-news-latest-v1__category-nav.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -15px;
    left: 0;
    height: 2px;
    background: var(--yb-latest-red);
}

.yb-news-latest-v1__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.34fr) minmax(0, .83fr) minmax(0, .83fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 30px;
}

/* During the current 4-post test there are 3 Latest Stories after the Sticky
   Featured post is excluded. Use one large lead story plus two stacked stories
   instead of forcing empty cells into the original 1 + 4 magazine grid. */
.yb-news-latest-v1--count-3 .yb-news-latest-v1__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .92fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.yb-news-latest-v1--count-3 .yb-news-latest-v1__card--lead {
    grid-row: 1 / span 2;
}

/* ==========================================================================
   LATEST STORIES — 4-POST LAST-PAGE LAYOUT

   Keep the editorial lead card on the left.
   The fourth story still spans the two right columns, but becomes a compact
   horizontal card so its wide media does not inflate the entire grid height.
   ========================================================================== */

.yb-news-latest-v1--count-4 .yb-news-latest-v1__grid {
    grid-template-rows: auto auto;
}

.yb-news-latest-v1--count-4 .yb-news-latest-v1__card:nth-child(4) {
    grid-column: 2 / 4;

    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(210px, .75fr);

    align-items: stretch;
}

.yb-news-latest-v1--count-4
.yb-news-latest-v1__card:nth-child(4)
.yb-news-latest-v1__media {
    aspect-ratio: 16 / 9;
}

.yb-news-latest-v1--count-4
.yb-news-latest-v1__card:nth-child(4)
.yb-news-latest-v1__body {
    min-width: 0;
}

.yb-news-latest-v1--count-1 .yb-news-latest-v1__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
}

.yb-news-latest-v1--count-1 .yb-news-latest-v1__card--lead {
    grid-row: auto;
}

.yb-news-latest-v1--count-2 .yb-news-latest-v1__grid {
    grid-template-columns: minmax(0, 1.34fr) minmax(0, .83fr);
    grid-template-rows: auto;
}

.yb-news-latest-v1--count-2 .yb-news-latest-v1__card--lead {
    grid-row: auto;
}

.yb-news-latest-v1__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--yb-latest-card);
    border: 1px solid rgba(17, 19, 21, .075);
}

.yb-news-latest-v1__card--lead {
    grid-row: 1 / span 2;
}

.yb-news-latest-v1__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    overflow: hidden;
    background: var(--yb-latest-card);
}

.yb-news-latest-v1__card:not(.yb-news-latest-v1__card--lead) .yb-news-latest-v1__media {
    aspect-ratio: 16 / 7.9;
}

/* ==========================================================================
   LATEST STORIES — MEDIA FILL FIX

   WordPress / Elementor can apply a generic:
   .elementor img { height: auto; }

   That rule is more specific than the old
   .yb-news-latest-v1__image { height: 100%; }

   Result:
   the actual image does not fully fill the 16:9 media frame,
   exposing the grey fallback background underneath.

   Solution:
   absolutely position both the media link and image so the
   complete frame is always covered.
   ========================================================================== */

.yb-news-latest-v1__media-link {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    text-decoration: none;
}


/*
 * Use a deliberately stronger selector than Elementor's
 * generic image rule.
 */
.yb-news-latest-v1__media-link > img.yb-news-latest-v1__image,
.yb-news-latest-v1__media-link > .yb-news-dynamic-image-placeholder {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
}


/* Default crop for regular Latest Stories. */
.yb-news-latest-v1__media-link > img.yb-news-latest-v1__image {
    object-position: center center;

    transform: scale(1.001);
}


/*
 * Lead story:
 * keep the subject slightly toward the left while preserving
 * more environmental context on the right.
 */
.yb-news-latest-v1__card--lead
.yb-news-latest-v1__media-link
> img.yb-news-latest-v1__image {
    object-position: 45% 50%;
}

.yb-news-latest-v1__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 20px 21px 21px;
}

.yb-news-latest-v1__card--lead .yb-news-latest-v1__body {
    padding: 26px 28px 29px;
}

.yb-news-latest-v1__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    margin-bottom: 14px;
}

.yb-news-latest-v1__category {
    color: var(--yb-latest-red);
    font-size: 9px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.yb-news-latest-v1__date {
    flex: 0 0 auto;
    color: var(--yb-latest-soft);
    font-size: 9px;
    font-weight: 580;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.yb-news-latest-v1__title {
    margin: 0;
    color: var(--yb-latest-ink);
    font-size: clamp(17px, 1.22vw, 21px);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.032em;
}

.yb-news-latest-v1__title a {
    color: inherit;
    text-decoration: none;
}

.yb-news-latest-v1__card--lead .yb-news-latest-v1__title {
    max-width: 610px;
    font-size: clamp(29px, 2.25vw, 38px);
    line-height: 1.08;
    letter-spacing: -.041em;
}

.yb-news-latest-v1__excerpt {
    max-width: 610px;
    margin: 17px 0 0;
    color: var(--yb-latest-muted);
    font-size: 14px;
    font-weight: 430;
    line-height: 1.58;
    letter-spacing: -.008em;
}

.yb-news-latest-v1__read {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 13px;
    margin-top: auto;
    padding-top: 19px;
    padding-bottom: 6px;
    color: rgba(17, 19, 21, .88);
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
}

.yb-news-latest-v1__read::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(17, 19, 21, .22);
}

.yb-news-latest-v1__read > span {
    display: inline-block;
    font-size: 13px;
    transition: transform 180ms ease;
}

.yb-news-latest-v1 a:focus-visible {
    outline: 2px solid var(--yb-latest-red);
    outline-offset: 4px;
}

@media (hover:hover) and (pointer:fine) {
    .yb-news-latest-v1__media-link
    > img.yb-news-latest-v1__image {

        transition:
            transform
            620ms
            cubic-bezier(.22, .61, .36, 1);
    }


    .yb-news-latest-v1__card:hover
    .yb-news-latest-v1__media-link
    > img.yb-news-latest-v1__image {

        transform:
            scale(1.015);
    }

    .yb-news-latest-v1__read:hover > span,
    .yb-news-latest-v1__read:focus-visible > span {
        transform: translateX(3px);
    }
}


/* ========================================================================== 
   ONE-SHOT REVEAL — JS IS PROGRESSIVE ENHANCEMENT ONLY
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .yb-news-featured-v1.yb-motion-ready .yb-news-featured-v1__section-label,
    .yb-news-featured-v1.yb-motion-ready .yb-news-featured-v1__media,
    .yb-news-featured-v1.yb-motion-ready .yb-news-featured-v1__meta,
    .yb-news-featured-v1.yb-motion-ready .yb-news-featured-v1__title,
    .yb-news-featured-v1.yb-motion-ready .yb-news-featured-v1__excerpt,
    .yb-news-featured-v1.yb-motion-ready .yb-news-featured-v1__read,
    .yb-news-latest-v1.yb-motion-ready .yb-news-latest-v1__heading,
    .yb-news-latest-v1.yb-motion-ready .yb-news-latest-v1__categories,
    .yb-news-latest-v1.yb-motion-ready .yb-news-latest-v1__card {
        opacity: 0;
        transform: translate3d(0, 12px, 0);
        transition:
            opacity 600ms cubic-bezier(.22, .61, .36, 1),
            transform 600ms cubic-bezier(.22, .61, .36, 1);
    }

    .yb-news-featured-v1.yb-motion-ready.is-inview .yb-news-featured-v1__section-label,
    .yb-news-featured-v1.yb-motion-ready.is-inview .yb-news-featured-v1__media,
    .yb-news-featured-v1.yb-motion-ready.is-inview .yb-news-featured-v1__meta,
    .yb-news-featured-v1.yb-motion-ready.is-inview .yb-news-featured-v1__title,
    .yb-news-featured-v1.yb-motion-ready.is-inview .yb-news-featured-v1__excerpt,
    .yb-news-featured-v1.yb-motion-ready.is-inview .yb-news-featured-v1__read,
    .yb-news-latest-v1.yb-motion-ready.is-inview .yb-news-latest-v1__heading,
    .yb-news-latest-v1.yb-motion-ready.is-inview .yb-news-latest-v1__categories,
    .yb-news-latest-v1.yb-motion-ready.is-inview .yb-news-latest-v1__card {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .yb-news-featured-v1.yb-motion-ready .yb-news-featured-v1__media { transition-delay: 45ms; }
    .yb-news-featured-v1.yb-motion-ready .yb-news-featured-v1__meta { transition-delay: 90ms; }
    .yb-news-featured-v1.yb-motion-ready .yb-news-featured-v1__title { transition-delay: 145ms; }
    .yb-news-featured-v1.yb-motion-ready .yb-news-featured-v1__excerpt { transition-delay: 200ms; }
    .yb-news-featured-v1.yb-motion-ready .yb-news-featured-v1__read { transition-delay: 250ms; }

    .yb-news-latest-v1.yb-motion-ready .yb-news-latest-v1__categories { transition-delay: 55ms; }
    .yb-news-latest-v1.yb-motion-ready .yb-news-latest-v1__card:nth-child(1) { transition-delay: 100ms; }
    .yb-news-latest-v1.yb-motion-ready .yb-news-latest-v1__card:nth-child(2) { transition-delay: 145ms; }
    .yb-news-latest-v1.yb-motion-ready .yb-news-latest-v1__card:nth-child(3) { transition-delay: 185ms; }
    .yb-news-latest-v1.yb-motion-ready .yb-news-latest-v1__card:nth-child(4) { transition-delay: 225ms; }
    .yb-news-latest-v1.yb-motion-ready .yb-news-latest-v1__card:nth-child(5) { transition-delay: 265ms; }
}


/* ========================================================================== 
   RESPONSIVE
   ========================================================================== */

@media (min-width:1600px) {
    .yb-news-featured-v1__inner { padding: 74px 0 86px; }
    .yb-news-featured-v1__title { font-size: 50px; }

    .yb-news-latest-v1__inner { padding: 76px 0 94px; }
    .yb-news-latest-v1__grid { gap: 24px; }
    .yb-news-latest-v1__card--lead .yb-news-latest-v1__title { font-size: 40px; }
}

@media (max-width:1180px) {
    .yb-news-featured-v1__inner {
        width: calc(100% - 72px);
        padding: 60px 0 70px;
    }

    .yb-news-featured-v1__article {
        grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
        gap: 40px;
    }

    .yb-news-featured-v1__title { font-size: clamp(32px, 3.3vw, 41px); }
    .yb-news-featured-v1__excerpt { font-size: 14px; }

    .yb-news-latest-v1__inner {
        width: calc(100% - 72px);
        padding: 62px 0 76px;
    }

    .yb-news-latest-v1__grid {
        grid-template-columns: minmax(0, 1.24fr) minmax(0, .88fr) minmax(0, .88fr);
        gap: 18px;
    }

    .yb-news-latest-v1--count-2 .yb-news-latest-v1__grid {
        grid-template-columns: minmax(0, 1.24fr) minmax(0, .88fr);
    }

    .yb-news-latest-v1--count-3 .yb-news-latest-v1__grid {
        grid-template-columns: minmax(0, 1.42fr) minmax(290px, .92fr);
    }

    .yb-news-latest-v1__body { padding: 17px 18px 18px; }
    .yb-news-latest-v1__card--lead .yb-news-latest-v1__body { padding: 23px 24px 25px; }
    .yb-news-latest-v1__card--lead .yb-news-latest-v1__title { font-size: clamp(26px, 2.6vw, 34px); }
}

@media (max-width:900px) {
    .yb-news-featured-v1__inner {
        width: calc(100% - 48px);
        padding: 54px 0 64px;
    }

    .yb-news-featured-v1__article { display: block; }
    .yb-news-featured-v1__content {
        width: min(100%, 720px);
        padding: 34px 0 0;
    }
    .yb-news-featured-v1__meta { margin-bottom: 21px; }
    .yb-news-featured-v1__title {
        max-width: 660px;
        font-size: clamp(34px, 5vw, 44px);
    }
    .yb-news-featured-v1__excerpt {
        max-width: 620px;
        margin-top: 19px;
    }
    .yb-news-featured-v1__read { margin-top: 25px; }

    .yb-news-latest-v1__inner {
        width: calc(100% - 48px);
        padding: 56px 0 68px;
    }

    .yb-news-latest-v1__grid,
    .yb-news-latest-v1--count-1 .yb-news-latest-v1__grid,
    .yb-news-latest-v1--count-2 .yb-news-latest-v1__grid,
    .yb-news-latest-v1--count-3 .yb-news-latest-v1__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 20px;
    }

    .yb-news-latest-v1__card--lead,
    .yb-news-latest-v1--count-3 .yb-news-latest-v1__card--lead {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .yb-news-latest-v1__card--lead .yb-news-latest-v1__media { aspect-ratio: 16 / 8.5; }
    .yb-news-latest-v1__card--lead .yb-news-latest-v1__title {
        max-width: 700px;
        font-size: clamp(31px, 4.8vw, 41px);
    }
    .yb-news-latest-v1__categories { gap: 25px; }

    .yb-news-latest-v1--count-4
    .yb-news-latest-v1__card:nth-child(4) {
        grid-column: 1 / -1;
    }

}

@media (max-width:700px) {
    .yb-news-featured-v1__inner {
        width: calc(100% - 38px);
        padding: 48px 0 56px;
    }
    .yb-news-featured-v1__header { margin-bottom: 19px; }
    .yb-news-featured-v1__section-label { font-size: 9.5px; }
    .yb-news-featured-v1__image-frame { aspect-ratio: 16 / 9; }
    .yb-news-featured-v1__image { object-position: 45% 50%; }
    .yb-news-featured-v1__content { padding-top: 27px; }
    .yb-news-featured-v1__meta {
        gap: 9px 14px;
        margin-bottom: 18px;
    }
    .yb-news-featured-v1__category,
    .yb-news-featured-v1__date { font-size: 9px; }
    .yb-news-featured-v1__title {
        max-width: 100%;
        font-size: clamp(30px, 8.5vw, 39px);
        line-height: 1.06;
    }
    .yb-news-featured-v1__excerpt {
        margin-top: 17px;
        font-size: 13.5px;
        line-height: 1.58;
    }
    .yb-news-featured-v1__read {
        margin-top: 23px;
        font-size: 11.5px;
    }

    .yb-news-latest-v1__inner {
        width: calc(100% - 38px);
        padding: 49px 0 58px;
    }
    .yb-news-latest-v1__heading { font-size: 12px; }
    .yb-news-latest-v1__categories {
        gap: 22px;
        margin-top: 22px;
        padding-bottom: 12px;
    }
    .yb-news-latest-v1__category-nav {
        min-height: 25px;
        font-size: 10px;
    }
    .yb-news-latest-v1__category-nav.is-active::after { bottom: -13px; }

    .yb-news-latest-v1__grid,
    .yb-news-latest-v1--count-1 .yb-news-latest-v1__grid,
    .yb-news-latest-v1--count-2 .yb-news-latest-v1__grid,
    .yb-news-latest-v1--count-3 .yb-news-latest-v1__grid {
        display: block;
        margin-top: 24px;
    }

    .yb-news-latest-v1__card { margin-bottom: 18px; }
    .yb-news-latest-v1__card:last-child { margin-bottom: 0; }

    .yb-news-latest-v1__card:not(.yb-news-latest-v1__card--lead) .yb-news-latest-v1__media,
    .yb-news-latest-v1__card--lead .yb-news-latest-v1__media { aspect-ratio: 16 / 9; }

    .yb-news-latest-v1__body,
    .yb-news-latest-v1__card--lead .yb-news-latest-v1__body { padding: 20px 19px 21px; }

    .yb-news-latest-v1__card--lead .yb-news-latest-v1__title {
        max-width: 100%;
        font-size: clamp(27px, 7.8vw, 35px);
    }
    .yb-news-latest-v1__title { font-size: 20px; }
    .yb-news-latest-v1__excerpt { font-size: 13.5px; }
    .yb-news-latest-v1__read {
        padding-top: 18px;
        font-size: 11px;
    }

    .yb-news-latest-v1--count-4
    .yb-news-latest-v1__card:nth-child(4) {
        display: flex;
        grid-column: auto;
    }

    .yb-news-latest-v1--count-4
    .yb-news-latest-v1__card:nth-child(4)
    .yb-news-latest-v1__media {
        aspect-ratio: 16 / 9;
    }


}

@media (max-width:420px) {
    .yb-news-featured-v1__inner {
        width: calc(100% - 32px);
        padding: 44px 0 52px;
    }
    .yb-news-featured-v1__title { font-size: clamp(28px, 8.2vw, 35px); }
    .yb-news-featured-v1__excerpt { font-size: 13px; }

    .yb-news-latest-v1__inner {
        width: calc(100% - 32px);
        padding: 45px 0 54px;
    }
    .yb-news-latest-v1__card--lead .yb-news-latest-v1__title { font-size: clamp(25px, 7.6vw, 32px); }
    .yb-news-latest-v1__title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .yb-news-featured-v1 *,
    .yb-news-featured-v1 *::before,
    .yb-news-featured-v1 *::after,
    .yb-news-latest-v1 *,
    .yb-news-latest-v1 *::before,
    .yb-news-latest-v1 *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   SCREEN 03 — PAGINATION
   Dynamic pagination markup generated by class-yubeen-news-landing.php.
   ========================================================================== */

/* Keep anchored category / pagination reloads below the sticky site header. */
.yb-news-latest-v1 {
    scroll-margin-top: 110px;
}


.yb-news-latest-v1__pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;

    width: 100%;

    margin-top: 34px;
    padding-top: 24px;

    border-top: 1px solid var(--yb-latest-line);
}


.yb-news-latest-v1__pagination-side {
    display: flex;
    align-items: center;
}

.yb-news-latest-v1__pagination-side--prev {
    justify-content: flex-start;
}

.yb-news-latest-v1__pagination-side--next {
    justify-content: flex-end;
}


.yb-news-latest-v1__pagination-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 34px;

    color: rgba(17, 19, 21, .72);

    font-size: 11px;
    font-weight: 620;
    line-height: 1;

    text-decoration: none;

    transition: color 160ms ease;
}

.yb-news-latest-v1__pagination-control.is-disabled {
    opacity: .28;
    pointer-events: none;
}


.yb-news-latest-v1__pagination-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}


.yb-news-latest-v1__pagination-page {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 30px;
    height: 32px;

    padding: 0 7px;

    color: rgba(17, 19, 21, .58);

    font-size: 10.5px;
    font-weight: 610;
    line-height: 1;

    text-decoration: none;

    transition: color 160ms ease;
}


.yb-news-latest-v1__pagination-page.is-active {
    color: var(--yb-latest-red);
    font-weight: 700;
}

.yb-news-latest-v1__pagination-page.is-active::after {
    content: "";

    position: absolute;
    right: 7px;
    bottom: 0;
    left: 7px;

    height: 2px;

    background: var(--yb-latest-red);
}


.yb-news-latest-v1__pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 24px;
    height: 32px;

    color: rgba(17, 19, 21, .35);

    font-size: 11px;
    line-height: 1;
}


@media (hover:hover) and (pointer:fine) {

    .yb-news-latest-v1__pagination-control:hover,
    .yb-news-latest-v1__pagination-page:hover {
        color: var(--yb-latest-red);
    }

}


.yb-news-latest-v1__pagination-control:focus-visible,
.yb-news-latest-v1__pagination-page:focus-visible {
    outline: 2px solid var(--yb-latest-red);
    outline-offset: 3px;
}


@media (max-width:700px) {

    .yb-news-latest-v1 {
        scroll-margin-top: 88px;
    }

    .yb-news-latest-v1__pagination {
        gap: 10px;
        margin-top: 28px;
        padding-top: 20px;
    }

    .yb-news-latest-v1__pagination-control {
        gap: 7px;
        font-size: 10px;
    }

    .yb-news-latest-v1__pagination-page {
        min-width: 27px;
        height: 30px;
        padding: 0 5px;
        font-size: 10px;
    }

    .yb-news-latest-v1__pagination-ellipsis {
        min-width: 18px;
        height: 30px;
    }

}


@media (max-width:420px) {

    .yb-news-latest-v1__pagination {
        gap: 6px;
    }

    .yb-news-latest-v1__pagination-control {
        font-size: 0;
    }

    .yb-news-latest-v1__pagination-control > span {
        font-size: 13px;
    }

}


/* ==========================================================================
   SCREEN 04 — NEWS CLOSING
   ========================================================================== */

/* ==========================================================================
   YUBEEN NEWS & INSIGHTS
   SCREEN 04 — NEWS CLOSING
   VERSION 1.0
   ========================================================================== */


/* ==========================================================================
   01. VARIABLES
   ========================================================================== */

.yb-news-closing-v1 {

    --yb-closing-bg:
        #090b0d;

    --yb-closing-ink:
        #f7f7f5;

    --yb-closing-muted:
        rgba(247,247,245,.62);

    --yb-closing-soft:
        rgba(247,247,245,.38);

    --yb-closing-line:
        rgba(255,255,255,.11);

    --yb-closing-line-strong:
        rgba(255,255,255,.20);

    --yb-closing-red:
        #e31e24;

    --yb-closing-max-width:
        1500px;


    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    isolation:
        isolate;

    color:
        var(--yb-closing-ink);

    background:
        var(--yb-closing-bg);

    border-top:
        1px solid
        rgba(255,255,255,.035);

    font-family:
        Manrope,
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}



/* ==========================================================================
   02. ATMOSPHERIC BACKGROUND

   No decorative image.
   No crosshair.
   No grid.
   No animated gradient.

   Only a very subtle static tonal variation.
   ========================================================================== */

.yb-news-closing-v1__atmosphere {

    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    pointer-events:
        none;


    background:

        radial-gradient(
            ellipse at 76% 46%,
            rgba(255,255,255,.035) 0%,
            rgba(255,255,255,.012) 30%,
            rgba(255,255,255,0) 61%
        ),

        linear-gradient(
            90deg,
            rgba(227,30,36,.022) 0%,
            rgba(227,30,36,0) 34%,
            rgba(255,255,255,.012) 100%
        );

}



/* ==========================================================================
   03. MAIN LAYOUT
   ========================================================================== */

.yb-news-closing-v1__inner {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:
        center;


    gap:
        clamp(
            60px,
            8vw,
            140px
        );


    width:
        min(
            calc(100% - 96px),
            var(--yb-closing-max-width)
        );


    min-height:
        250px;


    margin:
        0
        auto;


    padding:
        54px
        0;

}



/* ==========================================================================
   04. COPY
   ========================================================================== */

.yb-news-closing-v1__copy {

    max-width:
        720px;

}



/* Eyebrow -------------------------------------------------------------- */

.yb-news-closing-v1__eyebrow {

    margin-bottom:
        17px;

    color:
        var(--yb-closing-red);

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}



/* Title ---------------------------------------------------------------- */

.yb-news-closing-v1__title {

    max-width:
        680px;

    margin:
        0;

    color:
        var(--yb-closing-ink);


    font-size:
        clamp(
            32px,
            2.7vw,
            43px
        );


    font-weight:
        620;

    line-height:
        1.08;

    letter-spacing:
        -.038em;

}



/* Description ---------------------------------------------------------- */

.yb-news-closing-v1__description {

    max-width:
        590px;


    margin:
        15px
        0
        0;


    color:
        var(--yb-closing-muted);


    font-size:
        14px;

    font-weight:
        420;

    line-height:
        1.58;

    letter-spacing:
        -.008em;

}



/* ==========================================================================
   05. ACTION AREA
   ========================================================================== */

.yb-news-closing-v1__actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;


    gap:
        14px;

}



/* ==========================================================================
   06. BASE ACTION
   ========================================================================== */

.yb-news-closing-v1__action {

    position:
        relative;


    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;


    gap:
        28px;


    min-width:
        174px;

    min-height:
        48px;


    padding:
        0
        17px;


    border-radius:
        0;


    color:
        var(--yb-closing-ink);


    font-size:
        11px;

    font-weight:
        650;

    line-height:
        1;

    letter-spacing:
        -.005em;


    text-decoration:
        none;


    transition:

        border-color
        180ms
        ease,

        background-color
        180ms
        ease,

        color
        180ms
        ease;

}



/* ==========================================================================
   07. PRIMARY ACTION
   ========================================================================== */

.yb-news-closing-v1__action--primary {

    border:
        1px solid
        var(--yb-closing-red);

    background:
        var(--yb-closing-red);

}



/* ==========================================================================
   08. SECONDARY ACTION
   ========================================================================== */

.yb-news-closing-v1__action--secondary {

    border:
        1px solid
        var(--yb-closing-line-strong);

    background:
        rgba(255,255,255,.012);

}



/* ==========================================================================
   09. ARROW
   ========================================================================== */

.yb-news-closing-v1__arrow {

    display:
        inline-block;


    color:
        currentColor;


    font-size:
        14px;

    line-height:
        1;


    transition:
        transform
        180ms
        ease;

}



/* ==========================================================================
   10. DESKTOP HOVER

   Very restrained:
   - no card lift
   - no glow
   - no large shadow
   ========================================================================== */

@media (hover:hover) and (pointer:fine) {

    .yb-news-closing-v1__action:hover
    .yb-news-closing-v1__arrow {

        transform:
            translateX(3px);

    }


    .yb-news-closing-v1__action--primary:hover {

        background:
            #ed2329;

        border-color:
            #ed2329;

    }


    .yb-news-closing-v1__action--secondary:hover {

        border-color:
            rgba(255,255,255,.36);

        background:
            rgba(255,255,255,.035);

    }

}



/* ==========================================================================
   11. KEYBOARD ACCESSIBILITY
   ========================================================================== */

.yb-news-closing-v1__action:focus-visible {

    outline:
        2px solid
        #fff;

    outline-offset:
        4px;

}



/* ==========================================================================
   12. SCROLL REVEAL

   Progressive enhancement.

   Content stays visible when JS is unavailable.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    .yb-news-closing-v1.yb-motion-ready
    .yb-news-closing-v1__eyebrow,

    .yb-news-closing-v1.yb-motion-ready
    .yb-news-closing-v1__title,

    .yb-news-closing-v1.yb-motion-ready
    .yb-news-closing-v1__description,

    .yb-news-closing-v1.yb-motion-ready
    .yb-news-closing-v1__actions {

        opacity:
            0;

        transform:
            translate3d(
                0,
                10px,
                0
            );


        transition:

            opacity
            600ms
            cubic-bezier(.22,.61,.36,1),

            transform
            600ms
            cubic-bezier(.22,.61,.36,1);

    }



    .yb-news-closing-v1.yb-motion-ready.is-inview
    .yb-news-closing-v1__eyebrow,

    .yb-news-closing-v1.yb-motion-ready.is-inview
    .yb-news-closing-v1__title,

    .yb-news-closing-v1.yb-motion-ready.is-inview
    .yb-news-closing-v1__description,

    .yb-news-closing-v1.yb-motion-ready.is-inview
    .yb-news-closing-v1__actions {

        opacity:
            1;

        transform:
            translate3d(
                0,
                0,
                0
            );

    }



    .yb-news-closing-v1.yb-motion-ready
    .yb-news-closing-v1__title {

        transition-delay:
            55ms;

    }


    .yb-news-closing-v1.yb-motion-ready
    .yb-news-closing-v1__description {

        transition-delay:
            105ms;

    }


    .yb-news-closing-v1.yb-motion-ready
    .yb-news-closing-v1__actions {

        transition-delay:
            155ms;

    }

}



/* ==========================================================================
   13. LARGE DESKTOP
   ========================================================================== */

@media (min-width:1600px) {

    .yb-news-closing-v1__inner {

        min-height:
            270px;

        padding:
            58px
            0;

    }


    .yb-news-closing-v1__title {

        font-size:
            45px;

    }

}



/* ==========================================================================
   14. LAPTOP / SMALL DESKTOP
   ========================================================================== */

@media (max-width:1180px) {

    .yb-news-closing-v1__inner {

        width:
            calc(100% - 72px);


        gap:
            52px;


        min-height:
            238px;


        padding:
            48px
            0;

    }


    .yb-news-closing-v1__title {

        font-size:
            clamp(
                30px,
                3vw,
                39px
            );

    }


    .yb-news-closing-v1__actions {

        gap:
            10px;

    }


    .yb-news-closing-v1__action {

        min-width:
            158px;

        gap:
            22px;

    }

}



/* ==========================================================================
   15. TABLET
   ========================================================================== */

@media (max-width:900px) {

    .yb-news-closing-v1__inner {

        grid-template-columns:
            1fr;


        gap:
            35px;


        width:
            calc(100% - 48px);


        min-height:
            auto;


        padding:
            49px
            0
            53px;

    }


    .yb-news-closing-v1__copy {

        max-width:
            650px;

    }


    .yb-news-closing-v1__title {

        max-width:
            620px;

        font-size:
            clamp(
                31px,
                5vw,
                40px
            );

    }


    .yb-news-closing-v1__actions {

        justify-content:
            flex-start;

    }

}



/* ==========================================================================
   16. MOBILE
   ========================================================================== */

@media (max-width:700px) {

    .yb-news-closing-v1__inner {

        width:
            calc(100% - 38px);

        gap:
            30px;

        padding:
            44px
            0
            47px;

    }


    .yb-news-closing-v1__eyebrow {

        margin-bottom:
            14px;

        font-size:
            9px;

    }


    .yb-news-closing-v1__title {

        max-width:
            100%;

        font-size:
            clamp(
                29px,
                8vw,
                36px
            );

        line-height:
            1.09;

    }


    .yb-news-closing-v1__description {

        max-width:
            500px;

        margin-top:
            12px;

        font-size:
            13.5px;

    }


    .yb-news-closing-v1__actions {

        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );


        width:
            100%;

        gap:
            9px;

    }


    .yb-news-closing-v1__action {

        width:
            100%;

        min-width:
            0;

        min-height:
            46px;

        padding:
            0
            14px;

        gap:
            12px;

    }

}



/* ==========================================================================
   17. SMALL MOBILE
   ========================================================================== */

@media (max-width:420px) {

    .yb-news-closing-v1__inner {

        width:
            calc(100% - 32px);

        padding:
            41px
            0
            44px;

    }


    /*
     * Small screens:
     * Stack buttons vertically to preserve readable labels.
     */

    .yb-news-closing-v1__actions {

        grid-template-columns:
            1fr;

    }


    .yb-news-closing-v1__action {

        min-height:
            47px;

    }


    .yb-news-closing-v1__title {

        font-size:
            clamp(
                27px,
                8.1vw,
                34px
            );

    }

}



/* ==========================================================================
   18. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .yb-news-closing-v1 *,
    .yb-news-closing-v1 *::before,
    .yb-news-closing-v1 *::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}


/* ==========================================================================
   LATEST STORIES — SINGLE STORY COMPACT LAYOUT

   When the current page/category contains only one Latest Story,
   avoid stretching the lead card into a full-width oversized 16:9 block.

   Desktop only:
   convert the single lead story into a compact horizontal editorial card.
   Mobile keeps the normal stacked card layout.
   ========================================================================== */

@media (min-width: 901px) {

    .yb-news-latest-v1--count-1 .yb-news-latest-v1__grid {
        width: min(100%, 1180px);
        margin: 30px auto 0;

        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
    }

    .yb-news-latest-v1--count-1
    .yb-news-latest-v1__card--lead {
        display: grid;

        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(340px, .85fr);

        grid-row: auto;

        align-items: stretch;
    }

    .yb-news-latest-v1--count-1
    .yb-news-latest-v1__card--lead
    .yb-news-latest-v1__media {
        width: 100%;
        height: auto;

        aspect-ratio: 16 / 9;
    }

    .yb-news-latest-v1--count-1
    .yb-news-latest-v1__card--lead
    .yb-news-latest-v1__body {
        justify-content: center;

        padding:
            clamp(30px, 3vw, 46px)
            clamp(30px, 3.2vw, 48px);
    }

    .yb-news-latest-v1--count-1
    .yb-news-latest-v1__card--lead
    .yb-news-latest-v1__title {
        max-width: 480px;

        font-size: clamp(27px, 2vw, 35px);
        line-height: 1.08;
    }

    .yb-news-latest-v1--count-1
    .yb-news-latest-v1__card--lead
    .yb-news-latest-v1__excerpt {
        max-width: 480px;

        margin-top: 16px;

        font-size: 13px;
        line-height: 1.58;
    }

    .yb-news-latest-v1--count-1
    .yb-news-latest-v1__card--lead
    .yb-news-latest-v1__read {
        margin-top: 28px;
    }
}


/* ==========================================================================
   LATEST STORIES — TWO STORY BALANCED LAYOUT

   When exactly two Latest Stories are available:
   - use two equal editorial cards
   - remove lead-card stretching
   - normalize image ratios
   - suppress the lead-only excerpt so both cards remain visually balanced

   Mobile keeps the existing stacked layout.
   ========================================================================== */

@media (min-width: 901px) {

    .yb-news-latest-v1--count-2 .yb-news-latest-v1__grid {
        width: min(100%, 1180px);
        margin: 30px auto 0;

        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;

        align-items: start;
    }


    /* Prevent either card from stretching to the height of the other. */
    .yb-news-latest-v1--count-2 .yb-news-latest-v1__card,
    .yb-news-latest-v1--count-2 .yb-news-latest-v1__card--lead {
        grid-row: auto;
        align-self: start;
    }


    /* Use the same media proportion for both cards. */
    .yb-news-latest-v1--count-2
    .yb-news-latest-v1__card
    .yb-news-latest-v1__media,

    .yb-news-latest-v1--count-2
    .yb-news-latest-v1__card:not(.yb-news-latest-v1__card--lead)
    .yb-news-latest-v1__media {
        aspect-ratio: 16 / 9;
    }


    /* Normalize lead-card body spacing to the regular card. */
    .yb-news-latest-v1--count-2
    .yb-news-latest-v1__card--lead
    .yb-news-latest-v1__body {
        padding: 20px 21px 21px;
    }


    /*
     * Only the lead story receives an excerpt from PHP.
     * Hide it in the two-story layout so the cards have
     * equivalent information hierarchy.
     */
    .yb-news-latest-v1--count-2
    .yb-news-latest-v1__card--lead
    .yb-news-latest-v1__excerpt {
        display: none;
    }


    /* Give both story titles the same visual weight. */
    .yb-news-latest-v1--count-2
    .yb-news-latest-v1__title,

    .yb-news-latest-v1--count-2
    .yb-news-latest-v1__card--lead
    .yb-news-latest-v1__title {
        max-width: none;

        font-size: clamp(20px, 1.55vw, 26px);
        line-height: 1.12;
        letter-spacing: -.032em;
    }


    /*
     * Don't use the normal "push to card bottom" behaviour here.
     * Each card should end naturally after its own content.
     */
    .yb-news-latest-v1--count-2
    .yb-news-latest-v1__read {
        margin-top: 22px;
    }
}