/* =========================
   GRID LAYOUT
   ========================= */

.wscg-grid {
  display: grid;
  gap: 1rem;
  align-items: stretch; /* rende le celle "stirate" in altezza */
}

.wscg-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wscg-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wscg-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wscg-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }
.wscg-grid.columns-6 { grid-template-columns: repeat(6, 1fr); }
/* ...se ti servono altre colonne, puoi proseguire */


/* =========================
   CARD (contenitore)
   ========================= */

.wscg-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* fondamentale per avere altezza uniforme */
}


/* =========================
   ITEM (link cliccabile)
   ========================= */

.wscg-item {
  text-align: center;
  border: 1px solid #eee;
  padding: 1rem;
  transition: transform 0.2s;
  text-decoration: none;
  color: inherit;

  /* per uniformare altezze e posizionare il titolo */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
}

.wscg-item:hover {
  transform: scale(1.03);
}

.wscg-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 0.5rem;
}

/* Titolo categoria (come da tua regola) */
.wscg-item h4 {
  font-family: "Roboto", Sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;

  /* mantiene il titolo verso il basso per uniformare visivamente */
  margin-top: auto;
}

/* indicatore espandibile (opzionale, ma utile) */
.wscg-item.wscg-has-children h4::after {
  content: " ▾";
  font-weight: 700;
}

.wscg-item.wscg-has-children.is-open h4::after {
  content: " ▴";
}


/* =========================
   CHILDREN (sottocategorie)
   ========================= */

.wscg-children-container {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #eee;
  border-radius: 0.6rem;
  background: #fafafa;
}

.wscg-children-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wscg-children-item {
  padding: 0.25rem 0;
}

/* Sottocategorie con lo stesso stile del titolo */
.wscg-children-item a {
  font-family: "Roboto", Sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  display: inline-block;
}

.wscg-children-item a:hover {
  text-decoration: underline;
}

.wscg-loading,
.wscg-error,
.wscg-children-empty {
  font-size: 0.9rem;
  opacity: 0.8;
}