/* =========================================================
   MOUNT DATABASE
   ========================================================= */

.mount-database {

    max-width: var(--max-width);

    margin: 0 auto;

    padding:
        15px 30px 80px;

}


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

.mount-grid {

    display: grid;

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

    gap: 24px;

    width: 100%;

}


/* =========================================================
   MOUNT CARD
   ========================================================= */

.mount-card {

    position: relative;

    min-width: 0;

    min-height: 280px;

    padding: 30px;

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

    border-radius: 9px;

    outline: none;

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

    cursor: pointer;

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

}


.mount-card:hover,
.mount-card:focus-visible {

    border-color:
        var(--border-red);

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

    transform:
        translateY(-2px);

}


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

.mount-card-content {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    height: 100%;

}


/* =========================================================
   MOUNT IMAGE
   ========================================================= */

.mount-card-image {

    position: absolute;

    top: 50%;

    right: 0;

    width: 150px;

    height: 150px;

    object-fit: contain;

    transform:
        translateY(-50%);

    pointer-events: none;

}


/* =========================================================
   MOUNT TYPE
   ========================================================= */

.mount-card-type {

    display: inline-flex;

    align-items: center;

    margin-bottom: 18px;

    padding:
        5px 9px;

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

    border-radius: 5px;

    color:
        var(--text-muted);

    font-size:
        0.63rem;

    font-weight:
        900;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

}


/* =========================================================
   MOUNT NAME
   ========================================================= */

.mount-card h3 {

    margin: 0;

    max-width: 55%;

    color:
        var(--text);

    font-size:
        1.25rem;

    font-weight:
        850;

    line-height:
        1.3;

}


/* =========================================================
   MOUNT TROOP TYPE
   ========================================================= */

.mount-card-troop {

    display: inline-flex;

    margin-top: 10px;

    color:
        var(--red-light);

    font-size:
        0.68rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


/* =========================================================
   MOUNT STATS
   ========================================================= */

.mount-card-stats {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 18px;

    max-width: 55%;

}


.mount-card-stats span {

    padding:
        5px 8px;

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

    border-radius: 4px;

    color:
        var(--text-muted);

    font-size:
        0.6rem;

    font-weight:
        800;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

}


/* =========================================================
   MOUNT ACTION
   ========================================================= */

.mount-card-action {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    padding-top: 28px;

    color:
        var(--text-muted);

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.mount-card-action span {

    color:
        var(--red-light);

    font-size:
        0.9rem;

}


/* =========================================================
   MOUNT DETAIL VIEW
   ========================================================= */

.mount-detail-view {

    max-width: var(--max-width);

    margin: 0 auto;

    padding:
        15px 30px 80px;

}


/* =========================================================
   BACK BUTTON
   ========================================================= */

.mount-back-button {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 35px;

    padding: 0;

    border: none;

    background: none;

    color:
        var(--text-muted);

    font-family: inherit;

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    cursor: pointer;

    transition:
        color 0.2s ease;

}


.mount-back-button:hover {

    color:
        var(--text);

}


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

@media (max-width: 800px) {

    .mount-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 600px) {

    .mount-database,
    .mount-detail-view {

        padding:
            15px 20px 60px;

    }


    .mount-card {

        min-height:
            250px;

        padding:
            24px;

    }


    .mount-card-image {

        width:
            120px;

        height:
            120px;

    }

}


@media (max-width: 480px) {

    .mount-card h3,
    .mount-card-stats {

        max-width:
            50%;

    }

}

/* =========================================================
   MOUNT SKILL CARDS
   ========================================================= */

.mount-skills {

    display: grid;

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

    gap: 14px;

}


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

.mount-skill {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    min-width: 0;

    padding: 20px;

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

    border-radius: 8px;

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

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

}


.mount-skill:hover {

    border-color:
        var(--border-red);

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

    transform:
        translateY(-2px);

}


/* =========================================================
   SKILL IMAGE
   ========================================================= */

.mount-skill-image {

    flex:
        0 0 64px;

    width:
        64px;

    height:
        64px;

    object-fit:
        contain;

    border-radius:
        8px;

}


/* =========================================================
   SKILL CONTENT
   ========================================================= */

.mount-skill-content {

    min-width:
        0;

    flex:
        1;

}


/* =========================================================
   SKILL HEADER
   ========================================================= */

.mount-skill-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}


.mount-skill-header h4 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        0.95rem;

    font-weight:
        850;

    line-height:
        1.3;

}


.mount-skill-header span {

    flex:
        0 0 auto;

    padding:
        4px 7px;

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

    border-radius:
        4px;

    color:
        var(--text-muted);

    font-size:
        0.55rem;

    font-weight:
        900;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

}


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

.mount-skill p {

    margin:
        10px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.75rem;

    line-height:
        1.7;

}


/* =========================================================
   SKILL SECTIONS
   ========================================================= */

.mount-detail-section {

    padding:
        0 0 45px;

    margin-bottom:
        45px;

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

}


.mount-detail-section:last-child {

    border-bottom:
        none;

    margin-bottom:
        0;

}


.mount-detail-section > h2 {

    margin:
        0 0 25px;

    color:
        var(--text);

    font-size:
        1.35rem;

    font-weight:
        850;

}


/* =========================================================
   NO SKILLS
   ========================================================= */

.mount-no-skills {

    color:
        var(--text-muted);

    font-size:
        0.8rem;

}


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

@media (max-width: 900px) {

    .mount-skills {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 600px) {

    .mount-skill {

        gap:
            14px;

        padding:
            16px;

    }


    .mount-skill-image {

        flex-basis:
            52px;

        width:
            52px;

        height:
            52px;

    }


    .mount-skill-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            6px;

    }


    .mount-skill p {

        font-size:
            0.72rem;

    }

}

/* =========================================================
   MOUNT SKILL EFFECTS & TAGS
   ========================================================= */

.mount-skill-effects {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-top: 14px;

}


.mount-skill-effect {

    position: relative;

    padding-left: 14px;

    color:
        var(--text-muted);

    font-size:
        0.82rem;

    line-height:
        1.5;

}


.mount-skill-effect::before {

    content:
        "•";

    position: absolute;

    left: 0;

    color:
        var(--border-red);

}


.mount-skill-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 14px;

}


.mount-skill-tag {

    display: inline-flex;

    align-items: center;

    padding:
        4px 8px;

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

    border-radius:
        4px;

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

    color:
        var(--text-muted);

    font-size:
        0.68rem;

    font-weight:
        600;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}


/* =========================================================
   MOUNT SKILL FILTERS
   ========================================================= */

.mount-skill-controls {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 30px;

}


.mount-skill-search {

    flex:
        1;

}


.mount-skill-search-input,
.mount-skill-type-filter,
.mount-skill-effect-filter {

    width:
        100%;

    padding:
        11px 13px;

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

    border-radius:
        5px;

    background:
        var(--surface);

    color:
        var(--text);

    font-family:
        inherit;

    font-size:
        0.78rem;

    outline:
        none;

}


.mount-skill-search-input:focus,
.mount-skill-type-filter:focus,
.mount-skill-effect-filter:focus {

    border-color:
        var(--border-red);

}


.mount-skill-filters {

    display: flex;

    gap: 10px;

}


.mount-skill-type-filter,
.mount-skill-effect-filter {

    width:
        170px;

}


/* =========================================================
   MOUNT SKILL SLOTS
   ========================================================= */

.mount-skill-slot {

    margin-top:
        30px;

}


.mount-skill-slot h3 {

    margin:
        0 0 15px;

    color:
        var(--text);

    font-size:
        0.85rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


/* =========================================================
   FILTER EMPTY STATE
   ========================================================= */

.mount-filter-empty {

    grid-column:
        1 / -1;

    margin:
        20px 0;

    color:
        var(--text-muted);

    font-size:
        0.8rem;

    text-align:
        center;

}


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

@media (max-width: 900px) {

    .mount-skill-controls {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .mount-skill-filters {

        display:
            grid;

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

    }


    .mount-skill-type-filter,
    .mount-skill-effect-filter {

        width:
            100%;

    }

}


@media (max-width: 600px) {

    .mount-skill-filters {

        grid-template-columns:
            1fr;

    }


    .mount-skill-effect {

        font-size:
            0.76rem;

    }


    .mount-skill-tag {

        font-size:
            0.62rem;

    }

}