/**
 * [RS] Rogue Soldiers - 7 Days to Die
 * Page-specific styles only.
 *
 * Shared resets, typography, buttons, containers and section primitives
 * are provided by core.css and components.css.
 */


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

.page-7-days-to-die {
    --bg-dark: #080808;
    --panel: #101010;
    --panel-light: #141414;
    --muted: rgba(255, 255, 255, .48);
    --faint: rgba(255, 255, 255, .25);
    --red-soft: rgba(189, 0, 0, .08);

    scroll-padding-top: 100px;
}


/*
 * Prevent grid/flex children and embedded media from
 * forcing the page wider than the viewport.
 */

.page-7-days-to-die,
.page-7-days-to-die main,
.page-7-days-to-die section,
.page-7-days-to-die .site-container {
    min-width: 0;
}


.page-7-days-to-die img,
.page-7-days-to-die video,
.page-7-days-to-die iframe {
    max-width: 100%;
}


.page-7-days-to-die .section-copy {
    max-width: 760px;

    margin-top: 22px;

    color: var(--muted);

    font-size: .94rem;
    line-height: 1.82;
}


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

/*
 * Hero structure and responsive behavior are provided
 * globally by components.css.
 */


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


/* =====================================================
   QUICK INFO
===================================================== */

/*
 * Shared quick-info components are provided by the
 * global component stylesheet.
 */


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

.server-about-layout {
    display: grid;

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

    gap: 70px;

    align-items: start;

    min-width: 0;
}


.server-about-layout > * {
    min-width: 0;
}


.server-about-panel {
    min-width: 0;

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

    background:
        #0d0d0d;
}


.server-about-item {
    display: grid;

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

    gap: 15px;

    min-width: 0;

    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-item > div:last-child {
    min-width: 0;
}


.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;

    overflow-wrap: anywhere;
}


/* =====================================================
   FEATURES
===================================================== */

/*
 * Shared feature components are provided by the
 * global component stylesheet.
 */


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

.mods-list {
    margin-top: 48px;

    min-width: 0;

    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-width: 0;
    min-height: 80px;

    padding:
        11px
        5px;

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


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


.mod-row > * {
    min-width: 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;

    overflow-wrap: anywhere;
}


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


.connect-details {
    min-width: 310px;

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

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


.connect-detail {
    display: grid;

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

    gap: 14px;

    min-width: 0;
    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 {
    min-width: 0;

    color: #fff;

    font-size: .66rem;

    font-weight: 600;

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* =====================================================
   RULES
===================================================== */

/*
 * Shared rule components are provided by the global
 * component stylesheet.
 */


/* =====================================================
   DISCORD TOOLS
===================================================== */

/*
 * Shared Discord/tool components are provided by the
 * global component stylesheet.
 */


/* =====================================================
   FINAL CTA
===================================================== */

/*
 * Shared CTA components are provided by the global
 * component stylesheet.
 */


/* =====================================================
   RESPONSIVE - LARGE TABLET
===================================================== */

@media (max-width: 1199.98px) {

    .server-about-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .75fr);

        gap: 45px;
    }

}


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

@media (max-width: 991.98px) {

    /*
     * About Server
     */

    .server-about-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    /*
     * Connection
     */


    .connect-details {
        min-width: 0;
        width: 100%;
    }

}


/* =====================================================
   RESPONSIVE - MOBILE
===================================================== */

@media (max-width: 767.98px) {

    /*
     * Page
     */

    .page-7-days-to-die {
        scroll-padding-top: 80px;
    }


    .page-7-days-to-die .section-copy {
        max-width: none;

        font-size: .9rem;

        line-height: 1.72;
    }


    /*
     * Server Facts
     */


    /*
     * About Server
     */

    .server-about-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .server-about-panel {
        width: 100%;
        min-width: 0;
    }


    .server-about-item {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 13px;

        padding:
            20px
            18px;
    }


    .server-about-icon {
        width: 36px;
        height: 36px;
    }


    .server-about-copy {
        font-size: .72rem;
    }


    /*
     * Server Modifications
     */

    .mods-list {
        margin-top: 35px;
    }


    .mod-row {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap:
            10px
            14px;

        min-height: 0;

        padding:
            16px
            4px;
    }


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


    /*
     * Connection
     */


    .connect-details {
        width: 100%;
        min-width: 0;
    }


    .connect-detail {
        grid-template-columns:
            90px
            minmax(0, 1fr);

        gap: 12px;

        padding:
            10px
            14px;
    }


    .connect-detail-value {
        min-width: 0;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

}


/* =====================================================
   RESPONSIVE - SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    /*
     * Server Facts
     */


    /*
     * About Server
     */

    .server-about-item {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: 11px;

        padding:
            18px
            14px;
    }


    .server-about-icon {
        width: 34px;
        height: 34px;
    }


    /*
     * Server Modifications
     */

    .mod-row {
        grid-template-columns:
            36px
            minmax(0, 1fr);

        gap:
            9px
            11px;

        padding:
            15px
            2px;
    }


    .mod-icon {
        width: 36px;
        height: 36px;
    }


    .mod-copy {
        grid-column: 1 / -1;

        padding-left: 47px;
    }


    /*
     * Connection
     */


    .connect-detail {
        grid-template-columns: 1fr;

        gap: 4px;

        padding:
            11px
            13px;
    }


    .connect-detail-label {
        font-size: .53rem;
    }


    .connect-detail-value {
        font-size: .65rem;
    }

}


/* =====================================================
   RESPONSIVE - VERY SMALL MOBILE
===================================================== */

@media (max-width: 360px) {

    .server-about-item {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .server-about-icon {
        width: 36px;
        height: 36px;
    }


    .mod-row {
        grid-template-columns:
            34px
            minmax(0, 1fr);
    }


    .mod-copy {
        padding-left: 45px;
    }


}