/* ===================== 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;
    }
}



/* ===================== LOGO SKILL CARDS ===================== */

.skills-container{

    width:85%;
    margin:auto;
    padding:40px;

}


.skills-container h2{

    font-size:28px;
    margin-bottom:25px;

}


.skills-container h3{

    margin-top:35px;
    margin-bottom:20px;
    font-size:20px;

}


.skill-box{

    height:130px;

    background:white;

    border:1px solid #e5e7eb;

    border-radius:10px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:15px;

    box-shadow:0px 2px 8px rgba(0,0,0,0.05);

    transition:0.3s;

}


.skill-box:hover{

    transform:translateY(-5px);

}


.skill-box img{

    width:50px;

    height:50px;

    object-fit:contain;

}


.skill-box p{

    margin:0;

    font-size:14px;

}















@media screen and (max-width:768px){

.skill-card{
    width:90% !important;
    margin:auto;
}

}