/* ==========================================================
   BOXXHEAD GAMING
   SEARCH + CATEGORY PUBLICATION UI
========================================================== */

:root {
    --bxd-red: #e31616;
    --bxd-red-hot: #ff2a2a;

    --bxd-bg: #080808;
    --bxd-panel: #101010;
    --bxd-panel-2: #141414;

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

    --bxd-text: #ffffff;
    --bxd-muted: rgba(255,255,255,.64);
    --bxd-dim: rgba(255,255,255,.42);
}


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

body.bx-discovery-publication {
    background:
        radial-gradient(
            circle at 76% -5%,
            rgba(227,22,22,.08),
            transparent 30%
        ),
        var(--bxd-bg);

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

body.bx-discovery-publication main {
    width: min(1240px, calc(100% - 36px));
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   PAGE HERO / INTRO
========================================================== */

body.bx-discovery-publication .search-hero,
body.bx-discovery-publication .category-hero,
body.bx-discovery-publication .page-hero,
body.bx-discovery-publication .category-header,
body.bx-discovery-publication .search-header {
    position: relative;

    margin:
        28px
        0
        34px;

    padding:
        clamp(26px, 5vw, 52px);

    overflow: hidden;

    border:
        1px
        solid
        var(--bxd-line);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0
        24px
        70px
        rgba(0,0,0,.25);
}

body.bx-discovery-publication .search-hero::after,
body.bx-discovery-publication .category-hero::after,
body.bx-discovery-publication .page-hero::after,
body.bx-discovery-publication .category-header::after,
body.bx-discovery-publication .search-header::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 110px;
    height: 4px;

    background: var(--bxd-red);
}


/* ==========================================================
   PAGE TITLES
========================================================== */

body.bx-discovery-publication h1 {
    color: #fff;

    font-size:
        clamp(
            42px,
            7vw,
            82px
        );

    line-height: .93;

    font-weight: 950;

    letter-spacing: -.055em;

    text-wrap: balance;
}

body.bx-discovery-publication .search-hero h1,
body.bx-discovery-publication .category-hero h1,
body.bx-discovery-publication .page-hero h1,
body.bx-discovery-publication .category-header h1,
body.bx-discovery-publication .search-header h1 {
    margin: 0;
}

body.bx-discovery-publication .search-hero p,
body.bx-discovery-publication .category-hero p,
body.bx-discovery-publication .page-hero p,
body.bx-discovery-publication .category-header p,
body.bx-discovery-publication .search-header p {
    max-width: 700px;

    margin:
        16px
        0
        0;

    color: var(--bxd-muted);

    font-size:
        clamp(
            14px,
            1.6vw,
            18px
        );

    line-height: 1.6;
}


/* ==========================================================
   EYEBROWS / LABELS
========================================================== */

body.bx-discovery-publication .eyebrow,
body.bx-discovery-publication .kicker,
body.bx-discovery-publication .category-kicker,
body.bx-discovery-publication .search-kicker,
body.bx-discovery-publication .card-category,
body.bx-discovery-publication .result-type {
    color: var(--bxd-red-hot);

    font-size: 9px;
    line-height: 1;

    font-weight: 950;

    letter-spacing: .13em;

    text-transform: uppercase;
}


/* ==========================================================
   SEARCH FORM
========================================================== */

body.bx-discovery-publication form[role="search"],
body.bx-discovery-publication .search-form,
body.bx-discovery-publication .search-box {
    width: min(820px, 100%);

    margin:
        24px
        0
        0;

    display: flex;

    gap: 9px;
}

body.bx-discovery-publication form[role="search"] input,
body.bx-discovery-publication .search-form input,
body.bx-discovery-publication .search-box input {
    flex: 1;

    min-width: 0;

    min-height: 48px;

    padding:
        0
        16px;

    border:
        1px
        solid
        var(--bxd-line-strong);

    border-radius: 7px;

    outline: none;

    background: rgba(0,0,0,.35);

    color: #fff;

    font: inherit;
}

body.bx-discovery-publication form[role="search"] input:focus,
body.bx-discovery-publication .search-form input:focus,
body.bx-discovery-publication .search-box input:focus {
    border-color: var(--bxd-red);

    box-shadow:
        0
        0
        0
        3px
        rgba(227,22,22,.12);
}

body.bx-discovery-publication form[role="search"] button,
body.bx-discovery-publication .search-form button,
body.bx-discovery-publication .search-box button {
    min-height: 48px;

    padding:
        0
        20px;

    border: 0;

    border-radius: 7px;

    background: var(--bxd-red);

    color: #fff;

    font-size: 11px;

    font-weight: 950;

    letter-spacing: .06em;

    text-transform: uppercase;

    cursor: pointer;
}

body.bx-discovery-publication form[role="search"] button:hover,
body.bx-discovery-publication .search-form button:hover,
body.bx-discovery-publication .search-box button:hover {
    background: var(--bxd-red-hot);
}


/* ==========================================================
   SECTION HEADERS
========================================================== */

body.bx-discovery-publication .section-title,
body.bx-discovery-publication .section-head,
body.bx-discovery-publication .results-header,
body.bx-discovery-publication .results-head {
    position: relative;

    margin:
        42px
        0
        20px;

    padding-bottom: 13px;

    border-bottom:
        1px
        solid
        var(--bxd-line);
}

body.bx-discovery-publication .section-title::after,
body.bx-discovery-publication .section-head::after,
body.bx-discovery-publication .results-header::after,
body.bx-discovery-publication .results-head::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 48px;
    height: 3px;

    background: var(--bxd-red);
}


/* ==========================================================
   RESULTS GRID
========================================================== */

body.bx-discovery-publication .search-results,
body.bx-discovery-publication .results-grid,
body.bx-discovery-publication .category-grid,
body.bx-discovery-publication .content-grid,
body.bx-discovery-publication .news-grid,
body.bx-discovery-publication .game-grid,
body.bx-discovery-publication .cards-grid {
    display: grid;

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

    gap: 18px;

    margin-bottom: 54px;
}


/* ==========================================================
   PUBLICATION CARDS
========================================================== */

body.bx-discovery-publication .result-card,
body.bx-discovery-publication .search-result,
body.bx-discovery-publication .news-card,
body.bx-discovery-publication .content-card,
body.bx-discovery-publication .game-card,
body.bx-discovery-publication .card {
    position: relative;

    overflow: hidden;

    border:
        1px
        solid
        var(--bxd-line);

    border-radius: 11px;

    background: var(--bxd-panel);

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

body.bx-discovery-publication .result-card:hover,
body.bx-discovery-publication .search-result:hover,
body.bx-discovery-publication .news-card:hover,
body.bx-discovery-publication .content-card:hover,
body.bx-discovery-publication .game-card:hover,
body.bx-discovery-publication .card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(
            227,
            22,
            22,
            .48
        );

    background: var(--bxd-panel-2);
}


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

body.bx-discovery-publication .result-card img,
body.bx-discovery-publication .search-result img,
body.bx-discovery-publication .news-card img,
body.bx-discovery-publication .content-card img,
body.bx-discovery-publication .game-card img,
body.bx-discovery-publication .card img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    background: #111;

    transition:
        transform .24s ease;
}

body.bx-discovery-publication .result-card:hover img,
body.bx-discovery-publication .search-result:hover img,
body.bx-discovery-publication .news-card:hover img,
body.bx-discovery-publication .content-card:hover img,
body.bx-discovery-publication .game-card:hover img,
body.bx-discovery-publication .card:hover img {
    transform: scale(1.025);
}


/* ==========================================================
   CARD COPY
========================================================== */

body.bx-discovery-publication .result-copy,
body.bx-discovery-publication .card-copy,
body.bx-discovery-publication .news-card-copy,
body.bx-discovery-publication .content-copy {
    padding: 17px;
}

body.bx-discovery-publication .result-card h2,
body.bx-discovery-publication .result-card h3,
body.bx-discovery-publication .search-result h2,
body.bx-discovery-publication .search-result h3,
body.bx-discovery-publication .news-card h2,
body.bx-discovery-publication .news-card h3,
body.bx-discovery-publication .content-card h2,
body.bx-discovery-publication .content-card h3,
body.bx-discovery-publication .game-card h2,
body.bx-discovery-publication .game-card h3,
body.bx-discovery-publication .card h2,
body.bx-discovery-publication .card h3 {
    margin:
        8px
        0
        0;

    color: #fff;

    font-size:
        clamp(
            18px,
            2vw,
            22px
        );

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -.028em;

    text-wrap: balance;
}

body.bx-discovery-publication .result-card h2 a,
body.bx-discovery-publication .result-card h3 a,
body.bx-discovery-publication .search-result h2 a,
body.bx-discovery-publication .search-result h3 a,
body.bx-discovery-publication .news-card h2 a,
body.bx-discovery-publication .news-card h3 a,
body.bx-discovery-publication .content-card h2 a,
body.bx-discovery-publication .content-card h3 a,
body.bx-discovery-publication .game-card h2 a,
body.bx-discovery-publication .game-card h3 a,
body.bx-discovery-publication .card h2 a,
body.bx-discovery-publication .card h3 a {
    color: inherit;

    text-decoration: none;
}

body.bx-discovery-publication .result-card p,
body.bx-discovery-publication .search-result p,
body.bx-discovery-publication .news-card p,
body.bx-discovery-publication .content-card p,
body.bx-discovery-publication .game-card p,
body.bx-discovery-publication .card p {
    margin:
        9px
        0
        0;

    color: var(--bxd-muted);

    font-size: 12px;

    line-height: 1.55;
}


/* ==========================================================
   RESULT LIST FALLBACK
========================================================== */

body.bx-discovery-publication .result-item,
body.bx-discovery-publication .search-item,
body.bx-discovery-publication .category-item {
    display: grid;

    grid-template-columns:
        230px
        minmax(0,1fr);

    gap: 20px;

    padding:
        18px
        0;

    border-bottom:
        1px
        solid
        var(--bxd-line);
}

body.bx-discovery-publication .result-item img,
body.bx-discovery-publication .search-item img,
body.bx-discovery-publication .category-item img {
    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius: 7px;

    background: #111;
}


/* ==========================================================
   SHORTCUTS / FILTERS / PILLS
========================================================== */

body.bx-discovery-publication .search-shortcuts,
body.bx-discovery-publication .category-filters,
body.bx-discovery-publication .filter-row,
body.bx-discovery-publication .topic-row {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin:
        18px
        0
        28px;
}

body.bx-discovery-publication .search-shortcuts a,
body.bx-discovery-publication .category-filters a,
body.bx-discovery-publication .filter-row a,
body.bx-discovery-publication .topic-row a {
    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding:
        0
        11px;

    border:
        1px
        solid
        var(--bxd-line);

    border-radius: 5px;

    background:
        rgba(
            255,
            255,
            255,
            .02
        );

    color:
        rgba(
            255,
            255,
            255,
            .68
        );

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .07em;

    text-decoration: none;

    text-transform: uppercase;
}

body.bx-discovery-publication .search-shortcuts a:hover,
body.bx-discovery-publication .category-filters a:hover,
body.bx-discovery-publication .filter-row a:hover,
body.bx-discovery-publication .topic-row a:hover {
    border-color:
        rgba(
            227,
            22,
            22,
            .52
        );

    color: #fff;
}


/* ==========================================================
   EMPTY RESULTS
========================================================== */

body.bx-discovery-publication .empty-state,
body.bx-discovery-publication .no-results,
body.bx-discovery-publication .search-empty {
    min-height: 240px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    margin:
        30px
        0
        60px;

    padding: 34px;

    border:
        1px
        dashed
        rgba(
            255,
            255,
            255,
            .15
        );

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            .018
        );

    color: var(--bxd-muted);

    text-align: center;
}


/* ==========================================================
   LINKS
========================================================== */

body.bx-discovery-publication main a {
    text-underline-offset: 3px;
}


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

@media (max-width: 950px) {

    body.bx-discovery-publication .search-results,
    body.bx-discovery-publication .results-grid,
    body.bx-discovery-publication .category-grid,
    body.bx-discovery-publication .content-grid,
    body.bx-discovery-publication .news-grid,
    body.bx-discovery-publication .game-grid,
    body.bx-discovery-publication .cards-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


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

@media (max-width: 700px) {

    body.bx-discovery-publication main {
        width:
            min(
                calc(100% - 22px),
                1240px
            );
    }

    body.bx-discovery-publication .search-hero,
    body.bx-discovery-publication .category-hero,
    body.bx-discovery-publication .page-hero,
    body.bx-discovery-publication .category-header,
    body.bx-discovery-publication .search-header {
        margin-top: 18px;

        padding:
            27px
            20px;

        border-radius: 9px;
    }

    body.bx-discovery-publication h1 {
        font-size:
            clamp(
                38px,
                13vw,
                58px
            );
    }

    body.bx-discovery-publication .search-results,
    body.bx-discovery-publication .results-grid,
    body.bx-discovery-publication .category-grid,
    body.bx-discovery-publication .content-grid,
    body.bx-discovery-publication .news-grid,
    body.bx-discovery-publication .game-grid,
    body.bx-discovery-publication .cards-grid {
        grid-template-columns: 1fr;
    }

    body.bx-discovery-publication form[role="search"],
    body.bx-discovery-publication .search-form,
    body.bx-discovery-publication .search-box {
        flex-direction: column;
    }

    body.bx-discovery-publication form[role="search"] button,
    body.bx-discovery-publication .search-form button,
    body.bx-discovery-publication .search-box button {
        width: 100%;
    }

    body.bx-discovery-publication .result-item,
    body.bx-discovery-publication .search-item,
    body.bx-discovery-publication .category-item {
        grid-template-columns:
            110px
            minmax(0,1fr);

        gap: 13px;
    }

}


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

@media (max-width: 430px) {

    body.bx-discovery-publication .result-item,
    body.bx-discovery-publication .search-item,
    body.bx-discovery-publication .category-item {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

body.bx-discovery-publication a:focus-visible,
body.bx-discovery-publication button:focus-visible,
body.bx-discovery-publication input:focus-visible {
    outline:
        3px
        solid
        #fff;

    outline-offset: 3px;
}


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

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

    body.bx-discovery-publication .result-card,
    body.bx-discovery-publication .search-result,
    body.bx-discovery-publication .news-card,
    body.bx-discovery-publication .content-card,
    body.bx-discovery-publication .game-card,
    body.bx-discovery-publication .card,
    body.bx-discovery-publication img {
        transition: none !important;
    }

}


/* ==========================================================
   BOXXHEAD SEARCH — FINAL DARK RESULT OVERRIDE
========================================================== */

body.bx-discovery-publication .search-result-card,
body.bx-discovery-publication .search-result,
body.bx-discovery-publication .result-card,
body.bx-discovery-publication .result-row,
body.bx-discovery-publication .archive-card,
body.bx-discovery-publication article {
    background: #101010 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.12) !important;
}

body.bx-discovery-publication .search-result-card *,
body.bx-discovery-publication .search-result *,
body.bx-discovery-publication .result-card *,
body.bx-discovery-publication .result-row *,
body.bx-discovery-publication .archive-card * {
    color: inherit;
}

body.bx-discovery-publication .search-result-card h2,
body.bx-discovery-publication .search-result-card h3,
body.bx-discovery-publication .search-result h2,
body.bx-discovery-publication .search-result h3,
body.bx-discovery-publication .result-card h2,
body.bx-discovery-publication .result-card h3,
body.bx-discovery-publication .result-row h2,
body.bx-discovery-publication .result-row h3 {
    color: #fff !important;
    opacity: 1 !important;
}

body.bx-discovery-publication .search-result-card p,
body.bx-discovery-publication .search-result p,
body.bx-discovery-publication .result-card p,
body.bx-discovery-publication .result-row p {
    color: rgba(255,255,255,.68) !important;
    opacity: 1 !important;
}

body.bx-discovery-publication .search-result-card small,
body.bx-discovery-publication .search-result small,
body.bx-discovery-publication .result-card small,
body.bx-discovery-publication .result-row small {
    color: #ff2929 !important;
}

body.bx-discovery-publication .search-result-card:hover,
body.bx-discovery-publication .search-result:hover,
body.bx-discovery-publication .result-card:hover,
body.bx-discovery-publication .result-row:hover,
body.bx-discovery-publication .archive-card:hover {
    background: #151515 !important;
    border-color: rgba(227,22,22,.55) !important;
}