/* =========================================================
   PMAI LAB — PREMIUM NEWS PAGE
   File: assets/css/news.css
   Version: 1.0

   PURPOSE
   ---------------------------------------------------------
   • Premium PMAI Lab News page
   • Featured news section
   • News cards
   • Category badges
   • News filters
   • CTA section
   • Responsive desktop / tablet / mobile
   • Accessible focus states
   • Reduced motion support

   IMPORTANT
   ---------------------------------------------------------
   This file controls ONLY the NEWS PAGE.
   Navbar styling remains inside navbar.css.
========================================================= */


/* =========================================================
   NEWS PAGE VARIABLES
========================================================= */

:root {

    --news-navy: #0b1f3a;

    --news-blue: #2563eb;

    --news-blue-light: #60a5fa;

    --news-blue-soft: #eff6ff;

    --news-purple: #7c3aed;

    --news-text: #0f172a;

    --news-text-soft: #334155;

    --news-muted: #64748b;

    --news-border: #e2e8f0;

    --news-surface: #ffffff;

    --news-surface-soft: #f8fafc;

    --news-shadow:
        0 18px 45px
        rgba(15, 23, 42, 0.08);

    --news-shadow-hover:
        0 24px 55px
        rgba(15, 23, 42, 0.13);

    --news-radius-lg: 24px;

    --news-radius-md: 18px;

    --news-radius-sm: 12px;

}


/* =========================================================
   GLOBAL NEWS CONTAINER
========================================================= */

.news-container {

    width:
        min(
            calc(100% - 40px),
            1240px
        );

    margin:
        0 auto;

}


/* =========================================================
   NEWS HERO
========================================================= */

.news-hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        105px 0 90px;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 48%,
            #f1f5ff 100%
        );

    border-bottom:
        1px solid
        rgba(226, 232, 240, 0.8);

}


/* =========================================================
   HERO DECORATIVE GLOW
========================================================= */

.news-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        480px;

    height:
        480px;

    top:
        -230px;

    right:
        -150px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.12),
            rgba(37, 99, 235, 0)
        );

    pointer-events:
        none;

}


.news-hero::after {

    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    bottom:
        -220px;

    left:
        -160px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(124, 58, 237, 0.08),
            rgba(124, 58, 237, 0)
        );

    pointer-events:
        none;

}


/* =========================================================
   HERO CONTENT WRAPPER
========================================================= */

.news-hero
.news-container {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        60px;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.news-hero-content {

    max-width:
        820px;

}


/* =========================================================
   NEWS EYEBROW
========================================================= */

.news-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        20px;

    color:
        var(--news-blue);

    font-size:
        0.76rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}


/* =========================================================
   LIVE DOT
========================================================= */

.news-live-dot {

    position:
        relative;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #2563eb;

    box-shadow:
        0 0 0 5px
        rgba(37, 99, 235, 0.10);

}


/* =========================================================
   LIVE DOT ANIMATION
========================================================= */

.news-live-dot::after {

    content:
        "";

    position:
        absolute;

    inset:
        -5px;

    border:
        1px solid
        rgba(37, 99, 235, 0.30);

    border-radius:
        50%;

    animation:
        newsPulse 2s
        ease-out
        infinite;

}


@keyframes newsPulse {

    0% {

        transform:
            scale(0.8);

        opacity:
            0.8;
    }

    70% {

        transform:
            scale(1.45);

        opacity:
            0;
    }

    100% {

        opacity:
            0;
    }

}


/* =========================================================
   EYEBROW DIVIDER
========================================================= */

.news-eyebrow-divider {

    color:
        #cbd5e1;

    margin:
        0 2px;

}


/* =========================================================
   HERO TITLE
========================================================= */

.news-hero h1 {

    max-width:
        850px;

    margin:
        0;

    color:
        var(--news-navy);

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.4rem
        );

    font-weight:
        850;

    line-height:
        1.05;

    letter-spacing:
        -0.045em;

}


.news-hero h1 span {

    background:
        linear-gradient(
            90deg,
            #16325c,
            #2563eb,
            #7c3aed
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;

    color:
        transparent;

    -webkit-text-fill-color:
        transparent;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.news-hero-content > p {

    max-width:
        720px;

    margin:
        26px 0 0;

    color:
        var(--news-muted);

    font-size:
        1.08rem;

    line-height:
        1.8;

}


/* =========================================================
   HERO STATUS
========================================================= */

.news-hero-status {

    flex:
        0 0 175px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        175px;

    border:
        1px solid
        rgba(37, 99, 235, 0.15);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.70);

    box-shadow:
        var(--news-shadow);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

}


.news-status-number {

    display:
        block;

    color:
        var(--news-blue);

    font-size:
        3rem;

    font-weight:
        850;

    line-height:
        1;

    letter-spacing:
        -0.05em;

}


.news-status-label {

    margin-top:
        9px;

    color:
        var(--news-muted);

    font-size:
        0.70rem;

    font-weight:
        750;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;

}


/* =========================================================
   NEWS MAIN SECTION
========================================================= */

.news-section {

    padding:
        100px 0;

    background:
        #ffffff;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.news-section-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    margin-bottom:
        38px;

}


.news-section-label {

    margin:
        0 0 10px;

    color:
        var(--news-blue);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.news-section-header h2 {

    margin:
        0;

    color:
        var(--news-navy);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:
        820;

    line-height:
        1.1;

    letter-spacing:
        -0.035em;

}


.news-section-description {

    max-width:
        470px;

    margin:
        0;

    color:
        var(--news-muted);

    font-size:
        0.96rem;

    line-height:
        1.7;

}


/* =========================================================
   NEWS FILTERS
========================================================= */

.news-filters {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        36px;

}


.news-filter {

    appearance:
        none;

    border:
        1px solid
        var(--news-border);

    border-radius:
        999px;

    padding:
        9px 17px;

    background:
        #ffffff;

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

    font-family:
        inherit;

    font-size:
        0.80rem;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.news-filter:hover {

    border-color:
        #bfdbfe;

    background:
        var(--news-blue-soft);

    color:
        var(--news-blue);

    transform:
        translateY(-1px);

}


.news-filter.active {

    border-color:
        var(--news-navy);

    background:
        var(--news-navy);

    color:
        #ffffff;

    box-shadow:
        0 7px 18px
        rgba(11, 31, 58, 0.14);

}


/* =========================================================
   FEATURED NEWS
========================================================= */

.news-featured {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, 0.55fr);

    min-height:
        360px;

    margin-bottom:
        28px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(37, 99, 235, 0.13);

    border-radius:
        var(--news-radius-lg);

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 60%,
            #eef4ff 100%
        );

    box-shadow:
        var(--news-shadow);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.news-featured:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--news-shadow-hover);

}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.news-featured-content {

    position:
        relative;

    z-index:
        2;

    padding:
        48px;

}


.news-featured-label {

    margin:
        22px 0 10px;

    color:
        var(--news-muted);

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

}


.news-featured h3 {

    max-width:
        680px;

    margin:
        0;

    color:
        var(--news-navy);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.5rem
        );

    font-weight:
        820;

    line-height:
        1.15;

    letter-spacing:
        -0.035em;

}


.news-featured-description {

    max-width:
        650px;

    margin:
        18px 0 25px;

    color:
        var(--news-muted);

    font-size:
        0.98rem;

    line-height:
        1.75;

}


/* =========================================================
   FEATURED VISUAL
========================================================= */

.news-featured-visual {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    min-height:
        300px;

    background:
        linear-gradient(
            135deg,
            #0b1f3a,
            #16325c 45%,
            #2563eb
        );

}


/* =========================================================
   FEATURED VISUAL GLOW
========================================================= */

.news-featured-visual::before {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    border:
        1px solid
        rgba(255,255,255,0.16);

    border-radius:
        50%;

    box-shadow:
        0 0 0 35px
        rgba(255,255,255,0.035),
        0 0 0 70px
        rgba(255,255,255,0.025);

}


/* =========================================================
   FEATURED VISUAL SYMBOLS
========================================================= */

.news-visual-symbol {

    position:
        absolute;

    color:
        rgba(255,255,255,0.86);

    font-size:
        1.5rem;

    font-weight:
        800;

    text-shadow:
        0 5px 20px
        rgba(0,0,0,0.20);

    animation:
        newsFloat 5s
        ease-in-out
        infinite;

}


.news-visual-symbol:nth-child(1) {

    top:
        24%;

    left:
        27%;

}


.news-visual-symbol:nth-child(2) {

    top:
        64%;

    left:
        21%;

    animation-delay:
        -1.5s;

}


.news-visual-symbol:nth-child(3) {

    top:
        31%;

    right:
        24%;

    font-size:
        2.1rem;

    animation-delay:
        -2.4s;

}


.news-visual-symbol:nth-child(4) {

    bottom:
        20%;

    right:
        26%;

    animation-delay:
        -3.2s;

}


@keyframes newsFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-12px)
            rotate(4deg);

    }

}


/* =========================================================
   NEWS META
========================================================= */

.news-card-meta,
.news-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

}


.news-card-meta time,
.news-card-top time {

    color:
        var(--news-muted);

    font-size:
        0.72rem;

    font-weight:
        650;

    white-space:
        nowrap;

}


/* =========================================================
   NEWS CATEGORY BADGES
========================================================= */

.news-category {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        fit-content;

    padding:
        5px 9px;

    border:
        1px solid
        transparent;

    border-radius:
        999px;

    font-size:
        0.63rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    line-height:
        1;

}


/* =========================================================
   SEMINAR CATEGORY
========================================================= */

.news-category.seminar {

    color:
        #1d4ed8;

    background:
        #eff6ff;

    border-color:
        #dbeafe;

}


/* =========================================================
   COURSE CATEGORY
========================================================= */

.news-category.course {

    color:
        #047857;

    background:
        #ecfdf5;

    border-color:
        #d1fae5;

}


/* =========================================================
   RESEARCH CATEGORY
========================================================= */

.news-category.research {

    color:
        #6d28d9;

    background:
        #f5f3ff;

    border-color:
        #ede9fe;

}


/* =========================================================
   YOUTUBE CATEGORY
========================================================= */

.news-category.youtube {

    color:
        #b91c1c;

    background:
        #fef2f2;

    border-color:
        #fee2e2;

}


/* =========================================================
   BLOG CATEGORY
========================================================= */

.news-category.blog {

    color:
        #b45309;

    background:
        #fffbeb;

    border-color:
        #fef3c7;

}


/* =========================================================
   NEWS GRID
========================================================= */

.news-grid {

    display:
        grid;

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

    gap:
        22px;

}


/* =========================================================
   NEWS CARD
========================================================= */

.news-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        350px;

    padding:
        28px;

    border:
        1px solid
        var(--news-border);

    border-radius:
        var(--news-radius-md);

    background:
        #ffffff;

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, 0.045);

    transition:
        transform 0.30s ease,
        border-color 0.30s ease,
        box-shadow 0.30s ease;

}


.news-card:hover {

    transform:
        translateY(-6px);

    border-color:
        #cbd5e1;

    box-shadow:
        var(--news-shadow-hover);

}


/* =========================================================
   NEWS CARD ICON
========================================================= */

.news-card-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        54px;

    height:
        54px;

    margin:
        25px 0 22px;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #dbeafe
        );

    color:
        var(--news-blue);

    font-size:
        1.2rem;

    font-weight:
        850;

    box-shadow:
        inset 0 0 0 1px
        rgba(37, 99, 235, 0.07);

}


/* =========================================================
   NEWS CARD TITLE
========================================================= */

.news-card h3 {

    margin:
        0 0 13px;

    color:
        var(--news-navy);

    font-size:
        1.22rem;

    font-weight:
        790;

    line-height:
        1.3;

    letter-spacing:
        -0.02em;

}


/* =========================================================
   NEWS CARD DESCRIPTION
========================================================= */

.news-card p {

    margin:
        0;

    color:
        var(--news-muted);

    font-size:
        0.88rem;

    line-height:
        1.7;

}


/* =========================================================
   NEWS READ MORE
========================================================= */

.news-read-more {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    width:
        fit-content;

    margin-top:
        auto;

    padding-top:
        24px;

    color:
        var(--news-blue);

    font-size:
        0.80rem;

    font-weight:
        750;

    text-decoration:
        none;

    transition:
        color 0.25s ease,
        gap 0.25s ease;

}


.news-read-more:hover {

    color:
        var(--news-purple);

    gap:
        12px;

}


/* =========================================================
   COMING SOON
========================================================= */

.news-coming {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        #f8fafc;

    color:
        #64748b;

    font-size:
        0.59rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;

}


/* =========================================================
   NEWS CTA
========================================================= */

.news-cta {

    padding:
        0 0 100px;

    background:
        #ffffff;

}


.news-cta-inner {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        45px;

    padding:
        55px 60px;

    overflow:
        hidden;

    border-radius:
        var(--news-radius-lg);

    background:
        linear-gradient(
            135deg,
            #0b1f3a,
            #16325c 55%,
            #1e4f91
        );

    box-shadow:
        0 24px 55px
        rgba(11, 31, 58, 0.18);

}


.news-cta-inner::after {

    content:
        "";

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    right:
        -130px;

    top:
        -180px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius:
        50%;

    box-shadow:
        0 0 0 45px
        rgba(255,255,255,0.025),
        0 0 0 90px
        rgba(255,255,255,0.02);

    pointer-events:
        none;

}


.news-cta-inner .news-section-label {

    color:
        #93c5fd;

}


.news-cta-inner h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.4rem
        );

    font-weight:
        820;

    line-height:
        1.15;

    letter-spacing:
        -0.03em;

}


.news-cta-inner p {

    max-width:
        580px;

    margin:
        14px 0 0;

    color:
        rgba(255,255,255,0.70);

    font-size:
        0.92rem;

    line-height:
        1.7;

}


/* =========================================================
   CTA BUTTONS
========================================================= */

.news-cta-buttons {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    flex-shrink:
        0;

}


.news-cta-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        45px;

    padding:
        10px 17px;

    border-radius:
        10px;

    font-size:
        0.79rem;

    font-weight:
        750;

    text-decoration:
        none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;

}


.news-cta-button.primary {

    border:
        1px solid
        #ffffff;

    background:
        #ffffff;

    color:
        var(--news-navy);

}


.news-cta-button.secondary {

    border:
        1px solid
        rgba(255,255,255,0.28);

    background:
        rgba(255,255,255,0.08);

    color:
        #ffffff;

}


.news-cta-button:hover {

    transform:
        translateY(-2px);

}


.news-cta-button.primary:hover {

    background:
        #eff6ff;

}


.news-cta-button.secondary:hover {

    background:
        rgba(255,255,255,0.15);

    border-color:
        rgba(255,255,255,0.45);

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.news-filter:focus-visible,
.news-read-more:focus-visible,
.news-cta-button:focus-visible {

    outline:
        3px solid
        rgba(37, 99, 235, 0.30);

    outline-offset:
        3px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {


    .news-hero {

        padding:
            85px 0 75px;

    }


    .news-hero
    .news-container {

        gap:
            35px;

    }


    .news-hero-status {

        flex-basis:
            145px;

        min-height:
            145px;

    }


    .news-status-number {

        font-size:
            2.5rem;

    }


    .news-grid {

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

    }


    .news-featured {

        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(230px, 0.8fr);

    }


    .news-featured-content {

        padding:
            38px;

    }


    .news-cta-inner {

        padding:
            45px;

    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 800px) {


    .news-container {

        width:
            min(
                calc(100% - 32px),
                1240px
            );

    }


    .news-hero
    .news-container {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .news-hero-status {

        align-self:
            flex-start;

        width:
            115px;

        min-height:
            115px;

        flex-basis:
            auto;

    }


    .news-status-number {

        font-size:
            2rem;

    }


    .news-status-label {

        font-size:
            0.57rem;

    }


    .news-featured {

        grid-template-columns:
            1fr;

    }


    .news-featured-visual {

        min-height:
            220px;

        order:
            -1;

    }


    .news-featured-content {

        padding:
            32px;

    }


    .news-section-header {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            15px;

    }


    .news-cta-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .news-cta-buttons {

        width:
            100%;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {


    .news-container {

        width:
            min(
                calc(100% - 28px),
                1240px
            );

    }


    .news-hero {

        padding:
            65px 0 60px;

    }


    .news-hero h1 {

        font-size:
            clamp(
                2.15rem,
                10vw,
                3.2rem
            );

    }


    .news-hero-content > p {

        font-size:
            0.95rem;

        line-height:
            1.7;

    }


    .news-section {

        padding:
            70px 0;

    }


    .news-section-header h2 {

        font-size:
            2rem;

    }


    .news-filters {

        gap:
            7px;

    }


    .news-filter {

        padding:
            8px 13px;

        font-size:
            0.73rem;

    }


    .news-grid {

        grid-template-columns:
            1fr;

        gap:
            17px;

    }


    .news-card {

        min-height:
            320px;

        padding:
            24px;

    }


    .news-featured {

        margin-bottom:
            18px;

    }


    .news-featured-content {

        padding:
            27px;

    }


    .news-featured h3 {

        font-size:
            1.7rem;

    }


    .news-featured-description {

        font-size:
            0.89rem;

    }


    .news-featured-visual {

        min-height:
            190px;

    }


    .news-cta {

        padding:
            0 0 70px;

    }


    .news-cta-inner {

        padding:
            35px 27px;

        border-radius:
            20px;

    }


    .news-cta-buttons {

        flex-direction:
            column;

    }


    .news-cta-button {

        width:
            100%;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {


    .news-hero {

        padding:
            55px 0 50px;

    }


    .news-eyebrow {

        font-size:
            0.66rem;

    }


    .news-hero h1 {

        font-size:
            2rem;

    }


    .news-hero-content > p {

        font-size:
            0.88rem;

    }


    .news-status-number {

        font-size:
            1.75rem;

    }


    .news-status-label {

        font-size:
            0.52rem;

    }


    .news-featured-content {

        padding:
            24px;

    }


    .news-card {

        padding:
            22px;

    }


    .news-card h3 {

        font-size:
            1.12rem;

    }


    .news-card p {

        font-size:
            0.84rem;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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


    .news-live-dot::after,
    .news-visual-symbol {

        animation:
            none;

    }


    .news-featured,
    .news-card,
    .news-filter,
    .news-read-more,
    .news-cta-button {

        transition:
            none;

    }

}