/* ============================================================
   BOXXHEAD GAMING
   GLOBAL DESIGN SYSTEM
   Home page is the visual master.
   ============================================================ */

:root {
    --boxx-bg: #090909;
    --boxx-panel: #111111;
    --boxx-panel-2: #171717;
    --boxx-border: #303030;
    --boxx-text: #f4f4f4;
    --boxx-muted: #9b9b9b;
    --boxx-red: #ff2738;
    --boxx-max: 1560px;
}


/* ------------------------------------------------------------
   GLOBAL
   ------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;

    background: var(--boxx-bg);
    color: var(--boxx-text);

    /*
       Keep all pages on one font system.
       Individual page CSS can no longer switch to a condensed font.
    */
    font-family:
        Arial,
        Helvetica,
        "Helvetica Neue",
        sans-serif !important;
}

body,
button,
input,
textarea,
select {
    font-family:
        Arial,
        Helvetica,
        "Helvetica Neue",
        sans-serif !important;
}

img {
    max-width: 100%;
    height: auto;
}

iframe,
video {
    max-width: 100%;
}

a {
    text-decoration: none;
}


/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.hero-title,
.article-title,
.news-title,
.story-title,
.watch-title {
    font-family:
        Arial,
        Helvetica,
        "Helvetica Neue",
        sans-serif !important;

    font-stretch: normal !important;
    letter-spacing: normal;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

h1,
.page-title,
.hero-title,
.watch-title {
    font-weight: 800 !important;
}


/*
   Stop headlines like BOXXHEAD from breaking
   into BOXXHEA / D.
*/

.news-title,
.story-title,
.article-title,
.news-hero h1,
.news-feature h1,
.news-feature h2,
.feature-story h1,
.feature-story h2 {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}


/* ------------------------------------------------------------
   HEADER
   Same position on every public page.
   ------------------------------------------------------------ */

header {
    width: 100%;
}

header .container,
header .inner,
header .header-inner,
.site-header .container,
.site-header .inner,
.main-header .container,
.main-header .inner,
.boxx-header-inner,
.nav-inner {
    width: min(var(--boxx-max), calc(100% - 48px)) !important;
    max-width: var(--boxx-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/*
   Shared navigation
*/

header nav,
.site-header nav,
.main-header nav,
.boxx-nav,
.primary-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end;
    gap: 26px !important;
    flex-wrap: nowrap !important;
}

header nav a,
.site-header nav a,
.main-header nav a,
.boxx-nav a,
.primary-nav a {
    font-family:
        Arial,
        Helvetica,
        "Helvetica Neue",
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    letter-spacing: .01em !important;

    white-space: nowrap !important;

    color: #e6e6e6;
}


/*
   Active page
*/

header nav a.active,
header nav a[aria-current="page"],
.site-header nav a.active,
.site-header nav a[aria-current="page"],
.main-header nav a.active,
.main-header nav a[aria-current="page"],
.boxx-nav a.active,
.primary-nav a.active {
    color: var(--boxx-red) !important;
}


/* ------------------------------------------------------------
   PUBLIC PAGE WIDTH
   ------------------------------------------------------------ */

main,
.page-shell,
.page-container,
.content-shell,
.content-container {
    max-width: var(--boxx-max);
    margin-left: auto;
    margin-right: auto;
}


/* ------------------------------------------------------------
   NEWS PAGE
   ------------------------------------------------------------ */

/*
   Give featured article text enough room so titles don't stack
   one word per line.
*/

.news-feature,
.feature-story,
.news-hero,
.featured-story {
    min-width: 0;
}

.news-feature h1,
.news-feature h2,
.feature-story h1,
.feature-story h2,
.news-hero h1,
.news-hero h2,
.featured-story h1,
.featured-story h2 {
    max-width: 760px !important;
    width: auto !important;

    font-size: clamp(36px, 4.2vw, 72px) !important;
    line-height: .98 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
}


/*
   Don't let article text columns become absurdly narrow.
*/

.news-feature > *,
.feature-story > *,
.featured-story > * {
    min-width: 0;
}


/* ------------------------------------------------------------
   WATCH / VIDEO PAGE
   ------------------------------------------------------------ */

/*
   Main embedded video must fill the player.
*/

.watch-player,
.video-player,
.player-container,
.video-container,
.video-wrap,
.embed-container,
.media-player,
.watch-video {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    aspect-ratio: 16 / 9 !important;

    background: #000 !important;

    overflow: hidden !important;
}


/*
   Force the actual embedded player to occupy the entire box.
*/

.watch-player iframe,
.video-player iframe,
.player-container iframe,
.video-container iframe,
.video-wrap iframe,
.embed-container iframe,
.media-player iframe,
.watch-video iframe,

.watch-player video,
.video-player video,
.player-container video,
.video-container video,
.video-wrap video,
.embed-container video,
.media-player video,
.watch-video video {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: contain !important;
}


/*
   Catch players that aren't inside one of the named wrappers.
*/

body iframe[src*="youtube"],
body iframe[src*="youtu.be"],
body iframe[src*="rockstargames"] {
    width: 100% !important;
    max-width: 100% !important;

    aspect-ratio: 16 / 9;

    height: auto !important;

    border: 0 !important;
}


/*
   Watch page grid:
   Big video left, compact sidebar right.
*/

.watch-layout,
.video-layout,
.watch-grid,
.video-grid,
.watch-page-grid,
.watch-content-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 3fr)
        minmax(260px, .85fr) !important;

    gap: 26px !important;

    align-items: start !important;
}


/* Main video content */

.watch-main,
.video-main,
.watch-content,
.video-content {
    min-width: 0 !important;
}


/* ------------------------------------------------------------
   WATCH SIDEBAR
   Convert white boxes to Boxxhead styling.
   ------------------------------------------------------------ */

.watch-sidebar,
.video-sidebar,
.sidebar,
aside {
    min-width: 0;
}

.watch-sidebar > *,
.video-sidebar > *,
.watch-page aside > *,
.video-page aside > * {
    background: var(--boxx-panel) !important;
    color: var(--boxx-text) !important;

    border: 1px solid var(--boxx-border) !important;

    box-shadow: none !important;
}

.watch-sidebar h1,
.watch-sidebar h2,
.watch-sidebar h3,
.watch-sidebar h4,
.video-sidebar h1,
.video-sidebar h2,
.video-sidebar h3,
.video-sidebar h4,
.watch-page aside h1,
.watch-page aside h2,
.watch-page aside h3,
.video-page aside h1,
.video-page aside h2,
.video-page aside h3 {
    color: var(--boxx-text) !important;
}

.watch-sidebar p,
.watch-sidebar span,
.video-sidebar p,
.video-sidebar span,
.watch-page aside p,
.watch-page aside span,
.video-page aside p,
.video-page aside span {
    color: var(--boxx-muted);
}


/* Sidebar video rows */

.watch-sidebar img,
.video-sidebar img,
.watch-page aside img,
.video-page aside img {
    object-fit: cover;
}


/* ------------------------------------------------------------
   MORE FROM BOXXHEAD
   ------------------------------------------------------------ */

.more-grid,
.more-videos,
.related-videos,
.related-grid,
.video-cards {
    display: grid !important;

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

    gap: 18px !important;
}

.more-grid > *,
.more-videos > *,
.related-videos > *,
.related-grid > *,
.video-cards > * {
    min-width: 0;
}

.more-grid img,
.more-videos img,
.related-videos img,
.related-grid img,
.video-cards img {
    display: block;

    width: 100% !important;
    aspect-ratio: 16 / 9;

    object-fit: cover !important;
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

footer nav,
.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 20px;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 1100px) {

    header nav,
    .site-header nav,
    .main-header nav,
    .boxx-nav,
    .primary-nav {
        gap: 16px !important;
    }

    header nav a,
    .site-header nav a,
    .main-header nav a,
    .boxx-nav a,
    .primary-nav a {
        font-size: 12px !important;
    }

    .watch-layout,
    .video-layout,
    .watch-grid,
    .video-grid,
    .watch-page-grid,
    .watch-content-grid {
        grid-template-columns:
            minmax(0, 2.3fr)
            minmax(240px, .8fr) !important;
    }

}


/* ------------------------------------------------------------
   SMALL TABLET / LARGE PHONE
   ------------------------------------------------------------ */

@media (max-width: 820px) {

    header .container,
    header .inner,
    header .header-inner,
    .site-header .container,
    .site-header .inner,
    .main-header .container,
    .main-header .inner,
    .boxx-header-inner,
    .nav-inner {
        width: min(100% - 28px, var(--boxx-max)) !important;
    }

    .watch-layout,
    .video-layout,
    .watch-grid,
    .video-grid,
    .watch-page-grid,
    .watch-content-grid {
        display: block !important;
    }

    .watch-sidebar,
    .video-sidebar,
    aside {
        margin-top: 28px;
    }

    .more-grid,
    .more-videos,
    .related-videos,
    .related-grid,
    .video-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ------------------------------------------------------------
   PHONE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    main {
        width: 100%;
    }

    h1,
    .page-title,
    .hero-title,
    .watch-title {
        font-size: clamp(32px, 10vw, 48px) !important;
    }

    .news-feature h1,
    .news-feature h2,
    .feature-story h1,
    .feature-story h2,
    .news-hero h1,
    .news-hero h2 {
        font-size: clamp(32px, 10vw, 48px) !important;
        line-height: 1 !important;
    }

    .more-grid,
    .more-videos,
    .related-videos,
    .related-grid,
    .video-cards {
        grid-template-columns: 1fr;
    }

    iframe,
    video {
        max-width: 100% !important;
    }

}



/* ==========================================
   BOXXHEAD SMILING CONTROLLER
   ========================================== */

.boxx-controller-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 15px 15px 5px;
}

.boxx-controller-img {
    display: block;

    width: min(240px, 90%);
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 0 8px rgba(255, 39, 56, .22))
        drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}

@media (max-width: 700px) {

    .boxx-controller-img {
        width: min(210px, 80%);
    }

}


/* ============================================================
   BOXXHEAD HOMEPAGE CONTROLLER
   ============================================================ */

.bx-about-controller {
    position: absolute !important;

    top: 26px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 82% !important;
    max-width: 260px !important;

    height: auto !important;

    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    pointer-events: none;
}

.bx-about-controller-image {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    object-fit: contain !important;

    filter:
        drop-shadow(0 10px 18px rgba(0,0,0,.55))
        drop-shadow(0 0 10px rgba(255,39,56,.18));
}


/*
   Keep REAL GAMES REAL TALK readable underneath
*/

.bx-real-talk {
    position: absolute !important;

    left: 24px !important;
    bottom: 22px !important;

    z-index: 3 !important;
}


/* Tablet */

@media (max-width: 900px) {

    .bx-about-controller {
        max-width: 230px !important;
        top: 18px !important;
    }

}


/* Phone */

@media (max-width: 600px) {

    .bx-about-controller {
        width: 70% !important;
        max-width: 210px !important;
        top: 12px !important;
    }

    .bx-real-talk {
        left: 18px !important;
        bottom: 16px !important;
    }

}



/* ============================================================
   FINAL BOXXHEAD CONTROLLER FIX
   ============================================================ */

.bx-about-art {
    position: relative !important;
    min-height: 300px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 18px 16px 18px !important;
}


/* Controller */

.bx-about-controller {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    transform: none !important;

    width: 100% !important;
    max-width: 285px !important;

    height: 175px !important;

    margin: 0 auto 4px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 2 !important;
}


.bx-about-controller-image {
    width: 100% !important;
    max-width: 285px !important;

    height: 100% !important;

    object-fit: contain !important;

    display: block !important;

    filter:
        drop-shadow(0 9px 13px rgba(0,0,0,.65))
        drop-shadow(0 0 9px rgba(255,35,50,.28)) !important;
}


/* REAL GAMES REAL TALK */

.bx-real-talk {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;

    align-self: flex-start !important;

    margin: 0 !important;

    z-index: 3 !important;

    line-height: .95 !important;
}


/* Tablet */

@media (max-width: 900px) {

    .bx-about-controller {
        max-width: 260px !important;
        height: 155px !important;
    }

}


/* Phone */

@media (max-width: 600px) {

    .bx-about-art {
        min-height: 275px !important;
    }

    .bx-about-controller {
        max-width: 235px !important;
        height: 145px !important;
    }

}