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

.language-card-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                240px,
                1fr
            )
        );

    gap: 16px;
}






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

.language-card {
    display: flex;

    flex-direction: column;

    min-height:
        350px;

    padding:
        18px;

    background:
        #25242a;

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

    border-radius:
        8px;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}


.language-card:hover {
    transform:
        translateY(-3px);

    background:
        var(--surface-hover);

    border-color:
        #55545e;
}


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

.language-card-image {
    position: relative;

    width: 72px;
    height: 72px;

    display: flex;

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

    margin-bottom:
        18px;

    background:
        var(--surface-secondary);

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

    border-radius:
        10px;

    overflow:
        hidden;
}


.language-card-image img {
    width: 52px;
    height: 52px;

    object-fit:
        contain;
}


.language-image-fallback {
    position: absolute;

    color:
        var(--accent-light);

    font-family:
        "Cascadia Code",
        "Fira Code",
        Consolas,
        monospace;

    font-size:
        0.8rem;

    font-weight:
        600;
}


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

.language-card-header {
    display: flex;

    align-items: center;

    min-height:
        30px;

    margin-bottom:
        14px;
}


.language-card-header h3 {
    color:
        var(--text-primary);

    font-size:
        1.05rem;

    font-weight:
        600;
}


/* =========================================
   CONFIDENCE RATING HEADER
   ========================================= */

.confidence-rating-header {
    width: 100%;

    display: flex;

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

    gap: 12px;

    margin-bottom:
        7px;
}


/* =========================================
   CONFIDENCE RATING LABEL
   ========================================= */

.confidence-rating-label {
    color:
        var(--text-muted);

    font-family:
        "Cascadia Code",
        "Fira Code",
        Consolas,
        monospace;

    font-size:
        0.63rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;
}


/* =========================================
   CONFIDENCE SCORE
   ========================================= */

.language-comfort {
    flex-shrink: 0;

    color:
        var(--text-muted);

    font-family:
        "Cascadia Code",
        "Fira Code",
        Consolas,
        monospace;

    font-size:
        0.72rem;
}


.language-comfort strong {
    color:
        var(--accent-light);

    font-size:
        0.9rem;
}


/* =========================================
   CONFIDENCE BAR
   ========================================= */

.comfort-bar {
    position: relative;

    width: 100%;
    height: 6px;

    margin-bottom:
        22px;

    background:
        #1e1d22;

    border:
        1px solid rgba(
            255,
            255,
            255,
            0.025
        );

    border-radius:
        10px;

    overflow:
        hidden;
}


.comfort-bar-fill {
    height: 100%;

    background:
        var(--accent);

    border-radius:
        10px;

    transition:
        width 300ms ease;
}


/* =========================================
   PROJECT / EXPERIENCE LIST
   ========================================= */

.language-projects {
    margin-top:
        auto;
}


.language-project-label {
    display: block;

    margin-bottom:
        9px;

    color:
        var(--text-muted);

    font-family:
        "Cascadia Code",
        "Fira Code",
        Consolas,
        monospace;

    font-size:
        0.67rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;
}


.language-projects ul {
    display: flex;

    flex-direction: column;

    gap: 7px;

    list-style:
        none;

    margin: 0;

    padding: 0;
}


.language-projects li {
    position: relative;

    padding-left:
        13px;

    color:
        var(--text-secondary);

    font-size:
        0.78rem;

    line-height:
        1.4;
}


.language-projects li::before {
    content:
        "›";

    position: absolute;

    left: 0;

    color:
        var(--accent-light);
}


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

@media (max-width: 550px) {

    .language-card-grid {
        grid-template-columns:
            1fr;
    }


    .confidence-explainer {
        padding:
            15px;
    }


    .confidence-explainer-content p {
        font-size:
            0.75rem;
    }


    .language-card {
        min-height:
            0;
    }

}