/* * Stili Strutturali per il Widget Griglia Sponsor
 * handle: evento-sponsor-grid-style
 */

/* * 1. Wrapper Principale (La Griglia di Sponsor)
 * 'display: grid' è l'unica cosa fissa.
 * 'grid-template-columns' e 'gap' sono controllati
 * dinamicamente dai controlli del widget.
 */
.el-sponsor-grid-wrapper {
  display: grid;
}

/* * 2. Item Singolo (La Card dello Sponsor)
 * Definisce il layout L/R richiesto (1fr 2fr).
 */
.el-sponsor-grid-item {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Colonna Sinistra 1 parte, Destra 2 parti */
  gap: 24px;
  align-items: start; /* Allinea l'inizio delle due colonne in alto */
}

/* 3. Colonna Sinistra (Immagine + Label) */
.el-sponsor-grid-item__left {
  display: flex;
  flex-direction: column;
}

/* 4. Wrapper Immagine (per Overlay) */
.el-sponsor-grid-item__image-wrapper {
  position: relative;
  width: 100%;
  line-height: 0; /* Rimuove spazio sotto l'immagine */
}

/* 5. Immagine */
.el-sponsor-grid-item__image {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* 6. Overlay (Stili di Default)
 * Sovrascritto dai controlli "Colore Overlay" e "Blend Mode"
*/
.el-sponsor-grid-item__image-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Valori di default (saranno sovrascritti dai controlli Elementor) */
  background-color: #F3F5F8;
  mix-blend-mode: multiply;
  /* Se l'immagine ha un border-radius, anche l'overlay deve averlo */
  border-radius: inherit;
}


/* 7. Etichetta Categoria */
.el-sponsor-grid-item__label {
  margin-top: 12px;
  /* Stili di default (sovrascritti dai controlli Stile) */
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
  padding: 4px 8px;
  background-color: #eee;
  color: #333;
  border-radius: 4px;
  line-height: 1.2;
}

/* 8. Colonna Destra (Descrizione) */
.el-sponsor-grid-item__description {
  /* Stili di default (sovrascritti dai controlli Stile) */
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}
.el-sponsor-grid-item__description p:first-child {
  margin-top: 0;
}
.el-sponsor-grid-item__description p:last-child {
  margin-bottom: 0;
}

.el-sponsor-grid-item__description .collapse-inner {
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.el-sponsor-grid-item__description .collapse-inner.is-clamped {
    max-height: calc(1.6em * 15);
}

.el-sponsor-grid-item__description .collapse-inner.is-expanded {
    max-height: 2000px;
}

.el-sponsor-grid-item__description .collapse-toggle {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    color: var(--e-global-color-accent, #007bff);
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.el-sponsor-grid-item__description .collapse-toggle:hover {
    opacity: 0.75;
}

.el-sponsor-grid-item__description .collapse-toggle.is-hidden {
    display: none;
}
/* * 9. Responsive
 * Gestisce il layout L/R su mobile.
 * Il layout della griglia principale (1 o 2 colonne) è gestito
 * dai controlli Responsive di Elementor.
 */
@media (max-width: 767px) {
  /* * Su mobile, stackiamo il layout L/R
   * (Sinistra sopra, Destra sotto)
   */
  .el-sponsor-grid-item {
    grid-template-columns: 1fr; /* 1 colonna */
    gap: 16px;
  }

  .el-sponsor-grid-item__description {
     /* Rimuove lo spazio se la descrizione è sotto */
  }
}