/* Griglia "Prossimi eventi", striscia "Passati in evidenza", badge di
 * stato e bottone "Mostra di più" per [eventi_lista] / [eventi_in_evidenza]
 * (inc/eventi-shortcode-lista.php) e [evento_stato badge="si"]
 * (inc/eventi-shortcodes.php). Markup/nomi classe presi da
 * designs/03-notte-rooftop/eventi.html. Ogni colore ha un fallback
 * letterale via var(--nome, fallback): funziona anche se le variabili di
 * design (--green, --bg-card, ecc.) non sono definite altrove nel sito,
 * niente da incollare a mano in Personalizza → CSS aggiuntivo.
 */

.tag{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:8px 16px; border-radius:999px; white-space:nowrap; display:inline-block; }
.tag-upcoming{ background:transparent; color:var(--green, #C3DC2E); border:1px solid rgba(195,220,46,.4); }
.tag-past{ color:var(--text-muted, #B8AFA2); border:1px solid var(--line-strong, rgba(255,248,237,.24)); }
.tag-full{ color:var(--text-muted, #B8AFA2); border:1px solid var(--line-strong, rgba(255,248,237,.24)); background:rgba(255,248,237,.06); }

.btn{
  font-weight:700; font-size:.92rem; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:.6em;
  padding:17px 32px; border:none; border-radius:999px; cursor:pointer;
  background:var(--gradient-cta, linear-gradient(135deg, #D5E481, #C3DC2E)); color:#14210a;
  box-shadow:0 8px 30px -8px rgba(195,220,46,.5);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -8px rgba(195,220,46,.65); }
.btn--ghost{
  background:rgba(195,220,46,.05); color:var(--green, #C3DC2E); box-shadow:none;
  border:1.5px solid var(--green, #C3DC2E);
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .18s ease, box-shadow .2s ease;
}
.btn--ghost:hover{
  background:rgba(195,220,46,.16); border-color:var(--green-bright, #D5E481); color:var(--green-bright, #D5E481);
  transform:translateY(-2px); box-shadow:0 0 0 5px rgba(195,220,46,.1), 0 14px 30px -12px rgba(195,220,46,.35);
}
/* .btn imposta display:inline-flex, che vince sulla regola browser
 * [hidden]{display:none} (le regole del tema battono sempre quelle dello
 * user-agent, a prescindere dalla specificità): senza queste righe
 * l'attributo hidden impostato da eventi-mostra-di-piu.js non nasconde
 * nulla, né sul bottone né sul suo contenitore .event-section__more
 * (anche lui con un display esplicito più sotto). */
.btn[hidden]{ display:none; }

.event-section-wrap{ display:block; width:100%; }
.event-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.event-card{
  display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  background:var(--bg-card, #1D1712); border:1px solid var(--line, rgba(255,248,237,.12));
  transition:border-color .18s ease, transform .18s ease;
}
.event-card:hover{ border-color:var(--green, #C3DC2E); transform:translateY(-4px); }
.event-card__media{ aspect-ratio:4/3; overflow:hidden; margin:0; }
.event-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; margin:0; }
.event-card:hover .event-card__media img{ transform:scale(1.05); }
.event-card__body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.event-card__title{ font-family:var(--display, inherit); font-weight:700; font-size:1.4rem; text-transform:uppercase; line-height:1.08; margin:0; }
.event-card__meta{ font-size:.86rem; color:var(--text-muted, #B8AFA2); margin:0; }
.event-card__top{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line, rgba(255,248,237,.12));
}
.event-card__date{ font-family:var(--display, inherit); font-weight:700; font-size:.85rem; letter-spacing:.02em; color:var(--text-muted, #B8AFA2); text-transform:uppercase; }
.event-section__more{ display:flex; justify-content:center; padding-top:36px; }
.event-section__more[hidden]{ display:none; }

/* Soglia di default (3): [eventi_lista] la sovrascrive per-istanza con uno
 * <style> inline scoped sull'id della griglia quando max_eventi è diverso
 * da 3 (vedi inc/eventi-shortcode-lista.php), l'id ha specificità maggiore
 * quindi vince a prescindere dall'ordine di caricamento. */
.event-grid.has-mostra-di-piu > *:nth-child(n+4){ display:none; }
.event-grid.has-mostra-di-piu.is-espanso > *:nth-child(n+4){ display:block; }

.event-card--past .event-card__media img{ filter:grayscale(.4) brightness(.75); }
.event-card--past:hover .event-card__media img{ filter:grayscale(0) brightness(.9); }

@media (max-width:900px){ .event-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .event-grid{ grid-template-columns:1fr; } }

.past-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
.past-strip__item{ position:relative; display:block; border-radius:18px; overflow:hidden; aspect-ratio:4/3; }
.past-strip__item img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(.4) brightness(.7);
  transition:transform .5s ease, filter .3s ease; margin:0;
}
.past-strip__item::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(11,8,5,.92)); }
.past-strip__item:hover img{ transform:scale(1.06); filter:grayscale(0) brightness(.85); }
.past-strip__body{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.past-strip__title{ font-family:var(--display, inherit); font-weight:700; font-size:1.25rem; text-transform:uppercase; line-height:1.08; margin:0; }
.past-strip__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.past-strip__date{ font-family:var(--display, inherit); font-weight:700; font-size:.8rem; letter-spacing:.02em; color:var(--text-muted, #B8AFA2); text-transform:uppercase; }