/* ============================================================
   SKILLS.CSS  –  Skills-paneel met programma-iconen (about)
   ============================================================ */

.skills-section {
  /* 12-koloms grid (zie .grid-12 in style.css) */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  padding: 20px var(--grid-margin) 80px;
}

.skills-section > * { grid-column: 1 / -1; }

.skills-panel {
  background-color: var(--lichtblauw);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.07) 0,
    rgba(255, 255, 255, 0.07) 2px,
    transparent 2px,
    transparent 12px
  );
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: 0 14px 30px rgba(0, 0, 45, 0.18);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 26px;
  justify-items: center;
  align-items: center;
}

/* elk programma zit in een knop, zodat het ook met klik/toetsenbord werkt.
   De knop is vierkant zodat de markering bij klik netjes om het icoon valt */
.skill {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 86px;
  height: 86px;
  background: none;
  border: none;
  padding: 0;
  border-radius: 16px;
  cursor: url('../img/cursor-pointer.svg') 8 3, pointer;
  flex-shrink: 0;
  min-width: 86px;
}

.skill img {
  width: 66px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform .2s ease;
}

.skill:hover img,
.skill:focus-visible img { transform: scale(1.12); }

.skill.is-active img { transform: scale(1.12); }

/* vastgezet icoon (na klik) krijgt een subtiele vierkante markering */
.skill.is-pinned {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55) inset;
}
.skill.is-pinned img { transform: scale(1.12); }

/* vast infovak onder de iconen – vaste hoogte zodat de layout niet
   meer verspringt bij langere of kortere teksten */
.skill-info {
  margin-top: 34px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

/* geen icoon gehoverd of vastgezet → infovak helemaal verbergen */
.skill-info.is-empty {
  display: none;
}

/* kop met icoon + naam van het programma */
.skill-info-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.skill-info-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.skill-info-title {
  margin: 0;
  color: var(--wit);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .3px;
}

.skill-info-text {
  margin: 0;
  color: var(--wit);
  font-size: 15px;
  line-height: 1.6;
}

/* standaardtekst (geen icoon geselecteerd) gecentreerd tonen */
.skill-info:not(:has(.skill-info-head)) {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.skill-info:not(:has(.skill-info-head)) .skill-info-text {
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
}

@media screen and (max-width: 1024px) {
  .skills-grid { grid-template-columns: repeat(6, 1fr); gap: 22px; }
  .skill { width: 76px; height: 76px; min-width: 76px; }
  .skill img { width: 58px; }
}

@media screen and (max-width: 768px) {
  .skills-section { padding: 10px var(--grid-margin) 60px; }
  .skills-panel { padding: 20px; }
  .skills-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .skill { width: 70px; height: 70px; min-width: 70px; border-radius: 12px; }
  .skill img { width: 52px; }
  .skill-info { height: 220px; margin-top: 20px; padding: 18px 20px; }
}

@media screen and (max-width: 600px) {
  .skills-section { padding: 10px var(--grid-margin) 50px; }
  .skills-panel { padding: 16px; }
  .skills-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .skill { width: 60px; height: 60px; min-width: 60px; border-radius: 10px; }
  .skill img { width: 44px; }
  .skill-info-icon { width: 28px; height: 28px; }
  .skill-info-title { font-size: 16px; }
  .skill-info-text { font-size: 14px; }
  .skill-info { height: 240px; margin-top: 16px; padding: 14px 16px; }
}

@media screen and (max-width: 380px) {
  .skills-section { padding: 8px var(--grid-margin) 40px; }
  .skills-panel { padding: 12px; }
  .skills-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .skill { width: 54px; height: 54px; min-width: 54px; border-radius: 8px; }
  .skill img { width: 38px; }
  .skill-info { height: 260px; margin-top: 14px; padding: 12px 14px; }
  .skill-info-icon { width: 24px; height: 24px; }
  .skill-info-title { font-size: 14px; }
  .skill-info-text { font-size: 13px; }
}