/* ========== EVENTS CAROUSEL — BASE LAYOUT ========== */
.events-carousel{
  --per-view: 3;
  --ec-gap: 14px;
  padding-inline: 24px;
}
@media (max-width: 1024px){ .events-carousel{ --per-view: 2; } }
@media (max-width: 820px){
  .events-carousel{ --per-view: 1; --ec-gap: 12px; padding-inline: 16px; }
}

.ec-viewport{ overflow: hidden; }
.ec-track{
  display: flex;
  gap: var(--ec-gap);
  will-change: transform;
  transform: translate3d(0,0,0);
}

.ec-arrow{
  appearance: none;
  border: 0;
  background: #171717;
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.ec-arrow[disabled]{ opacity:.45; cursor: default; }

.ec-dots{ display:flex; gap:8px; justify-content:center; margin-top:14px; }
.ec-dots button{
  width:8px; height:8px; border-radius:50%;
  border:0; background:#6b6b6b; cursor:pointer;
}
.ec-dots button.is-active{ background:#fff; }

/* ========== CARD TOMORROWLAND-LIKE (NO GABBIA) ========== */
.events-carousel .tl-card{
  position: relative;
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--ec-gap)) / var(--per-view));
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 8px 28px rgba(0,0,0,.35);
}

/* Media: immagine intera, nessun taglio */
.events-carousel .tl-card .ec-card__media{ width:100%; }
.events-carousel .tl-card .ec-card__media picture,
.events-carousel .tl-card .ec-card__media picture > img{
  display:block;
  width:100%;
  height:auto;                  /* niente gabbia: l’altezza segue l’immagine */
  object-fit: contain;          /* mostra tutto il poster */
  object-position: center center;
  background:#000;              /* eventuali bande */
  border-radius: 18px;          /* allinea ai bordi card */
}

/* Gradiente in basso sopra l’immagine (altezza percentuale della card) */
.events-carousel .tl-overlay{
  position:absolute; left:0; right:0; bottom:0;
  height:55%; /* un po’ più alto */
  pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.0) 70%);
}

/* Badge data in alto a sinistra */
.events-carousel .tl-badge{
  position:absolute; top:12px; left:12px;
  display:inline-flex; flex-direction:column; gap:6px;
  padding:8px 10px;
  background:#0f0f0f; color:#fff; border-radius:10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.events-carousel .tl-badge__month{
  font: 700 10px/1.1 Inter, system-ui;
  letter-spacing:.08em; opacity:.9;
}
.events-carousel .tl-badge__day{
  font: 800 18px/1 Inter, system-ui;
}
.events-carousel .tl-badge__day--sub{
  font: 700 12px/1 Inter, system-ui; opacity:.85;
}

/* Corpo testuale in basso */
.events-carousel .tl-body{
  position:absolute;
  left:50%; bottom:14px;
  transform: translateX(-50%);
  max-width: 85%;
  padding: 8px 14px;
  display:flex; flex-direction:column; gap:4px;
  text-align: center;

  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  border-radius: 12px;
}

.events-carousel .tl-title{
  margin:0;
  color:#fff;
  font: 700 14px/1.3 Inter, system-ui;
}
.events-carousel .tl-meta{
  margin:0;
  color:#d7d7d7;
  font: 500 12px/1.2 Inter, system-ui;
}
.events-carousel .tl-actions{
  margin-top: 8px; display:flex; align-items:center; gap:14px;
}
.events-carousel .tl-link{
  color:#fff; font:700 12px/1 Inter, system-ui; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; opacity:.95;
}
.events-carousel .tl-link[aria-disabled="true"]{ opacity:.4; pointer-events:none; }
.events-carousel .tl-sep{ color:#fff; opacity:.65; }

/* Evidenzia la card “prossimo evento” */
.events-carousel .tl-card.is-next{
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 0 36px rgba(255,255,255,.14);
}

/* Compatta su mobile */
@media (max-width: 820px){
  .events-carousel .tl-card{ max-width: 340px; margin-inline:auto; }
}
/* ===== Pulsante ticket rotondo (alto-dx) ===== */
.events-carousel .tl-ticket-btn{
  position:absolute; top:12px; right:12px;
  width:36px; height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; background:#0f0f0f;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 2px 10px rgba(0,0,0,.35);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.events-carousel .tl-ticket-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 6px 16px rgba(0,0,0,.5);
  background:#161616;
}

/* ===== Dots compatti ===== */
.ec-dots{ gap:6px; margin-top:12px; }
.ec-dots button{
  width:8px; height:8px; border-radius:50%; border:0;
  background:#5f5f5f; opacity:.8; transition:opacity .2s ease, transform .2s ease;
}
.ec-dots button.is-active{ background:#fff; opacity:1; transform:scale(1.15); }

.ec-arrow{
  background: rgba(0,0,0,.75);
  color: #fff;
  width: 52px; height: 52px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.ec-arrow svg{ width: 24px; height: 24px; }
.ec-arrow:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.9);
  box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.2) inset;
}
.ec-arrow.prev{ position:absolute; left:16px; top:50%; transform:translateY(-50%); z-index:2; }
.ec-arrow.next{ position:absolute; right:16px; top:50%; transform:translateY(-50%); z-index:2; }
.ec-arrow[disabled]{ opacity:.3; cursor:default; }


/* ===== Bottoni rotondi sotto (Ticket + Maps) ===== */
.events-carousel .tl-ctas{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.events-carousel .tl-cta{
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none;
  background: #0f0f0f;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 2px 10px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.events-carousel .tl-cta:hover{
  transform: translateY(-1px);
  background: #161616;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 6px 16px rgba(0,0,0,.5);
}
.events-carousel .tl-cta svg{ width:18px; height:18px; }

/* piccolo respiro sotto il corpo per i bottoni */
.events-carousel .tl-body{ padding-bottom: 18px; }

/* Dots più leggibili */
.ec-dots{ gap:8px; margin-top:12px; }
.ec-dots button{
  width:8px; height:8px; border-radius:50%; border:0; background:#6a6a6a; opacity:.9;
  transition: transform .2s ease, opacity .2s ease;
}
.ec-dots button.is-active{ background:#fff; transform: scale(1.2); opacity:1; }

/* posizionamento relativo per frecce */
.events-carousel{ position: relative; }
@media (max-width: 820px){
  .ec-arrow{ display:none; }
}

/* wrapper generale in basso */
.events-carousel .tl-footer{
  position:absolute;
  bottom:12px;
  left:0; right:0;
  display:flex;
  justify-content:center;   /* testo centrato */
  align-items:flex-end;
  gap:8px;
  pointer-events:none;      /* evita problemi: icone riattivate singolarmente */
}

/* riquadro testo al centro */
.events-carousel .tl-body{
  pointer-events:auto;
  padding: 8px 14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  text-align:center;
  max-width:70%;
}
.events-carousel .tl-title{
  margin:0;
  color:#fff;
  font: 700 14px/1.3 Inter, system-ui;
}
.events-carousel .tl-meta{
  margin:0;
  color:#d7d7d7;
  font: 500 12px/1.2 Inter, system-ui;
}

/* azioni (icone) a sinistra */
.events-carousel .tl-ctas{
  position:absolute;
  left:12px; bottom:12px;
  display:flex; gap:10px;
  pointer-events:auto;
}
.events-carousel .tl-cta{
  width:38px; height:38px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; background:#0f0f0f;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset, 0 2px 10px rgba(0,0,0,.35);
  text-decoration:none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.events-carousel .tl-cta:hover{
  transform: translateY(-1px);
  background:#161616;
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 6px 16px rgba(0,0,0,.5);
}
.events-carousel .tl-cta svg{ width:18px; height:18px; }
.events-carousel .tl-headliners{
  margin: 0;
  margin-top: 4px;
  color: #fff;
  font: 600 12px/1.3 Inter, system-ui;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* ===== Mobile: CTA verticali a sinistra ===== */
@media (max-width: 820px){
  /* pila verticale dei bottoni */
  .events-carousel .tl-ctas{
    flex-direction: column;
    gap: 10px;
    left: 12px;
    bottom: 14px;
    z-index: 3; /* sopra l'immagine/overlay */
  }

  /* hit-area un filo più grande su mobile */
  .events-carousel .tl-cta{
    width: 42px;
    height: 42px;
  }

  /* pillola testo centrata con un po' più di respiro dai bottoni */
  .events-carousel .tl-body{
    bottom: 16px;
    max-width: 80%;
    padding: 10px 14px;
  }

  /* se hai safe area (iPhone notch), aggiungi questo per stare comodi */
  .events-carousel .tl-ctas,
  .events-carousel .tl-body{
    margin-bottom: env(safe-area-inset-bottom, 0px);
  }
}
/* === MOBILE: Carosello poster compatto above-the-fold === */
@media (max-width: 820px){

  /* Altezza target del poster (modifica 54–62vh se vuoi più/meno alto) */
  :root{
    --poster-mobile-h: 56vh;
  }

  /* riduci lo spazio sopra il carosello, se c'è */
  #futureCarousel,
  .events-carousel{
    margin-top: 8px !important;
  }

  /* fissa l’altezza del viewport del carosello */
  #futureCarousel .ec-viewport,
  .events-carousel .ec-viewport{
    height: var(--poster-mobile-h) !important;
    min-height: var(--poster-mobile-h) !important;
  }

  /* tutta la catena riempie quell’altezza */
  #futureCarousel .ec-track,
  .events-carousel .ec-track,
  #futureCarousel .ec-card,
  .events-carousel .ec-card{
    height: 100% !important;
    aspect-ratio: auto !important; /* disattiva eventuali 9/16 */
  }

  /* media dentro la card: riempi e centra */
  #futureCarousel .ec-card__media,
  .events-carousel .ec-card__media{
    height: 100% !important;
  }
  #futureCarousel .ec-card__media picture,
  #futureCarousel .ec-card__media img,
  .events-carousel .ec-card__media picture,
  .events-carousel .ec-card__media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;     /* poster “hero” ma più basso */
    object-position: 50% 50% !important;
  }

  /* CTA e testi: più vicini al bordo per rientrare nel fold */
  #futureCarousel .tl-ctas,
  .events-carousel .tl-ctas{
    left: 10px !important;
    bottom: 10px !important;
    gap: 8px !important;
  }
  #futureCarousel .tl-footer,
  .events-carousel .tl-footer{
    padding-bottom: 10px !important;
  }

  /* titoli/metadati un filo più compatti su telefoni piccoli */
  #futureCarousel .tl-title,
  .events-carousel .tl-title{
    font-size: clamp(16px, 5.2vw, 20px) !important;
    line-height: 1.15 !important;
  }
  #futureCarousel .tl-meta,
  .events-carousel .tl-meta{
    font-size: clamp(12px, 3.8vw, 14px) !important;
  }
}
/* === FIX MOBILE: poster NON zoomato nel carosello eventi futuri === */
@media (max-width: 820px){
  /* mantieni l’altezza compatta che avevamo scelto */
  :root{ --poster-mobile-h: 60vh; }

  /* il viewport resta fisso in altezza */
  #futureCarousel .ec-viewport,
  .events-carousel .ec-viewport{
    height: var(--poster-mobile-h) !important;
    min-height: var(--poster-mobile-h) !important;
  }

  /* tutta la catena riempie quell’altezza */
  #futureCarousel .ec-track,
  .events-carousel .ec-track,
  #futureCarousel .ec-card,
  .events-carousel .ec-card,
  #futureCarousel .ec-card__media,
  .events-carousel .ec-card__media{
    height: 100% !important;
  }

  /* qui il punto chiave: LOCANDINA intera, non croppata */
  #futureCarousel .ec-card__media picture,
  #futureCarousel .ec-card__media img,
  .events-carousel .ec-card__media picture,
  .events-carousel .ec-card__media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* << prima era cover */
    object-position: 50% 50% !important;
    background: #000 !important;      /* bande nere eleganti */
  }
}
/* === PANNELLO UNICO BASSO (icone + titolo + meta) === */
.ec-card .tl-bottom{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,.62));
  border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 5;
}

/* CTA dentro il pannello (NON absolute) */
.ec-card .tl-ctas{
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.ec-card .tl-cta--icon,
.ec-card .tl-cta--map{
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  text-decoration: none;
}
.ec-card .tl-cta--icon svg,
.ec-card .tl-cta--map  svg{ width: 18px; height: 18px; display: block; }
.ec-card .tl-cta--icon:hover,
.ec-card .tl-cta--map:hover{ background: rgba(255,255,255,.18); }

/* Testi nel pannello */
.ec-card .tl-body{ min-width: 0; }
.ec-card .tl-title{
  margin: 0 0 3px 0;
  font-weight: 800;
  font-size: clamp(16px, 4.6vw, 20px);
  line-height: 1.1;
  text-align: left;
}
.ec-card .tl-meta{
  margin: 0;
  font-size: clamp(12px, 3.8vw, 14px);
  opacity: .95;
  text-align: left;
}

/* Desktop: pannello meno largo per non coprire troppo */
@media (min-width: 821px){
  .ec-card .tl-bottom{
    left: 16px; right: auto; bottom: 16px;
    max-width: min(78%, 640px);
    padding: 12px 16px;
    gap: 14px;
  }
  .ec-card .tl-cta--icon, .ec-card .tl-cta--map{ width: 40px; height: 40px; }
  .ec-card .tl-title{ font-size: 20px; }
  .ec-card .tl-meta{ font-size: 14px; }
}

/* L’overlay scuro della card non deve bloccare i tap */
.ec-card .tl-overlay{ pointer-events: none; }
/* === TL-BOTTOM SOTTO LA FOTO (no overlay) === */
.ec-card .tl-bottom{
  position: static !important;       /* prima era absolute */
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  /* distacco dalla foto: 2–3px */
  margin: 2px 12px 12px !important;  /* top=2px, poi bordi laterali e sotto */

  display: flex;
  align-items: center;
  gap: 12px;

  /* riquadro con bordo sfumato */
  padding: 10px 14px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,.62));
  border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 1;                         /* non serve stare sopra la foto ormai */
}

/* CTA dentro il pannello (restano cliccabili) */
.ec-card .tl-ctas{
  position: static !important;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.ec-card .tl-cta--icon,
.ec-card .tl-cta--map{
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  text-decoration: none;
}
.ec-card .tl-cta--icon svg,
.ec-card .tl-cta--map  svg{ width: 18px; height: 18px; display: block; }
.ec-card .tl-cta--icon:hover,
.ec-card .tl-cta--map:hover{ background: rgba(255,255,255,.18); }

/* Testi compatti */
.ec-card .tl-body{ min-width: 0; }
.ec-card .tl-title{
  margin: 0 0 3px 0;
  font-weight: 800;
  font-size: clamp(16px, 4.6vw, 20px);
  line-height: 1.1;
  text-align: left;
}
.ec-card .tl-meta{
  margin: 0;
  font-size: clamp(12px, 3.8vw, 14px);
  opacity: .95;
  text-align: left;
}

/* Desktop: un filo più largo e con margini maggiori, sempre sotto la foto */
@media (min-width: 821px){
  .ec-card .tl-bottom{
    margin: 8px 16px 16px !important;  /* più respiro su desktop */
    max-width: min(86%, 720px);
    padding: 12px 16px;
    gap: 14px;
  }
  .ec-card .tl-cta--icon, .ec-card .tl-cta--map{ width: 40px; height: 40px; }
  .ec-card .tl-title{ font-size: 20px; }
  .ec-card .tl-meta{ font-size: 14px; }
}

/* L’overlay della card non deve mai bloccare i tap */
.ec-card .tl-overlay{ pointer-events: none; }
/* === MOBILE: foto sopra, poi descrizione, poi pulsanti (stack verticale) === */
@media (max-width: 820px){

  /* 1) Il viewport del carosello NON deve tagliare il riquadro sotto */
  #futureCarousel .ec-viewport,
  .events-carousel .ec-viewport{
    height: auto !important;       /* prima era fisso → ora si adatta al contenuto */
    overflow: visible !important;
  }
  #futureCarousel .ec-track,
  .events-carousel .ec-track,
  #futureCarousel .ec-card,
  .events-carousel .ec-card{
    height: auto !important;       /* la card cresce per contenere il riquadro */
  }

  /* 2) L’area immagine resta compatta; sotto ci sta il riquadro */
  :root{ --poster-mobile-h: 52vh; } /* regola se vuoi più/meno alta la foto (50–56vh) */
  #futureCarousel .ec-card__media,
  .events-carousel .ec-card__media{
    height: var(--poster-mobile-h) !important;
  }
  #futureCarousel .ec-card__media picture,
  #futureCarousel .ec-card__media img,
  .events-carousel .ec-card__media picture,
  .events-carousel .ec-card__media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;  /* locandina intera */
    object-position: 50% 50% !important;
    background: #000 !important;
  }

  /* 3) Riquadro sotto la foto: prima i testi, poi i pulsanti */
  .ec-card .tl-bottom{
    position: static !important;     /* stacca dalla foto */
    margin: 3px 12px 10px !important;/* distacco 2–3px sopra la barra, poi laterali/sotto */
    display: flex !important;
    flex-direction: column !important; /* testi sopra, CTA sotto */
    align-items: flex-start !important;
    gap: 8px !important;

    padding: 10px 14px !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: linear-gradient(to bottom, rgba(0,0,0,.38), rgba(0,0,0,.62)) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .ec-card .tl-body{ order: 1; min-width: 0; }
  .ec-card .tl-ctas{ order: 2; display:flex; gap:10px; }
  .ec-card .tl-cta--icon,
  .ec-card .tl-cta--map{
    width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: 999px;
    background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.28);
    color:#fff; text-decoration:none;
  }
  .ec-card .tl-cta--icon svg,
  .ec-card .tl-cta--map  svg{ width: 18px; height: 18px; display:block; }

  /* 4) Tipografia un filo più compatta per farci stare tutto senza scroll */
  .ec-card .tl-title{
    margin: 0 0 2px 0;
    font-weight: 800;
    font-size: clamp(15px, 4.6vw, 19px);
    line-height: 1.12;
    text-align: left;
  }
  .ec-card .tl-meta{
    margin: 0;
    font-size: clamp(12px, 3.6vw, 13.5px);
    opacity: .95;
    text-align: left;
  }

  /* 5) Dots più distanziati dal riquadro */
  #futureCarousel .ec-dots,
  .events-carousel .ec-dots{
    margin-top: 8px !important;
  }
}
/* === FUTURE CAROUSEL · Pannello unico: icone + testi === */

/* 1) Il pannello sotto la foto diventa l’unico riquadro (bordo bianco) */
.ec-card .tl-bottom{
  position: static !important;            /* stacca dalla foto */
  margin: 3px 12px 10px !important;       /* 2–3px di distacco sopra */
  padding: 12px 14px !important;
  border-radius: 16px !important;

  display: grid !important;               /* icone a sinistra, testi a destra */
  grid-template-columns: 48px 1fr;
  column-gap: 12px;
  align-items: center;

  /* stile del riquadro con bordo bianco */
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
}

/* 2) Icone (ticket + map) dentro al pannello, in colonna */
.ec-card .tl-ctas{
  position: static !important;
  display: grid !important;
  grid-auto-flow: row;
  gap: 8px;
  justify-items: center;
  pointer-events: auto;
}
.ec-card .tl-cta--icon,
.ec-card .tl-cta--map{
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; text-decoration: none;
}
.ec-card .tl-cta--icon svg,
.ec-card .tl-cta--map  svg{ width: 18px; height: 18px; display: block; }

/* 3) Testi nello stesso pannello: NESSUN riquadro nero dietro */
.ec-card .tl-body{
  min-width: 0;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.ec-card .tl-body::before,
.ec-card .tl-body::after{ content:none !important; }

.ec-card .tl-title{
  margin: 0 0 2px 0;
  font-weight: 800;
  font-size: clamp(15px, 4.6vw, 19px);
  line-height: 1.12;
  text-align: left;
  background: transparent !important;
}
.ec-card .tl-meta{
  margin: 0;
  font-size: clamp(12px, 3.6vw, 13.5px);
  opacity: .95;
  text-align: left;
  background: transparent !important;
}

/* 4) Se da qualche parte c'era ancora un vecchio footer sovrapposto, nascondilo */
.ec-card .tl-footer{ display:none !important; }

/* 5) Dots con respiro e overlay non cliccabile */
.ec-card .tl-overlay{ pointer-events: none; }
#futureCarousel .ec-dots, .events-carousel .ec-dots{ margin-top: 8px !important; }

/* Desktop: stesso concetto, solo un filo più largo */
@media (min-width: 821px){
  .ec-card .tl-bottom{
    margin: 8px 16px 16px !important;
    grid-template-columns: 50px 1fr;
    padding: 12px 16px !important;
  }
  .ec-card .tl-cta--icon, .ec-card .tl-cta--map{ width: 40px; height: 40px; }
}
/* === FUTURE CAROUSEL · testi più piccoli nel pannello sotto === */
@media (max-width: 820px){
  .ec-card .tl-title{
    font-size: clamp(13px, 3.9vw, 16px) !important;
    line-height: 1.12 !important;
    margin: 0 0 2px 0 !important;
    letter-spacing: 0.2px;
  }
  .ec-card .tl-meta{
    font-size: clamp(11px, 3.2vw, 12.5px) !important;
    line-height: 1.25 !important;
  }
}

/* Desktop un filo più contenuto */
@media (min-width: 821px){
  .ec-card .tl-title{ font-size: 18px !important; }
  .ec-card .tl-meta{  font-size: 13px !important; }
}

/* evita rotture/overflow */
.ec-card .tl-title,
.ec-card .tl-meta{
  overflow-wrap: anywhere;
}
/* === Allineamento pannello: testi centrati verticalmente rispetto alle icone === */
@media (max-width: 820px){
  /* pannello: griglia icone (sx) + testi (dx) */
  .ec-card .tl-bottom{
    display: grid !important;
    grid-template-columns: 48px 1fr;
    column-gap: 12px;
    align-items: center;            /* centra gli item nella loro area */
  }

  /* colonna icone: 2 bolle da 36px con 8px di gap, centrate verticalmente */
  .ec-card .tl-ctas{
    display: grid !important;
    grid-auto-flow: row;
    grid-auto-rows: 36px;           /* altezza fissa di ogni bolla */
    gap: 8px;
    align-content: center;          /* centra verticalmente nella colonna */
    justify-items: center;
  }

  /* colonna testi: stessa altezza della colonna icone → contenuto centrato */
  .ec-card .tl-body{
    display: flex !important;
    flex-direction: column;
    justify-content: center;        /* spinge titolo+meta verso il basso/centro */
    min-height: calc(36px * 2 + 8px); /* 2 icone + gap = 80px */
  }

  /* piccolo ritocco tipografico per equilibrio visivo */
  .ec-card .tl-title{
    margin: 2px 0 2px !important;
    line-height: 1.12 !important;
  }
  .ec-card .tl-meta{
    line-height: 1.25 !important;
  }

  /* dots un filo più giù per non “toccare” il pannello */
  #futureCarousel .ec-dots,
  .events-carousel .ec-dots{
    margin-top: 12px !important;
  }
}
/* === FUTURE CAROUSEL — pannello sotto la foto (lock finale) === */
@media (max-width: 820px){
  /* 1) il viewport non ritaglia il pannello */
  #futureCarousel .ec-viewport{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #futureCarousel .ec-track,
  #futureCarousel .ec-card{
    height: auto !important;
  }

  /* 2) area immagine compatta, poster intero */
  :root{ --poster-mobile-h: 52vh; } /* regola 50–56vh a piacere */
  #futureCarousel .ec-card__media{
    height: var(--poster-mobile-h) !important;
  }
  #futureCarousel .ec-card__media picture,
  #futureCarousel .ec-card__media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* niente crop */
    object-position: 50% 50% !important;
    background: #000 !important;
  }

  /* 3) pannello unico SOTTO la foto (icone + testi) */
  #futureCarousel .ec-card .tl-bottom{
    position: static !important;
    margin: 6px 12px 12px !important;  /* ↑ distacco dalla foto */
    padding: 12px 14px !important;
    border-radius: 16px !important;

    display: grid !important;
    grid-template-columns: 48px 1fr;
    column-gap: 12px;
    align-items: center;

    background: rgba(0,0,0,.45) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
  }

  /* icone nel pannello */
  #futureCarousel .ec-card .tl-ctas{
    position: static !important;
    display: grid !important;
    grid-auto-rows: 36px;
    gap: 8px;
    justify-items: center;
    pointer-events: auto;
  }
  #futureCarousel .ec-card .tl-cta--icon,
  #futureCarousel .ec-card .tl-cta--map{
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff; text-decoration: none;
  }
  #futureCarousel .ec-card .tl-cta--icon svg,
  #futureCarousel .ec-card .tl-cta--map  svg{ width: 18px; height: 18px; display:block; }

  /* testi nel pannello (nessun riquadro nero extra) */
  #futureCarousel .ec-card .tl-body{
    min-width: 0;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: 80px; /* 2 icone + gap */
  }
  #futureCarousel .ec-card .tl-title{
    margin: 0 0 2px 0 !important;
    font-weight: 800;
    font-size: clamp(13px, 3.9vw, 16px) !important;
    line-height: 1.12 !important;
    text-align: left;
  }
  #futureCarousel .ec-card .tl-meta{
    margin: 0 !important;
    font-size: clamp(11px, 3.2vw, 12.5px) !important;
    line-height: 1.25 !important;
    text-align: left;
    opacity: .95;
  }

  /* niente vecchi footer/overlay che rubano spazio o click */
  #futureCarousel .ec-card .tl-footer{ display:none !important; }
  #futureCarousel .ec-card .tl-overlay{ pointer-events: none !important; }
}

/* Desktop: stesso concetto, un filo più largo */
@media (min-width: 821px){
  #futureCarousel .ec-card .tl-bottom{
    margin: 8px 16px 16px !important;
    grid-template-columns: 50px 1fr;
    padding: 12px 16px !important;
  }
  #futureCarousel .ec-card .tl-cta--icon,
  #futureCarousel .ec-card .tl-cta--map{ width: 40px; height: 40px; }
  #futureCarousel .ec-card .tl-title{ font-size: 18px !important; }
  #futureCarousel .ec-card .tl-meta{  font-size: 13px !important; }
}
.events-carousel .ec-card,
#futureCarousel .ec-card{
  position: relative;
  overflow: hidden;            /* <— importantissimo */
  isolation: isolate;          /* blocca blending fuori dalla card */
}

/* 2) il pannello non aggiunge ombre o bleed */
.events-carousel .ec-card .tl-bottom,
#futureCarousel .ec-card .tl-bottom{
  background-clip: padding-box; /* evita alone sui bordi */
  box-shadow: none !important;
  filter: none !important;      /* sicurezza contro drop-shadow */
}

/* 3) su DESKTOP niente blur (solo semitrasparenza, zero glow) */
@media (min-width: 821px){
  .events-carousel .ec-card .tl-bottom,
  #futureCarousel .ec-card .tl-bottom{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(0,0,0,.52) !important; /* mantieni look scuro */
  }
}

/* 4) su MOBILE ok al blur ma sempre clip dentro la card */
@media (max-width: 820px){
  .events-carousel .ec-card .tl-bottom,
  #futureCarousel .ec-card .tl-bottom{
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: rgba(0,0,0,.45);
  }
}
/* === Align testo pannello sotto la locandina (solo posizione) === */
/* Sposta il blocco testo a sinistra e leggermente più in alto.
   Non tocca dimensioni né struttura del carosello. */

.events-carousel .tl-body{
  left: 72px;        /* lascia spazio alle due icone a sinistra */
  right: 12px;       /* evita che esca a destra */
  bottom: 20px;      /* un filo più in alto */
  transform: none;   /* niente centratura orizzontale */
  text-align: left;  /* allinea il testo a sinistra */
  max-width: none;   /* libera la larghezza, ci pensa right:12px */
}

/* Desktop: un filo più a sinistra per icone più grandi */
@media (min-width: 980px){
  .events-carousel .tl-body{
    left: 86px;
    bottom: 20px;
  }
}

/* Mobile: un po' meno offset */
@media (max-width: 820px){
  .events-carousel .tl-body{
    left: 64px;
    right: 10px;
    bottom: 18px;
  }
}

/* Rifiniture: margini e interlinea del testo (non cambia la grandezza) */
.events-carousel .tl-title{
  margin: 0;
  line-height: 1.15;
}
.events-carousel .tl-meta{
  margin: 4px 0 0;
}
/* === Panel righe: icona + testo affiancati === */
.events-carousel .tl-body{
  /* mantiene il tuo posizionamento; regola solo padding e spacing */
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  /* se avevi già un bordo/blur sul contenitore, puoi lasciarlo.
     In caso non ci fosse, scommenta le 2 righe sotto: */
  /* border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px); */
}

/* riga orizzontale (icona + testo) */
.events-carousel .tl-row{
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}

/* cerchio icona */
.events-carousel .tl-bullet{
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
}

/* dimensioni SVG dentro al cerchio */
.events-carousel .tl-bullet svg{
  width: 18px; height: 18px;
}

/* testo titolo / venue */
.events-carousel .tl-text{ line-height: 1.2; }
.events-carousel .tl-title{ font-weight: 800; margin: 0; }
.events-carousel .tl-meta{ opacity: .92; }

/* hover/focus feedback */
.events-carousel .tl-row:hover .tl-bullet,
.events-carousel .tl-row:focus-visible .tl-bullet{
  background: rgba(255,255,255,.08);
}
.events-carousel .tl-row:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
  border-radius: 12px;
}

/* responsive fine-tuning */
@media (min-width: 980px){
  .events-carousel .tl-row{ grid-template-columns: 46px 1fr; gap: 14px; }
  .events-carousel .tl-bullet{ width: 46px; height: 46px; }
  .events-carousel .tl-bullet svg{ width: 20px; height: 20px; }
  .events-carousel .tl-title{ font-size: 20px; }
}

@media (max-width: 820px){
  .events-carousel .tl-row{ grid-template-columns: 38px 1fr; gap: 10px; }
  .events-carousel .tl-bullet{ width: 38px; height: 38px; }
  .events-carousel .tl-bullet svg{ width: 17px; height: 17px; }
  .events-carousel .tl-title{ font-size: 16px; }
}
/* righe icona + testo affiancate nel pannello sotto */
.events-carousel .tl-bottom{ display:grid; gap:10px; padding:14px 16px; border-radius:16px; }
.events-carousel .tl-row{ display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.events-carousel .tl-bullet{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.35) }
.events-carousel .tl-bullet svg{ width:18px; height:18px }
.events-carousel .tl-title{ margin:0; font-weight:800; line-height:1.2 }
.events-carousel .tl-meta{ opacity:.92; line-height:1.2 }
@media (min-width:980px){ .events-carousel .tl-row{ grid-template-columns:46px 1fr; gap:14px } .events-carousel .tl-bullet{ width:46px; height:46px } .events-carousel .tl-bullet svg{ width:20px; height:20px } }
@media (max-width:820px){ .events-carousel .tl-row{ grid-template-columns:38px 1fr; gap:10px } .events-carousel .tl-bullet{ width:38px; height:38px } .events-carousel .tl-bullet svg{ width:17px; height:17px } .events-carousel .tl-title{ font-size:16px } }
/* ---- FIX: righe "icona + testo" orizzontali nel pannello sotto ---- */

/* Contenitore del pannello (sotto alla locandina) */
.events-carousel .tl-bottom{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  border-radius:16px;
}

/* Ogni riga = icona + testo affiancati */
.events-carousel .tl-row{
  display:flex;
  align-items:center;     /* testo centrato verticalmente rispetto all'icona */
  gap:12px;
  text-decoration:none;
  color:#fff;
}

/* Cerchio icona */
.events-carousel .tl-bullet{
  width:42px; height:42px;
  border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.35);
}
.events-carousel .tl-bullet svg{ width:18px; height:18px }

/* Testi: forza orizzontale (override di vecchie regole verticali) */
.events-carousel .tl-text,
.events-carousel .tl-title,
.events-carousel .tl-meta{
  writing-mode: initial !important;
  text-orientation: initial !important;
  transform: none !important;
  display: inline !important;
  white-space: normal !important;
  word-break: normal !important;
  text-align: left;
  line-height: 1.2;
}

.events-carousel .tl-title{
  margin:0;
  font-weight:800;
}

.events-carousel .tl-meta{ opacity:.92 }

/* Responsive fine-tuning */
@media (min-width: 980px){
  .events-carousel .tl-bullet{ width:46px; height:46px }
  .events-carousel .tl-bullet svg{ width:20px; height:20px }
}
@media (max-width: 820px){
  .events-carousel .tl-bullet{ width:38px; height:38px }
  .events-carousel .tl-bullet svg{ width:17px; height:17px }
  .events-carousel .tl-title{ font-size:16px }
}
/* Contenitore due righe */
.event-info{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  /* se lo vuoi “appeso” alla card in basso:
     position:absolute; left:12px; right:12px; bottom:12px; */
}

/* Riga orizzontale: icona + testo */
.event-row{
  display: flex;
  align-items: center;      /* testo centrato verticalmente */
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

/* Cerchio icona */
.event-icon{
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
}
.event-icon svg{ width:18px; height:18px }

/* Testi (niente verticale) */
.event-text{
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.2;
  text-align: left;
}
.event-title{ font-weight: 800; margin: 0 }
.event-venue{ opacity: .95 }

/* Responsive */
@media (min-width: 980px){
  .event-icon{ width:46px; height:46px }
  .event-icon svg{ width:20px; height:20px }
}
@media (max-width: 820px){
  .event-title{ font-size: 16px }
  .event-icon{ width:38px; height:38px }
  .event-icon svg{ width:17px; height:17px }
}
/* Assicurati che la card faccia da riferimento al pannello */
.events-carousel .ec-card{
  position: relative;
  overflow: hidden;               /* clip dell'effetto blur ai bordi della card */
}

/* Pannello vetro blur: contenitore info */
.events-carousel .ei-panel{
  position: absolute;
  left: clamp(8px, 2vw, 14px);
  right: clamp(8px, 2vw, 14px);
  bottom: clamp(8px, 2vw, 14px);
  z-index: 6;

  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 14px 16px;
  border-radius: 16px;
  color: #fff;

  /* vetro + contrasto */
  background: rgba(8, 8, 8, .42);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

/* leggera sfumatura interna per far “staccare” i testi su poster chiari */
.events-carousel .ei-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
  z-index: -1;
}

/* Righe: icona a sinistra, testo centrato (colonna centrale) */
.events-carousel .ei-row{
  display: grid;
  grid-template-columns: 42px 1fr 42px; /* icona | testo | spacer */
  align-items: center;
  column-gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* Icona tonda */
.events-carousel .ei-icon{
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
}
.events-carousel .ei-icon svg{ width:18px; height:18px }

/* Testi centrati nella colonna 2 e sempre orizzontali */
.events-carousel .ei-text{
  grid-column: 2;
  text-align: center;
  line-height: 1.2;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.events-carousel .ei-title{ margin: 0; font-weight: 800 }
.events-carousel .ei-venue{ opacity: .95 }

/* Spacer (colonna 3) per simmetria */
.events-carousel .ei-spacer{ display:block }

/* Desktop */
@media (min-width: 821px){
  .events-carousel .ei-row{ grid-template-columns: 46px 1fr 46px; column-gap: 14px }
  .events-carousel .ei-icon{ width:46px; height:46px }
  .events-carousel .ei-icon svg{ width:20px; height:20px }
}

/* Mobile */
@media (max-width: 820px){
  .events-carousel .ei-icon{ width:38px; height:38px }
  .events-carousel .ei-icon svg{ width:17px; height:17px }
  .events-carousel .ei-title{ font-size: 16px }
}
/* Metti il pannello info SOTTO alla foto (nel flusso della card) */
.events-carousel .ei-panel{
  position: static !important;      /* non più overlay */
  left: auto; right: auto; bottom: auto;
  margin: clamp(8px, 1.8vw, 14px) clamp(8px, 2vw, 14px) 0; /* top | sx/dx | bottom */
}

/* (opzionale) Assicurati che eventuali overlay non coprano il pannello */
.events-carousel .tl-overlay{ z-index: 0; pointer-events: none; }
/* il pannello resta sopra anche se statico perché non è più sotto l’overlay */
/* 1) niente bordi/inset sulle card (da cui nascono le linee bianche) */
.events-carousel .ec-card,
.events-carousel .ec-card::before,
.events-carousel .ec-card::after{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;   /* se avevi un "inset 0 0 0 1px ..." lo spegne */
}

/* 2) immagine e media con stesso raggio e clipping: evita “fughe” sui lati */
.events-carousel .ec-card__media,
.events-carousel .ec-card__media picture,
.events-carousel .ec-card__media img{
  display:block;
  border-radius: 16px;      /* usa lo stesso valore della tua card */
  overflow:hidden;
  background:#000;          /* matte nero per anti-alias */
}

/* 3) fix Safari/WebKit: elimina la micro-linea ai bordi durante le translate3d */
.events-carousel .ec-card,
.events-carousel .ec-card__media,
.events-carousel .ei-panel{
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* (opzionale) se vuoi comunque un bordo “soft”, mettilo come ombra fuori, non inset */
.events-carousel .ec-card{
  box-shadow: 0 10px 30px rgba(0,0,0,.45) !important; /* solo esterno */
}