/* ==========================================================
   WORLD OF FROSTVOID — SERVER
   ========================================================== */

.fv-server-page {
    position: relative;
    min-height: 100vh;

    padding:
        180px 20px
        100px;

    overflow: hidden;

    color: #9eafc0;

    background: #02050a;
}


/* Background */

.fv-server-bg {
    position: absolute;
    inset: 0;

    background-image:
        url('../img/reborn/home/hero.png');

    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;

    transform: scale(1.045);

    filter:
        brightness(.31)
        saturate(.58);
}

.fv-server-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2,5,10,.70),
            rgba(2,5,10,.91) 50%,
            rgba(2,5,10,.98)
        );

    backdrop-filter: blur(3px);
}


/* Container */

.fv-server-container {
    position: relative;

    z-index: 5;

    width: min(1200px, 100%);

    margin: 0 auto;
}


/* ==========================================================
   HEADING
   ========================================================== */

.fv-server-heading {
    margin-bottom: 34px;

    text-align: center;
}

.fv-server-heading > span {
    color: #6e8297;

    font-family: Georgia, serif;

    font-size: 9px;

    letter-spacing: .28em;
}

.fv-server-heading h1 {
    margin:
        8px 0 0;

    color: #dce5ed;

    font-family: Georgia, serif;

    font-size: 42px;
    font-weight: 400;

    letter-spacing: .17em;
}

.fv-server-heading p {
    margin:
        11px 0 0;

    color: #65798e;

    font-family: Georgia, serif;

    font-size: 10px;

    letter-spacing: .15em;
}


.fv-server-divider {
    width: 270px;

    margin:
        17px auto
        0;

    display: flex;

    align-items: center;

    gap: 9px;
}

.fv-server-divider i {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(83,177,228,.50)
        );
}

.fv-server-divider i:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(151,75,199,.50),
            transparent
        );
}

.fv-server-divider b {
    width: 8px;
    height: 8px;

    transform: rotate(45deg);

    background: #73889d;
}


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

.fv-server-top {
    display: grid;

    grid-template-columns:
        minmax(0, 1.75fr)
        minmax(300px, .75fr);

    gap: 17px;
}

.fv-server-lower {
    margin-top: 17px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(300px, .8fr);

    gap: 17px;
}


/* ==========================================================
   GENERIC CARD
   ========================================================== */

.fv-server-featured,
.fv-server-status-card,
.fv-server-news,
.fv-server-discord,
.fv-server-identity {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(7,15,26,.985),
            rgba(3,8,16,.995)
        );

    border:
        1px solid rgba(91,129,166,.26);

    box-shadow:
        0 24px 55px rgba(0,0,0,.32);
}

.fv-server-featured::before,
.fv-server-status-card::before,
.fv-server-news::before,
.fv-server-discord::before,
.fv-server-identity::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 1px;

    z-index: 5;

    background:
        linear-gradient(
            90deg,
            #58b8eb,
            transparent 44%,
            transparent 56%,
            #9850cb
        );
}


/* ==========================================================
   FEATURED
   ========================================================== */

.fv-server-featured {
    min-height: 390px;

    display: grid;

    grid-template-columns:
        minmax(250px,.9fr)
        minmax(0,1.1fr);
}

.fv-server-featured-image {
    position: relative;

    min-height: 390px;

    overflow: hidden;
}

.fv-server-featured-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.fv-server-featured-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(4,9,16,.72) 80%,
            rgba(4,9,16,.96)
        );
}

.fv-server-featured-content {
    padding:
        40px 34px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.fv-server-eyebrow {
    color: #6594b3;

    font-family: Georgia, serif;

    font-size: 8px;

    letter-spacing: .18em;
}

.fv-server-featured-content h2 {
    margin:
        8px 0 11px;

    color: #d3dde6;

    font-family: Georgia, serif;

    font-size: 26px;
    font-weight: 400;

    line-height: 1.2;
}

.fv-server-news-meta {
    display: flex;

    gap: 14px;

    color: #596e81;

    font-size: 9px;
}

.fv-server-featured-content p {
    margin:
        19px 0 23px;

    color: #78899b;

    font-size: 12px;

    line-height: 1.65;
}

.fv-server-button {
    width: max-content;
    min-width: 150px;
    height: 40px;

    padding:
        0 17px;

    display: flex;

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

    gap: 10px;

    color: #b9cbd9 !important;

    border:
        1px solid rgba(78,151,198,.40);

    background:
        rgba(7,26,42,.40);

    font-family: Georgia, serif;

    font-size: 9px;

    letter-spacing: .11em;

    text-decoration: none !important;
}

.fv-server-button:hover {
    color: #fff !important;

    border-color:
        rgba(91,178,226,.68);
}


/* ==========================================================
   CARD HEADINGS
   ========================================================== */

.fv-server-card-heading {
    padding:
        21px 22px;

    display: flex;

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

    border-bottom:
        1px solid rgba(255,255,255,.055);
}

.fv-server-card-heading span {
    color: #5e7185;

    font-family: Georgia, serif;

    font-size: 8px;

    letter-spacing: .17em;
}

.fv-server-card-heading h3 {
    margin:
        4px 0 0;

    color: #ccd7e0;

    font-family: Georgia, serif;

    font-size: 16px;
    font-weight: 400;

    letter-spacing: .08em;
}

.fv-server-card-heading > i {
    color: #71869b;

    font-size: 16px;
}


/* ==========================================================
   REALM
   ========================================================== */

.fv-server-realm {
    padding:
        22px;
}

.fv-server-realm-title {
    display: flex;

    align-items: center;
    justify-content: space-between;
}

.fv-server-realm-title > div {
    display: flex;

    align-items: center;

    gap: 8px;
}

.fv-server-realm-title strong {
    color: #d1dbe4;

    font-family: Georgia, serif;

    font-size: 15px;
    font-weight: 400;
}

.fv-server-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.fv-server-status-dot.is-online {
    background: #54d79a;

    box-shadow:
        0 0 9px rgba(84,215,154,.5);
}

.fv-server-status-dot.is-offline {
    background: #d66571;

    box-shadow:
        0 0 9px rgba(214,101,113,.4);
}

.fv-server-realm-state {
    color: #687c90;

    font-family: Georgia, serif;

    font-size: 8px;

    letter-spacing: .12em;
}

.fv-server-realm-stats {
    margin-top: 20px;

    display: grid;

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

    gap: 1px;

    background:
        rgba(255,255,255,.055);
}

.fv-server-realm-stat {
    min-height: 68px;

    display: flex;

    flex-direction: column;

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

    background:
        rgba(3,8,15,.93);
}

.fv-server-realm-stat span {
    color: #5d7082;

    font-size: 8px;

    letter-spacing: .10em;
}

.fv-server-realm-stat strong {
    margin-top: 3px;

    color: #c5d1dc;

    font-family: Georgia, serif;

    font-size: 19px;
    font-weight: 400;
}

.fv-server-realm-stat.fv-alliance strong {
    color: #69b7e0;
}

.fv-server-realm-stat.fv-horde strong {
    color: #bd7187;
}


.fv-server-population {
    position: relative;

    height: 3px;

    margin-top: 15px;

    display: flex;

    overflow: hidden;

    background:
        rgba(255,255,255,.04);
}

.fv-server-population-alliance {
    height: 100%;

    background: #418bb9;
}

.fv-server-population-horde {
    height: 100%;

    background: #93485f;
}

.fv-server-realmlist {
    margin:
        0 22px 22px;

    padding:
        13px;

    border:
        1px solid rgba(75,143,187,.25);

    background:
        rgba(4,11,19,.75);
}

.fv-server-realmlist span {
    display: block;

    color: #5f7488;

    font-family: Georgia, serif;

    font-size: 7px;

    letter-spacing: .15em;
}

.fv-server-realmlist code {
    display: block;

    margin-top: 5px;

    color: #72bfdf;

    font-size: 10px;
}


/* ==========================================================
   NEWS LIST
   ========================================================== */

.fv-server-news-list {
    padding:
        5px 18px 15px;
}

.fv-server-news-item {
    min-height: 92px;

    padding:
        12px 0;

    display: grid;

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

    align-items: center;

    gap: 15px;

    border-bottom:
        1px solid rgba(255,255,255,.05);
}

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

.fv-server-news-thumb {
    height: 68px;

    overflow: hidden;

    border:
        1px solid rgba(78,119,154,.18);
}

.fv-server-news-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.fv-server-news-text > span {
    color: #586c80;

    font-family: Georgia, serif;

    font-size: 8px;
}

.fv-server-news-text h4 {
    margin:
        3px 0 4px;

    font-family: Georgia, serif;

    font-size: 13px;
    font-weight: 400;
}

.fv-server-news-text h4 a {
    color: #becbd6 !important;

    text-decoration: none !important;
}

.fv-server-news-text h4 a:hover {
    color: #fff !important;
}

.fv-server-news-text p {
    margin: 0;

    color: #677a8d;

    font-size: 10px;

    line-height: 1.45;
}

.fv-server-news-arrow {
    color: #56758d !important;

    text-decoration: none !important;
}


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

.fv-server-discord {
    padding-bottom: 22px;
}

.fv-server-discord-main {
    padding:
        24px 22px
        15px;

    display: flex;

    align-items: center;

    gap: 14px;
}

.fv-server-discord-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    color: #9b83d6;

    border:
        1px solid rgba(125,92,178,.28);

    background:
        rgba(89,61,135,.08);

    font-size: 23px;
}

.fv-server-discord-name span {
    display: block;

    color: #617388;

    font-family: Georgia, serif;

    font-size: 7px;

    letter-spacing: .16em;
}

.fv-server-discord-name strong {
    display: block;

    margin-top: 4px;

    color: #d1d8e4;

    font-family: Georgia, serif;

    font-size: 15px;
    font-weight: 400;
}

.fv-server-discord > p {
    margin:
        0 22px
        20px;

    color: #6e8093;

    font-size: 11px;

    line-height: 1.6;
}

.fv-server-discord-stats {
    margin:
        0 22px
        20px;

    display: grid;

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

    border:
        1px solid rgba(255,255,255,.055);
}

.fv-server-discord-stats > div {
    min-height: 63px;

    display: flex;

    flex-direction: column;

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

    border-right:
        1px solid rgba(255,255,255,.055);
}

.fv-server-discord-stats > div:last-child {
    border-right: 0;
}

.fv-server-discord-stats strong {
    color: #c4cfda;

    font-family: Georgia, serif;

    font-size: 17px;
    font-weight: 400;
}

.fv-server-discord-stats span {
    margin-top: 2px;

    color: #5d7083;

    font-size: 7px;

    letter-spacing: .10em;
}

.fv-server-discord-button {
    height: 42px;

    margin:
        0 22px;

    display: flex;

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

    gap: 9px;

    color: #b5a8d0 !important;

    border:
        1px solid rgba(132,84,179,.34);

    background:
        linear-gradient(
            90deg,
            rgba(29,31,55,.55),
            rgba(60,29,76,.45)
        );

    font-family: Georgia, serif;

    font-size: 9px;

    letter-spacing: .10em;

    text-decoration: none !important;
}

.fv-server-discord-button:hover {
    color: #fff !important;

    border-color:
        rgba(160,92,205,.60);
}


/* ==========================================================
   IDENTITY STRIP
   ========================================================== */

.fv-server-identity {
    margin-top: 17px;

    display: grid;

    grid-template-columns:
        repeat(5,1fr);
}

.fv-server-identity > div {
    min-height: 84px;

    display: flex;

    flex-direction: column;

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

    border-right:
        1px solid rgba(255,255,255,.05);
}

.fv-server-identity > div:last-child {
    border-right: 0;
}

.fv-server-identity i {
    margin-bottom: 7px;

    color: #648aa4;

    font-size: 15px;
}

.fv-server-identity span {
    color: #586b7e;

    font-size: 7px;

    letter-spacing: .12em;
}

.fv-server-identity strong {
    margin-top: 3px;

    color: #b8c5d0;

    font-family: Georgia, serif;

    font-size: 10px;
    font-weight: 400;

    letter-spacing: .07em;
}


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

.fv-server-empty {
    padding: 35px;

    color: #627589;

    text-align: center;
}


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

@media (max-width: 950px) {

    .fv-server-top,
    .fv-server-lower {
        grid-template-columns: 1fr;
    }

    .fv-server-featured {
        grid-template-columns: 1fr;
    }

    .fv-server-featured-image {
        min-height: 250px;
    }

    .fv-server-identity {
        grid-template-columns:
            repeat(2,1fr);
    }

}

@media (max-width: 650px) {

    .fv-server-page {
        padding:
            145px 13px
            70px;
    }

    .fv-server-heading h1 {
        font-size: 29px;
    }

    .fv-server-featured-content {
        padding:
            28px 21px;
    }

    .fv-server-news-item {
        grid-template-columns:
            85px
            minmax(0,1fr);
    }

    .fv-server-news-arrow {
        display: none;
    }

    .fv-server-identity {
        grid-template-columns: 1fr;
    }

    .fv-server-identity > div {
        border-right: 0;

        border-bottom:
            1px solid rgba(255,255,255,.05);
    }

}


/* ==========================================================
   FROSTVOID SERVER — COMPACT MODE
   ========================================================== */

.fv-server-page {
    min-height: auto;
    padding: 118px 18px 42px;
}

.fv-server-container {
    width: min(1420px, 100%);
}

.fv-server-heading {
    margin-bottom: 14px;
}

.fv-server-heading > span {
    font-size: 8px;
    letter-spacing: .22em;
}

.fv-server-heading h1 {
    margin: 4px 0 0;
    font-size: 30px;
    letter-spacing: .12em;
}

.fv-server-heading p {
    margin: 6px 0 0;
    font-size: 8px;
    letter-spacing: .12em;
}

.fv-server-divider {
    width: 180px;
    margin: 8px auto 0;
}

/* separaciones generales más cerradas */

.fv-server-top,
.fv-server-lower {
    gap: 10px;
}

.fv-server-lower {
    margin-top: 10px;
    align-items: start;
}

.fv-server-identity {
    margin-top: 10px;
}

/* cards más compactas */

.fv-server-featured,
.fv-server-status-card,
.fv-server-news,
.fv-server-discord,
.fv-server-identity {
    box-shadow: 0 14px 30px rgba(0,0,0,.24);
}

/* noticia destacada */

.fv-server-featured {
    min-height: 245px;
    grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr);
}

.fv-server-featured-image {
    min-height: 245px;
}

.fv-server-featured-content {
    padding: 22px 22px;
}

.fv-server-featured-content h2 {
    margin: 6px 0 8px;
    font-size: 20px;
    line-height: 1.15;
}

.fv-server-featured-content p {
    margin: 12px 0 16px;
    font-size: 11px;
    line-height: 1.5;
}

.fv-server-news-meta {
    gap: 10px;
    font-size: 8px;
}

.fv-server-button {
    min-width: 128px;
    height: 34px;
    padding: 0 14px;
    font-size: 8px;
}

/* headings internos */

.fv-server-card-heading {
    padding: 14px 16px;
}

.fv-server-card-heading span {
    font-size: 7px;
}

.fv-server-card-heading h3 {
    margin: 3px 0 0;
    font-size: 13px;
}

/* panel reino */

.fv-server-realm {
    padding: 14px 16px;
}

.fv-server-realm-title strong {
    font-size: 13px;
}

.fv-server-realm-stats {
    margin-top: 12px;
}

.fv-server-realm-stat {
    min-height: 54px;
}

.fv-server-realm-stat strong {
    font-size: 15px;
}

.fv-server-realmlist {
    margin: 0 16px 16px;
    padding: 10px 11px;
}

.fv-server-realmlist code {
    font-size: 9px;
}

/* últimas noticias: scroll interno */

.fv-server-news-list {
    padding: 2px 14px 10px;
    max-height: 286px;
    overflow-y: auto;
}

.fv-server-news-item {
    min-height: 68px;
    padding: 8px 0;
    grid-template-columns: 82px minmax(0,1fr) 18px;
    gap: 12px;
}

.fv-server-news-thumb {
    height: 52px;
}

.fv-server-news-text > span {
    font-size: 7px;
}

.fv-server-news-text h4 {
    margin: 2px 0 3px;
    font-size: 11px;
}

.fv-server-news-text p {
    font-size: 9px;
    line-height: 1.35;
}

/* scrollbar elegante */

.fv-server-news-list::-webkit-scrollbar {
    width: 6px;
}

.fv-server-news-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.03);
}

.fv-server-news-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(84,177,227,.65), rgba(149,78,201,.65));
    border-radius: 20px;
}

/* discord más compacto */

.fv-server-discord {
    padding-bottom: 16px;
}

.fv-server-discord-main {
    padding: 16px 16px 10px;
    gap: 10px;
}

.fv-server-discord-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
}

.fv-server-discord-name strong {
    font-size: 13px;
}

.fv-server-discord > p {
    margin: 0 16px 14px;
    font-size: 10px;
    line-height: 1.45;
}

.fv-server-discord-stats {
    margin: 0 16px 14px;
}

.fv-server-discord-stats > div {
    min-height: 50px;
}

.fv-server-discord-stats strong {
    font-size: 14px;
}

.fv-server-discord-button {
    height: 36px;
    margin: 0 16px;
    font-size: 8px;
}

/* franja final más delgada */

.fv-server-identity > div {
    min-height: 54px;
}

.fv-server-identity i {
    margin-bottom: 4px;
    font-size: 12px;
}

.fv-server-identity span {
    font-size: 6px;
}

.fv-server-identity strong {
    font-size: 8px;
}

/* desktop grande: que todo respire menos y quede arriba */

@media (min-width: 1200px) {
    .fv-server-top {
        grid-template-columns: minmax(0, 1.9fr) minmax(250px, .65fr);
    }

    .fv-server-lower {
        grid-template-columns: minmax(0, 1.9fr) minmax(300px, .85fr);
    }
}

/* móvil */

@media (max-width: 950px) {

    .fv-server-page {
        padding: 108px 14px 34px;
    }

    .fv-server-heading h1 {
        font-size: 24px;
    }

    .fv-server-featured {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .fv-server-featured-image {
        min-height: 180px;
    }

    .fv-server-news-list {
        max-height: none;
        overflow: visible;
    }
}


/* ==========================================================
   SERVER — COMPOSICIÓN COMPACTA CONTINUA
   ========================================================== */

.fv-server-page {
    padding-top: 112px !important;
    padding-bottom: 28px !important;
}

.fv-server-container {
    width: min(1460px, calc(100% - 24px)) !important;
}


/* HEADER DE LA PÁGINA */

.fv-server-heading {
    margin-bottom: 6px !important;
}

.fv-server-heading h1 {
    margin-top: 2px !important;
}

.fv-server-heading p {
    margin-top: 3px !important;
}

.fv-server-divider {
    margin-top: 5px !important;
}


/* ==========================================================
   FILAS PRINCIPALES
   ========================================================== */

.fv-server-top {
    gap: 7px !important;
    align-items: stretch !important;
}

.fv-server-lower {
    margin-top: 7px !important;
    gap: 7px !important;
    align-items: stretch !important;
}

.fv-server-identity {
    margin-top: 7px !important;
}


/* ==========================================================
   FILA SUPERIOR
   ========================================================== */

.fv-server-featured,
.fv-server-status-card {
    min-height: 210px !important;
    height: 210px !important;
}

.fv-server-featured {
    grid-template-columns:
        34%
        66% !important;
}

.fv-server-featured-image {
    min-height: 210px !important;
    height: 210px !important;
}

.fv-server-featured-content {
    padding: 16px 18px !important;
}

.fv-server-featured-content h2 {
    margin: 4px 0 6px !important;
    font-size: 18px !important;
}

.fv-server-featured-content p {
    margin: 8px 0 11px !important;
    line-height: 1.4 !important;
}


/* ESTADO DEL REINO */

.fv-server-card-heading {
    padding: 11px 14px !important;
}

.fv-server-realm {
    padding: 10px 14px !important;
}

.fv-server-realm-stats {
    margin-top: 8px !important;
}

.fv-server-realm-stat {
    min-height: 44px !important;
}

.fv-server-population {
    margin-top: 8px !important;
}

.fv-server-realmlist {
    margin: 0 14px 10px !important;
    padding: 7px 9px !important;
}


/* ==========================================================
   FILA INFERIOR — MISMA ALTURA
   ========================================================== */

.fv-server-news,
.fv-server-discord {
    height: 286px !important;
    min-height: 286px !important;
}


/* NOTICIAS */

.fv-server-news-list {
    height: 238px !important;
    max-height: 238px !important;

    padding: 0 12px 6px !important;

    overflow-y: auto !important;
}

.fv-server-news-item {
    min-height: 55px !important;

    padding: 5px 0 !important;

    grid-template-columns:
        68px
        minmax(0, 1fr)
        16px !important;

    gap: 9px !important;
}

.fv-server-news-thumb {
    height: 43px !important;
}

.fv-server-news-text h4 {
    margin: 1px 0 2px !important;
    font-size: 10px !important;
}

.fv-server-news-text p {
    font-size: 8px !important;
    line-height: 1.25 !important;
}


/* DISCORD */

.fv-server-discord {
    padding-bottom: 10px !important;
}

.fv-server-discord-main {
    padding: 12px 14px 7px !important;
}

.fv-server-discord-icon {
    width: 38px !important;
    height: 38px !important;
}

.fv-server-discord > p {
    margin: 0 14px 8px !important;
    line-height: 1.3 !important;
}

.fv-server-discord-stats {
    margin: 0 14px 8px !important;
}

.fv-server-discord-stats > div {
    min-height: 42px !important;
}

.fv-server-discord-button {
    height: 32px !important;
    margin: 0 14px !important;
}


/* ==========================================================
   FRANJA FINAL
   ========================================================== */

.fv-server-identity > div {
    min-height: 44px !important;
}

.fv-server-identity i {
    margin-bottom: 2px !important;
}


/* ==========================================================
   SERVER — LAYOUT SEGÚN BOCETO
   ========================================================== */

/*
   Convertimos las dos filas actuales en una composición
   visual de dos columnas:
   IZQUIERDA = Featured + Noticias
   DERECHA   = Realm + Discord
*/

.fv-server-container {
    width: min(1380px, calc(100% - 30px)) !important;
}


/* contenedores actuales pasan a participar del mismo grid */

.fv-server-top,
.fv-server-lower {
    display: contents !important;
}


/* El container se vuelve nuestro grid principal */

.fv-server-container {
    display: grid !important;

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

    grid-template-areas:
        "heading heading"
        "featured status"
        "news discord"
        "identity identity";

    column-gap: 10px !important;
    row-gap: 10px !important;
}


/* encabezado */

.fv-server-heading {
    grid-area: heading;

    width: 100%;

    margin-bottom: 0 !important;
}


/* noticia principal */

.fv-server-featured {
    grid-area: featured;

    height: 250px !important;
    min-height: 250px !important;
}


/* estado */

.fv-server-status-card {
    grid-area: status;

    height: 250px !important;
    min-height: 250px !important;
}


/* noticias */

.fv-server-news {
    grid-area: news;

    height: 320px !important;
    min-height: 320px !important;
}


/* Discord */

.fv-server-discord {
    grid-area: discord;

    height: 320px !important;
    min-height: 320px !important;
}


/* franja inferior */

.fv-server-identity {
    grid-area: identity;

    margin-top: 0 !important;
}


/* ==========================================================
   FEATURED MÁS HORIZONTAL
   ========================================================== */

.fv-server-featured {
    grid-template-columns:
        34%
        66% !important;
}

.fv-server-featured-image {
    height: 250px !important;
    min-height: 250px !important;
}


/* ==========================================================
   NOTICIAS
   ========================================================== */

.fv-server-news-list {
    height: 270px !important;
    max-height: 270px !important;

    overflow-y: auto !important;
}


/* ==========================================================
   PANEL DERECHO
   ========================================================== */

.fv-server-status-card,
.fv-server-discord {
    width: 100% !important;
}


/* Discord un poco más compacto internamente */

.fv-server-discord-main {
    padding:
        15px 15px
        8px !important;
}

.fv-server-discord > p {
    margin:
        0 15px
        10px !important;
}

.fv-server-discord-stats {
    margin:
        0 15px
        10px !important;
}

.fv-server-discord-button {
    margin:
        0 15px !important;
}


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

@media (max-width: 950px) {

    .fv-server-container {
        display: block !important;
    }

    .fv-server-top,
    .fv-server-lower {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 10px !important;
    }

    .fv-server-featured,
    .fv-server-status-card,
    .fv-server-news,
    .fv-server-discord {
        height: auto !important;
        min-height: auto !important;
    }

    .fv-server-news-list {
        height: auto !important;
        max-height: 360px !important;
    }

}


/* ==========================================================
   SERVER V4 — LAYOUT FÍSICO SEGÚN BOCETO
   ========================================================== */

/* anulamos experimentos anteriores */

.fv-server-container {
    display: block !important;

    width: min(1280px, calc(100% - 30px)) !important;
}

.fv-server-top,
.fv-server-lower {
    display: none !important;
}


/* ==========================================================
   DASHBOARD PRINCIPAL
   ========================================================== */

.fv-server-dashboard {
    display: grid;

    grid-template-columns:
        minmax(0, 2.15fr)
        minmax(290px, .85fr);

    gap: 9px;

    align-items: stretch;
}


/* COLUMNAS */

.fv-server-dashboard-main,
.fv-server-dashboard-side {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 9px;
}


/* ==========================================================
   IZQUIERDA
   ========================================================== */

.fv-server-featured {
    width: 100% !important;

    min-height: 230px !important;
    height: 230px !important;

    grid-template-columns:
        34%
        66% !important;
}

.fv-server-featured-image {
    min-height: 230px !important;
    height: 230px !important;
}


.fv-server-news {
    width: 100% !important;

    min-height: 290px !important;
    height: 290px !important;
}


/* Noticias con desplazamiento interno */

.fv-server-news-list {
    height: 238px !important;
    max-height: 238px !important;

    padding:
        0 13px 7px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* ==========================================================
   DERECHA
   ========================================================== */

.fv-server-status-card {
    width: 100% !important;

    min-height: 230px !important;
    height: 230px !important;
}


.fv-server-discord {
    width: 100% !important;

    min-height: 290px !important;
    height: 290px !important;

    padding-bottom: 10px !important;
}


/* ==========================================================
   PANEL DERECHO MÁS COMPACTO
   ========================================================== */

.fv-server-status-card .fv-server-card-heading,
.fv-server-discord .fv-server-card-heading {
    padding:
        12px 14px !important;
}


.fv-server-realm {
    padding:
        11px 14px !important;
}

.fv-server-realm-stats {
    margin-top:
        9px !important;
}

.fv-server-realm-stat {
    min-height:
        44px !important;
}

.fv-server-realmlist {
    margin:
        0 14px 10px !important;

    padding:
        7px 9px !important;
}


/* Discord */

.fv-server-discord-main {
    padding:
        13px 14px
        7px !important;
}

.fv-server-discord > p {
    margin:
        0 14px
        9px !important;
}

.fv-server-discord-stats {
    margin:
        0 14px
        9px !important;
}

.fv-server-discord-stats > div {
    min-height:
        43px !important;
}

.fv-server-discord-button {
    height:
        34px !important;

    margin:
        0 14px !important;
}


/* ==========================================================
   FRANJA DE IDENTIDAD
   ========================================================== */

.fv-server-identity {
    width: 100% !important;

    margin-top:
        9px !important;
}


/* ==========================================================
   MENOS AIRE SUPERIOR
   ========================================================== */

.fv-server-page {
    padding-top:
        112px !important;

    padding-bottom:
        35px !important;
}

.fv-server-heading {
    margin-bottom:
        8px !important;
}


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

@media (max-width: 950px) {

    .fv-server-dashboard {
        grid-template-columns: 1fr;
    }

    .fv-server-featured,
    .fv-server-news,
    .fv-server-status-card,
    .fv-server-discord {
        height: auto !important;
        min-height: auto !important;
    }

    .fv-server-featured {
        grid-template-columns: 1fr !important;
    }

    .fv-server-featured-image {
        height: 210px !important;
        min-height: 210px !important;
    }

    .fv-server-news-list {
        height: auto !important;
        max-height: 340px !important;
    }

}


/* ==========================================================
   SERVER V5 — RESET DEFINITIVO DEL DASHBOARD
   Boceto:
   izquierda = destacada + noticias
   derecha   = estado + discord
   ========================================================== */

@media (min-width: 951px) {

    /* ------------------------------------------------------
       QUITAR CUALQUIER GRID-AREA HEREDADO
       ------------------------------------------------------ */

    .fv-server-featured,
    .fv-server-news,
    .fv-server-status-card,
    .fv-server-discord,
    .fv-server-identity {
        grid-area: auto !important;

        position: relative !important;

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

        float: none !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       CONTAINER NORMAL
       ------------------------------------------------------ */

    .fv-server-container {
        display: block !important;

        width: min(1280px, calc(100% - 32px)) !important;

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


    /* ------------------------------------------------------
       DASHBOARD REAL DE DOS COLUMNAS
       ------------------------------------------------------ */

    .fv-server-dashboard {
        width: 100% !important;

        display: grid !important;

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

        gap: 8px !important;

        align-items: start !important;

        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       COLUMNA IZQUIERDA
       ------------------------------------------------------ */

    .fv-server-dashboard-main {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 8px !important;

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

        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       COLUMNA DERECHA
       ------------------------------------------------------ */

    .fv-server-dashboard-side {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 8px !important;

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

        box-sizing: border-box !important;

        align-self: start !important;
    }


    /* ------------------------------------------------------
       TODOS LOS PANELES OBLIGADOS A RESPETAR SU COLUMNA
       ------------------------------------------------------ */

    .fv-server-dashboard-main > .fv-server-featured,
    .fv-server-dashboard-main > .fv-server-news,
    .fv-server-dashboard-side > .fv-server-status-card,
    .fv-server-dashboard-side > .fv-server-discord {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        flex: 0 0 auto !important;
    }


    /* ------------------------------------------------------
       ALTURAS SEGÚN EL BOCETO
       ------------------------------------------------------ */

    .fv-server-featured {
        height: 225px !important;
        min-height: 225px !important;
        max-height: 225px !important;

        display: grid !important;

        grid-template-columns:
            34%
            minmax(0, 1fr) !important;
    }


    .fv-server-featured-image {
        width: 100% !important;

        height: 225px !important;
        min-height: 225px !important;
        max-height: 225px !important;
    }


    .fv-server-status-card {
        height: 225px !important;
        min-height: 225px !important;
        max-height: 225px !important;
    }


    .fv-server-news {
        height: 285px !important;
        min-height: 285px !important;
        max-height: 285px !important;
    }


    .fv-server-discord {
        height: 285px !important;
        min-height: 285px !important;
        max-height: 285px !important;
    }


    /* ------------------------------------------------------
       NOTICIAS — SCROLL INTERNO
       ------------------------------------------------------ */

    .fv-server-news-list {
        height: 236px !important;
        max-height: 236px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }


    /* ------------------------------------------------------
       DISCORD — NO PUEDE SALIR DE LA COLUMNA
       ------------------------------------------------------ */

    .fv-server-discord {
        overflow: hidden !important;
    }

    .fv-server-discord-main,
    .fv-server-discord-stats,
    .fv-server-discord-button,
    .fv-server-discord > p {
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       FRANJA INFERIOR
       ------------------------------------------------------ */

    .fv-server-identity {
        width: 100% !important;
        max-width: 100% !important;

        margin:
            8px 0 0 !important;
    }

}