/* ============================================================
   BOXXHEAD GAMING — PUBLICATION SYSTEM 2026
   Homepage + editorial articles
   IMPORTANT: .v7-brand-hero IS INTENTIONALLY NOT TOUCHED.
   ============================================================ */

:root {
    --bxp-red: #e31616;
    --bxp-bg: #080808;
    --bxp-panel: #101317;
    --bxp-panel-2: #0c0f13;
    --bxp-line: rgba(255,255,255,.11);
    --bxp-muted: rgba(255,255,255,.67);
}

/* ============================================================
   HOMEPAGE — STRUCTURE
   ============================================================ */

.bx-homepage .v7-main {
    padding-top: 30px;
    padding-bottom: 72px;
}

.bx-homepage .v7-main > section {
    margin-top: 0;
    margin-bottom: 58px;
}

/*
   Top Stories is already its own editorial lead package.
   Keep the following video lead from creating a giant
   disconnected vertical region.
*/
.bx-homepage .v7-lead-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(260px, .72fr);
    align-items: start;
    gap: 34px;
    margin-top: 46px;
    margin-bottom: 54px;
}

.bx-homepage .v7-lead-story {
    min-width: 0;
    height: auto;
    min-height: 0;
}

.bx-homepage .v7-lead-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0b0d10;
}

.bx-homepage .v7-lead-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bx-homepage .v7-lead-copy {
    padding-top: 18px;
}

.bx-homepage .v7-lead-copy h1 {
    margin: 7px 0 10px;
    font-size: clamp(27px, 3vw, 48px);
    line-height: 1;
    letter-spacing: -.045em;
}

.bx-homepage .v7-lead-copy p {
    max-width: 720px;
    margin: 0 0 14px;
    color: var(--bxp-muted);
    font-size: 15px;
    line-height: 1.65;
}

.bx-homepage .v7-latest-column {
    min-width: 0;
    height: auto;
    align-self: start;
}

.bx-homepage .v7-latest-row {
    padding: 15px 0;
    border-bottom: 1px solid var(--bxp-line);
}

.bx-homepage .v7-latest-row strong {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.35;
}

/* Homepage sections should form one continuous publication */
.bx-homepage .v7-section {
    clear: both;
    padding-top: 0;
}

.bx-homepage .v7-heading-row {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bxp-line);
}

.bx-homepage .v7-heading-row h2 {
    position: relative;
    margin: 0;
    font-size: clamp(21px, 2.1vw, 31px);
    line-height: 1;
    letter-spacing: -.035em;
}

.bx-homepage .v7-heading-row h2::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 9px;
    background: var(--bxp-red);
}

.bx-homepage .v7-video-grid {
    align-items: start;
    gap: 18px;
}

.bx-homepage .v7-video-story {
    min-width: 0;
    height: auto;
}

.bx-homepage .v7-story-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bxp-panel);
}

.bx-homepage .v7-story-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ============================================================
   ARTICLE — COMMON PUBLICATION FOUNDATION
   ============================================================ */

body.bx-article-publication {
    background:
        radial-gradient(circle at 50% 0,
            rgba(185,0,0,.10),
            transparent 29rem),
        #080808;
}

.bx-article-page {
    width: min(1320px, calc(100% - 48px));
    padding-top: 46px;
}

.bx-article-header h1 {
    text-wrap: balance;
}

.bx-article-body,
.bx-article-reading-body {
    color: rgba(255,255,255,.88);
}

.bx-article-reading-body p {
    font-size: inherit;
}


/* ============================================================
   FEATURE — CINEMATIC EDITORIAL
   ============================================================ */

.bx-article-page.bx-story-type-feature {
    width: min(1500px, calc(100% - 48px));
}

.bx-story-type-feature .bx-article-top,
.bx-story-type-feature .bx-article-header,
.bx-story-type-feature .bx-share-block {
    width: min(1180px, 100%);
    max-width: none;
}

.bx-story-type-feature .bx-article-header {
    padding-top: 28px;
    padding-bottom: 34px;
}

.bx-story-type-feature .bx-article-header h1 {
    max-width: 1180px;
    font-size: clamp(52px, 6.5vw, 96px);
    line-height: .91;
    letter-spacing: -.06em;
}

.bx-story-type-feature .bx-article-deck {
    max-width: 900px;
    margin-top: 22px;
    font-size: clamp(19px, 1.8vw, 25px);
    line-height: 1.48;
}

/* Main cinematic image */
.bx-story-type-feature .bx-article-hero {
    width: min(1380px, 100%);
    max-width: none;
    margin: 12px auto 66px;
    border-radius: 8px;
}

.bx-story-type-feature .bx-article-hero img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9;
    object-fit: cover !important;
}

/*
   Major Features do not need the skinny right rail.
   Use the space for the story itself.
*/
.bx-story-type-feature .bx-article-layout {
    display: block;
    width: min(1100px, 100%);
    max-width: none;
    margin: 0 auto;
}

.bx-story-type-feature .bx-article-body {
    width: 100%;
    max-width: none;
}

.bx-story-type-feature .bx-article-sidebar,
.bx-story-type-feature .bx-article-rail,
.bx-story-type-feature aside.bx-article-sidebar {
    display: none !important;
}

.bx-story-type-feature .bx-article-reading-body {
    width: min(900px, 100%);
    max-width: none;
    margin: 0 auto;
    padding: 0;
    font-size: 19px;
    line-height: 1.82;
    letter-spacing: -.006em;
}

.bx-story-type-feature .bx-article-reading-body p {
    margin: 0 0 28px;
}

/* Editorial section breaks */
.bx-story-type-feature .bx-article-subheading,
.bx-story-type-feature .bx-article-reading-body h2 {
    margin: 68px 0 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.14);
    color: #fff;
    font-size: clamp(31px, 3.5vw, 49px);
    line-height: .98;
    font-weight: 950;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.bx-story-type-feature .bx-article-subheading::before,
.bx-story-type-feature .bx-article-reading-body h2::before {
    width: 48px;
    height: 4px;
    margin-bottom: 15px;
}

/*
   Feature photography deliberately breaks outside the
   reading column while remaining inside the publication.
*/
.bx-story-type-feature .bx-article-inline-image {
    position: relative;
    width: min(1180px, calc(100vw - 56px)) !important;
    max-width: none !important;
    margin: 52px 0 58px 50% !important;
    transform: translateX(-50%);
    text-align: left;
}

.bx-story-type-feature .bx-article-inline-image img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 8px;
    object-fit: cover !important;
}

.bx-story-type-feature .bx-article-inline-image figcaption {
    width: min(900px, 100%);
    max-width: none;
    margin: 10px auto 0;
    color: rgba(255,255,255,.54);
    font-size: 12px;
    line-height: 1.5;
}

.bx-story-type-feature .bx-article-reading-body blockquote {
    margin: 52px 0;
    padding: 24px 0 24px 28px;
    border-left: 5px solid var(--bxp-red);
    color: #fff;
    font-size: clamp(24px, 2.5vw, 34px);
    line-height: 1.28;
    font-weight: 850;
}


/* ============================================================
   RELATED STORIES
   ============================================================ */

.bx-story-type-feature .bx-related,
.bx-story-type-feature .bx-related-stories {
    width: min(1100px, 100%);
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
}


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

@media (max-width: 980px) {

    .bx-homepage .v7-lead-layout {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .bx-homepage .v7-latest-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 0 24px;
    }

    .bx-homepage .v7-latest-column .v7-heading-row {
        grid-column: 1 / -1;
    }

    .bx-story-type-feature .bx-article-reading-body {
        width: min(820px, 100%);
    }
}


/* ============================================================
   MOBILE — SAME DESIGN, RESPONSIVE PRESENTATION
   ============================================================ */

@media (max-width: 760px) {

    .bx-homepage .v7-main {
        padding-top: 20px;
        padding-bottom: 48px;
    }

    .bx-homepage .v7-main > section {
        margin-bottom: 38px;
    }

    .bx-homepage .v7-lead-layout {
        display: block;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .bx-homepage .v7-lead-story {
        margin-bottom: 32px;
    }

    .bx-homepage .v7-lead-image {
        aspect-ratio: 16 / 9;
    }

    .bx-homepage .v7-lead-copy {
        padding-top: 14px;
    }

    .bx-homepage .v7-lead-copy h1 {
        font-size: clamp(27px, 9vw, 39px);
    }

    .bx-homepage .v7-latest-column {
        display: block;
    }

    .bx-homepage .v7-video-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 18px 12px;
    }


    .bx-article-page,
    .bx-article-page.bx-story-type-feature {
        width: 100%;
        padding-top: 24px;
        overflow: hidden;
    }

    .bx-story-type-feature .bx-article-top,
    .bx-story-type-feature .bx-article-header,
    .bx-story-type-feature .bx-share-block {
        width: calc(100% - 36px);
        margin-left: auto;
        margin-right: auto;
    }

    .bx-story-type-feature .bx-article-header {
        padding-top: 10px;
        padding-bottom: 24px;
    }

    .bx-story-type-feature .bx-article-header h1 {
        font-size: clamp(40px, 12vw, 60px);
        line-height: .93;
    }

    .bx-story-type-feature .bx-article-deck {
        font-size: 17px;
    }

    .bx-story-type-feature .bx-article-hero {
        width: 100%;
        margin: 8px 0 38px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .bx-story-type-feature .bx-article-hero img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto;
        border-radius: 0;
    }

    .bx-story-type-feature .bx-article-layout,
    .bx-story-type-feature .bx-article-body {
        display: block;
        width: 100%;
        max-width: none;
    }

    .bx-story-type-feature .bx-article-reading-body {
        width: 100%;
        max-width: none;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 17px;
        line-height: 1.74;
    }

    .bx-story-type-feature .bx-article-subheading,
    .bx-story-type-feature .bx-article-reading-body h2 {
        margin-top: 48px;
        font-size: 29px;
    }

    .bx-story-type-feature .bx-article-inline-image {
        width: calc(100% + 40px) !important;
        margin: 40px 0 42px 50% !important;
        transform: translateX(-50%);
    }

    .bx-story-type-feature .bx-article-inline-image img {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        border-radius: 0;
    }

    .bx-story-type-feature .bx-article-inline-image figcaption {
        width: auto;
        margin: 9px 20px 0;
    }
}


@media (max-width: 480px) {

    .bx-homepage .v7-video-grid {
        grid-template-columns: 1fr;
    }

    .bx-homepage .v7-heading-row h2 {
        font-size: 23px;
    }

    .bx-story-type-feature .bx-article-header h1 {
        font-size: clamp(36px, 11.5vw, 50px);
    }
}

/* ============================================================
   BOXXHEAD TOP STORIES — FINAL RESPONSIVE LOCK
   Desktop + tablet + phone
   Banner intentionally untouched.
   ============================================================ */

body.bx-homepage .bxhome-top {
    width: min(1240px, calc(100% - 36px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 34px auto 52px !important;
}

body.bx-homepage .bxhome-lead-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, .85fr) !important;
    grid-template-rows: auto !important;
    align-items: start !important;
    gap: 18px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

body.bx-homepage .bxhome-lead {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
}

body.bx-homepage .bxhome-lead-media {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}

body.bx-homepage .bxhome-lead-media > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
}

body.bx-homepage .bxhome-lead-shade {
    position: absolute !important;
    inset: 0 !important;
}

body.bx-homepage .bxhome-lead-copy {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 3 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 72px 26px 25px !important;
}

body.bx-homepage .bxhome-lead-copy h2 {
    margin: 5px 0 9px !important;
    font-size: clamp(27px, 3.1vw, 47px) !important;
    line-height: .98 !important;
}

body.bx-homepage .bxhome-lead-copy p {
    max-width: 720px !important;
    margin: 0 0 12px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}


/* RIGHT-SIDE STORIES */

body.bx-homepage .bxhome-secondary {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    align-content: start !important;
    align-items: start !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

body.bx-homepage .bxhome-secondary-card {
    display: grid !important;
    grid-template-columns: 138px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 112px !important;
    max-height: none !important;
    overflow: hidden !important;
}

body.bx-homepage .bxhome-secondary-image {
    position: relative !important;
    display: block !important;
    width: 138px !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
}

body.bx-homepage .bxhome-secondary-image img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
}

body.bx-homepage .bxhome-secondary-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 112px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
}

body.bx-homepage .bxhome-secondary-copy h3 {
    margin: 4px 0 5px !important;
    font-size: 15px !important;
    line-height: 1.12 !important;
}

body.bx-homepage .bxhome-secondary-copy p {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}


/* Kill the artificial separation after Top Stories */

body.bx-homepage .bxhome-top + section,
body.bx-homepage main > .bxhome-top + section {
    margin-top: 0 !important;
}

body.bx-homepage .bxhome-top {
    padding-bottom: 0 !important;
}


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

@media (max-width: 1000px) {

    body.bx-homepage .bxhome-lead-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    body.bx-homepage .bxhome-secondary {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 12px !important;
    }

    body.bx-homepage .bxhome-secondary-card {
        display: block !important;
        min-height: 0 !important;
    }

    body.bx-homepage .bxhome-secondary-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
    }

    body.bx-homepage .bxhome-secondary-copy {
        min-height: 0 !important;
        padding: 13px !important;
    }
}


/* ============================================================
   PHONE
   ============================================================ */

@media (max-width: 700px) {

    body.bx-homepage .bxhome-top {
        width: calc(100% - 22px) !important;
        margin: 20px auto 34px !important;
    }

    body.bx-homepage .bxhome-top-heading {
        margin-bottom: 13px !important;
    }

    body.bx-homepage .bxhome-lead-grid {
        display: block !important;
    }

    body.bx-homepage .bxhome-lead {
        margin-bottom: 13px !important;
    }

    body.bx-homepage .bxhome-lead-media {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 16 / 10 !important;
    }

    body.bx-homepage .bxhome-lead-copy {
        padding: 54px 16px 16px !important;
    }

    body.bx-homepage .bxhome-lead-copy h2 {
        font-size: clamp(24px, 7.5vw, 34px) !important;
        line-height: 1.02 !important;
    }

    body.bx-homepage .bxhome-lead-copy p {
        display: none !important;
    }

    body.bx-homepage .bxhome-secondary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.bx-homepage .bxhome-secondary-card {
        display: grid !important;
        grid-template-columns: 128px minmax(0,1fr) !important;
        min-height: 96px !important;
    }

    body.bx-homepage .bxhome-secondary-image {
        width: 128px !important;
        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;
        aspect-ratio: auto !important;
    }

    body.bx-homepage .bxhome-secondary-copy {
        min-height: 96px !important;
        padding: 10px 12px !important;
    }

    body.bx-homepage .bxhome-secondary-copy h3 {
        font-size: 14px !important;
        line-height: 1.12 !important;
    }

    body.bx-homepage .bxhome-secondary-copy p {
        display: none !important;
    }
}


/* ============================================================
   SMALL PHONE
   ============================================================ */

@media (max-width: 430px) {

    body.bx-homepage .bxhome-secondary-card {
        grid-template-columns: 112px minmax(0,1fr) !important;
        min-height: 86px !important;
    }

    body.bx-homepage .bxhome-secondary-image {
        width: 112px !important;
        height: 86px !important;
        min-height: 86px !important;
        max-height: 86px !important;
    }

    body.bx-homepage .bxhome-secondary-copy {
        min-height: 86px !important;
        padding: 9px 10px !important;
    }

    body.bx-homepage .bxhome-secondary-copy h3 {
        font-size: 13px !important;
    }
}


/* ============================================================
   BOXXHEAD GAMING — PUBLICATION DEPTH SYSTEM
   Desktop + Mobile
   Banner intentionally NOT targeted.
   ============================================================ */

:root {
    --bx-bg: #080808;
    --bx-bg-soft: #0d0d0f;
    --bx-panel: #121214;
    --bx-panel-2: #18181b;
    --bx-panel-3: #202024;

    --bx-red: #e31616;
    --bx-red-hot: #ff3038;
    --bx-red-dark: #8f0d12;

    --bx-white: #ffffff;
    --bx-text: #eeeeef;
    --bx-muted: #a4a4aa;

    --bx-line: rgba(255,255,255,.10);
    --bx-line-strong: rgba(255,255,255,.17);

    --bx-radius: 14px;
}


/* ============================================================
   PAGE FOUNDATION
   ============================================================ */

body.bx-homepage {
    background:
        radial-gradient(
            circle at 50% 8%,
            rgba(227,22,22,.09),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #080808 0%,
            #0b0b0d 42%,
            #070707 100%
        ) !important;

    color: var(--bx-text);
}

body.bx-homepage .v7-main {
    width: min(1320px, calc(100% - 36px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
   MAJOR HOMEPAGE SECTIONS
   ============================================================ */

body.bx-homepage .v7-main > .v7-section,
body.bx-homepage .v7-main > .v7-lead-layout,
body.bx-homepage .v7-main > .v7-bottom-grid {
    position: relative;
}

body.bx-homepage .v7-main > .v7-section {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
    padding: 26px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        ) !important;

    border: 1px solid var(--bx-line) !important;
    border-radius: 18px !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.22);
}


/* Alternate section depth so the homepage
   does not look like one endless black sheet. */

body.bx-homepage .v7-main > .v7-section:nth-of-type(even) {
    background:
        linear-gradient(
            145deg,
            rgba(227,22,22,.045),
            rgba(255,255,255,.018)
        ) !important;
}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

body.bx-homepage .v7-section h2,
body.bx-homepage .v7-bottom-grid h2 {
    color: #fff !important;

    font-size: clamp(27px, 3vw, 40px) !important;
    line-height: 1 !important;

    letter-spacing: -.035em !important;
    font-weight: 950 !important;
}

body.bx-homepage .v7-section > h2,
body.bx-homepage .v7-section-header,
body.bx-homepage .v7-section-head {
    position: relative;
}

body.bx-homepage .v7-section > h2::after {
    content: "";

    display: block;

    width: 48px;
    height: 4px;

    margin-top: 10px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--bx-red-hot),
            var(--bx-red)
        );
}


/* ============================================================
   LEAD / FEATURED + LATEST
   ============================================================ */

body.bx-homepage .v7-lead-layout {
    margin-top: 42px !important;
    margin-bottom: 42px !important;

    padding: 24px !important;

    background:
        linear-gradient(
            135deg,
            #151518,
            #0d0d0f 65%
        ) !important;

    border: 1px solid var(--bx-line) !important;
    border-radius: 18px !important;
}

body.bx-homepage .v7-lead-story,
body.bx-homepage .v7-latest-column {
    border-radius: var(--bx-radius) !important;
}

body.bx-homepage .v7-lead-story {
    overflow: hidden !important;

    background: #090909 !important;

    border: 1px solid var(--bx-line) !important;
}

body.bx-homepage .v7-latest-column {
    padding: 18px !important;

    background: var(--bx-panel) !important;

    border: 1px solid var(--bx-line) !important;
}


/* ============================================================
   STORY / VIDEO / GAME CARDS
   ============================================================ */

body.bx-homepage .v7-video-story,
body.bx-homepage .v7-game-card,
body.bx-homepage .v7-story-card,
body.bx-homepage .v7-news-card {
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--bx-panel-2),
            var(--bx-panel)
        ) !important;

    border: 1px solid var(--bx-line) !important;
    border-radius: var(--bx-radius) !important;

    box-shadow:
        0 10px 28px rgba(0,0,0,.18);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}

body.bx-homepage .v7-video-story:hover,
body.bx-homepage .v7-game-card:hover,
body.bx-homepage .v7-story-card:hover,
body.bx-homepage .v7-news-card:hover {
    transform: translateY(-3px);

    border-color: rgba(255,48,56,.5) !important;

    box-shadow:
        0 18px 36px rgba(0,0,0,.30);
}


/* ============================================================
   MEDIA TREATMENT
   ============================================================ */

body.bx-homepage .v7-story-image,
body.bx-homepage .v7-video-story img,
body.bx-homepage .v7-game-card img {
    background: #050505;
}

body.bx-homepage article img {
    object-fit: cover;
}


/* ============================================================
   CATEGORY / FEATURE LABELS
   ============================================================ */

body.bx-homepage .v7-label,
body.bx-homepage .v7-category,
body.bx-homepage .v7-kicker {
    color: var(--bx-red-hot) !important;

    font-weight: 900 !important;
    letter-spacing: .08em !important;
}


/* ============================================================
   LINKS / CALLS TO ACTION
   ============================================================ */

body.bx-homepage .v7-main a {
    transition:
        color .15s ease,
        opacity .15s ease;
}

body.bx-homepage .v7-main a:hover {
    color: #fff;
}


/* ============================================================
   GAMING NEWS — GIVE IT REAL VISUAL WEIGHT
   ============================================================ */

body.bx-homepage .v7-main > .v7-section:nth-last-of-type(2) {
    border-top:
        3px solid var(--bx-red) !important;
}


/* ============================================================
   COMMUNITY / BOTTOM AREA
   ============================================================ */

body.bx-homepage .v7-bottom-grid {
    margin-top: 38px !important;
    margin-bottom: 38px !important;

    padding: 26px !important;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(227,22,22,.10),
            transparent 34%
        ),
        var(--bx-panel) !important;

    border: 1px solid var(--bx-line) !important;
    border-radius: 18px !important;
}


/* ============================================================
   TOP STORIES — COLOR DEPTH
   Geometry remains controlled by responsive lock above.
   ============================================================ */

body.bx-homepage .bxhome-lead,
body.bx-homepage .bxhome-secondary-card {
    background:
        linear-gradient(
            145deg,
            #19191c,
            #111113
        ) !important;

    border-color: var(--bx-line-strong) !important;
}

body.bx-homepage .bxhome-secondary-card:hover {
    border-color: rgba(255,48,56,.50) !important;
}

body.bx-homepage .bxhome-top-heading {
    border-bottom-color: var(--bx-red) !important;
}


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

@media (max-width: 1000px) {

    body.bx-homepage .v7-main {
        width: min(100% - 26px, 1320px) !important;
    }

    body.bx-homepage .v7-main > .v7-section,
    body.bx-homepage .v7-lead-layout,
    body.bx-homepage .v7-bottom-grid {
        padding: 20px !important;
    }
}


/* ============================================================
   PHONE
   ============================================================ */

@media (max-width: 700px) {

    body.bx-homepage {
        background: #09090a !important;
    }

    body.bx-homepage .v7-main {
        width: 100% !important;

        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    body.bx-homepage .v7-main > .v7-section {
        margin: 20px 0 !important;
        padding: 15px !important;

        border-radius: 14px !important;
    }

    body.bx-homepage .v7-lead-layout {
        margin: 22px 0 !important;
        padding: 13px !important;

        border-radius: 14px !important;
    }

    body.bx-homepage .v7-bottom-grid {
        margin: 22px 0 !important;
        padding: 16px !important;

        border-radius: 14px !important;
    }

    body.bx-homepage .v7-section h2,
    body.bx-homepage .v7-bottom-grid h2 {
        font-size: 27px !important;
    }

    body.bx-homepage .v7-latest-column {
        padding: 14px !important;
    }

    body.bx-homepage .v7-video-story,
    body.bx-homepage .v7-game-card,
    body.bx-homepage .v7-story-card,
    body.bx-homepage .v7-news-card {
        border-radius: 11px !important;
    }
}


/* ============================================================
   SMALL PHONE
   ============================================================ */

@media (max-width: 430px) {

    body.bx-homepage .v7-main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.bx-homepage .v7-main > .v7-section {
        padding: 13px !important;
    }
}