/* ==========================================================
   PICIEMME — pagina Eventi (listing con filtri)
   Desktop 1512 · Mobile 393.
   Breadcrumb, titolo, padding laterale, CTA sottolineate e frecce
   riusano i token già calibrati in site.css.
   ========================================================== */

/* =========================================================
   1 · HERO — breadcrumb, titolo, occhiello, eventi in evidenza
   ========================================================= */
.ev-hero{ position:relative; overflow:hidden; background:var(--white);
         padding:var(--crumb-top) var(--gut) 64px; min-height:216.285vw; }   /* hero mobile senza il featured */

.ev-crumbs{ display:flex; align-items:center; gap:8px; }
.ev-crumbs span{ font-size:var(--fs-sm); font-weight:400; color:var(--black-25); }
.ev-crumbs b{ font-size:var(--fs-sm); font-weight:700; color:var(--burgundy-600); }
.ev-crumbs a span{ transition:color var(--hover-fx); }
.ev-crumbs a:hover span{ color:var(--black); }
/* Stessa misura del titolo di Contatti, Brand e Servizi: token condiviso */
.ev-title{
  margin-top:var(--crumb-gap); font-size:var(--fs-title); font-weight:700;
  line-height:var(--lh-title); color:var(--black);
}
/* Mobile: nell'export l'occhiello è rientrato di 68 e staccato dal titolo */
.ev-intro{
  position:absolute; left:17.303%; top:155.216vw; width:78.626%;
  font-size:clamp(18px, 1.852vw, 28px); font-style:italic; font-weight:300; color:var(--black);
}
.ev-vrule{ display:none; }

/* --- Etichette di sezione --- */
.ev-lab{
  font-size:var(--fs-eyebrow); font-weight:700; line-height:calc(29/28);
  text-transform:uppercase; color:var(--black);
}

/* =========================================================
   Scheda evento — misure dal componente Figma della card.
   Distanze: immagine→contenuto 24 · titolo/data→descrizione 4 ·
   gruppo testuale→CTA 32. Nessun altro margin o padding fra questi
   elementi: il ritmo è tutto nei gap.
   ========================================================= */
:root{
  --event-card-max-width: 431px;
  --event-card-image-ratio: 431 / 320;
  --event-card-gap-media: 24px;    /* immagine → contenuto        */
  --event-card-gap-testi: 4px;     /* riga titolo/data → descrizione */
  --event-card-gap-cta: 12px;      /* gruppo testuale → CTA       */

  /* Tipografia: valori del frame mobile; il desktop li fissa più sotto. */
  --event-card-title-font-size: 20px;
  --event-card-title-line-height: 1.1;
  --event-card-date-font-size: 15px;   /* secondaria rispetto al titolo */
  --event-card-cta-font-size: var(--fs-azione);

  --event-card-description-font-family: var(--body);
  --event-card-description-font-size: 16px;
  --event-card-description-font-weight: 400;
  --event-card-description-font-style: normal;
  --event-card-description-line-height: 1.4;
  --event-card-description-letter-spacing: normal;
  --event-card-description-color: var(--n700);
  --event-card-description-lines: 2;
  --event-card-description-min-height: 45px;   /* 2 × 16 × 1.4 */
}
@media (min-width:1024px){
  :root{
    /* Misure del frame 1512 ma scalate a vw: a 1024 la griglia passa a tre
       colonne da ~280px e con 28px fissi i titoli su due righe finivano su
       tre, tranciati dal riquadro. Il tetto tiene il valore dell'export. */
    --event-card-title-font-size: clamp(20px, 1.852vw, 28px);
    --event-card-date-font-size: clamp(15px, 1.323vw, 20px);
    --event-card-cta-font-size: var(--fs-azione);
    --event-card-description-font-size: clamp(16px, 1.323vw, 20px);
    /* 2 righe: font × 1.4, con lo stesso clamp della misura */
    --event-card-description-min-height: clamp(45px, 3.704vw, 56px);
  }
}

/* La scheda è tutta un link: nessuna CTA, l'immagine si avvicina appena
   al passaggio del mouse. */
.ev-card{
  display:flex; flex-direction:column; gap:var(--event-card-gap-media);
  width:100%; max-width:var(--event-card-max-width); height:100%;
  color:inherit;
}
.ev-media{ overflow:hidden; }
/* Scheda senza pagina interna: stesso aspetto, ma niente mano del
   cursore e nessun avvicinamento dell'immagine, che sono i due segni
   con cui una scheda dice "cliccami". */
.ev-card-muta{ cursor:default; }
/* Stesso passo del colore: mezzo secondo sull'ingrandimento contro nove
   decimi sulla dissolvenza faceva sembrare la scheda piu brusca di
   quello che e. Le due cose si muovono insieme. */
.ev-media img{ transition:transform .5s cubic-bezier(.22,1,.36,1); }
@media (hover:hover){
  .ev-card:hover .ev-media img,
  .ev-featured-in:hover .ev-media img{ transform:scale(1.045); }
}
.ev-card.is-premuta .ev-media img,
.ev-featured-in.is-premuta .ev-media img{ transform:scale(1.045); }
.ev-card:focus-visible,
.ev-featured-in:focus-visible{ outline:2px solid var(--black); outline-offset:4px; }
/* Il gap di 32 separa il gruppo testuale dalla CTA: nessun margine sulla CTA */
.ev-card .corpo{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--event-card-gap-cta);
}
.ev-card .testi{
  display:flex; flex-direction:column; gap:var(--event-card-gap-testi); width:100%;
}

/* Immagine: solo il rapporto, mai larghezza e altezza insieme */
.ev-media{ position:relative; }
.ev-media img{
  width:100%; aspect-ratio:var(--event-card-image-ratio);
  object-fit:cover; display:block;
}
/* Copertina a colori al passaggio del mouse, come i ritratti e lo showroom
   in About Us: la copia a colori sta sopra il bianco e nero, spenta, e si
   accende insieme al leggero avvicinamento che la scheda gia faceva.
   Non c'e il caso del tocco: la scheda e un link e sul telefono il dito
   apre l'evento, non accende il colore. */
.ev-media .colore{
  position:absolute; inset:0; height:100%;
  opacity:0; transition:opacity var(--colore-fx-card), transform .5s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  .ev-card:hover .ev-media .colore,
  .ev-featured-in:hover .ev-media .colore{ opacity:1; }
}
/* Al tocco: stessa cosa, per il tempo in cui il dito resta giu. */
.ev-card.is-premuta .ev-media .colore,
.ev-featured-in.is-premuta .ev-media .colore{ opacity:1; }

/* Evento senza foto: riquadro neutro con lo stesso ingombro dell'immagine,
   così la griglia non si scompagina in attesa del materiale. */
.ev-media.senza-foto{
  width:100%; aspect-ratio:var(--event-card-image-ratio);
  display:flex; align-items:center; justify-content:center;
  background:var(--n200); color:var(--n600);
}
.ev-media.senza-foto span{
  font-size:var(--fs-xs); font-weight:500; letter-spacing:.06em; text-transform:uppercase;
}

/* La data resta allineata in alto anche col titolo su due righe */
.ev-card .testa{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
/* Due righe sempre riservate, anche quando il titolo ne occupa una.
   Riservate, non imposte: se a una certa larghezza una delle due metà va
   a capo, il titolo cresce invece di essere tagliato a metà glifo. Le
   schede restano comunque pari perché la griglia ha grid-auto-rows:1fr. */
.ev-card h3{
  font-size:var(--event-card-title-font-size); font-weight:700;
  line-height:var(--event-card-title-line-height); color:var(--black);
  min-height:calc(2 * var(--event-card-title-line-height) * 1em);
  overflow-wrap:break-word;
}
/* La data e in Aboreto, non nel Cormorant di tutto il resto: le cifre di
   Cormorant nascono "oldstyle", con gli zeri bassi e i sei alti, e accanto
   a un titolo in grassetto si leggevano come un errore di composizione.
   Aboreto ha cifre di una sola altezza, e essendo un carattere tutto
   maiuscolo va d'accordo con la sigla del mese. Stessa scelta nel carosello
   della homepage: la data si legge uguale nei due posti. */
.ev-card .data{
  padding:4px; font-family:var(--display); font-weight:400;
  font-size:calc(var(--event-card-date-font-size) * .86);
  letter-spacing:.02em; color:var(--n700); white-space:nowrap;
}

/* Descrizione — text style Figma "Desktop/Body/L": Cormorant Garamond
   Regular 400, 24px, colore Neutrals-700. Il Figma esporta line-height Auto:
   normalizzato a 1.25 (30px) per non dipendere dal browser. */
.ev-card .descr{
  font-family:var(--event-card-description-font-family);
  font-size:var(--event-card-description-font-size);
  font-weight:var(--event-card-description-font-weight);
  font-style:var(--event-card-description-font-style);
  line-height:var(--event-card-description-line-height);
  letter-spacing:var(--event-card-description-letter-spacing);
  color:var(--event-card-description-color);
  text-align:left; text-transform:none; overflow-wrap:break-word;
  min-height:var(--event-card-description-min-height);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--event-card-description-lines); overflow:hidden;
}
/* Il segnaposto è marcato solo semanticamente: stessa resa tipografica
   di una descrizione vera. */

/* CTA sottolineata: 20px sul desktop, come tutte le altre del sito */
.ev-go{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font-size:var(--event-card-cta-font-size); font-weight:700;
  text-transform:uppercase; color:var(--black);
  text-decoration:underline; text-decoration-thickness:.5px; text-underline-offset:4px;
  transition:opacity var(--hover-fx);
}
.ev-go:hover{ opacity:.62; }

/* --- Evento in evidenza: banda orizzontale a tutta larghezza del listing.
   Nessuna etichetta: la gerarchia la dà la scala dell'immagine. --- */
.ev-evidenza-sez{ background:var(--white); padding:0 var(--gut) 64px; }
.ev-evidenza-sez .ev-lab{ margin-bottom:24px; }
.ev-featured{ display:block; }
.ev-featured-in{ display:block; color:inherit; }
.ev-featured .ev-media{ width:100%; aspect-ratio:16/7; overflow:hidden; }
.ev-featured .ev-media img{
  width:100%; height:100%; aspect-ratio:auto; display:block;
  object-fit:cover; object-position:var(--focal, 50% 50%);
}
.ev-featured .corpo{
  margin-top:var(--event-card-gap-media);          /* 24 */
  display:flex; flex-direction:column; align-items:flex-start;
}
/* Titolo e data sulla stessa riga in alto, come nelle card della griglia:
   la data si aggancia alla prima riga del titolo, allineata a destra. */
.ev-featured .testa{
  align-self:stretch; display:flex; align-items:baseline;
  justify-content:space-between; gap:16px;
}
.ev-featured h3{ font-size:var(--event-card-title-font-size); font-weight:700; line-height:1.1; color:var(--black); }
.ev-featured .data{
  padding:4px; font-family:var(--display); font-weight:400;
  font-size:calc(var(--event-card-date-font-size) * .86);
  letter-spacing:.02em; color:var(--n700); white-space:nowrap;
}
.ev-featured .descr{
  margin-top:var(--event-card-gap-testi);          /* 4 */
  max-width:793px; min-height:0;
  display:block; overflow:visible; overflow-wrap:break-word;
  font-family:var(--event-card-description-font-family);
  font-size:var(--event-card-description-font-size);
  font-weight:var(--event-card-description-font-weight);
  font-style:var(--event-card-description-font-style);
  line-height:var(--event-card-description-line-height);
  letter-spacing:var(--event-card-description-letter-spacing);
  color:var(--event-card-description-color);
}
.ev-featured .ev-go{ margin-top:var(--event-card-gap-cta); }

/* =========================================================
   2 · TUTTI GLI EVENTI — filtri, griglia, paginazione
   ========================================================= */
.ev-tutti{ background:var(--white); padding:0 var(--gut) 80px; }
.ev-tutti-in{ display:flex; flex-direction:column; gap:40px; }

/* --- Filtri --- */
/* Un solo rientro per tutto il componente: testata, pallino e voci
   partono dalla stessa ascissa. */
:root{ --ev-filtro-pad:10px; }
.ev-filtri{ display:flex; flex-direction:column; gap:16px; }
.ev-filtro{
  position:relative; height:59px;
  border:1px solid transparent; border-top-color:var(--n600);
  display:flex; align-items:center;
  transition:border-color var(--hover-fx);
}
/* Incolonnati uno sull'altro il filetto in testa basta a separarli, ma
   l'ultimo restava senza chiusura in basso: qui ciascuno ha il suo. */
@media (max-width:1023.98px){
  .ev-filtro{ border-bottom-color:var(--n600); }
}
/* Aperto: il contorno gira attorno a tutto il componente. Il bordo basso
   diventa trasparente così testata e pannello leggono come un blocco solo. */
.ev-filtro.aperta{
  border-color:var(--n600); border-bottom-color:transparent;
}
/* =========================================================
   Testata del filtro: label a sinistra, valore corrente a destra,
   chevron discreta. Riga alta 59 (≥56 desktop, ≥48 mobile).
   ========================================================= */
.ev-scelta{
  width:100%; height:100%; min-height:48px; padding:20px 34px 20px var(--ev-filtro-pad);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--body);
}
.ev-scelta .et{
  font-size:var(--fs-azione); font-weight:500; text-transform:uppercase;
  color:var(--n800); transition:color var(--hover-fx);
}
/* Il valore corrente sta un gradino sotto la label: stessa famiglia e
   stesso corpo, peso e tinta più leggeri, nessun maiuscolo. */
.ev-scelta .val{
  font-size:var(--fs-sm); font-weight:400; color:var(--n700);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ev-scelta:hover .et{ color:var(--black); }
/* Anello staccato dal bordo: a filo sembrava il contorno di un campo di
   form, che è proprio l'effetto da evitare. */
.ev-scelta:focus-visible{ outline:2px solid var(--black); outline-offset:3px; }
.ev-filtro.attiva .ev-scelta .val{ color:var(--black); }

/* Chevron: due lati di un quadrato ruotati. Sostituisce il "+/−",
   che come indicatore di apertura risultava ambiguo. */
.ev-filtro::after{
  content:""; position:absolute; right:12px; top:50%; pointer-events:none;
  width:8px; height:8px; margin-top:-6px;
  border-right:1px solid var(--n700); border-bottom:1px solid var(--n700);
  transform:rotate(45deg);
  transition:transform var(--hover-fx), border-color var(--hover-fx);
}
.ev-filtro.aperta::after{ transform:rotate(-135deg); margin-top:-2px; }
.ev-filtro:hover::after{ border-color:var(--black); }

/* Pannello: prosegue la testata, linee leggere e non un secondo riquadro */
.ev-opzioni{
  position:absolute; z-index:5; left:-1px; right:-1px; top:100%; margin:0;
  padding:0; list-style:none; background:var(--white);
  border:1px solid var(--n300); border-top:0;
  max-height:440px; overflow-y:auto;
}
/* Colonna dell'indicatore riservata anche alle voci non scelte: tutti i
   testi partono dalla stessa ascissa. */
/* Le cifre di Cormorant Garamond sono "oldstyle" e nascono più basse delle
   maiuscole: gli anni sembravano di un corpo minore delle altre voci.
   lining-nums le porta ad altezza maiuscola, a parità di font-size. */
.ev-opzioni li,
.ev-scelta .val{ font-variant-numeric:lining-nums; }
/* Le voci non scelte partono esattamente dove parte la label della testata
   ("Anno", "Ordina"). Solo la voce scelta apre il pallino a sinistra e si
   sposta verso l'interno: è quello lo scarto che segnala la selezione. */
.ev-opzioni li{
  display:flex; align-items:center;
  min-height:48px; padding:10px 10px 10px var(--ev-filtro-pad); cursor:pointer;
  border-top:1px solid var(--n300);
  font-size:var(--fs-azione); font-weight:500; text-transform:uppercase; color:var(--n700);
  transition:background var(--hover-fx), color var(--hover-fx);
}
.ev-opzioni li:first-child{ border-top:0; }
/* A riposo l'indicatore non occupa spazio: il testo resta a filo con la
   label. Alla selezione compare e spinge il testo verso destra. */
.ind{
  width:0; height:8px; flex:0 0 auto; margin-right:0;
  border-radius:999px; background:transparent;
  transition:width var(--hover-fx), margin-right var(--hover-fx);
}
.ev-opzioni li[aria-checked="true"] .ind,
.ev-opzioni li[aria-selected="true"] .ind{ width:8px; margin-right:10px; }
/* Selezionata: quadrato pieno a sinistra, testo nero, peso superiore */
.ev-opzioni li[aria-checked="true"],
.ev-opzioni li[aria-selected="true"]{ color:var(--black); font-weight:700; }
.ev-opzioni li[aria-checked="true"] .ind,
.ev-opzioni li[aria-selected="true"] .ind{ background:var(--black); }
.voce{ transition:transform var(--hover-fx); }
.ev-opzioni li:hover{ background:var(--n200); color:var(--black); }
.ev-opzioni li:focus-visible{ outline:2px solid var(--black); outline-offset:-2px; }

/* Azione di azzeramento: tipografia e segno identici alle altre voci.
   A distinguerla restano la posizione in fondo e il filetto più marcato
   che la stacca dai valori. */
.ev-opzioni li.reset{ border-top:1px solid var(--n600); }

@media (min-width:1024px){
  .ev-scelta{ min-height:56px; }
  .ev-scelta .et,.ev-scelta .val{ font-size:var(--fs-azione); }
  .ev-opzioni li{ min-height:56px; }
}

/* --- Griglia --- */
/* Token semantici del listing. Il passo verticale è molto maggiore di quello
   orizzontale: senza, l'immagine della riga sotto partiva a ridosso della CTA
   "Scopri l'evento" e le due file si leggevano come un blocco unico.
   Il column-gap resta quello del frame Figma. */
:root{
  --event-list-column-gap:16px;
  --event-list-row-gap:40px;                            /* mobile  */
  /* Distanza fra la barra dei filtri e la prima immagine: token a sé,
     più ampio del passo fra le righe. */
  --event-filters-list-gap:48px;
}
@media (min-width:768px){
  :root{ --event-list-row-gap:48px; --event-filters-list-gap:64px; }   /* tablet */
}
@media (min-width:1024px){
  :root{
    --event-list-column-gap:1.984vw;                    /* 30 a 1512, invariato */
    --event-list-row-gap:64px;                          /* desktop */
    --event-filters-list-gap:96px;
  }
}
.ev-griglia{
  display:grid; grid-template-columns:1fr; grid-auto-rows:1fr;
  column-gap:var(--event-list-column-gap);
  row-gap:var(--event-list-row-gap);
  margin-block-start:var(--event-filters-list-gap);
}
/* In "Altri eventi" la griglia non segue i filtri: nessuno stacco iniziale */
.ev1-altri .ev-griglia{ margin-block-start:0; }
.ev-vuoto{
  padding:48px 0; font-size:var(--fs-body); font-style:italic; color:var(--n700);
}

@media (min-width:768px){
  .ev-griglia{ grid-template-columns:repeat(2, 1fr); }
}

/* --- Conteggio risultati --- */
.ev-conteggio{
  font-size:var(--fs-sm); font-weight:500; color:var(--n700);
}

/* --- Paginazione --- */
.ev-pag{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:48px; }
.ev-pag button{
  display:flex; align-items:center; justify-content:center;
  padding:10px; border:1px solid var(--black-25); background:none; cursor:pointer;
  color:var(--black); transition:border-color var(--hover-fx), opacity var(--hover-fx);
}
.ev-pag button:hover:not(:disabled){ border-color:var(--black); }
.ev-pag button:disabled{ opacity:.28; cursor:default; pointer-events:none; }
.ev-pag .prec .ico{ transform:rotate(180deg); }
.ev-pag .ico{ width:20px; height:20px; }
.ev-pag .ev-numeri{ display:flex; align-items:center; }
.ev-pag .ev-numeri button{
  border:0; padding:7px 14px; opacity:.30;
  font-family:var(--body); font-size:var(--fs-eyebrow); font-weight:500;
  text-transform:uppercase; color:var(--n800);
}
.ev-pag .ev-numeri button.on{ opacity:1; }
.ev-pag .ev-numeri button:hover:not(.on){ opacity:.6; }

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width:1024px){

  /* --- Hero 1512×1436 --- */
  .ev-hero{ min-height:47.6vw; padding:0; }   /* senza il featured, finisce dopo l'occhiello */
  /* 1352 e non i 1414 dell'export: il box del titolo arrivava a 18px dal
     bordo destro, fuori dal rientro usato in tutto il sito. */
  .ev-head{ position:absolute; left:5.291%; top:var(--crumb-top); width:89.418%; }
  .ev-crumbs span,.ev-crumbs b{ font-size:var(--fs-sm); }   /* 18px */
  .ev-title{ margin-top:var(--crumb-gap); }
  .ev-intro{
    position:absolute; left:42.262%; top:29.563vw; width:52.447%;
    font-size:clamp(18px, 1.852vw, 28px); font-weight:500;
  }                                                                        /* 793 @639,447 */
  .ev-vrule{
    display:block; position:absolute; left:98.016%; top:15.873vw;
    width:0; height:34.958%; border-left:1px solid var(--white-15);
  }


  /* --- Tutti gli eventi: padding 40/80/100, contenuto 1353 --- */
  .ev-tutti{ padding:80px var(--gut) 100px; }
  .ev-tutti-in{ gap:64px; }

  .ev-filtri{ flex-direction:row; gap:1.984vw; }              /* 30 */
  .ev-filtro{ flex:1 1 0; border-bottom:1px solid var(--n600); }
  .ev-scelta,.ev-opzioni li{ font-size:var(--fs-azione); }

  .ev-griglia{ grid-template-columns:repeat(3, 1fr); }

  .ev-pag{ margin-top:64px; }
}