/* ═══════════════════════════════════════════
   SPEMME — COMPONENTI EVENTO
   Locandina · Galleria · Video · Biglietti
   Blocchi autonomi e riutilizzabili: ognuno può
   essere omesso senza rompere gli altri.
   (richiede base.css + js/evento.js)
═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   1 · LOCANDINA + DATI CHIAVE
   Apre la pagina evento: poster a sinistra,
   informazioni e CTA a destra.
═══════════════════════════════════════════ */
.ev-poster {
  display:               grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap:                   3.5rem;
  align-items:           start;
  padding:               4rem 0 4.5rem;
  border-bottom:         1px solid rgba(201,168,76,.09);
}

.ev-poster-figure {
  position: relative;
  margin:   0;
  border:   1px solid rgba(201,168,76,.18);
  padding:  .55rem;
  background: rgba(13,59,62,.25);
}
.ev-poster-figure img {
  display:   block;
  width:     100%;
  height:    auto;
  cursor:    zoom-in;
}
/* cornice dorata sottile in rilievo */
.ev-poster-figure::after {
  content:        '';
  position:       absolute;
  inset:          .55rem;
  border:         1px solid rgba(201,168,76,.22);
  pointer-events: none;
}
.ev-poster-caption {
  font-family:    var(--font-label);
  font-size:      .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--text-dim);
  text-align:     center;
  margin-top:     .9rem;
}

/* ─── Colonna informazioni ─── */
.ev-poster-body { padding-top: .3rem; }
.ev-poster-label {
  font-family:    var(--font-label);
  font-size:      .6rem;
  letter-spacing: .3em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  .9rem;
}
.ev-poster-claim {
  font-family:   var(--font-display);
  font-size:     clamp(1.4rem, 2.6vw, 2rem);
  font-weight:   300;
  line-height:   1.35;
  margin-bottom: 1.6rem;
}
.ev-poster-claim em { font-style: italic; color: var(--gold-light); }
.ev-poster-text {
  font-size:   .95rem;
  line-height: 1.9;
  color:       var(--text-light);
}
.ev-poster-text p + p { margin-top: 1rem; }

/* Riga di dati essenziali (data · luogo · durata …) */
.ev-facts {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:                   1px;
  margin:                2rem 0 1.8rem;
  background:            rgba(201,168,76,.15);
  border:                1px solid rgba(201,168,76,.15);
}
.ev-fact {
  background: var(--petrolio-dark);
  padding:    1.1rem 1.2rem;
}
.ev-fact-label {
  font-family:    var(--font-label);
  font-size:      .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  .45rem;
}
.ev-fact-value {
  font-family: var(--font-display);
  font-size:   1.05rem;
  line-height: 1.35;
  color:       var(--cream);
}
.ev-fact-value em { font-style: italic; color: var(--gold-light); }

/* ═══════════════════════════════════════════
   2 · GALLERIA FOTO
   Griglia a masonry semplificata; il click apre
   il lightbox gestito da js/evento.js.
═══════════════════════════════════════════ */
.ev-gallery {
  padding:       4.5rem 0;
  border-bottom: 1px solid rgba(201,168,76,.09);
}
.ev-gallery-label {
  font-family:    var(--font-label);
  font-size:      .6rem;
  letter-spacing: .3em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  .8rem;
}
.ev-gallery-h2 {
  font-family:   var(--font-display);
  font-size:     clamp(1.8rem, 3vw, 2.4rem);
  font-weight:   300;
  margin-bottom: 2.5rem;
}
.ev-gallery-h2 em { font-style: italic; color: var(--gold-light); }

/* Righe di altezza fissa + span: le celle si incastrano senza lasciare
   buchi, cosa che con aspect-ratio diverse per cella non accade. */
.ev-gallery-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows:        145px;
  gap:                   1rem;
}
.ev-shot {
  position:   relative;
  display:    block;
  overflow:   hidden;
  border:     1px solid rgba(201,168,76,.12);
  background: rgba(13,59,62,.3);
  cursor:     zoom-in;
  padding:    0;
  grid-row:   span 2;
}
/* alcune foto occupano due colonne o tre righe: spezzano la monotonia */
.ev-shot--wide { grid-column: span 2; }
.ev-shot--tall { grid-row:    span 3; }

.ev-shot img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  filter:     saturate(.92) brightness(.92);
  transition: transform var(--transition-slow), filter var(--transition-normal);
}
.ev-shot:hover img { transform: scale(1.04); filter: saturate(1) brightness(1); }

/* velo dorato al passaggio */
.ev-shot::after {
  content:    '';
  position:   absolute;
  inset:      0;
  box-shadow: inset 0 0 0 1px rgba(201,168,76,0);
  transition: box-shadow var(--transition-normal);
  pointer-events: none;
}
.ev-shot:hover::after { box-shadow: inset 0 0 0 1px rgba(201,168,76,.45); }

.ev-gallery-note {
  font-size:   .78rem;
  line-height: 1.8;
  color:       var(--text-dim);
  margin-top:  1.4rem;
}

/* ─── LIGHTBOX ─── */
.ev-lightbox {
  position:        fixed;
  inset:           0;
  z-index:         200;
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         4vh 4vw;
  background:      rgba(4,16,17,.94);
  backdrop-filter: blur(4px);
}
.ev-lightbox.is-open { display: flex; }
.ev-lightbox img {
  max-width:  100%;
  max-height: 88vh;
  display:    block;
  border:     1px solid rgba(201,168,76,.25);
}
.ev-lightbox-close,
.ev-lightbox-prev,
.ev-lightbox-next {
  position:    absolute;
  background:  transparent;
  border:      1px solid rgba(201,168,76,.3);
  color:       var(--gold);
  cursor:      pointer;
  font-family: var(--font-display);
  line-height: 1;
  transition:  background var(--transition-normal), border-color var(--transition-normal);
}
.ev-lightbox-close:hover,
.ev-lightbox-prev:hover,
.ev-lightbox-next:hover { background: rgba(201,168,76,.12); border-color: var(--gold); }

.ev-lightbox-close {
  top:       2vh;
  right:     3vw;
  width:     44px;
  height:    44px;
  font-size: 1.5rem;
}
.ev-lightbox-prev,
.ev-lightbox-next {
  top:        50%;
  transform:  translateY(-50%);
  width:      46px;
  height:     70px;
  font-size:  1.7rem;
}
.ev-lightbox-prev { left:  2vw; }
.ev-lightbox-next { right: 2vw; }

.ev-lightbox-caption {
  position:       absolute;
  bottom:         2.2vh;
  left:           0;
  right:          0;
  text-align:     center;
  font-family:    var(--font-label);
  font-size:      .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--text-dim);
}

/* ═══════════════════════════════════════════
   3 · VIDEO / TRAILER
   Facade: nessuna richiesta a YouTube finché
   l'utente non preme play (vedi privacy.html).
   L'anteprima è un'immagine servita dal sito.
═══════════════════════════════════════════ */
.ev-video {
  padding:       4.5rem 0;
  border-bottom: 1px solid rgba(201,168,76,.09);
}
.ev-video-label {
  font-family:    var(--font-label);
  font-size:      .6rem;
  letter-spacing: .3em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  .8rem;
}
.ev-video-h2 {
  font-family:   var(--font-display);
  font-size:     clamp(1.8rem, 3vw, 2.4rem);
  font-weight:   300;
  margin-bottom: 1rem;
}
.ev-video-h2 em { font-style: italic; color: var(--gold-light); }
.ev-video-desc {
  font-size:     .92rem;
  line-height:   1.85;
  color:         var(--text-light);
  max-width:     640px;
  margin-bottom: 2rem;
}

.ev-video-frame {
  position:     relative;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  border:       1px solid rgba(201,168,76,.18);
  background:   var(--petrolio-dark);
}
.ev-video-frame img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  filter:     saturate(.85) brightness(.55);
  transition: filter var(--transition-normal), transform var(--transition-slow);
}
.ev-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.ev-video-play {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1.1rem;
  padding:         2rem;
  border:          none;
  cursor:          pointer;
  text-align:      center;
  color:           inherit;
  /* velo: le locandine chiare renderebbero illeggibile la scritta */
  background:      radial-gradient(ellipse at center,
                     rgba(8,31,33,.72) 0%, rgba(8,31,33,.5) 55%, rgba(8,31,33,.72) 100%);
  transition:      background var(--transition-normal);
}
.ev-video-play:hover { background: rgba(8,31,33,.55); }
.ev-video-frame:hover img { filter: saturate(1) brightness(.68); transform: scale(1.02); }

.ev-video-play-icon {
  width:           74px;
  height:          74px;
  border:          1px solid rgba(201,168,76,.5);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(8,31,33,.55);
  transition:      background var(--transition-normal),
                   border-color var(--transition-normal),
                   transform var(--transition-normal);
}
.ev-video-play-icon svg { width: 26px; height: 26px; fill: var(--gold); margin-left: 4px; }
.ev-video-play:hover .ev-video-play-icon {
  background:   rgba(201,168,76,.16);
  border-color: var(--gold);
  transform:    scale(1.06);
}
.ev-video-play-text {
  font-family:    var(--font-label);
  font-size:      .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--gold-pale);
}
.ev-video-play-privacy {
  font-size:   .72rem;
  line-height: 1.7;
  color:       var(--text-dim);
  max-width:   360px;
}
.ev-video-play-privacy a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.ev-video-fallback {
  display:        inline-block;
  margin-top:     1.2rem;
  font-family:    var(--font-label);
  font-size:      .52rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--text-dim);
  text-decoration: none;
  border-bottom:  1px solid rgba(201,168,76,.25);
  padding-bottom: .25rem;
  transition:     color var(--transition-normal), border-color var(--transition-normal);
}
.ev-video-fallback:hover { color: var(--gold); border-color: var(--gold); }

/* ═══════════════════════════════════════════
   4 · BIGLIETTI
   Tre varianti: prevendita esterna (TicketOne o
   simili), acquisto diretto, ingresso gratuito.
═══════════════════════════════════════════ */
.ev-tickets {
  padding:       4.5rem 0;
  border-bottom: 1px solid rgba(201,168,76,.09);
}
.ev-tickets-label {
  font-family:    var(--font-label);
  font-size:      .6rem;
  letter-spacing: .3em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  .8rem;
}
.ev-tickets-h2 {
  font-family:   var(--font-display);
  font-size:     clamp(1.8rem, 3vw, 2.4rem);
  font-weight:   300;
  margin-bottom: 2.2rem;
}
.ev-tickets-h2 em { font-style: italic; color: var(--gold-light); }

.ev-tickets-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap:                   1.4rem;
}
.ev-ticket {
  display:        flex;
  flex-direction: column;
  border:         1px solid rgba(201,168,76,.15);
  background:     rgba(13,59,62,.2);
  padding:        2rem 1.8rem;
}
.ev-ticket-kicker {
  font-family:    var(--font-label);
  font-size:      .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  .7rem;
}
.ev-ticket-title {
  font-family:   var(--font-display);
  font-size:     1.35rem;
  color:         var(--gold-pale);
  margin-bottom: .7rem;
}
.ev-ticket-text {
  font-size:     .85rem;
  line-height:   1.8;
  color:         var(--text-light);
  margin-bottom: 1.5rem;
  flex:          1;
}
.ev-ticket-price {
  font-family:   var(--font-display);
  font-style:    italic;
  font-size:     1.6rem;
  color:         var(--gold-light);
  margin-bottom: 1.2rem;
}

/* Variante in evidenza: la via d'acquisto principale */
.ev-ticket--main {
  border-color: rgba(201,168,76,.42);
  background:   linear-gradient(150deg, rgba(21,79,83,.3) 0%, rgba(13,59,62,.2) 100%);
}

/* Variante ingresso libero */
.ev-ticket--free .ev-ticket-price { font-size: 1.35rem; font-style: normal; }

.ev-ticket-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             .55rem;
  font-family:     var(--font-label);
  font-size:       .56rem;
  letter-spacing:  .2em;
  text-transform:  uppercase;
  padding:         .95rem 1.4rem;
  text-decoration: none;
  border:          1px solid rgba(201,168,76,.3);
  color:           var(--gold);
  background:      transparent;
  cursor:          pointer;
  transition:      background var(--transition-normal),
                   border-color var(--transition-normal),
                   color var(--transition-normal);
}
.ev-ticket-btn:hover { background: rgba(201,168,76,.1); border-color: var(--gold); }
.ev-ticket-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* pulsante pieno per l'azione principale */
.ev-ticket-btn--solid {
  background:   var(--gold);
  border-color: var(--gold);
  color:        var(--petrolio-dark);
}
.ev-ticket-btn--solid:hover { background: var(--gold-light); border-color: var(--gold-light); }

/* pulsante WhatsApp nel contesto biglietti */
.ev-ticket-btn--wa {
  background:   #25D366;
  border-color: #25D366;
  color:        #fff;
}
.ev-ticket-btn--wa:hover { background: #1ebe5d; border-color: #1ebe5d; color: #fff; }
.ev-ticket-btn--wa svg { fill: currentColor; }

.ev-tickets-note {
  font-size:   .78rem;
  line-height: 1.8;
  color:       var(--text-dim);
  margin-top:  1.6rem;
  max-width:   680px;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .ev-poster {
    grid-template-columns: 1fr;
    gap:                   2.2rem;
    padding:               3rem 0 3.5rem;
  }
  .ev-poster-figure { max-width: 340px; margin-inline: auto; }
  .ev-shot--wide    { grid-column: span 1; }
}

@media (max-width: 600px) {
  .ev-gallery, .ev-video, .ev-tickets { padding: 3.5rem 0; }
  /* una colonna sola: a due, un numero dispari di dati lascia una cella vuota */
  .ev-facts        { grid-template-columns: 1fr; }
  .ev-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 110px; gap: .8rem; }
  .ev-shot,
  .ev-shot--tall   { grid-row: span 2; }
  .ev-video-play-icon { width: 60px; height: 60px; }
  .ev-ticket       { padding: 1.6rem 1.4rem; }
  .ev-lightbox-prev, .ev-lightbox-next { width: 38px; height: 56px; font-size: 1.3rem; }
}

/* Chi ha chiesto meno animazioni non subisce zoom né transizioni */
@media (prefers-reduced-motion: reduce) {
  .ev-shot img,
  .ev-video-frame img,
  .ev-video-play-icon { transition: none; }
  .ev-shot:hover img,
  .ev-video-frame:hover img { transform: none; }
}