/* ===================== SKILLS WINDOW ===================== */

.skills-window {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* Section titles */

.skills-title {
    font-size: var(--text-size-lg);
    font-weight: 500;
    color: var(--color-text);
}

/* Grid layout */

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-lg);
}

/* Card base */

.skill-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    text-align: center;
    cursor: default;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.skill-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Skill name */

.skill-name {
    font-size: var(--text-size-sm);
    color: var(--color-text);
}

/* ===================== CIRCULAR PROGRESS ===================== */

.skill-ring {
    --size: 84px;
    --value: 0;
    /* will be overridden by class */
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    /* Conic gradient uses the CSS variable directly */
    background: conic-gradient( var(--color-primary) calc(var(--value) * 1%), var(--color-surface-muted) 0);
    display: grid;
    place-items: center;
    transition: background 0.5s ease;
}

/* Inner cutout */

.skill-ring::before {
    content: "";
    width: 68%;
    height: 68%;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

/* ===================== SEMANTIC LEVELS ===================== */

.level-pro .skill-ring {
    --value: 95;
}

.level-advanced .skill-ring {
    --value: 85;
}

.level-intermediate .skill-ring {
    --value: 65;
}

.level-beginner .skill-ring {
    --value: 45;
}

/* ===================== SIMPLE CARDS ===================== */

.simple .skill-card {
    min-height: 70px;
}

.simple-card {
    background: var(--grad-2);
}

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

@media (max-width: 600px) {
    .skills-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .skill-ring {
        --size: 72px;
    }
}