/* =========================================================
   PEWJAY OFFICIAL
   NEWS.CSS
   SPECIAL CINEMA NEWSPAPER EDITION
   CINEMATIC BLUE NIGHT / EDITORIAL STYLE
   ========================================================= */


/* =========================================================
   RESET / BASE
   ========================================================= */

.news-page,
.news-page * {
    box-sizing: border-box;
}


.news-page {

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    padding:
        150px 6vw
        110px;

    background:
        #020914;

    color:
        #ffffff;

}


/* =========================================================
   BACKGROUND ATMOSPHERE
   ========================================================= */

.news-page::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(40, 170, 240, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 45%,
            rgba(30, 130, 210, 0.08),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #020914 0%,
            #03111d 50%,
            #020914 100%
        );

}


.news-page::after {

    content: "";

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.12;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size:
        100% 5px;

}


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

.news-header {

    position: relative;

    z-index: 2;

    width:
        min(1150px, 100%);

    margin:
        0 auto;

    padding-bottom:
        32px;

    border-bottom:
        1px solid
        rgba(100, 210, 255, 0.25);

}


.news-kicker {

    display: block;

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

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        5px;

}


.news-header h1 {

    margin-top:
        18px;

    color:
        #ffffff;

    font-size:
        clamp(
            70px,
            13vw,
            170px
        );

    font-weight:
        900;

    line-height:
        0.78;

    letter-spacing:
        -9px;

}


.news-header-description {

    width:
        min(570px, 100%);

    margin-top:
        30px;

    color:
        rgba(205, 230, 242, 0.50);

    font-size:
        11px;

    line-height:
        1.9;

}


.news-header-line {

    width:
        100%;

    height:
        1px;

    margin-top:
        35px;

    background:
        linear-gradient(
            90deg,
            #65d4ff,
            rgba(100, 210, 255, 0.10),
            transparent
        );

}


.news-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        25px;

    color:
        rgba(110, 210, 255, 0.40);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


/* =========================================================
   MAIN HEADLINE
   ========================================================= */

.news-headline {

    position:
        relative;

    z-index:
        2;

    width:
        min(1150px, 100%);

    margin:
        85px auto 65px;

}


.news-category {

    display:
        inline-block;

    padding:
        7px 12px;

    border:
        1px solid
        rgba(100, 210, 255, 0.25);

    color:
        rgba(100, 210, 255, 0.75);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        3px;

}


.news-headline h2 {

    max-width:
        1000px;

    margin-top:
        25px;

    color:
        #ffffff;

    font-size:
        clamp(
            45px,
            8vw,
            105px
        );

    font-weight:
        900;

    line-height:
        0.84;

    letter-spacing:
        -6px;

}


.news-headline h3 {

    margin-top:
        20px;

    color:
        #65d4ff;

    font-size:
        clamp(
            16px,
            2.5vw,
            28px
        );

    font-weight:
        800;

    letter-spacing:
        -1px;

}


.news-headline p {

    max-width:
        600px;

    margin-top:
        25px;

    color:
        rgba(210, 235, 245, 0.50);

    font-size:
        11px;

    line-height:
        1.9;

}


/* =========================================================
   POSTER
   ========================================================= */

.news-hero-poster {

    position:
        relative;

    z-index:
        2;

    width:
        min(1150px, 100%);

    margin:
        0 auto 130px;

}


.news-poster-frame {

    position:
        relative;

    width:
        100%;

    max-height:
        700px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(100, 210, 255, 0.18);

    background:
        #030b13;

}


.news-poster-frame::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0, 8, 16, 0.60)
        );

}


.news-poster-frame img {

    display:
        block;

    width:
        100%;

    max-height:
        700px;

    object-fit:
        cover;

    transition:
        transform 0.8s
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );

}


.news-hero-poster:hover
.news-poster-frame img {

    transform:
        scale(1.025);

}


.news-poster-caption {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        16px 0;

    border-bottom:
        1px solid
        rgba(100, 210, 255, 0.16);

}


.news-poster-caption strong {

    color:
        #ffffff;

    font-size:
        8px;

    letter-spacing:
        2px;

}


.news-poster-caption span {

    color:
        rgba(100, 210, 255, 0.55);

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


/* =========================================================
   MOVIE SECTION
   ========================================================= */

.news-movie {

    position:
        relative;

    z-index:
        2;

    width:
        min(1150px, 100%);

    margin:
        0 auto 140px;

}


.news-section-heading {

    display:
        grid;

    grid-template-columns:
        70px 1fr;

    gap:
        25px;

    padding-bottom:
        25px;

    border-bottom:
        1px solid
        rgba(100, 210, 255, 0.18);

}


.news-section-heading > span {

    padding-top:
        7px;

    color:
        rgba(100, 210, 255, 0.40);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        3px;

}


.news-section-heading small {

    color:
        rgba(100, 210, 255, 0.55);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        3px;

}


.news-section-heading h2 {

    margin-top:
        9px;

    color:
        #ffffff;

    font-size:
        clamp(
            35px,
            6vw,
            75px
        );

    font-weight:
        900;

    line-height:
        0.9;

    letter-spacing:
        -4px;

}


.news-section-heading p {

    margin-top:
        12px;

    color:
        #65d4ff;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        3px;

}


/* =========================================================
   MOVIE 1 GRID
   ========================================================= */

.news-grid {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        55px;

    margin-top:
        50px;

}


/* =========================================================
   IMAGES
   ========================================================= */

.news-image {

    margin:
        0;

}


.news-image img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

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

    filter:
        saturate(0.9);

    transition:
        transform 0.6s ease,
        filter 0.6s ease;

}


.news-image:hover img {

    transform:
        scale(1.02);

    filter:
        saturate(1.1);

}


.news-image figcaption {

    margin-top:
        12px;

    color:
        rgba(100, 210, 255, 0.45);

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


/* =========================================================
   ARTICLE
   ========================================================= */

.news-article {

    column-count:
        1;

}


.news-article h3 {

    margin-bottom:
        25px;

    color:
        #ffffff;

    font-size:
        28px;

    font-weight:
        900;

    letter-spacing:
        -1px;

}


.news-article p {

    margin-bottom:
        18px;

    color:
        rgba(210, 235, 245, 0.52);

    font-size:
        11px;

    line-height:
        1.95;

}


/* =========================================================
   COLUMNS
   ========================================================= */

.news-columns {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        1px;

    margin-top:
        60px;

    border-top:
        1px solid
        rgba(100, 210, 255, 0.16);

    border-bottom:
        1px solid
        rgba(100, 210, 255, 0.16);

}


.news-columns article {

    padding:
        40px;

}


.news-columns article + article {

    border-left:
        1px solid
        rgba(100, 210, 255, 0.16);

}


.news-columns span,
.news-long-article > span {

    color:
        rgba(100, 210, 255, 0.55);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        3px;

}


.news-columns h3 {

    margin-top:
        12px;

    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        900;

}


.news-columns p {

    margin-top:
        15px;

    color:
        rgba(210, 235, 245, 0.45);

    font-size:
        10px;

    line-height:
        1.85;

}


/* =========================================================
   MOVIE 2 FEATURE IMAGE
   ========================================================= */

.news-feature-image {

    margin-top:
        50px;

    overflow:
        hidden;

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

}


.news-feature-image img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 8;

    object-fit:
        cover;

    transition:
        transform 0.8s ease;

}


.news-feature-image:hover img {

    transform:
        scale(1.025);

}


/* =========================================================
   MOVIE 3 PHOTO PAIR
   ========================================================= */

.news-photo-pair {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

    margin-top:
        50px;

}


.news-photo-pair figure {

    position:
        relative;

    margin:
        0;

    overflow:
        hidden;

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

}


.news-photo-pair img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    object-fit:
        cover;

    transition:
        transform 0.7s ease;

}


.news-photo-pair figure:hover img {

    transform:
        scale(1.04);

}


.news-photo-pair figcaption {

    position:
        absolute;

    left:
        18px;

    bottom:
        16px;

    z-index:
        2;

    color:
        #ffffff;

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        2px;

    text-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.8);

}


/* =========================================================
   LONG ARTICLE
   ========================================================= */

.news-long-article {

    max-width:
        850px;

    margin:
        70px auto 0;

}


.news-long-article h3 {

    margin-top:
        12px;

    color:
        #ffffff;

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

    font-weight:
        900;

    line-height:
        0.9;

    letter-spacing:
        -3px;

}


.news-long-article p {

    margin-top:
        25px;

    color:
        rgba(210, 235, 245, 0.52);

    font-size:
        11px;

    line-height:
        2;

}


/* =========================================================
   RELEASE BOX
   ========================================================= */

.news-release {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        70px;

    padding:
        50px 20px;

    text-align:
        center;

    border:
        1px solid
        rgba(100, 210, 255, 0.18);

    background:
        linear-gradient(
            180deg,
            rgba(50, 170, 230, 0.07),
            rgba(2, 15, 28, 0.20)
        );

}


.news-release span {

    color:
        rgba(100, 210, 255, 0.55);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        4px;

}


.news-release strong {

    margin-top:
        15px;

    color:
        #ffffff;

    font-size:
        clamp(
            30px,
            5vw,
            55px
        );

    font-weight:
        900;

    letter-spacing:
        -2px;

}


.news-release p {

    margin-top:
        12px;

    color:
        #65d4ff;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


/* =========================================================
   SPECIAL FEATURE
   ========================================================= */

.news-special {

    position:
        relative;

    z-index:
        2;

    width:
        min(1150px, 100%);

    margin:
        0 auto 120px;

    padding:
        80px 0;

    border-top:
        1px solid
        rgba(100, 210, 255, 0.18);

    border-bottom:
        1px solid
        rgba(100, 210, 255, 0.18);

}


.news-special-heading span {

    color:
        rgba(100, 210, 255, 0.55);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        4px;

}


.news-special-heading h2 {

    margin-top:
        15px;

    color:
        #ffffff;

    font-size:
        clamp(
            38px,
            6vw,
            75px
        );

    font-weight:
        900;

    line-height:
        0.9;

    letter-spacing:
        -4px;

}


.news-special-heading p {

    max-width:
        450px;

    margin-top:
        20px;

    color:
        rgba(210, 235, 245, 0.45);

    font-size:
        10px;

    line-height:
        1.8;

}


.news-special-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        1px;

    margin-top:
        55px;

    border:
        1px solid
        rgba(100, 210, 255, 0.14);

}


.news-special-grid article {

    padding:
        45px;

}


.news-special-grid article + article {

    border-left:
        1px solid
        rgba(100, 210, 255, 0.14);

}


.news-special-grid span {

    color:
        rgba(100, 210, 255, 0.50);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        3px;

}


.news-special-grid h3 {

    margin-top:
        12px;

    color:
        #ffffff;

    font-size:
        24px;

    font-weight:
        900;

}


.news-special-grid p {

    margin-top:
        15px;

    color:
        rgba(210, 235, 245, 0.48);

    font-size:
        10px;

    line-height:
        1.85;

}


/* =========================================================
   LEGACY
   ========================================================= */

.news-legacy {

    margin-top:
        1px;

    padding:
        55px 45px;

    border:
        1px solid
        rgba(100, 210, 255, 0.14);

}


.news-legacy span {

    color:
        rgba(100, 210, 255, 0.50);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        3px;

}


.news-legacy h3 {

    max-width:
        700px;

    margin-top:
        14px;

    color:
        #ffffff;

    font-size:
        clamp(
            30px,
            5vw,
            55px
        );

    font-weight:
        900;

    line-height:
        0.95;

    letter-spacing:
        -3px;

}


.news-legacy p {

    max-width:
        750px;

    margin-top:
        25px;

    color:
        rgba(210, 235, 245, 0.48);

    font-size:
        10px;

    line-height:
        1.9;

}


/* =========================================================
   PEWJAY FEATURE
   ========================================================= */

.news-pewjay {

    position:
        relative;

    z-index:
        2;

    width:
        min(850px, 100%);

    margin:
        0 auto 120px;

    text-align:
        center;

}


.news-pewjay > span {

    color:
        rgba(100, 210, 255, 0.60);

    font-size:
        6px;

    font-weight:
        900;

    letter-spacing:
        4px;

}


.news-pewjay h2 {

    margin-top:
        18px;

    color:
        #ffffff;

    font-size:
        clamp(
            38px,
            6vw,
            70px
        );

    font-weight:
        900;

    line-height:
        0.9;

    letter-spacing:
        -4px;

}


.news-pewjay p {

    max-width:
        650px;

    margin:
        25px auto 0;

    color:
        rgba(210, 235, 245, 0.48);

    font-size:
        11px;

    line-height:
        1.9;

}


/* =========================================================
   BREAKING NEWS
   ========================================================= */

.news-breaking {

    position:
        relative;

    z-index:
        2;

    width:
        min(1150px, 100%);

    margin:
        0 auto;

    padding:
        75px 40px;

    text-align:
        center;

    border-top:
        1px solid
        rgba(100, 210, 255, 0.25);

    border-bottom:
        1px solid
        rgba(100, 210, 255, 0.25);

    background:
        radial-gradient(
            circle at center,
            rgba(40, 170, 240, 0.08),
            transparent 60%
        );

}


.news-breaking > span {

    color:
        #65d4ff;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        4px;

}


.news-breaking h2 {

    margin-top:
        22px;

    color:
        #ffffff;

    font-size:
        clamp(
            50px,
            9vw,
            110px
        );

    font-weight:
        900;

    line-height:
        0.8;

    letter-spacing:
        -6px;

}


.news-breaking h3 {

    margin-top:
        20px;

    color:
        rgba(120, 215, 255, 0.75);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        5px;

}


.news-breaking p {

    margin-top:
        25px;

    color:
        rgba(200, 230, 242, 0.45);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


.news-breaking-line {

    width:
        min(350px, 80%);

    height:
        1px;

    margin:
        30px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #65d4ff,
            transparent
        );

}


.news-breaking strong {

    display:
        block;

    color:
        rgba(220, 240, 250, 0.70);

    font-size:
        8px;

    font-weight:
        800;

    line-height:
        1.8;

    letter-spacing:
        2px;

}


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

@media (max-width: 900px) {

    .news-page {

        padding:
            130px 30px
            90px;

    }


    .news-header h1 {

        letter-spacing:
            -6px;

    }


    .news-grid {

        gap:
            35px;

    }


    .news-section-heading {

        grid-template-columns:
            50px 1fr;

    }


    .news-columns article {

        padding:
            30px;

    }


    .news-special-grid article {

        padding:
            35px;

    }

}


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

@media (max-width: 600px) {

    .news-page {

        padding:
            110px 18px
            70px;

    }


    /* HEADER */

    .news-kicker {

        font-size:
            6px;

        letter-spacing:
            3px;

    }


    .news-header h1 {

        margin-top:
            14px;

        font-size:
            clamp(
                58px,
                18vw,
                90px
            );

        letter-spacing:
            -5px;

    }


    .news-header-description {

        margin-top:
            22px;

        font-size:
            9px;

        line-height:
            1.8;

    }


    .news-meta {

        flex-direction:
            column;

        gap:
            8px;

    }


    /* HEADLINE */

    .news-headline {

        margin:
            60px auto 50px;

    }


    .news-headline h2 {

        margin-top:
            20px;

        font-size:
            clamp(
                40px,
                13vw,
                65px
            );

        letter-spacing:
            -4px;

    }


    .news-headline h3 {

        font-size:
            16px;

    }


    .news-headline p {

        font-size:
            9px;

    }


    /* POSTER */

    .news-hero-poster {

        margin-bottom:
            85px;

    }


    .news-poster-caption {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            7px;

    }


    /* MOVIE */

    .news-movie {

        margin-bottom:
            90px;

    }


    .news-section-heading {

        grid-template-columns:
            35px 1fr;

        gap:
            15px;

    }


    .news-section-heading > span {

        font-size:
            7px;

    }


    .news-section-heading h2 {

        font-size:
            clamp(
                30px,
                10vw,
                48px
            );

        letter-spacing:
            -2px;

    }


    .news-section-heading small {

        font-size:
            5px;

    }


    /* ARTICLE GRID */

    .news-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

        margin-top:
            35px;

    }


    .news-image img {

        aspect-ratio:
            16 / 11;

    }


    .news-article h3 {

        font-size:
            23px;

    }


    .news-article p {

        font-size:
            9px;

        line-height:
            1.85;

    }


    /* COLUMNS */

    .news-columns {

        grid-template-columns:
            1fr;

        margin-top:
            40px;

    }


    .news-columns article {

        padding:
            28px 5px;

    }


    .news-columns article + article {

        border-left:
            none;

        border-top:
            1px solid
            rgba(100, 210, 255, 0.14);

    }


    /* MOVIE 2 */

    .news-feature-image {

        margin-top:
            35px;

    }


    .news-feature-image img {

        aspect-ratio:
            16 / 10;

    }


    /* MOVIE 3 */

    .news-photo-pair {

        grid-template-columns:
            1fr;

        gap:
            12px;

        margin-top:
            35px;

    }


    .news-photo-pair img {

        aspect-ratio:
            16 / 10;

    }


    .news-long-article {

        margin-top:
            50px;

    }


    .news-long-article h3 {

        font-size:
            clamp(
                30px,
                10vw,
                50px
            );

        letter-spacing:
            -2px;

    }


    .news-long-article p {

        font-size:
            9px;

        line-height:
            1.9;

    }


    /* RELEASE */

    .news-release {

        margin-top:
            50px;

        padding:
            40px 15px;

    }


    .news-release strong {

        font-size:
            clamp(
                25px,
                8vw,
                40px
            );

    }


    /* SPECIAL */

    .news-special {

        margin-bottom:
            80px;

        padding:
            55px 0;

    }


    .news-special-heading h2 {

        font-size:
            clamp(
                32px,
                10vw,
                50px
            );

        letter-spacing:
            -2px;

    }


    .news-special-grid {

        grid-template-columns:
            1fr;

        margin-top:
            40px;

    }


    .news-special-grid article {

        padding:
            30px 5px;

    }


    .news-special-grid article + article {

        border-left:
            none;

        border-top:
            1px solid
            rgba(100, 210, 255, 0.14);

    }


    .news-legacy {

        padding:
            35px 5px;

    }


    .news-legacy h3 {

        font-size:
            clamp(
                28px,
                9vw,
                45px
            );

        letter-spacing:
            -2px;

    }


    /* PEWJAY */

    .news-pewjay {

        margin-bottom:
            80px;

    }


    .news-pewjay h2 {

        font-size:
            clamp(
                35px,
                11vw,
                55px
            );

        letter-spacing:
            -3px;

    }


    .news-pewjay p {

        font-size:
            9px;

    }


    /* BREAKING */

    .news-breaking {

        padding:
            55px 15px;

    }


    .news-breaking h2 {

        font-size:
            clamp(
                48px,
                15vw,
                75px
            );

        letter-spacing:
            -4px;

    }


    .news-breaking h3 {

        font-size:
            7px;

        letter-spacing:
            3px;

    }


    .news-breaking strong {

        font-size:
            7px;

    }

}


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

@media (max-width: 380px) {

    .news-page {

        padding:
            100px 14px
            55px;

    }


    .news-header h1 {

        font-size:
            55px;

        letter-spacing:
            -4px;

    }


    .news-headline h2 {

        font-size:
            38px;

    }


    .news-section-heading h2 {

        font-size:
            28px;

    }


    .news-breaking h2 {

        font-size:
            45px;

    }

}


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

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

    .news-poster-frame img,
    .news-image img,
    .news-feature-image img,
    .news-photo-pair img {

        transition:
            none;

    }

}