/* ── News Featured Slider ── */
:root {
    --clr-primary: #0081c3;
    --clr-white: #ffffff;
    --radius-card: 16px;
    --radius-image: 12px;
}

.news-featured-slider {
    position: relative;

    /* Mobile: tabs inline above the slide */
    .nfs-tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .nfs-tab {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        color: var(--clr-primary);
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1;
        margin-top: .3rem;
        transition: color 0.25s ease, font-size 0.25s ease;

        &.active {
            color: var(--clr-white);
            font-size: 2rem;
            font-weight: 900;

            &::after {
                content: '';
                display: block;
                height: .5rem;
                background: var(--clr-white);
                margin-top: 5px;
                border-radius: 2px;
            }
        }
    }

    .nfs-slides-wrapper {
        position: relative;
    }

    .nfs-slide {
        display: none;
        flex-direction: column;

        &.active {
            display: flex;
        }
    }

    /* Mobile: image stacked above card */
    .nfs-image {
        flex: none;
        width: 80%;
        align-self: center;
        position: relative;
        z-index: 2;
    }

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

    .nfs-card {
        background: var(--clr-primary);
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        padding: 2rem 1.5rem 3rem;
        position: relative;
        z-index: 1;
        color: var(--clr-white);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .nfs-title-link {
        text-decoration: none;
        color: inherit;
    }

    .nfs-title {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--clr-white);
        margin: 0 0 0.75rem;
        line-height: 1.3;
    }

    .nfs-teaser {
        font-size: 0.875rem;
        line-height: 1.65;
        color: rgb(255 255 255 / 0.9);
        margin: 0 0 1.5rem;
    }

    .nfs-more {
        color: var(--clr-white);
        text-decoration: underline;
        font-size: 0.875rem;
        align-self: flex-start;
    }

    .nfs-next-btn {
        position: absolute;
        bottom: 1.5rem;
        right: 1.5rem;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgb(0 0 0 / 0.25);
        border: none;
        color: var(--clr-white);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        transition: background 0.2s ease;
        line-height: 1;

        &:hover {
            background: rgb(0 0 0 / 0.45);
        }
    }

    /* Desktop: absolute nav over image, side-by-side layout */
    @media (min-width: 700px) {
        .nfs-tabs {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            flex-wrap: nowrap;
            align-items: start;
            gap: .75rem;
            margin-bottom: 0;
        }

        .nfs-tab.active {
            font-size: 3rem;
            margin-top: 0;
        }

        .nfs-slide {
            flex-direction: row;
            align-items: flex-end;
        }

        .nfs-image {
            flex: 0 0 51%;
            width: auto;
            align-self: flex-end;
            border-radius: var(--radius-image);
        }

        .nfs-img {
            border-radius: var(--radius-image);
        }

        .nfs-card {
            flex: 1;
            border-radius: var(--radius-card);
            padding: 3.5rem 3rem 2.5rem 18rem;
            margin-left: -15rem;
        }
    }
}