/**
 * 7 Days to Die page-specific styles.
 * Shared RS components are intentionally kept in components.css.
 */

.page-7-days-to-die {
  --hero-grid-opacity: .075;
  --hero-grid-line-alpha: .05;
  --hero-grid-size: 72px;
  --hero-eyebrow-margin: 20px;
  --hero-eyebrow-size: .67rem;
  --hero-eyebrow-spacing: .30em;
  --hero-title-max: none;
  --hero-title-size: clamp(4rem, 8.1vw, 7.4rem);
  --hero-title-line-height: .82;
  --hero-copy-max: 760px;
  --hero-copy-margin: 30px;
  --hero-copy-color: rgba(255,255,255,.57);
  --hero-copy-size: .98rem;
  --hero-copy-line-height: 1.84;
}

/* =====================================================
   HERO
===================================================== */

.game-hero {

    position: relative;

    min-height: 78vh;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    background:

        linear-gradient(
            90deg,
            rgba(5,5,5,.96) 0%,
            rgba(5,5,5,.82) 34%,
            rgba(5,5,5,.48) 62%,
            rgba(5,5,5,.30) 100%
        ),

        url("https://www.well-played.com.au/wp-content/uploads/2016/06/7dtd987.jpg");

    background-size:
        cover;

    background-position:
        center 38%;

    background-repeat:
        no-repeat;

}


.game-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 77% 34%,
            rgba(189,0,0,.16),
            transparent 34%
        ),

        radial-gradient(
            circle at 28% 78%,
            rgba(122,69,30,.10),
            transparent 30%
        ),

        linear-gradient(
            to bottom,
            rgba(0,0,0,.08) 0%,
            rgba(0,0,0,.12) 45%,
            rgba(0,0,0,.58) 78%,
            var(--bg) 100%
        );

}


.game-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    opacity: .28;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            115deg,
            transparent 0,
            transparent 94px,
            rgba(255,255,255,.022) 95px,
            rgba(255,255,255,.022) 96px
        );

}
.hero-inner {

    position: relative;

    z-index: 3;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(330px, .85fr);

    gap: 80px;

    align-items: end;

    padding-top:
        165px;

    padding-bottom:
        76px;

}
/* =====================================================
   HERO SERVER PANEL
===================================================== */

.server-overview {

    position: relative;

    padding:
        7px
        0
        7px
        31px;

    border-left:
        1px solid
        rgba(189,0,0,.60);

}


.server-overview::before {

    content: "";

    position: absolute;

    top: 0;
    left: -1px;

    width: 1px;
    height: 72px;

    background:
        var(--red-bright);

    box-shadow:
        0 0 22px
        rgba(224,0,0,.30);

}


.server-overview-label {

    color:
        var(--red-bright);

    font-size: .57rem;

    font-weight: 800;

    letter-spacing: .21em;

    text-transform: uppercase;

}


.server-overview-title {

    max-width: 500px;

    margin-top: 17px;

    color: #fff;

    font-size:
        clamp(
            1.55rem,
            2.2vw,
            2.2rem
        );

    font-weight: 800;

    line-height: 1.22;

    letter-spacing: -.025em;

}


.server-overview-copy {

    max-width: 500px;

    margin-top: 16px;

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

    font-size: .80rem;

    line-height: 1.72;

}


.server-facts {

    margin-top: 26px;

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

}


.server-fact {

    display: grid;

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

    gap: 12px;

    align-items: center;

    min-height: 45px;

    border-bottom:
        1px solid
        var(--border-soft);

}


.server-fact:last-child {
    border-bottom: 0;
}


.server-fact i {

    color:
        var(--red-bright);

    font-size: .76rem;

}


.server-fact strong {

    color: #fff;

    font-size: .65rem;

}


.server-fact span {

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

    font-size: .61rem;

}


/* =====================================================
   ABOUT SERVER
===================================================== */

.server-about-layout {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(380px,.75fr);

    gap: 70px;

    align-items: start;

}


.server-about-panel {

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

    background:
        #0d0d0d;

}


.server-about-item {

    display: grid;

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

    gap: 15px;

    padding:
        24px
        26px;

    border-bottom:
        1px solid
        var(--border-soft);

}


.server-about-item:last-child {
    border-bottom: 0;
}


.server-about-icon {

    width: 38px;
    height: 38px;

    display: flex;

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

    border:
        1px solid
        var(--red-border);

    color:
        var(--red-bright);

    background:
        var(--red-soft);

}


.server-about-title {

    color: #fff;

    font-size: .86rem;

    font-weight: 700;

}


.server-about-copy {

    margin-top: 6px;

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

    font-size: .74rem;

    line-height: 1.65;

}


/* =====================================================
   SERVER MODIFICATIONS
===================================================== */

.mods-list {

    margin-top: 48px;

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

}


.mod-row {

    display: grid;

    grid-template-columns:
        48px
        minmax(220px,.8fr)
        minmax(0,1.2fr);

    gap: 20px;

    align-items: center;

    min-height: 80px;

    padding:
        11px
        5px;

    border-bottom:
        1px solid
        var(--border-soft);

}


.mod-row:last-child {
    border-bottom: 0;
}


.mod-icon {

    width: 40px;
    height: 40px;

    display: flex;

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

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

    color:
        var(--red-bright);

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

}


.mod-title {

    color: #fff;

    font-size: .76rem;

    font-weight: 700;

}


.mod-type {

    margin-top: 4px;

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

    font-size: .56rem;

    text-transform: uppercase;

    letter-spacing: .09em;

}


.mod-copy {

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

    font-size: .69rem;

    line-height: 1.55;

}


/* =====================================================
   CONNECTION
===================================================== */

.connect-panel {

    display: grid;

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

    gap: 50px;

    align-items: center;

    margin-top: 48px;

    padding: 35px;

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

    background:
        linear-gradient(
            120deg,
            rgba(189,0,0,.06),
            #0d0d0d 40%
        );

}


.connect-label {

    color:
        var(--red-bright);

    font-size: .56rem;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;

}


.connect-title {

    margin-top: 10px;

    color: #fff;

    font-size:
        clamp(
            1.6rem,
            2.7vw,
            2.8rem
        );

    font-weight: 900;

    line-height: 1;

    letter-spacing: -.04em;

    text-transform: uppercase;

}


.connect-copy {

    max-width: 700px;

    margin-top: 14px;

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

    font-size: .76rem;

    line-height: 1.7;

}


.connect-details {

    min-width: 310px;

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

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

}


.connect-detail {

    display: grid;

    grid-template-columns:
        95px
        1fr;

    gap: 14px;

    min-height: 44px;

    align-items: center;

    padding:
        0
        15px;

    border-bottom:
        1px solid
        var(--border-soft);

}


.connect-detail:last-child {
    border-bottom: 0;
}


.connect-detail-label {

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

    font-size: .55rem;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;

}


.connect-detail-value {

    color: #fff;

    font-size: .66rem;

    font-weight: 600;

}


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

@media (max-width: 991.98px) {

    .hero-inner,
    .server-about-layout {

        grid-template-columns:
            1fr;

    }


    .server-overview {
        max-width: 680px;
    }


    .connect-panel {

        grid-template-columns:
            1fr;

    }


    .connect-details {

        min-width: 0;

        width: 100%;

    }

}


@media (max-width: 767.98px) {

.game-hero {

        min-height:
            auto;

        background-position:
            58% center;

    }


    .hero-inner {

        padding-top:
            150px;

        padding-bottom:
            65px;

    }


    .hero-title {

        font-size:
            clamp(
                3.4rem,
                16vw,
                5.2rem
            );

    }
.mod-row {

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

        gap: 14px;

    }


    .mod-copy {
        grid-column: 2;
    }
}


@media (max-width: 480px) {

    .server-fact {

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

        gap: 8px;

        padding:
            8px
            0;

    }


    .server-fact span {
        grid-column: 2;
    }


    .connect-panel {
        padding: 25px;
    }


    .connect-detail {

        grid-template-columns:
            1fr;

        gap: 4px;

        padding:
            10px
            14px;

    }

}