/* ============================================================
   BOXXHEAD GAMING
   BRIGHT PUBLICATION UI — FINAL HOMEPAGE LAYER
   Desktop + Tablet + Phone
   IMPORTANT: .v7-brand-hero IS NOT TARGETED.
   ============================================================ */

:root {
    --bx-red: #f12832;
    --bx-red-bright: #ff4a52;
    --bx-coral: #ff6a63;
    --bx-orange: #ff9d42;

    --bx-bg: #101114;
    --bx-bg-2: #15171b;

    --bx-panel: #1b1e23;
    --bx-panel-2: #22262c;
    --bx-panel-3: #292e35;

    --bx-white: #ffffff;
    --bx-text: #f5f6f7;
    --bx-muted: #b9bec6;

    --bx-border: rgba(255,255,255,.13);
    --bx-border-bright: rgba(255,255,255,.20);

    --bx-shadow: 0 18px 45px rgba(0,0,0,.24);
}


/* ============================================================
   PAGE — BRIGHTER GRAPHITE, NOT PURE BLACK
   ============================================================ */

html {
    background: #101114;
}

body.bx-homepage {
    color: var(--bx-text) !important;

    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(241,40,50,.14),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 32%,
            rgba(255,157,66,.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #14161a 0%,
            #101216 52%,
            #0d0f12 100%
        ) !important;
}


/* ============================================================
   HEADER / NAV
   Make the publication identity visible.
   Banner itself remains untouched.
   ============================================================ */

body.bx-homepage header {
    min-height: 64px !important;

    background:
        linear-gradient(
            180deg,
            rgba(24,26,31,.99),
            rgba(15,16,19,.99)
        ) !important;

    border-bottom: 1px solid rgba(255,255,255,.12) !important;

    box-shadow: 0 8px 25px rgba(0,0,0,.20);
}

body.bx-homepage header nav,
body.bx-homepage header .nav,
body.bx-homepage header .v7-nav,
body.bx-homepage header .site-nav {
    min-height: 64px !important;
}

body.bx-homepage header a {
    color: rgba(255,255,255,.88) !important;
}

body.bx-homepage header a:hover {
    color: #fff !important;
}


/* ============================================================
   MAIN WIDTH
   Stop making the site look tiny on desktop.
   ============================================================ */

body.bx-homepage .v7-main {
    width: min(1480px, calc(100% - 48px)) !important;
    max-width: 1480px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-top: 36px !important;
    padding-bottom: 80px !important;
}


/* Top Stories has its own container outside some v7 geometry */

body.bx-homepage .bxhome-top {
    width: min(1480px, calc(100% - 48px)) !important;
    max-width: 1480px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
   SECTION SHELLS
   ============================================================ */

body.bx-homepage .v7-main > .v7-section,
body.bx-homepage .v7-main > .v7-lead-layout,
body.bx-homepage .v7-main > .v7-bottom-grid {
    border: 1px solid var(--bx-border-bright) !important;
    border-radius: 18px !important;

    box-shadow: var(--bx-shadow) !important;
}


/* Major sections get brighter cards */

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

    background:
        linear-gradient(
            145deg,
            rgba(42,46,53,.97),
            rgba(27,30,35,.98)
        ) !important;
}


/* Alternate subtle warmth */

body.bx-homepage .v7-main > .v7-section:nth-of-type(even) {
    background:
        linear-gradient(
            145deg,
            rgba(47,40,42,.98),
            rgba(27,30,35,.98) 52%,
            rgba(30,33,39,.98)
        ) !important;
}


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

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

    font-size: clamp(30px, 3vw, 44px) !important;
    line-height: .98 !important;

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

body.bx-homepage .v7-section > h2::after,
body.bx-homepage .v7-section-title::after {
    content: "" !important;

    display: block !important;

    width: 64px !important;
    height: 5px !important;

    margin-top: 11px !important;

    border-radius: 100px !important;

    background:
        linear-gradient(
            90deg,
            var(--bx-red-bright),
            var(--bx-orange)
        ) !important;
}


/* ============================================================
   TOP STORIES
   Preserve layout, brighten presentation.
   ============================================================ */

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

body.bx-homepage .bxhome-eyebrow,
body.bx-homepage .bxhome-story-category {
    color: var(--bx-coral) !important;
}

body.bx-homepage .bxhome-lead {
    background: #1a1d22 !important;

    border:
        1px solid rgba(255,255,255,.20) !important;

    box-shadow:
        0 20px 48px rgba(0,0,0,.30) !important;
}

body.bx-homepage .bxhome-secondary-card {
    background:
        linear-gradient(
            135deg,
            #282c33,
            #1c1f24
        ) !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.18) !important;
}

body.bx-homepage .bxhome-secondary-card:hover {
    border-color:
        rgba(255,74,82,.72) !important;
}


/* ============================================================
   FEATURED / LATEST
   Make this a major homepage feature.
   ============================================================ */

body.bx-homepage .v7-lead-layout {
    padding: 28px !important;

    margin-top: 42px !important;
    margin-bottom: 42px !important;

    background:
        linear-gradient(
            135deg,
            #292d34,
            #1a1d22 68%
        ) !important;

    gap: 26px !important;
}

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

    background: #16181c !important;

    border:
        1px solid rgba(255,255,255,.18) !important;

    border-radius: 15px !important;

    box-shadow:
        0 14px 35px rgba(0,0,0,.25) !important;
}

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

    background:
        linear-gradient(
            180deg,
            #25292f,
            #1c1f24
        ) !important;

    border:
        1px solid rgba(255,255,255,.15) !important;

    border-radius: 15px !important;
}


/* ============================================================
   VIDEO CARDS
   Larger, brighter, more publication-like.
   ============================================================ */

body.bx-homepage .v7-video-grid {
    display: grid !important;

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

    gap: 22px !important;
}

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

    min-width: 0 !important;

    background:
        linear-gradient(
            180deg,
            #292d34,
            #1c1f24
        ) !important;

    border:
        1px solid rgba(255,255,255,.17) !important;

    border-radius: 14px !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.20) !important;
}

body.bx-homepage .v7-video-story img,
body.bx-homepage .v7-video-story .v7-story-image {
    width: 100% !important;

    aspect-ratio: 16 / 9 !important;

    object-fit: cover !important;
}

body.bx-homepage .v7-video-story:hover {
    transform: translateY(-4px) !important;

    border-color:
        rgba(255,74,82,.70) !important;

    box-shadow:
        0 18px 38px rgba(0,0,0,.28) !important;
}


/* ============================================================
   FEATURED GAMES / GAME HUBS
   ============================================================ */

body.bx-homepage .v7-game-grid,
body.bx-homepage .v7-games-grid {
    display: grid !important;

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

    gap: 22px !important;
}

body.bx-homepage .v7-game-card {
    position: relative !important;

    min-height: 220px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            135deg,
            #263441,
            #1b2026
        ) !important;

    border:
        1px solid rgba(255,255,255,.18) !important;

    border-radius: 14px !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.22) !important;
}

body.bx-homepage .v7-game-card:hover {
    border-color:
        rgba(255,157,66,.62) !important;

    transform: translateY(-3px) !important;
}


/* Give generic hub links visible presence too */

body.bx-homepage .v7-section a[href*="/game"],
body.bx-homepage .v7-section a[href*="/category/gta"] {
    text-decoration: none;
}


/* ============================================================
   GAMING NEWS
   ============================================================ */

body.bx-homepage .v7-news-card,
body.bx-homepage .v7-story-card {
    background:
        linear-gradient(
            135deg,
            #292d34,
            #1c1f24
        ) !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    border-radius: 13px !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.18) !important;
}

body.bx-homepage .v7-news-card:hover,
body.bx-homepage .v7-story-card:hover {
    border-color:
        rgba(255,74,82,.68) !important;
}


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

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

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


/* ============================================================
   BUTTONS / SMALL CTAS
   ============================================================ */

body.bx-homepage .v7-main button,
body.bx-homepage .v7-main .button,
body.bx-homepage .v7-main .btn {
    border:
        1px solid rgba(255,255,255,.16) !important;

    background:
        linear-gradient(
            135deg,
            var(--bx-red-bright),
            var(--bx-red)
        ) !important;

    color: #fff !important;

    border-radius: 7px !important;

    box-shadow:
        0 8px 18px rgba(241,40,50,.20) !important;
}


/* ============================================================
   COMMUNITY / WHAT'S NEXT
   ============================================================ */

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

    padding: 28px !important;

    gap: 20px !important;

    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(255,74,82,.16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #292d34,
            #1b1e23
        ) !important;
}

body.bx-homepage .v7-bottom-grid > * {
    padding: 24px !important;

    background:
        rgba(16,18,22,.52) !important;

    border-top:
        3px solid var(--bx-red-bright) !important;

    border-radius: 10px !important;
}


/* ============================================================
   TRENDING
   ============================================================ */

body.bx-homepage .bxtrend {
    width: min(1480px, calc(100% - 48px)) !important;

    margin:
        55px auto
        70px !important;
}

body.bx-homepage .bxtrend-card {
    background:
        linear-gradient(
            180deg,
            #292d34,
            #1b1e23
        ) !important;

    border:
        1px solid rgba(255,255,255,.17) !important;

    box-shadow:
        0 12px 26px rgba(0,0,0,.20) !important;
}

body.bx-homepage .bxtrend-card:hover {
    border-color:
        rgba(255,74,82,.68) !important;
}


/* ============================================================
   TEXT CONTRAST
   ============================================================ */

body.bx-homepage .v7-main p,
body.bx-homepage .bxtrend p {
    color: var(--bx-muted);
}

body.bx-homepage .v7-main h1,
body.bx-homepage .v7-main h2,
body.bx-homepage .v7-main h3,
body.bx-homepage .v7-main h4,
body.bx-homepage .bxtrend h2,
body.bx-homepage .bxtrend h3 {
    color: #fff;
}


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

@media (max-width: 1000px) {

    body.bx-homepage .v7-main,
    body.bx-homepage .bxhome-top,
    body.bx-homepage .bxtrend {
        width: min(100% - 28px, 1480px) !important;
    }

    body.bx-homepage .v7-video-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
    }

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


/* ============================================================
   PHONE
   Same publication — responsive presentation.
   ============================================================ */

@media (max-width: 700px) {

    body.bx-homepage {
        background:
            linear-gradient(
                180deg,
                #17191e,
                #101216
            ) !important;
    }

    body.bx-homepage header {
        min-height: 56px !important;
    }

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

        padding:
            18px 10px
            55px !important;
    }

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

        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.bx-homepage .bxtrend {
        width: calc(100% - 20px) !important;

        margin:
            34px auto
            45px !important;
    }

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

        padding: 16px !important;

        border-radius: 14px !important;
    }

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

        padding: 14px !important;

        border-radius: 14px !important;
    }

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

        padding: 15px !important;

        border-radius: 14px !important;
    }

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

    body.bx-homepage .v7-video-grid {
        grid-template-columns: 1fr !important;

        gap: 15px !important;
    }

    body.bx-homepage .v7-video-story {
        width: 100% !important;
    }

    body.bx-homepage .v7-game-grid,
    body.bx-homepage .v7-games-grid {
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }

    body.bx-homepage .v7-game-card {
        min-height: 160px !important;
    }

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

    body.bx-homepage .v7-bottom-grid > * {
        padding: 18px !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;
    }

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