/* ==========================================================================
   Sezione 4 — Card competenze. Nodi 2633:91 / 2633:90 / 2633:92.

   Tre card affiancate: nel design x = 144, 563, 981, larghezze 387/386/387,
   gap 32px. Ricostruite con grid, non con coordinate assolute (R1).
   ========================================================================== */

.eia-skills__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--eia-card-competence-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.eia-skills__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* min-height invece di height: il copy delle card 2 e 3 non e' ancora
     stato estratto e potrebbe eccedere i 398px del design. */
  min-height: var(--eia-card-competence-h);
  padding: var(--eia-space-xl) var(--eia-space-lg);
  /* Raggio 90px: e' la firma visiva della sezione. */
  border-radius: var(--eia-radius-card);
  background-color: var(--eia-surface-card);
  text-align: center;
}

.eia-skills__icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 50px;   /* altezza comune alle tre icone, larghezza variabile */
  margin-bottom: var(--eia-space-md);
  color: var(--eia-color-text);
}

.eia-skills__icon svg {
  height: 50px;
  width: auto;
}

/* Riserva lo spazio finche' le icone non sono state esportate (R7). */
.eia-skills__icon--empty {
  width: 50px;
  border: 1px dashed var(--eia-color-hairline);
  border-radius: var(--eia-radius-input);
}

.eia-skills__title {
  margin-bottom: var(--eia-space-sm);
  font-size: var(--eia-fs-heading);
  font-weight: var(--eia-fw-bold);
  /* L'accento su fondo scuro sta a circa 3.1:1: sotto la soglia 4.5:1 per
     il testo normale, ma questo titolo e' 20px in bold, quindi rientra
     nella deroga per il testo grande (>= 18.66px bold). Non riusare
     questo colore per il corpo. Vedi spec § 7. */
  color: var(--eia-color-accent);
}

.eia-skills__body {
  /* Larghezza del testo nel design: 321px. */
  max-width: 321px;
  font-size: var(--eia-fs-body);
  line-height: var(--eia-lh-body);
  text-wrap: pretty;
}


/* --- Sotto 1024px: due colonne ------------------------------------------ */

@media (max-width: 1023px) {
  .eia-skills__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eia-skills__card {
    /* Il raggio da 90px su una card piu' stretta mangia il contenuto. */
    border-radius: 64px;
  }
}


/* --- Sotto 768px: colonna singola --------------------------------------- */

@media (max-width: 768px) {
  .eia-skills__grid {
    grid-template-columns: 1fr;
    gap: var(--eia-space-md);
  }

  .eia-skills__card {
    min-height: 0;
    padding: var(--eia-space-lg) var(--eia-space-md);
    border-radius: 48px;
  }
}