/* ==========================================================
   PICIEMME — pagina singolo evento (frame 81:3673 / 146:3480)
   La gallery è il componente condiviso in gallery.css.
   ========================================================== */

/* --- Hero --- */
.ev1-hero{
  position:relative; overflow:hidden; background:var(--white);
  padding:var(--crumb-top) var(--gut) 0;
}
.ev1-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ev1-crumbs span{ font-size:var(--fs-sm); font-weight:400; color:var(--black-25); }
.ev1-crumbs .sep{ font-weight:700; }
.ev1-crumbs b{ font-size:var(--fs-sm); font-weight:700; color:var(--burgundy-600); }
.ev1-crumbs a span{ transition:color var(--hover-fx); }
.ev1-crumbs a:hover span{ color:var(--black); }
.ev1-title{
  margin-top:var(--crumb-gap); font-size:var(--fs-title); font-weight:700;
  line-height:var(--lh-title); color:var(--black);
}

.ev1-figura{ margin-top:40px; }
.ev1-figura img{ width:100%; aspect-ratio:361/342; object-fit:cover; display:block; }
/* Evento senza materiale fotografico: riquadro neutro con lo stesso ingombro. */
.ev1-figura.senza-foto{
  aspect-ratio:361/342; display:flex; align-items:center; justify-content:center;
  background:var(--n200);
}
.ev1-figura .senza-foto-nota{
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--n600);
}

.ev1-col{ margin-top:32px; display:flex; flex-direction:column; gap:40px; }
.ev1-abstract{ font-size:var(--fs-ui); font-weight:400; color:var(--n700); }
.ev1-meta{ display:grid; grid-template-columns:1fr 1fr; gap:24px 30px; }
/* --- "Brand rappresentati" ---
   I brand sono testo come gli altri metadati — stessa tipografia di "Luogo /
   Firenze", che arriva da .ev1-meta p. A cambiare e solo quanti se ne leggono:
   oltre i primi tre l'elenco resta chiuso dietro un +N, cosi un evento con
   quindici brand non allunga la hero ne sfalsa la griglia.
   Due righe riservate come prima: senza un'altezza minima la griglia ballava
   da una scheda all'altra, e due bastano al caso compatto. */
.ev1-meta .voce[data-campo="tag"] p{
  /* Interlinea piu larga degli altri metadati: qui le righe sono un elenco
     che va letto a salti, non un valore unico, e a 1.4 si impastavano. */
  min-height:calc(2 * 1.6em); line-height:1.6;
  /* Un nome lungo senza spazi (o un dato sporco) sfonderebbe la colonna e da
     desktop finirebbe sotto l'immagine: qui si spezza dove capita. Vale solo
     per questa voce, gli altri metadati sono valori brevi e controllati. */
  overflow-wrap:anywhere;
  /* Colonna: il comando va a capo e si incolonna con l'inizio dei nomi,
     invece di restare appeso in fondo all'ultima riga. */
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}

/* L'unico elemento riquadrato della voce e il comando: si distingue dai nomi
   dei brand, che restano testo corrente. Spigoli vivi e nero pieno — e
   un'azione, non un'etichetta, e il nero e la tinta dei comandi del sito
   (il bordeaux qui sembrava un dato in evidenza). */
.ev1-tag-piu{
  display:inline-flex; align-items:center;
  padding:1px 10px; border:1px solid var(--black);
  background:none; cursor:pointer; white-space:nowrap;
  /* i <button> non ereditano il font: senza questo usa quello di sistema */
  font-family:var(--body); font-size:var(--fs-xs); font-weight:700;
  line-height:1.3; color:var(--black);
  transition:background var(--hover-fx), color var(--hover-fx);
}
/* Il riquadro e alto ~24px, sotto i 44 che il sito si da come bersaglio
   minimo di tocco. L'area sensibile si allarga con uno pseudo-elemento: non
   entra nel flusso, quindi non muove nulla. Sbilanciata verso il basso, dove
   non c'e niente: verso l'alto resterebbe sopra l'ultima riga di nomi e
   renderebbe scomodo selezionarli. */
.ev1-tag-piu{ position:relative; }
.ev1-tag-piu::after{
  content:""; position:absolute; left:-6px; right:-6px; top:-4px; bottom:-16px;
}
/* Il +N e un numero, non una parola: va nel font del display (Aboreto), lo
   stesso delle cifre grandi del sito. Solo in questo stato — da aperto
   l'etichetta e "Mostra meno", una frase, e torna al font del corpo.
   Peso 400 perche di Aboreto carichiamo solo quello: a 700 il browser
   fabbricherebbe un finto neretto. */
.ev1-tag-piu[aria-expanded="false"]{ font-family:var(--display); font-weight:400; }
.ev1-tag-piu:hover{ background:var(--black); color:var(--white); }
.ev1-tag-piu:focus-visible{ outline:2px solid var(--black); outline-offset:3px; }

/* Apertura: l'elenco che si allunga sfuma sul posto. Nessuna animazione di
   altezza — il blocco si assesta subito e lo script rimisura la hero — e
   nessun rimbalzo: 180ms, la stessa durata di tutti gli hover del sito. */
/* Solo opacita: l'elenco e un inline che deve poter andare a capo fra le
   righe, e un transform lo renderebbe un blocco atomico che non si spezza. */
@keyframes ev1-brand-entra{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:no-preference){
  .ev1-tags.aperta .ev1-brand-elenco{ animation:ev1-brand-entra .18s ease-out both; }
}
/* Descrizione a tutta larghezza sotto le quattro voci brevi */
.ev1-meta .voce.larga{ grid-column:1 / -1; }
/* Tre righe riservate, con ellissi oltre la terza */
.ev1-meta .voce.larga p{
  min-height:calc(3 * 1.4em); line-height:1.4;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
/* Testo provvisorio: marcato solo semanticamente con data-segnaposto,
   nessuna differenza di resa rispetto ai valori reali. */
.ev1-meta h3{
  font-size:var(--fs-sm); font-weight:700; color:var(--black-25);
  margin-bottom:12px;
}
.ev1-meta p{ font-size:var(--fs-body-m); font-weight:600; color:var(--black); }


/* --- Sezione gallery --- */
/* --- Video ---------------------------------------------------------------
   Sta fra la hero e la gallery e ne ripete l'impaginazione: stesso fondo,
   stesso passo verticale, stesso titolo in display maiuscolo. Il riquadro e
   16:9, il formato in cui girano tutti i filmati di fiera. Finche il video
   non c'e resta un rettangolo neutro, lo stesso grigio delle foto mancanti,
   cosi la pagina non cambia altezza quando arrivera davvero. */
.ev1-video{ background:var(--white); padding:64px var(--gut) 0; }
.ev1-video-in{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.ev1-video h2{
  width:100%; text-align:left;
  font-family:var(--display); font-size:clamp(36px, 8.201vw, 124px); font-weight:400;
  line-height:calc(110/124); text-transform:uppercase; color:var(--black);
}
.ev1-video-box{ width:100%; aspect-ratio:16/9; background:var(--n200); }
.ev1-video-box video,
.ev1-video-box iframe{ display:block; width:100%; height:100%; border:0; object-fit:cover; }
.ev1-video-box.in-attesa{ display:flex; align-items:center; justify-content:center; }
.ev1-video-nota{
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--n600);
}

.ev1-gallery{ background:var(--white); padding:64px var(--gut); }
.ev1-gallery-in{ display:flex; flex-direction:column; align-items:center; gap:24px; }
.ev1-gallery h2{
  width:100%; text-align:left;
  font-family:var(--display); font-size:clamp(36px, 8.201vw, 124px); font-weight:400;
  line-height:calc(110/124); text-transform:uppercase; color:var(--black);
}

/* --- Altri eventi --- */
.ev1-altri{ background:var(--white); padding:0 var(--gut) 80px; }
/* Etichetta di sezione: stessa misura di "Tutti gli Eventi" e "La nostra
   storia" — 28/700 su desktop, 18 su mobile. */
.ev1-altri h2{
  font-size:var(--fs-eyebrow); font-weight:700;
  text-transform:uppercase; color:var(--black);
}
.ev1-altri .ev-griglia{ margin-top:32px; }

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width:1024px){
  /* Hero 1512×982 */
  .ev1-hero{ min-height:64.947vw; padding:0; }
  .ev1-head{ position:absolute; left:5.291%; top:var(--crumb-top); width:93.519%; }
  .ev1-crumbs span,.ev1-crumbs b{ font-size:var(--fs-sm); }   /* 18px */

  /* 754 @758,486. Il rapporto resta come ripiego se lo script non gira;
     quando gira, l'altezza esplicita che imposta ha la precedenza. */
  .ev1-figura{
    position:absolute; left:50.132%; top:49.491%; width:49.868%; margin:0;
    aspect-ratio:754/488;
  }
  .ev1-figura img{ aspect-ratio:auto; height:100%; object-fit:cover; }
  .ev1-figura.senza-foto{ aspect-ratio:754/488; }

  /* La colonna arrivava a 5px dall'immagine e la descrizione le finiva
     addosso: ora si ferma prima e fra i due blocchi resta una corsia vuota
     di 48px a 1512, in proporzione alle altre larghezze. */
  .ev1-col{
    position:absolute; left:5.291%; top:57.434%; width:41.667%;   /* fino a 710 */
    margin:0; gap:64px;
  }
  /* Passi più stretti: le quattro voci si leggono come un unico blocco
     invece che come quattro isole. */
  .ev1-meta{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 48px; }
  .ev1-meta h3{ font-size:var(--fs-body); }
  .ev1-meta p{ font-size:var(--fs-ui); }

  /* Sezione gallery: padding 200/120/80, contenuto 1170 centrato */
  .ev1-video{ padding:120px var(--gut) 0; }
  .ev1-video-in{ max-width:1170px; margin-inline:auto; gap:64px; }
  .ev1-video h2{ text-align:center; max-width:666px; }

  .ev1-gallery{ padding:120px var(--gut); }   /* era 200 in testa: troppo stacco dal blocco sopra */
  .ev1-gallery-in{ max-width:1170px; margin-inline:auto; gap:64px; }
  .ev1-gallery h2{ text-align:center; max-width:666px; }

  .ev1-altri{ padding:0 var(--gut) 120px; }
  .ev1-altri .ev-griglia{ margin-top:48px; }
}