/* =========================================================
   VIKING RISE SINGULARITY
   Skills Database
   ========================================================= */

/* =========================================================
   SKILL DATABASE
========================================================= */

.skill-database {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px 30px 100px;
}


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

.skill-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 30px;

    width: 100%;

}



/* =========================================================
   SKILL CARD
   ========================================================= */

.skill-card {

    position: relative;

    display: block;

    width: 100%;

    padding: 30px 40px;

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

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.018),
            rgba(197, 31, 50, 0.018)
        );

    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;

}


.skill-card:hover {

    border-color:
        rgba(197, 31, 50, 0.55);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025),
            rgba(197, 31, 50, 0.035)
        );

    transform:
        translateY(-2px);

}



/* =========================================================
   CARD CONTENT
   ========================================================= */

.skill-card-info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    width: 100%;

}



/* =========================================================
   SKILL NAME
   ========================================================= */

.skill-card h3 {

    margin:
        0 0 10px;

    color:
        var(--text);

    font-size:
        1.35rem;

    font-weight:
        800;

    line-height:
        1.3;

}



/* =========================================================
   SKILL TYPE
   ========================================================= */

.skill-card .skill-type {

    display:
        inline-flex;

    align-items:
        center;

    width:
        fit-content;

    margin:
        0 0 14px;

    padding:
        5px 9px;

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

    border-radius:
        5px;

    color:
        var(--text-muted);

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}



/* =========================================================
   RARITY + SEASON
   ========================================================= */

.skill-card-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin:
        0 0 20px;

}



/* =========================================================
   EFFECTS HEADER
   ========================================================= */

.skill-card-effects::before {

    content:
        "Effects";

    display:
        block;

    width:
        100%;

    margin:
        0 0 10px;

    color:
        var(--text-muted);

    font-size:
        0.65rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}



/* =========================================================
   EFFECTS CONTAINER
   ========================================================= */

.skill-card-effects {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    width:
        100%;

    margin:
        0 0 20px;

    padding:
        0 0 20px;

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

}



/* =========================================================
   EFFECT BADGES
   ========================================================= */

.skill-effect-tag {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        8px 12px;

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

    border-radius:
        5px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    color:
        var(--text);

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    line-height:
        1;

    text-transform:
        uppercase;

}



/* =========================================================
   DESCRIPTION
   ========================================================= */

.skill-card p {

    margin:
        0;

    max-width:
        1000px;

    color:
        var(--text-muted);

    font-size:
        0.92rem;

    line-height:
        1.8;

}



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

.skill-grid .database-empty,
.skill-grid .database-error {

    grid-column:
        1 / -1;

}



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

@media (max-width: 700px) {

    .skill-grid {

        gap:
            18px;

    }


    .skill-card {

        padding:
            22px;

    }


    .skill-card h3 {

        font-size:
            1.15rem;

    }


    .skill-card p {

        font-size:
            0.88rem;

        line-height:
            1.7;

    }


    .skill-effect-tag {

        padding:
            7px 10px;

        font-size:
            0.62rem;

    }

}

/* =========================================================
   VRS CONTENT WIDTH
========================================================= */

.skill-grid {
    width: 100%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   SKILLS FILTER BAR
========================================================= */

.skill-filters {
    width: calc(100% - 60px);
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}