/* =========================================================
   PMAI LAB — PREMIUM HERO NEWS
   File: assets/css/hero-news.css
   Version: 2.0

   Purpose:
   • Premium homepage news card
   • Responsive desktop / tablet / mobile
   • Animated news transitions
   • Category badges
   • Interactive news dots
   • Glass / academic technology design
   • Works with hero-news.js
   • Accessible reduced-motion support
========================================================= */


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

.hero-visual {

    position: relative;

    width: 100%;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    isolation: isolate;
}


/* =========================================================
   SOFT BACKGROUND GLOW
========================================================= */

.hero-visual::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.12) 0%,
            rgba(99, 102, 241, 0.06) 38%,
            transparent 72%
        );

    filter: blur(10px);

    z-index: -1;

    pointer-events: none;
}


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

.hero-news-card {

    position: relative;

    width: min(100%, 500px);

    min-height: 405px;

    padding: 26px 27px 21px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.96)
        );

    border:
        1px solid
        rgba(203, 213, 225, 0.85);

    border-radius:
        24px;

    box-shadow:
        0 25px 60px
        rgba(15, 23, 42, 0.10),

        0 8px 24px
        rgba(37, 99, 235, 0.06);

    backdrop-filter:
        blur(20px);

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

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


/* =========================================================
   TOP ACCENT LINE
========================================================= */

.hero-news-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 28px;

    right: 28px;

    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #1d4ed8,
            #3b82f6,
            #7c3aed
        );

    opacity: 0.85;
}


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

.hero-news-card::after {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    right: -90px;

    top: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(96, 165, 250, 0.13),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   CARD HOVER
========================================================= */

.hero-news-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(147, 197, 253, 0.9);

    box-shadow:
        0 30px 70px
        rgba(15, 23, 42, 0.13),

        0 10px 30px
        rgba(37, 99, 235, 0.09);
}


/* =========================================================
   NEWS HEADER
========================================================= */

.hero-news-header {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 22px;
}


/* =========================================================
   NEWS HEADING
========================================================= */

.hero-news-heading {

    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;
}


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

.hero-news-live-dot {

    position: relative;

    width: 8px;

    height: 8px;

    flex:
        0 0 8px;

    border-radius: 50%;

    background:
        #2563eb;

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


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

.hero-news-live-dot::after {

    content: "";

    position: absolute;

    inset: -4px;

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

    border-radius: 50%;

    animation:
        heroNewsPulse
        2s
        ease-out
        infinite;
}


@keyframes heroNewsPulse {

    0% {

        transform:
            scale(0.75);

        opacity:
            0.8;
    }

    70% {

        transform:
            scale(1.35);

        opacity:
            0;
    }

    100% {

        transform:
            scale(1.35);

        opacity:
            0;
    }
}


/* =========================================================
   NEWS LABEL
========================================================= */

.hero-news-label {

    color:
        #0f172a;

    font-size:
        0.70rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    line-height:
        1.2;

    white-space:
        nowrap;
}


/* =========================================================
   NEWS STATUS
========================================================= */

.hero-news-status {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        27px;

    padding:
        5px 10px;

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

    border-radius:
        999px;

    background:
        rgba(239, 246, 255, 0.85);

    color:
        #2563eb;

    font-size:
        0.64rem;

    font-weight:
        750;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


/* =========================================================
   NEWS LIST
========================================================= */

.hero-news-list {

    position:
        relative;

    flex:
        1;

    min-height:
        280px;
}


/* =========================================================
   NEWS ITEM
========================================================= */

.hero-news-item {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(12px);

    pointer-events:
        none;

    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        visibility 0.45s ease;
}


/* =========================================================
   ACTIVE NEWS ITEM
========================================================= */

.hero-news-item.active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

    pointer-events:
        auto;
}


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

.hero-news-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        17px;
}


/* =========================================================
   CATEGORY BADGE
========================================================= */

.hero-news-category {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        27px;

    padding:
        5px 10px;

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

    border-radius:
        7px;

    background:
        #eff6ff;

    color:
        #2563eb;

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    line-height:
        1;

    white-space:
        nowrap;
}


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

.hero-news-category.seminar {

    background:
        #eff6ff;

    color:
        #1d4ed8;

    border-color:
        #dbeafe;
}


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

.hero-news-category.course {

    background:
        #f0fdf4;

    color:
        #15803d;

    border-color:
        #dcfce7;
}


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

.hero-news-category.research {

    background:
        #f5f3ff;

    color:
        #6d28d9;

    border-color:
        #ede9fe;
}


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

.hero-news-category.youtube {

    background:
        #fef2f2;

    color:
        #b91c1c;

    border-color:
        #fee2e2;
}


/* =========================================================
   NEWS DATE
========================================================= */

.hero-news-meta time {

    color:
        #64748b;

    font-size:
        0.70rem;

    font-weight:
        650;

    letter-spacing:
        0.02em;

    white-space:
        nowrap;
}


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

.hero-news-item h3 {

    max-width:
        420px;

    margin:
        0 0 13px;

    color:
        #0f172a;

    font-size:
        clamp(
            1.55rem,
            2.4vw,
            2rem
        );

    font-weight:
        800;

    letter-spacing:
        -0.035em;

    line-height:
        1.13;
}


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

.hero-news-item p {

    max-width:
        425px;

    margin:
        0;

    color:
        #64748b;

    font-size:
        0.88rem;

    font-weight:
        450;

    line-height:
        1.72;
}


/* =========================================================
   NEWS LINK
========================================================= */

.hero-news-link {

    align-self:
        flex-start;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        auto;

    padding:
        8px 0;

    color:
        #1d4ed8;

    font-size:
        0.82rem;

    font-weight:
        750;

    letter-spacing:
        -0.01em;

    text-decoration:
        none;

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


/* =========================================================
   NEWS LINK ARROW
========================================================= */

.hero-news-link span {

    display:
        inline-block;

    font-size:
        1rem;

    line-height:
        1;

    transition:
        transform 0.25s ease;
}


.hero-news-link:hover {

    color:
        #1e40af;

    gap:
        11px;
}


.hero-news-link:hover span {

    transform:
        translateX(3px);
}


/* =========================================================
   NEWS FOOTER
========================================================= */

.hero-news-footer {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        19px;

    padding-top:
        17px;

    border-top:
        1px solid
        rgba(226, 232, 240, 0.90);
}


/* =========================================================
   NEWS DOTS
========================================================= */

.hero-news-dots {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


/* =========================================================
   NEWS DOT BUTTON
========================================================= */

.hero-news-dot {

    appearance:
        none;

    -webkit-appearance:
        none;

    width:
        7px;

    height:
        7px;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        #cbd5e1;

    cursor:
        pointer;

    transition:
        width 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   ACTIVE DOT
========================================================= */

.hero-news-dot.active {

    width:
        23px;

    background:
        #2563eb;
}


/* =========================================================
   DOT HOVER
========================================================= */

.hero-news-dot:hover {

    transform:
        scale(1.25);

    background:
        #60a5fa;
}


/* =========================================================
   ALL NEWS LINK
========================================================= */

.hero-news-all {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #334155;

    font-size:
        0.74rem;

    font-weight:
        750;

    text-decoration:
        none;

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


.hero-news-all span {

    font-size:
        0.95rem;

    transition:
        transform 0.25s ease;
}


.hero-news-all:hover {

    color:
        #2563eb;

    gap:
        10px;
}


.hero-news-all:hover span {

    transform:
        translateX(3px);
}


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

@media (max-width: 1100px) {

    .hero-news-card {

        width:
            min(100%, 460px);

        min-height:
            395px;

        padding:
            24px 24px 20px;
    }


    .hero-news-item h3 {

        font-size:
            1.55rem;
    }

}


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

@media (max-width: 900px) {

    .hero-visual {

        margin-top:
            12px;
    }


    .hero-news-card {

        width:
            100%;

        max-width:
            600px;

        min-height:
            390px;

        border-radius:
            21px;
    }


    .hero-news-list {

        min-height:
            265px;
    }

}


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

@media (max-width: 600px) {

    .hero-news-card {

        min-height:
            385px;

        padding:
            22px 20px 18px;

        border-radius:
            19px;
    }


    .hero-news-card::before {

        left:
            21px;

        right:
            21px;
    }


    .hero-news-header {

        margin-bottom:
            19px;
    }


    .hero-news-label {

        font-size:
            0.63rem;

        letter-spacing:
            0.11em;
    }


    .hero-news-status {

        min-height:
            25px;

        padding:
            4px 8px;

        font-size:
            0.58rem;
    }


    .hero-news-list {

        min-height:
            270px;
    }


    .hero-news-meta {

        margin-bottom:
            15px;
    }


    .hero-news-category {

        min-height:
            25px;

        padding:
            5px 8px;

        font-size:
            0.57rem;
    }


    .hero-news-meta time {

        font-size:
            0.65rem;
    }


    .hero-news-item h3 {

        max-width:
            100%;

        font-size:
            1.42rem;

        line-height:
            1.17;

        margin-bottom:
            11px;
    }


    .hero-news-item p {

        font-size:
            0.82rem;

        line-height:
            1.65;
    }


    .hero-news-footer {

        margin-top:
            15px;

        padding-top:
            14px;
    }


    .hero-news-link {

        font-size:
            0.78rem;
    }


    .hero-news-all {

        font-size:
            0.70rem;
    }

}


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

@media (max-width: 420px) {

    .hero-news-card {

        min-height:
            375px;

        padding:
            20px 17px 16px;
    }


    .hero-news-header {

        gap:
            8px;

        margin-bottom:
            17px;
    }


    .hero-news-heading {

        gap:
            7px;
    }


    .hero-news-live-dot {

        width:
            7px;

        height:
            7px;

        flex-basis:
            7px;
    }


    .hero-news-label {

        font-size:
            0.57rem;
    }


    .hero-news-status {

        font-size:
            0.54rem;
    }


    .hero-news-list {

        min-height:
            270px;
    }


    .hero-news-meta {

        flex-wrap:
            wrap;

        gap:
            7px;
    }


    .hero-news-item h3 {

        font-size:
            1.28rem;
    }


    .hero-news-item p {

        font-size:
            0.78rem;
    }


    .hero-news-footer {

        gap:
            10px;
    }


    .hero-news-dot.active {

        width:
            19px;
    }

}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.hero-news-link:focus-visible,
.hero-news-all:focus-visible,
.hero-news-dot:focus-visible {

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

    outline-offset:
        4px;

    border-radius:
        5px;
}


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

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

    .hero-news-card,
    .hero-news-item,
    .hero-news-link,
    .hero-news-all,
    .hero-news-dot {

        transition:
            none;
    }


    .hero-news-live-dot::after {

        animation:
            none;
    }


    .hero-news-card:hover {

        transform:
            none;
    }


    .hero-news-link:hover,
    .hero-news-all:hover {

        gap:
            initial;
    }

}