/* ==========================================================================
   Paradise Home — eventi
   Caricato da inc/enqueue.php quando ph_is_events_context() è vera: pagina
   /eventi/, singolo evento, archivi e viste di The Events Calendar.

   Ordine: token locali · variabili TEC · pagina calendario · riga evento ·
   collegamenti · singolo evento · blocco formatori · viste TEC · responsive.
   ========================================================================== */

:root {
  /* Misure e ombre proprie dell'area eventi, ricavate dal kit del sito originale. */
  --ph-ev-badge: 96px;
  /* Viola scuro dei gradienti eventi: valore verificato sul kit originale (#4e1f72).
     Non esiste fra i token di main.css, che non ha una seconda tinta di viola scuro. */
  --ph-ev-purple-dark: #4e1f72;
  --ph-ev-line: rgba(105, 42, 152, 0.15);
  --ph-ev-soft: rgba(105, 42, 152, 0.05);
  --ph-ev-shadow: 0 4px 14px rgba(105, 42, 152, 0.07);
  --ph-ev-shadow-hover: 0 12px 28px rgba(105, 42, 152, 0.13);
  /* Il CSS personalizzato del kit dell'originale (blocco in coda a post-6.css)
     dichiara un suo `--ph-text: #2a1a3e` per il testo dell'area eventi. È un nome
     che collide con `--ph-text` di main.css, che vale #3f3f3f: il colore vive qui
     con un nome proprio invece di essere confuso con quello del tema. */
  --ph-ev-ink: #2a1a3e;
  /* `--ph-radius-inner: 14px` e `--ph-radius-card: 20px` dello stesso blocco. */
  --ph-ev-radius-inner: 14px;
  --ph-ev-radius-card: 20px;
}

/* --------------------------------------------------------------------------
   Variabili di The Events Calendar

   Punto di leva unico: il plugin costruisce tutto il suo CSS su queste custom
   property, quindi rimapparle evita di riscrivere le sue regole a colpi di
   !important. Il selettore include `body` solo per superare la specificità con
   cui TEC le dichiara su .tribe-common.
   -------------------------------------------------------------------------- */

body .tribe-common,
body .tribe-events,
body #tribe-events-pg-template {
  --tec-color-accent-primary: var(--ph-primary);
  --tec-color-accent-primary-hover: var(--ph-primary-light);
  --tec-color-accent-primary-active: var(--ph-primary);
  --tec-color-accent-primary-background: var(--ph-primary-pale);
  --tec-color-accent-secondary: var(--ph-primary-mid);
  --tec-color-accent-secondary-hover: var(--ph-primary-light);
  --tec-color-background-events: transparent;
  --tec-color-text-primary: var(--ph-text);
  --tec-color-text-secondary: var(--ph-text-muted);
  --tec-color-text-event-title: var(--ph-primary);
  --tec-color-text-event-date: var(--ph-primary-mid);
  --tec-color-link-primary: var(--ph-primary);
  --tec-color-link-primary-hover: var(--ph-primary-light);
  --tec-color-link-accent: var(--ph-primary);
  --tec-color-link-accent-hover: var(--ph-primary-light);
  --tec-color-icon-focus: var(--ph-primary);
  --tec-color-icon-active: var(--ph-primary);
  --tec-color-event-icon-hover: var(--ph-primary);
  --tec-color-button-primary: var(--ph-primary);
  --tec-color-button-primary-hover: var(--ph-primary-light);
  --tec-color-cta-background: var(--ph-primary);
  --tec-color-cta-background-hover: var(--ph-primary-light);
  --tec-color-cta-text: var(--ph-white);
  --tec-color-border-secondary: var(--ph-border);
  --tec-color-border-active: var(--ph-primary);
  --tec-font-family-sans-serif: var(--ph-font-body);
  --tec-font-family-base: var(--ph-font-body);
  --tec-color-day-marker-month: var(--ph-primary);
  --tec-color-background-secondary: var(--ph-surface);
  /* La barra delle viste dell'originale non è una scatola: nessun fondo, nessun
     bordo. Passare dalle variabili evita di rincorrere i quattro selettori con
     cui il plugin dipinge quella scatola. */
  --tec-color-background-events-bar: transparent;
  --tec-color-border-events-bar: transparent;
  --tec-color-background-view-selector: transparent;
}

/* --------------------------------------------------------------------------
   Pagina calendario: impaginazione della pagina — post-2.css, elementor-2

   Valori dell'originale, elemento per elemento:

     99d678d  contenitore di primo livello, `e-con-boxed`
              --margin-top:50px · --margin-bottom:0
              @media(min-width:768px) --content-width:100%
              @media(max-width:1366px) --padding: 0 20px
              (oltre 1366px vale l'imbottitura di default dei container: 10px)
     7a0300c  colonna interna, --align-items:flex-start, gap 20px dal kit
     a320148  briciole, `.elementor-widget-container{margin:0 0 -10px 0}`
     55c7a42  h1 Poppins 60px/600 primario, text-align:start
              (≤1024px 50px · ≤767px 40px)
     1161813  sottotitolo, width 101.374% (≤767px max-width 1000px)
     6a10906  vista del calendario, width 103.998%, margin 0

   Su `--content-width:100%` c'era una lettura sbagliata, corretta il 2 settembre
   dopo aver misurato l'originale con un browser vero. In Elementor quella
   variabile su un container `e-con-boxed` significa «il contenuto riempie la
   larghezza del box», non «riempie la finestra»: il box resta quello del kit,
   1350px. Misurato su nuovo.paradisehome.it/eventi/ la vista del calendario è
   larga 1310px a 1920 e a 1440 di finestra (1350 meno le due imbottiture da
   20px), 1200 a 1280 e 944 a 1024 — cioè esattamente il `.container` del tema.

   Qui invece i due `.container` erano stati portati a tutta larghezza: a 1877px
   di finestra le schede venivano 1857px, con tre righe di testo dentro, e la
   pagina del calendario era l'unica del sito a filo di finestra. «La larghezza è
   troppo full rispetto a tutto il resto del sito, non è coerente», ed era vero.
   Nessuna regola di larghezza, quindi: vale `.container` di main.css, che è la
   misura del resto del sito e dell'originale.
   -------------------------------------------------------------------------- */

/* 99d678d: --margin-top:50px, --margin-bottom:0. La testata di pagina porta i
   50px sopra; sotto il sottotitolo restano i 20px di gap del contenitore, non i
   50px che `.page-hero` di main.css metterebbe. */
.page--eventi .page-hero {
  padding-block: var(--ph-section-gap, 50px) 0;
}

/* 7a0300c: --align-items:flex-start e i 20px di --widgets-spacing fra briciole,
   titolo e sottotitolo. Il margine -10px delle briciole lo dà già main.css. */
.page--eventi .page-hero > .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Il sottotitolo 1161813 non ha `max-width: 42em`: sull'originale è largo quanto
   la colonna (101,374%, cioè un filo più del contenitore). */
.page--eventi .page-hero__subtitle {
  max-width: none;
  margin-top: 0;
}

/* I 20px fra il sottotitolo e la vista del calendario. */
.page--eventi > .container {
  padding-top: 20px;
}

@media (max-width: 1366px) {
  /* @media(max-width:1366px) su 99d678d: --padding-left/right:20px, che si somma
     ai 20px del container e fa 40. Misurato sull'originale: a 1280px di finestra
     la vista è larga 1200 (x=40), a 1024 è larga 944 (x=40). */
  .page--eventi .page-hero > .container,
  .page--eventi > .container {
    padding-inline: 40px;
  }
}

@media (max-width: 767px) {
  /* 1161813 @media(max-width:767px): max-width:1000px. */
  .page--eventi .page-hero__subtitle {
    max-width: 1000px;
  }
}

/* --------------------------------------------------------------------------
   Pagina calendario: filtri
   -------------------------------------------------------------------------- */

.eventi-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  padding-block: 32px 0;
}

.eventi-filtri__etichetta {
  margin: 0 0 8px;
  font-family: var(--ph-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ph-accent-ink);
}

/* Stessa resa della .filter-bar dell'archivio formatori: la classe è condivisa
   ma vive in un foglio contestuale che qui non è caricato. */
.eventi-filtri .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eventi-filtri .filter-bar__item {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--ph-border);
  border-radius: 999px;
  font-family: var(--ph-font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--ph-text);
  transition: background-color var(--ph-transition), border-color var(--ph-transition), color var(--ph-transition);
}

.eventi-filtri .filter-bar__item:hover,
.eventi-filtri .filter-bar__item:focus-visible,
.eventi-filtri .filter-bar__item.is-current {
  background: var(--ph-primary);
  border-color: var(--ph-primary);
  color: var(--ph-white);
}

/* Filtro per categoria.

   Vive dentro il contenitore della vista di The Events Calendar (template
   tribe/events/v2/components/filter-bar.php), fra la barra superiore e l'elenco
   degli eventi: lì lo spazio sopra è già dato dall'intestazione della vista, quindi
   la spaziatura è più corta di quella del gruppo filtri generico.

   Il contenitore è dentro `.tribe-common`, che dichiara i propri corpo e famiglia
   sui discendenti: `body` davanti alla classe basta a riprendersi la tipografia del
   tema senza !important. */
body .eventi-filtri--categorie {
  padding-block: 4px 0;
  margin-bottom: 20px;
  /* Le pillole vanno a capo: su 390px non deve comparire scorrimento orizzontale. */
  max-width: 100%;
}

body .eventi-filtri--categorie .eventi-filtri__etichetta {
  font-family: var(--ph-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ph-accent-ink);
}

body .eventi-filtri--categorie .filter-bar {
  max-width: 100%;
}

.eventi-filtri__voce {
  min-width: 0;
  max-width: 100%;
}

body .eventi-filtri--categorie .filter-bar__item {
  max-width: 100%;
  font-family: var(--ph-font-heading);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  /* Un nome lungo come «Guarigione Spirituale Filippina Formazione» deve poter
     andare a capo dentro la pillola, non sporgere dal contenitore. */
  overflow-wrap: break-word;
}

/* Le categorie figlie di FORMAZIONE: stessa pillola, tono più leggero, così il
   filtro racconta la gerarchia senza rientri che a capo si perderebbero. */
body .eventi-filtri--categorie .filter-bar__item--figlia {
  padding-inline: 14px;
  font-size: 13px;
  background: var(--ph-ev-soft);
  color: var(--ph-text-muted);
}

/* --------------------------------------------------------------------------
   Pagina calendario: conteggio, mesi, lista
   -------------------------------------------------------------------------- */

.eventi-conteggio {
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--ph-text-muted);
}

.eventi-mese {
  padding-block: 32px 0;
}

.eventi-mese__titolo {
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ph-ev-line);
  font-size: var(--ph-h4);
  letter-spacing: 0.04em;
  text-transform: capitalize;
}

.eventi-lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eventi-vuoto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: 48px 24px;
  font-size: 18px;
}

.eventi-vuoto p {
  margin: 0;
  max-width: 46em;
}

.eventi-nota {
  max-width: 46em;
}

.eventi-azioni {
  margin: 0;
  padding-block: 32px 8px;
}

.eventi-azioni__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ph-font-heading);
  font-size: 14px;
  font-weight: 500;
}

.eventi-azioni__icona {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Riga evento
   -------------------------------------------------------------------------- */

.evento-riga {
  display: grid;
  grid-template-columns: var(--ph-ev-badge) 1fr;
  gap: 24px;
  padding: 24px 28px;
  background: var(--ph-white);
  border: 1px solid var(--ph-ev-line);
  border-left: 5px solid var(--ph-primary);
  border-radius: var(--ph-radius-lg);
  box-shadow: var(--ph-ev-shadow);
  transition: transform var(--ph-transition), box-shadow var(--ph-transition);
}

.evento-riga:hover,
.evento-riga:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--ph-ev-shadow-hover);
}

.evento-riga__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 14px 8px;
  background-image: linear-gradient(135deg, var(--ph-primary) 0%, var(--ph-ev-purple-dark) 100%);
  border-radius: 14px;
  color: var(--ph-white);
  text-align: center;
}

.evento-riga__badge-giorno,
.evento-riga__badge-mese {
  font-family: var(--ph-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.evento-riga__badge-numero {
  font-family: var(--ph-font-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.evento-riga__corpo {
  min-width: 0;
}

.evento-riga__titolo {
  margin: 0 0 10px;
  font-size: var(--ph-h5);
  line-height: 1.3;
}

.evento-riga__titolo a {
  color: inherit;
}

.evento-riga__quando,
.evento-riga__luogo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
}

.evento-riga__quando {
  font-family: var(--ph-font-heading);
  font-weight: 500;
  color: var(--ph-primary);
}

.evento-riga__luogo {
  color: var(--ph-text-muted);
}

.evento-riga__citta::before {
  content: "· ";
}

.evento-riga__icona {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--ph-accent-ink);
}

.evento-riga__piede {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
}

.evento-riga__posti {
  margin: 0;
  padding: 5px 12px;
  background: var(--ph-ev-soft);
  border-radius: 999px;
  font-family: var(--ph-font-heading);
  font-size: 13px;
  font-weight: 500;
  color: var(--ph-primary);
}

.evento-riga__cta {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Corso di appartenenza e formatori
   -------------------------------------------------------------------------- */

.evento-collegamenti {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ph-text-muted);
}

.evento-collegamenti__voce {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
}

.evento-collegamenti__etichetta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-accent-ink);
}

.evento-collegamenti__link {
  font-family: var(--ph-font-heading);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--ph-primary-pale);
  text-underline-offset: 3px;
}

.evento-collegamenti__link:hover,
.evento-collegamenti__link:focus-visible {
  text-decoration-color: currentColor;
}

.evento-collegamenti__sep {
  margin-left: -4px;
}

/* --------------------------------------------------------------------------
   Singolo evento

   Il markup arriva dall'override tribe-events/single-event.php, iniettato da TEC
   al posto di the_content() dentro page.php: il contenitore è già .entry-content.
   -------------------------------------------------------------------------- */

.evento-single {
  padding-block: 8px 24px;
}

/* Titolo dell'evento: viola, non nero, e con un tetto a 40px — sull'originale la
   regola è `font-size: clamp(28px, 4.5vw, 40px)` e il colore è il viola brand. */
.evento-single__titolo {
  margin: 0 0 20px;
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ph-primary);
}

/* Avviso «Questo evento è passato.»: classi del plugin, così l'aspetto resta
   quello delle altre notifiche di The Events Calendar. */
.evento-single .tribe-events-notices {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.evento-single .tribe-events-notices li {
  margin: 0;
  font-size: 15px;
  color: var(--ph-text);
}

/* Blocco 10.1: `.tribe-events-back{margin:0 0 24px}` e il link è inline-flex con
   gap 6px, Poppins 13px/600 viola, maiuscolo, letter-spacing 0.6px, padding 6px 0;
   in hover passa a #4e1f72 e trasla di -3px. */
.evento-single__back {
  margin: 0 0 24px;
}

.evento-single__back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-family: var(--ph-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ph-primary);
  transition: color 0.2s, transform 0.2s;
}

.evento-single__back a::before {
  content: "«";
  font-size: 16px;
}

.evento-single__back a:hover {
  color: var(--ph-ev-purple-dark);
  transform: translateX(-3px);
}

.evento-single__schedule {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 28px;
  padding: 20px 26px;
  background-image: linear-gradient(135deg, var(--ph-primary) 0%, var(--ph-ev-purple-dark) 100%);
  border-radius: var(--ph-radius-lg);
  box-shadow: 0 10px 24px rgba(105, 42, 152, 0.22);
  font-family: var(--ph-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--ph-white);
}

.evento-single__schedule a {
  color: var(--ph-white);
  text-decoration: underline;
}

.evento-single__schedule-icona {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.evento-single__costo {
  margin-left: auto;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 14px;
}

/* Sull'originale la copertina è un quadrato di circa 300px a sinistra, con il testo
   dell'evento che gli scorre accanto a destra: non è un banner a piena larghezza. */
.evento-single__media {
  float: left;
  width: 300px;
  max-width: 42%;
  margin: 0 28px 20px 0;
}

.evento-single__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ph-radius-lg);
  box-shadow: 0 12px 32px rgba(105, 42, 152, 0.13);
}

.evento-single__content {
  padding-block: 0 8px;
}

/* Su questi eventi la locandina non è l'immagine in evidenza: sta dentro il testo,
   con la classe `alignleft` che l'editor di WordPress mette sulle immagini
   allineate a sinistra. Sull'originale è quella classe a portare il testo di fianco
   all'immagine; senza la regola l'immagine restava un blocco e il testo cominciava
   sotto. */
.evento-single__content .alignleft {
  float: left;
  margin: 0 28px 16px 0;
}

.evento-single__content .alignright {
  float: right;
  margin: 0 0 16px 28px;
}

.evento-single__content .aligncenter {
  display: block;
  margin-inline: auto;
}

/* Le immagini del corpo hanno lo stesso trattamento della copertina.

   Sulle pagine degli eventi Rei-Ki accanto alla copertina — che ha angoli da
   20px e l'ombra viola — c'è una seconda figura dentro il testo, allineata a
   sinistra: prendeva gli angoli da `.entry-content img` (main.css) ma non
   l'ombra, e due figure affiancate della stessa altezza si presentavano in
   due modi diversi. Il raggio era già uguale, l'ombra no: qui si pareggia,
   ripetendo il valore di `.evento-single__media img` e nient'altro. */
.evento-single__content img {
  box-shadow: 0 12px 32px rgba(105, 42, 152, 0.13);
}

@media (max-width: 600px) {
  .evento-single__content .alignleft,
  .evento-single__content .alignright {
    float: none;
    margin: 0 0 16px;
  }
}

/* Il testo scorre accanto all'immagine, ma tutto ciò che viene dopo riparte a
   capo: senza questo il blocco dei dati si infilerebbe di fianco alla copertina. */
.evento-single__content::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 600px) {
  .evento-single__media {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 20px;
  }
}

/* «Salva nel tuo calendario»: sull'originale è un riquadro bordato a piena
   larghezza con il testo allineato a sinistra, non un pulsante compatto. */
.evento-single .tribe-events-c-subscribe-dropdown__container {
  clear: both;
  margin: 28px 0;
}

.evento-single .tribe-events-c-subscribe-dropdown,
.evento-single .tribe-events-c-subscribe-dropdown__button {
  width: 100%;
}

.evento-single .tribe-events-c-subscribe-dropdown__button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--ph-ev-line);
  border-radius: var(--ph-radius);
  background: var(--ph-white);
}

/* Scheda dati -------------------------------------------------------------- */

.evento-meta {
  margin: 40px 0;
  padding: 32px;
  background-image: linear-gradient(135deg, rgba(105, 42, 152, 0.04) 0%, rgba(105, 42, 152, 0.07) 100%);
  border: 1px solid var(--ph-ev-line);
  border-radius: var(--ph-radius-lg);
}

/* Due colonne: «Dettagli» e «Organizzatore», come sull'originale.

   La misura della colonna però non è più metà riquadro. Con `1fr` le due
   colonne si dividevano il pannello in parti uguali — 602px l'una a 1440 —
   mentre dentro ci stanno quattro coppie etichetta/valore da 230px e tre
   righe da 250: il filo viola sotto l'intestazione correva per 602px con 350
   di vuoto sotto, su entrambe le colonne. Il tetto di 420px le riporta alla
   misura del loro contenuto e lascia il vuoto tutto da una parte invece di
   scavarlo dentro ogni colonna; `minmax` con due lunghezze fisse tiene 260px
   come minimo, che è dove «Visualizza il sito dell'Organizzatore» sta ancora
   su due righe.

   NOTA: anche sul sito di partenza (nuovo.paradisehome.it) queste due colonne
   sono larghe metà pannello — misurate 591px a 1440 — quindi qui la replica
   si discosta di proposito dall'originale, su segnalazione di collaudo. Per
   tornare al comportamento del sito vero basta rimettere `1fr` al posto di
   `420px`. */
.evento-meta__griglia {
  display: grid;
  gap: 24px 40px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 420px));
  justify-content: start;
}

/* Sotto i 1025px il pannello non è più largo del suo contenuto e il tetto non
   serve: torna a dividersi in parti uguali, come faceva prima. Serve anche
   perché con `repeat(auto-fit, minmax(260px, 420px))` il numero di colonne si
   calcola sul massimo — a 767px il pannello è largo 653px e 420+40+420 non ci
   sta, quindi le due colonne diventavano una sola da 420px con 233px di vuoto
   accanto. */
@media (max-width: 1024px) {
  .evento-meta__griglia {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.evento-meta__gruppo {
  min-width: 0;
}

/* Le intestazioni dell'originale non sono titoli di sezione: sono etichette in
   maiuscoletto viola con un filo sottile sotto, larghe quanto la colonna. */
/* Blocco 10.6 del CSS personalizzato del kit originale:
   `margin: 0 0 14px; padding: 0 0 10px; border-bottom: 2px solid var(--ph-purple);
   letter-spacing: 1.2px`. Il filo sotto l'etichetta è VIOLA e da 2px, non un
   grigio da 1px: è il segno che separa le tre intestazioni del riquadro. */
.evento-meta__etichetta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--ph-primary);
  font-family: var(--ph-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ph-primary);
}

.evento-meta__icona {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.evento-meta__lista {
  margin: 0;
}

/* `.tribe-events-meta-group dt`: Poppins 13px/700 #2a1a3e, margin-top 8px. */
.evento-meta__voce-titolo {
  margin: 8px 0 0;
  font-family: var(--ph-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-ev-ink);
}

.evento-meta__voce-titolo:first-child {
  margin-top: 0;
}

/* `.tribe-events-meta-group dd, address`: Poppins 14px #444, line-height 1.5,
   `margin: 0 0 8px`. Il grigio è #444, non il #777777 del testo corrente. */
.evento-meta__voce-valore {
  margin: 0 0 8px;
  font-family: var(--ph-font-heading);
  font-size: 14px;
  line-height: 1.5;
  color: #444;
}

.evento-meta__organizzatore-nome {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--ph-text);
}

/* Blocco «Luogo»: scheda a sé, sotto quella dei dettagli. */
.evento-luogo {
  margin-top: 24px;
}

.evento-luogo__nome {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--ph-primary);
}

/* Stesse misure di `address` nel blocco 10.6: 14px, #444, line-height 1.5. */
.evento-luogo__riga {
  margin: 0 0 8px;
  font-family: var(--ph-font-heading);
  font-size: 14px;
  line-height: 1.5;
  color: #444;
}

.evento-luogo__mappa {
  margin-left: 6px;
  font-weight: 500;
}

/* Iscrizione --------------------------------------------------------------- */

.evento-iscrizione {
  margin: 40px 0 0;
  padding: 32px;
  background: var(--ph-surface);
  border-radius: var(--ph-radius-lg);
}

.evento-iscrizione__titolo {
  margin: 0 0 10px;
  font-size: var(--ph-h5);
}

.evento-iscrizione__testo {
  max-width: 46em;
  margin: 0 0 20px;
  font-size: 15px;
}

.evento-iscrizione__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.evento-iscrizione__whatsapp .icon {
  width: 18px;
  height: 18px;
}

/* Eventi correlati --------------------------------------------------------- */

/* --------------------------------------------------------------------------
   «Eventi correlati» — blocco 10.7 del CSS personalizzato del kit originale
   (research/assets/uploads__elementor__css__post-6.css, in coda al file).
   Valori dell'originale, uno per uno:

     titolo   Poppins 24px/700 #692a98, margin 48px 0 24px,
              padding-bottom 12px, border-bottom 2px rgba(105,42,152,.15)
     lista    grid repeat(3, minmax(0,1fr)), gap 22px, margin 0 0 48px
     card     fondo #fff, bordo 1px rgba(105,42,152,.15), radius 20px,
              padding 0, overflow hidden, ombra 0 4px 14px rgba(105,42,152,.07);
              hover translateY(-3px) + 0 12px 28px rgba(105,42,152,.13)
     media    aspect-ratio 16/9, fondo
              linear-gradient(135deg, rgba(105,42,152,.10), rgba(78,31,114,.05)),
              angoli alti 20px, img object-fit:cover
     info     padding 16px 20px 18px, colonna, gap 6px
     titolo   17px/700 #2a1a3e, in hover #692a98
     data     Poppins 13px/600 #692a98, a blocco

   Il foglio aveva: titolo 21px con filo da 1px, griglia auto-fit da 240px con gap
   18px, card con `border-radius: var(--ph-radius)` — che in main.css è 4px, il
   raggio dei bottoni, non i 20px delle card — e nessun sollevamento in hover.
   -------------------------------------------------------------------------- */

.evento-correlati {
  margin: 0;
}

.evento-correlati__titolo {
  margin: 48px 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ph-ev-line);
  font-family: var(--ph-font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--ph-primary);
}

.evento-correlati__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}

/* Le colonne le decide il numero di card. Le tre dichiarate qui sopra restano il
   ripiego; quando il template scrive `data-card` valgono le variabili che ha
   calcolato `ph_griglia_ripartizione()` — mai una riga con una sola card, a parità
   di righe meno righe, mai oltre il tetto del gradino. Con tre eventi correlati e
   due colonne l'ultimo restava solo su mezza riga: adesso quella riga se la prende
   tutta. */
.evento-correlati__lista[data-card] {
  grid-template-columns: repeat(var(--ph-ec-lg, 3), minmax(0, 1fr));
}

.evento-correlati__lista[data-card] > li:last-child {
  grid-column: span var(--ph-ec-lg-span, 1);
}

.evento-correlati__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--ph-white);
  border: 1px solid var(--ph-ev-line);
  border-radius: var(--ph-ev-radius-card);
  box-shadow: var(--ph-ev-shadow);
  color: inherit;
  transition: transform 0.25s, box-shadow 0.25s;
}

/* Il sollevamento in hover c'è davvero: `transform: translateY(-3px)` sta nel
   blocco 10.7 del kit originale. È l'eccezione alla regola «nel sito non ci sono
   transform di hover», che vale per i post-*.css delle pagine ma non per il CSS
   personalizzato del kit. */
.evento-correlati__link:hover,
.evento-correlati__link:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ph-ev-shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
  .evento-correlati__link {
    transition: none;
  }

  .evento-correlati__link:hover,
  .evento-correlati__link:focus-visible {
    transform: none;
  }
}

/* Il segnaposto dell'originale è la PNG di Events Calendar Pro appoggiata su
   questo gradiente. La PNG non c'è (è un asset del plugin a pagamento): resta il
   gradiente, che è la parte che si vede. Vedi report. */
.evento-correlati__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  /* Il tetto serve alla card che occupa la riga intera (l'ultima, quando le
     colonne non bastano a evitare la riga spaiata): a 767px sarebbe larga 703px
     e in 16/9 alta 395, il doppio delle due sopra. Su una card in colonna
     normale non si sente mai — a 1440 la card è 420px e la figura 236, a 1024
     313 e 176, a 767 342 e 192 — quindi non cambia niente di quello che si
     vede oggi. L'immagine è `object-fit: cover`: il tetto ritaglia, non
     schiaccia. */
  max-height: 240px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(105, 42, 152, 0.1), rgba(78, 31, 114, 0.05));
  border-top-left-radius: var(--ph-ev-radius-card);
  border-top-right-radius: var(--ph-ev-radius-card);
}

.evento-correlati__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evento-correlati__placeholder {
  width: 64px;
  height: 64px;
  color: rgba(105, 42, 152, 0.25);
}

.evento-correlati__testo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px 18px;
}

/* Il titolo della scheda è un `h3` come sull'originale
   (`h3.tribe-related-events-title`): margine e corpo dell'h3 globale vanno
   annullati qui, altrimenti eredita i 26px del kit. */
.evento-correlati__nome {
  display: block;
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ph-ev-ink);
  transition: color 0.25s;
}

.evento-correlati__link:hover .evento-correlati__nome,
.evento-correlati__link:focus-visible .evento-correlati__nome {
  color: var(--ph-primary);
}

.evento-correlati__data {
  display: block;
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-primary);
}

/* Sull'originale la data della scheda mostra SOLO l'inizio: il blocco 10.7 ha
     .tribe-related-event-info .tribe-event-date-end{display:none !important}
   mentre `.tribe-event-time` (l'ora di fine degli eventi di un solo giorno) resta
   visibile. Il markup del plugin li stampa entrambi e la CSS ne nasconde uno: si
   replica la coppia, non il risultato, così se qualcuno riattiva la regola il
   comportamento torna quello di serie. */
.evento-correlati__data .tribe-event-date-end {
  display: none;
}

/* --------------------------------------------------------------------------
   Navigazione fra eventi — blocco 10.8 del CSS personalizzato del kit

     ul       flex, space-between, gap 16px, padding-top 28px, margin-top 32px,
              border-top 1px rgba(105,42,152,.15)
     li       flex 1 1 calc(50% - 8px), min-width 240px;
              «precedente» a sinistra, «successivo» a destra
     a        blocco, padding 18px 24px, fondo #fff,
              bordo 1px rgba(105,42,152,.15) con 4px viola sul lato interno
              (sinistro sul precedente, destro sul successivo),
              radius 14px, colore #2a1a3e, Poppins 14px/600, line-height 1.4,
              ombra 0 4px 14px rgba(105,42,152,.07), transition all .25s
     hover    fondo #692a98, testo bianco, bordo #692a98,
              translateY(-2px), ombra 0 12px 24px rgba(105,42,152,.18)
     frecce   `←` prima del link precedente (margin-right 12px) e `→` dopo il
              successivo (margin-left 12px), 18px/700 viola, bianche in hover

   Il foglio non aveva nulla di tutto questo: era un elenco flex senza fondo, senza
   bordo, senza ombra e senza frecce.
   -------------------------------------------------------------------------- */

.evento-single__nav {
  margin: 32px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--ph-ev-line);
}

.evento-single__nav-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evento-single__nav-voce {
  flex: 1 1 calc(50% - 8px);
  min-width: 240px;
  text-align: left;
}

.evento-single__nav-voce--next {
  text-align: right;
}

.evento-single__nav-voce a {
  display: block;
  padding: 18px 24px;
  background: var(--ph-white);
  border: 1px solid var(--ph-ev-line);
  border-left: 4px solid var(--ph-primary);
  border-radius: var(--ph-ev-radius-inner);
  font-family: var(--ph-font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ph-ev-ink);
  box-shadow: var(--ph-ev-shadow);
  transition: all 0.25s;
}

.evento-single__nav-voce--next a {
  border-left: 1px solid var(--ph-ev-line);
  border-right: 4px solid var(--ph-primary);
}

.evento-single__nav-voce a:hover,
.evento-single__nav-voce a:focus-visible {
  background: var(--ph-primary);
  border-color: var(--ph-primary);
  color: var(--ph-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(105, 42, 152, 0.18);
}

.evento-single__nav-voce a::before,
.evento-single__nav-voce--next a::after {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: var(--ph-primary);
  transition: color 0.25s;
}

.evento-single__nav-voce a::before {
  content: "\2190";
  margin-right: 12px;
}

.evento-single__nav-voce--next a::before {
  content: none;
  margin-right: 0;
}

.evento-single__nav-voce--next a::after {
  content: "\2192";
  margin-left: 12px;
}

.evento-single__nav-voce a:hover::before,
.evento-single__nav-voce a:hover::after,
.evento-single__nav-voce a:focus-visible::before,
.evento-single__nav-voce a:focus-visible::after {
  color: var(--ph-white);
}

@media (prefers-reduced-motion: reduce) {
  .evento-single__nav-voce a {
    transition: none;
  }

  .evento-single__nav-voce a:hover,
  .evento-single__nav-voce a:focus-visible {
    transform: none;
  }
}

/* Blocco 11 del kit, @media(max-width:991px): la navigazione diventa una colonna
   (gap 12px, entrambe le schede allineate a sinistra, imbottitura 16px 20px) e gli
   eventi correlati passano a due colonne con gap 18px e raggio 14px.
   Blocco 12, @media(max-width:600px): una colonna, titolo 20px, schede di
   navigazione con imbottitura 14px 18px e corpo 13px. */
@media (max-width: 991px) {
  .evento-single__nav-lista {
    flex-direction: column;
    gap: 12px;
  }

  .evento-single__nav-voce,
  .evento-single__nav-voce--next {
    flex: 1 1 100%;
    min-width: 0;
    text-align: left;
  }

  .evento-single__nav-voce a {
    padding: 16px 20px;
  }

  .evento-correlati__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .evento-correlati__lista[data-card] {
    grid-template-columns: repeat(var(--ph-ec-sm, 2), minmax(0, 1fr));
  }

  .evento-correlati__lista[data-card] > li:last-child {
    grid-column: span var(--ph-ec-sm-span, 1);
  }

  .evento-correlati__link {
    border-radius: var(--ph-ev-radius-inner);
  }

  .evento-correlati__media {
    border-top-left-radius: var(--ph-ev-radius-inner);
    border-top-right-radius: var(--ph-ev-radius-inner);
  }

  .evento-correlati__titolo {
    margin: 36px 0 20px;
  }
}

@media (max-width: 600px) {
  .evento-single__nav-voce a {
    padding: 14px 18px;
    font-size: 13px;
  }

  .evento-correlati__lista {
    grid-template-columns: 1fr;
  }

  .evento-correlati__lista[data-card] {
    grid-template-columns: repeat(var(--ph-ec-xs, 1), minmax(0, 1fr));
  }

  /* A una colonna la riga è già tutta della card: lo span torna a 1, altrimenti
     `span 2` aprirebbe una seconda colonna implicita. */
  .evento-correlati__lista[data-card] > li:last-child {
    grid-column: auto;
  }

  .evento-correlati__titolo {
    font-size: 20px;
    margin: 32px 0 18px;
  }
}

/* --------------------------------------------------------------------------
   Blocco "Chi conduce"

   Le stesse regole esistono in formatore.css, che in contesto eventi non viene
   caricato: qui servono perché il blocco è iniettato nella pagina dell'evento.
   -------------------------------------------------------------------------- */

.event-formatori {
  margin: 40px 0;
  padding: 28px;
  background: var(--ph-surface);
  border-radius: var(--ph-radius-lg);
}

.event-formatori__title {
  margin: 0 0 20px;
  font-size: var(--ph-h5);
}

.event-formatori__list {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Un formatore solo — il caso più frequente. Con `auto-fill` il riquadro apriva
   cinque colonne da 240px e ne riempiva una: 302px di scheda e il resto della riga
   vuoto. Il conteggio arriva dal template in `data-card`. */
.event-formatori__list[data-card="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.event-formatori__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--ph-white);
  border-radius: var(--ph-radius);
  transition: transform var(--ph-transition), box-shadow var(--ph-transition);
}

.event-formatori__link:hover,
.event-formatori__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ph-shadow-card);
}

.event-formatori__avatar {
  flex: 0 0 auto;
}

.event-formatori__img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.event-formatori__testo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.event-formatori__nome {
  font-family: var(--ph-font-heading);
  font-weight: 600;
  color: var(--ph-primary);
}

.event-formatori__ruolo {
  font-size: 13px;
  color: var(--ph-text-muted);
}

/* --------------------------------------------------------------------------
   Viste native di The Events Calendar (lista, mese)

   Solo l'indispensabile: contenitore allineato al tema, riga della lista con la
   stessa veste della riga del calendario redazionale, tipografia del brand.
   -------------------------------------------------------------------------- */

#tribe-events-pg-template,
.tribe-events-view {
  max-width: var(--ph-container);
  margin-inline: auto;
  padding: 24px var(--ph-gutter) 64px;
}

#tribe-events-pg-template .tribe-events-view {
  max-width: 100%;
  padding: 0;
}

/* Su /eventi/ la vista è già dentro il `.container` del tema, che dà larghezza
   massima e margini laterali. Restano i 24px di rientro che il blocco TEC aveva
   sull'originale (`padding: 24px var(--ph-pad-x)`, con --ph-pad-x: 24px): sono
   quelli che tengono le schede leggermente più strette del titolo di pagina. */
.page--eventi .tribe-events-view {
  max-width: 100%;
  padding-inline: 24px;
  padding-top: 8px;
  padding-bottom: 32px;
}

body .tribe-events.tribe-events-view .tribe-common-l-container,
body .tribe-events.tribe-events-view .tribe-events-l-container {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.tribe-common h1,
.tribe-common h2,
.tribe-common h3,
.tribe-common h4 {
  font-family: var(--ph-font-heading);
}

/* --------------------------------------------------------------------------
   Vista lista — la pagina /eventi/

   Il markup è quello del plugin, reso da templates/page-eventi.php: qui c'è il
   vestito che sull'originale stava nel Custom CSS del kit Elementor. I fogli di
   TEC vengono accodati a mano dal template, quindi arrivano DOPO questo file:
   ogni regola che deve vincere porta il prefisso `body`, che basta a superare la
   specificità di una singola classe senza ricorrere a !important.

   Misure prese dallo screenshot dell'originale a 1440px: scheda bianca con
   raggio grande e nessuna barretta laterale, badge della data 100x64 in alto a
   sinistra, data sopra il titolo in maiuscoletto viola, titolo viola 22px,
   luogo con il nome in grassetto, descrizione intera sotto.
   -------------------------------------------------------------------------- */

body .tribe-events-calendar-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
}

/* I separatori di mese restano quelli del plugin: sull'originale sono la stessa
   riga grigia con il filo orizzontale, e ricolorarli li allontanerebbe. Serve
   solo il respiro sopra, che il gap della lista da solo non dà. */
body .tribe-events-calendar-list__month-separator {
  margin: 20px 0 0;
}

body .tribe-events-calendar-list__month-separator:first-child {
  margin-top: 0;
}

/* Scheda evento ------------------------------------------------------------ */

/* Il plugin dà alla riga margini laterali negativi (`--tec-grid-gutter-half-negative`)
   e padding alle colonne, con selettori a tre e quattro classi: la scheda uscirebbe
   più larga della lista e con il testo rientrato. Le due regole qui sotto contano una
   classe in più delle sue. */
body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  flex-wrap: nowrap;
  margin: 0;
  padding: 26px 30px;
  background: var(--ph-white);
  border: 1px solid var(--ph-ev-line);
  border-radius: var(--ph-radius-lg);
  box-shadow: var(--ph-ev-shadow);
  transition: box-shadow var(--ph-transition);
}

body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-row:hover,
body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-row:focus-within {
  box-shadow: var(--ph-ev-shadow-hover);
}

body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-row > .tribe-common-g-col {
  padding-left: 0;
  padding-right: 0;
}

/* Sul tablet stretto la riga stringe gap e imbottitura.

   La riga è una griglia `110px + resto` con 40px di gap e 30px di imbottitura
   per lato: fra 601 e 767px sono 100px che il corpo della scheda non ha. Con
   20 e 20 a 767px al corpo ne restano 483 invece di 467, e a 601 ne restano
   313 invece di 297. Sotto i 600px il badge sale sopra il testo, ed è la
   regola che sta nel blocco «Adattamenti» in fondo a questo foglio. */
@media (max-width: 767px) {
  body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-row {
    gap: 20px;
    padding: 20px;
  }
}

/* Badge della data --------------------------------------------------------- */

body .tribe-events-calendar-list__event-date-tag {
  width: 110px;
  max-width: 110px;
  flex: none;
  padding: 0;
  text-align: center;
}

body .tribe-events-calendar-list__event-date-tag-datetime {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  padding: 11px 8px;
  background-image: linear-gradient(135deg, var(--ph-primary) 0%, var(--ph-ev-purple-dark) 100%);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(105, 42, 152, 0.25);
  color: var(--ph-white);
}

/* La tipografia del plugin è dichiarata su `.tribe-common .tribe-common-h5`, due
   classi: per vincere serve una classe in più, non !important. Da qui in avanti
   le regole di colore e di carattere portano `body .tribe-common`. */
body .tribe-common .tribe-events-calendar-list__event-date-tag-weekday {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ph-white);
}

body .tribe-common .tribe-events-calendar-list__event-date-tag-daynum,
body .tribe-common .tribe-events-calendar-list__event-date-tag-daynum a {
  margin: 2px 0 0;
  font-family: var(--ph-font-heading);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: var(--ph-white);
}

/* Corpo della scheda: si annulla la griglia interna del plugin, che teneva il
   testo a cinque ottavi di larghezza per fare posto a un'immagine che sull'originale
   non c'è. Anche qui i selettori del plugin hanno tre classi. */
body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-wrapper,
body .tribe-events.tribe-events-view .tribe-events-calendar-list__event,
body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-details {
  display: block;
  width: 100%;
  max-width: 100%;
  flex: none;
  margin: 0;
  padding: 0;
}

/* Copertina della scheda.

   Gli eventi ora hanno un'immagine in evidenza: la fotografia della disciplina,
   assegnata da deploy/arricchisci-eventi.php. Finché non l'avevano, questo blocco
   non veniva stampato affatto e non serviva vestirlo.

   Adesso serve, perché la griglia interna del plugin è annullata dalla regola qui
   sopra e il suo wrapper resta senza larghezza: la sua unica misura è
   `width: calc(var(--tec-grid-width-1-of-8) * 3)`, che vale solo quando il
   JavaScript delle viste V2 aggiunge al contenitore la classe del breakpoint
   medio — sotto quella soglia l'immagine usciva alla larghezza nativa
   dell'allegato e la scheda sfondava lo schermo del telefono.

   Qui la copertina diventa una miniatura in cima alla scheda, ritagliata 16/9 e
   larga al massimo 320px: così le fotografie orizzontali e quelle quadrate (Rei-Ki,
   Rebirthing e Abilità Metamorfica sono immagini quadrate) occupano la stessa
   altezza, le righe del calendario restano tutte uguali e la figura resta un
   accessorio della scheda invece di diventarne il corpo.

   Nel calendario però l'immagine non si stampa, ed è una scelta, non una dimenticanza.
   Sull'originale (nuovo.paradisehome.it/eventi/) le schede della lista sono data,
   titolo, luogo e descrizione: gli eventi lì non hanno proprio un'immagine in evidenza
   (`featured_media: 0` su tutti). Le immagini che hanno qui gliele ha date la replica,
   prendendole dalla pagina del trattamento o del percorso di formazione corrispondente:
   giuste sulla pagina del singolo evento, dove illustrano quell'evento, ma nel
   calendario diventano la stessa fotografia ripetuta — ottantuno schede su
   centoventuno portavano `Allineamento-grande`, e scorrendo il mese si vedeva sempre
   quella. Il wrapper resta nel markup (è del plugin) e sparisce dalla vista; l'immagine
   continua a comparire dove ha senso: sulla pagina dell'evento, nelle card «Prossime
   date» dei trattamenti e negli «Eventi correlati».

   Per rimetterla: `display: block` qui sotto, e le due misure che seguono tornano
   valide così come sono. */
body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-featured-image-wrapper {
  display: none;
  width: 100%;
  max-width: 320px;
  flex: none;
  margin: 0 0 18px;
  padding: 0;
}

body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-featured-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ph-radius-lg);
}

/* La copertina, quando c'è, sta ACCANTO ai dettagli e non sopra.

   Le regole qui sopra azzerano la griglia interna del plugin e lasciavano
   `.tribe-events-calendar-list__event` a blocco: con la copertina visibile la
   figura si prendeva una riga da 320px e i dettagli cominciavano sotto, con
   840px di bianco accanto alla fotografia (misurato a 1440 prima che la
   copertina venisse nascosta: figura x=215 w=320, dettagli x=215 w=1160, riga
   alta 367px). Da 768px in su la scheda si dispone su due colonne, la figura
   alla sua misura e i dettagli a riempire il resto.

   È un `flex` e non una `grid` di proposito: oggi il wrapper della copertina è
   `display:none` (vedi il blocco qui sopra: nel calendario la fotografia non si
   stampa, perché sull'originale le schede non ne hanno). Un elemento
   `display:none` non è un item di flex — la riga resta una colonna sola e i
   dettagli tengono tutta la larghezza — mentre in una griglia a due tracce
   fisse i dettagli finirebbero nella prima, larga 320px, con 800px di vuoto a
   destra. Con `flex` la regola vale in tutti e due gli stati e vale anche per
   un evento senza immagine in evidenza: rimettere `display:block` alla
   copertina basta e avanza. */
@media (min-width: 768px) {
  body .tribe-events.tribe-events-view .tribe-events-calendar-list__event {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
  }

  body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-featured-image-wrapper {
    flex: 0 0 320px;
    margin-bottom: 0;
  }

  body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-details {
    flex: 1 1 320px;
    width: auto;
    /* La misura del testo, non la larghezza della scheda.

       Senza tetto la descrizione correva per tutta la riga — 1112px misurati a
       1440 di finestra, una riga sola di testo dentro una scheda alta 160px e
       larga 1372: «ogni evento ha un box gigantesco e vuoto». Sull'originale la
       colonna del testo è 771px su una riga da 1262 (misurato con un browser
       vero a 1440): la descrizione va a capo tre o quattro volte e la scheda si
       riempie. 780px è quella misura, e lo spazio che resta a destra è quello
       che l'originale tiene per la copertina. */
    max-width: 780px;
  }
}

/* Data sopra il titolo: nel markup del plugin viene dopo, come sull'originale,
   dove l'inversione la faceva il CSS. */
body .tribe-events-calendar-list__event-header {
  display: flex;
  flex-direction: column;
}

body .tribe-events-calendar-list__event-datetime-wrapper {
  order: -1;
  margin: 0;
}

body .tribe-common .tribe-events-calendar-list__event-datetime {
  font-family: var(--ph-font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ph-primary);
}

body .tribe-common .tribe-events-calendar-list__event-title {
  margin: 3px 0 12px;
  font-family: var(--ph-font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

body .tribe-common .tribe-events-calendar-list__event-title-link {
  border-bottom: 0;
  color: var(--ph-primary);
  text-decoration: none;
}

body .tribe-common .tribe-events-calendar-list__event-title-link:hover,
body .tribe-common .tribe-events-calendar-list__event-title-link:focus-visible {
  color: var(--ph-ev-purple-dark);
}

body .tribe-common .tribe-events-calendar-list__event-venue {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 14.5px;
  font-style: normal;
  line-height: 1.6;
  color: var(--ph-text);
}

body .tribe-common .tribe-events-calendar-list__event-venue-title,
body .tribe-common .tribe-events-calendar-list__event-venue-address {
  color: var(--ph-text);
}

body .tribe-common .tribe-events-calendar-list__event-venue-title {
  font-weight: 700;
}

body .tribe-events-calendar-list__event-description {
  margin-top: 14px;
}

body .tribe-common .tribe-events-calendar-list__event-description p {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: #444444;
}

/* --------------------------------------------------------------------------
   Barra delle viste e barra superiore

   Sull'originale la barra ha soltanto il selettore delle viste, allineato a
   destra: la ricerca per parola chiave non c'è (il widget del plugin la
   spegneva). Sotto, la riga con le frecce, il pulsante «Oggi» e l'intervallo di
   date in viola grande.
   -------------------------------------------------------------------------- */

/* Il plugin dichiara la ricerca con tre classi
   (`.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search`): per
   spegnerla servono quattro selezioni, e `body` più le due classi del contenitore
   della vista bastano. */
body .tribe-events.tribe-events-view .tribe-events-c-events-bar__search-button,
body .tribe-events.tribe-events-view .tribe-events-c-events-bar__search-container,
body .tribe-events.tribe-events-view .tribe-events-c-search {
  display: none;
}

/* Sull'originale il selettore delle viste sta sulla stessa riga delle frecce, di
   «Oggi» e dell'intervallo di date, all'estremo destro. Nel markup del plugin viene
   prima, in una riga sua: lo si riporta in quota sovrapponendolo alla barra
   superiore, che è esattamente dove l'originale lo mostra. */
body .tribe-events.tribe-events-view .tribe-events-header {
  position: relative;
}

body .tribe-events.tribe-events-view .tribe-events-header__events-bar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body .tribe-events.tribe-events-view .tribe-events-c-events-bar__views {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

body .tribe-events-c-top-bar {
  margin: 0 0 8px;
  padding: 0;
}

body .tribe-common .tribe-events-c-top-bar__datepicker-button {
  font-family: var(--ph-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--ph-primary);
}

body .tribe-common .tribe-events-c-top-bar__today-button {
  padding: 6px 15px;
  border: 1px solid var(--ph-border);
  border-radius: 8px;
  background: var(--ph-white);
  font-family: var(--ph-font-heading);
  font-size: 12px;
  font-weight: 500;
  color: var(--ph-primary);
}

body .tribe-common .tribe-events-c-top-bar__today-button:hover,
body .tribe-common .tribe-events-c-top-bar__today-button:focus-visible {
  border-color: var(--ph-primary);
  background: var(--ph-primary);
  color: var(--ph-white);
}

body .tribe-events-c-top-bar__nav-link svg path,
body .tribe-events-c-nav__prev-icon-svg path,
body .tribe-events-c-nav__next-icon-svg path {
  fill: var(--ph-primary);
}

/* --------------------------------------------------------------------------
   Navigazione in coda alla lista e menu «Iscriviti al calendario»
   -------------------------------------------------------------------------- */

body .tribe-events-c-nav {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ph-border);
}

body .tribe-events-c-nav__list {
  align-items: center;
}

body .tribe-common .tribe-events-c-nav__prev,
body .tribe-common .tribe-events-c-nav__next {
  font-family: var(--ph-font-body);
  font-size: 15px;
  color: var(--ph-text);
}

body .tribe-common .tribe-events-c-nav__prev:hover,
body .tribe-common .tribe-events-c-nav__next:hover {
  color: var(--ph-primary);
}

/* Sull'originale il menu «Iscriviti al calendario» sta a sinistra, sotto «Eventi
   precedenti»; il plugin lo allinea a destra. */
body .tribe-events.tribe-events-view .tribe-events-c-subscribe-dropdown__container {
  justify-content: flex-start;
  margin: 20px 0 0;
}

body .tribe-common .tribe-events-c-subscribe-dropdown__button {
  padding: 10px 18px;
  border: 1px solid var(--ph-primary);
  border-radius: 8px;
  background: var(--ph-white);
  box-shadow: var(--ph-ev-shadow);
}

body .tribe-common .tribe-events-c-subscribe-dropdown__button-text {
  font-family: var(--ph-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-primary);
}

body .tribe-events-c-subscribe-dropdown__button-icon path {
  fill: var(--ph-primary);
}

/* Vista mese */

.tribe-events-calendar-month__day-cell,
.tribe-events-calendar-month__header-column {
  border-color: var(--ph-border);
}

.tribe-events-calendar-month__header-column-title {
  font-family: var(--ph-font-heading);
  color: var(--ph-primary);
}

.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
  color: var(--ph-primary);
}

.tribe-events-calendar-month__calendar-event-title-link,
.tribe-events-calendar-month__multiday-event-bar-title {
  font-family: var(--ph-font-heading);
  color: var(--ph-primary);
}

.tribe-events-calendar-month__multiday-event-bar-inner {
  background-color: var(--ph-primary-pale);
}

.tribe-events-calendar-month__day-cell--selected {
  background-color: var(--ph-primary);
}

/* Pulsanti e selettore vista del plugin */

.tribe-events .tribe-common-c-btn,
.tribe-events button.tribe-events-c-view-selector__button {
  font-family: var(--ph-font-heading);
  color: var(--ph-primary);
}

.tribe-events-c-view-selector__list-item-link:hover,
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
  color: var(--ph-primary);
}

.tribe-events-c-subscribe-dropdown__button {
  font-family: var(--ph-font-heading);
}

/* --------------------------------------------------------------------------
   Vista Mappa

   Quarta voce del selettore, servita dal tema (template-parts/eventi/vista-mappa.php).
   Il guscio è quello delle viste del plugin, quindi le regole della barra delle viste
   e del selettore qui sopra valgono già: restano da vestire la riga del titolo, la
   didascalia sotto la mappa e l'elenco.
   -------------------------------------------------------------------------- */

/* La riga del titolo occupa il posto della barra con le frecce e «Oggi», che sulla
   mappa non hanno significato. L'altezza minima serve perché il selettore delle
   viste è posizionato in assoluto su questa riga: senza, si sovrapporrebbe alla
   mappa. */
body .eventi-mappa__barra {
  display: flex;
  align-items: center;
  /* `justify-content` esplicito: `.tribe-events-c-top-bar` del plugin allinea a
     destra, e qui il titolo va a sinistra come il datepicker della vista lista. */
  justify-content: flex-start;
  min-height: 44px;
}

body .eventi-mappa__titolo {
  margin: 0;
  /* Stesso corpo e stesso colore del datepicker della vista lista, che su questa
     riga è l'elemento che la mappa sostituisce. */
  font-family: var(--ph-font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ph-primary);
}

body .eventi-mappa__riquadro {
  margin-top: 18px;
}

body .eventi-mappa__nota {
  margin: 14px 0 0;
  font-family: var(--ph-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ph-text-muted);
}

body .eventi-mappa__vuoto {
  margin: 28px 0 0;
  font-family: var(--ph-font-body);
  font-size: 15px;
  color: var(--ph-text);
}

body .eventi-mappa__elenco-titolo {
  margin: 34px 0 16px;
  font-family: var(--ph-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ph-primary);
}

body .eventi-mappa__lista {
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Adattamenti
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  :root {
    --ph-ev-badge: 78px;
  }

  .evento-riga {
    gap: 18px;
    padding: 20px 22px;
    border-radius: 14px;
  }

  .evento-riga__badge-numero {
    font-size: 27px;
  }

  .evento-meta,
  .evento-iscrizione {
    padding: 24px;
  }

  .evento-single__nav-voce--next {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .evento-riga {
    grid-template-columns: 1fr;
  }

  .evento-riga__badge {
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
    padding: 8px 14px;
    width: fit-content;
  }

  .evento-riga__badge-numero {
    font-size: 20px;
  }

  .evento-riga__cta {
    margin-left: 0;
    width: 100%;
  }

  .eventi-filtri {
    gap: 20px;
  }

  /* Il filtro sul telefono: una striscia che scorre, non un muro di pillole.

     A 390px le tredici categorie andavano a capo undici volte e occupavano più di
     quattrocento pixel: il calendario cominciava sotto la piega, e prima di vedere una
     data bisognava scorrere tutto l'elenco delle categorie. Qui le pillole restano in
     fila e la fila scorre in orizzontale dentro il suo contenitore.

     Perché la striscia e non un menu a tendina o un «mostra tutte». Perché questo filtro
     vive dentro il contenitore che la navigazione asincrona di The Events Calendar
     sostituisce per intero a ogni cambio di mese, di giorno o di categoria: qualunque
     stato tenuto in JavaScript — la tendina aperta, le prime cinque già espanse — verrebbe
     buttato via a ogni clic e andrebbe riagganciato a mano. Una lista che scorre non ha
     stato: è la stessa `<ul>` di collegamenti di prima, con le stesse pillole e gli stessi
     indirizzi, e continua a funzionare anche a JavaScript spento. Una tendina, per di più,
     avrebbe dovuto essere un `<select>` con un submit — e con esso avrebbe perso il
     `data-js="tribe-events-view-link"`, cioè la navigazione senza ricarica.

     `overscroll-behavior-x: contain` è la riga che impedisce alla pagina di scorrere
     quando la striscia arriva in fondo. */
  body .eventi-filtri--categorie .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Lo spazio a destra è il fondo della sfumatura che segnala «c'è dell'altro». */
    padding: 2px 24px 2px 0;
    margin-right: -4px;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }

  body .eventi-filtri--categorie .filter-bar::-webkit-scrollbar {
    display: none;
  }

  body .eventi-filtri--categorie .eventi-filtri__voce {
    flex: none;
    max-width: none;
    scroll-snap-align: start;
  }

  /* La pillola attiva in testa alla striscia. Dopo un clic il contenitore viene
     sostituito e la striscia riparte da sinistra: senza questa riga la categoria
     appena scelta resterebbe fuori campo e il filtro sembrerebbe non aver fatto
     nulla. Vale solo qui, sul telefono; sul desktop l'ordine resta alfabetico. */
  body .eventi-filtri--categorie .eventi-filtri__voce:has(.is-current) {
    order: -1;
  }

  body .eventi-filtri--categorie .filter-bar__item {
    padding: 7px 14px;
    font-size: 13px;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  body .eventi-filtri--categorie .filter-bar__item--figlia {
    padding-inline: 12px;
    font-size: 12.5px;
  }

  /* Scheda evento: sotto i 600px il badge della data va sopra, non a fianco.

     La griglia `110px + minmax(0, 1fr)` con `gap: 40px` lasciava al titolo novanta
     pixel su trecento: «Formazione in REI-KI | 1° livello | Tanya Casagrande» usciva
     incolonnato una parola per riga, alto centosettanta pixel. Impilando, il titolo si
     riprende tutta la larghezza della scheda. */
  body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 20px 18px;
  }

  /* Da qui in avanti i selettori portano `.tribe-events.tribe-events-view` davanti, e
     non è pedanteria. Sotto i 768px il contenitore della vista perde la classe
     `tribe-common--breakpoint-medium` e il plugin passa a un secondo gruppo di regole,
     scritte su due classi (`.tribe-events .tribe-events-calendar-list__…`): con una
     classe sola più `body` non si vincono, e il badge restava quello del plugin —
     ventisei pixel di larghezza, «SAB» sopra «29» che gli usciva da sotto. */
  body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-date-tag {
    width: 100%;
    max-width: none;
    text-align: left;
  }

  /* Il badge diventa una pastiglia orizzontale — «SAB 29» in riga — come già fa
     `.evento-riga__badge` alla stessa larghezza nelle card del tema. */
  body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-date-tag-datetime {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    width: fit-content;
    min-height: 0;
    padding: 7px 16px;
    border-radius: 999px;
  }

  body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-date-tag-weekday {
    font-size: 12px;
  }

  body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-date-tag-daynum,
  body .tribe-events.tribe-events-view .tribe-events-calendar-list__event-date-tag-daynum a {
    margin: 0;
    font-size: 22px;
  }

  body .eventi-mappa__titolo {
    font-size: 19px;
  }

  body .eventi-mappa__elenco-titolo {
    font-size: 18px;
  }

  .evento-single__schedule {
    padding: 16px 18px;
    font-size: 15px;
  }

  .evento-single__costo {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .evento-riga,
  .event-formatori__link,
  .evento-single__back a {
    transition: none;
  }

  .evento-riga:hover,
  .evento-riga:focus-within,
  .event-formatori__link:hover,
  .event-formatori__link:focus-visible,
  .evento-single__back a:hover {
    transform: none;
  }
}