/* ════════════════════════════════════════════════════════════
   event-cards.css — Event Card System (undici famiglie curate)

   docs/EVENT_CARD_CURATION_HANDOFF.md, §3-§11. Collegato DOPO
   art-direction.css (index.html): a parità di specificità vince
   l'ultimo, quindi una famiglia curata neutralizza per cascata sia
   `card` (stile.css) sia una direzione artistica sulle stesse
   proprietà — esattamente come `data-tm-artwork` già neutralizza
   `card:'piena'`.

   REGOLA CHE REGGE TUTTO, come ogni altra dimensione di preset.js:
   `cardFamily: 'eredita'` e `cardDensita: 'eredita'` (i predefiniti)
   non compaiono in NESSUN selettore qui dentro. Un cliente che non ha
   mai toccato «Le schede degli eventi → Curate» non si sposta di un
   pixel al prossimo deploy.

   ANATOMIA SENZA TOCCARE IL DOM (§3). `.tm-ev` è la scheda/riga di un
   evento nei quattro markup di lista (lista classica, agenda,
   calendario, `article.tm-locandina`); `.tm-ev__riga` è il
   contenitore flex interno — sulla lista classica un figlio di
   `.tm-ev`, su agenda/locandina/calendario lo stesso elemento di
   `.tm-ev` (art/data/testo/cta sono già suoi figli diretti). Diventa
   SEMPRE `display: contents` sotto una famiglia curata: i suoi figli
   (`.tm-ev__art`, `.tm-ev__testo`, l'eventuale `.tm-ev__data` a
   fianco) diventano item della griglia che `.tm-ev` apre, alla pari
   di `.tm-ev__stato`/`.tm-ev__cta` che nel markup sono già suoi
   fratelli diretti. `display: contents` su `div` non porta semantica:
   nessun effetto sull'accessibilità (stessa tecnica già in
   `sito/index.html`, `.ps__testo`).

   CORRETTO (Curated Auto Visual Engine, primo lavoro dell'handoff):
   il selettore di `.tm-ev__riga` è ora SEMPRE discendente
   (`.tm-ev .tm-ev__riga`), su tutte e undici le famiglie storiche, non
   solo su `agenda-cta`. Su agenda/locandina/calendario `.tm-ev` e
   `.tm-ev__riga` stanno sullo STESSO elemento: un selettore di sola
   classe ci atterra comunque, e il suo `display: contents` scavalca il
   `display: grid`/`flex` che `.tm-ev` ha appena dichiarato due righe
   sopra (stessa specificità, vince l'ultimo in ordine di sorgente) —
   la scheda si ricomponeva impilata, misurato `display` calcolato
   `contents` invece di `grid`. Il discendente lascia la regola dove
   serve (la lista classica e `vetrina`, dove `.tm-ev__riga` è un
   figlio) e la toglie dove faceva danno. Rischio Manuale nullo: vive
   sotto `[data-tm-cardfam]`, un attributo che nessun tema pubblicato
   porta con un valore diverso da `eredita`.

   COLOR OWNERSHIP (§10). Il guscio, il bordo, il filetto, la CTA, il
   badge e il rail data sono SEMPRE un token del tema (`var(--tk-…)`):
   MAI un `#rrggbb` scritto a mano — verificato da `verifica-preset.js`.
   L'immagine dell'evento non si tocca mai: nessun filtro, nessuna
   ricolorazione. Solo `cinematica-scrim` la usa come sfondo del
   guscio, dietro i suoi quattro filtri duri (§7).
   ════════════════════════════════════════════════════════════ */

/* ─── Placeholder neutro theme-aware (CLAUDE.md, «Event artwork demo
   neutro»; Visual Validation & Polish, §14). Due usi, stesso riquadro:

   1. gli artwork dimostrativi (`/public/locandine/*.svg`, vedi
      `eventoArtworkEsempio()` in app.js) — sostituisce l'immagine vera
      per non falsare la valutazione con colori a caso;
   2. un evento SENZA nessuna immagine caricata (`s.url_immagine` vuoto).
      Fino alla Visual Validation & Polish quel caso mostrava un'emoji
      🎭 a colori fissi, indipendente dal tema: su una ricetta che
      dichiara `eventArtwork` diverso da `assente` (`editoriale-
      culturale`, `manifesto-affiancato`…) un tenant senza artwork
      otteneva un'icona fuori palette invece di un riquadro coerente.
      Ora entrambi i casi usano lo stesso riquadro che deriva dal tema —
      mai un `#rrggbb`. Non è dietro nessun `[data-tm-cardfam]`: si
      applica sempre, Manuale compreso. ─────────────────────────────── */
.tm-ev__art-demo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--tk-superficie) 0%, var(--tk-bgBottom) 100%);
  border: 1px solid var(--tk-chipBordo);
  box-sizing: border-box;
}
.tm-ev__art-demo::before {
  content: '';
  width: 46%;
  height: 46%;
  min-width: 12px;
  min-height: 12px;
  background-color: var(--tk-primaryTesto);
  opacity: .34;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H4Zm0 2h16v7.59l-3.3-3.3a1 1 0 0 0-1.4 0L11 15.6l-2.3-2.29a1 1 0 0 0-1.4 0L4 16.6V7Zm3 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H4Zm0 2h16v7.59l-3.3-3.3a1 1 0 0 0-1.4 0L11 15.6l-2.3-2.29a1 1 0 0 0-1.4 0L4 16.6V7Zm3 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 'normale' è la densità di riferimento: le undici famiglie sotto sono
   già scritte per questo valore, quindi non aggiunge altro alla LORO
   anatomia. Ma sulla scheda classica (`cardFamily: 'eredita'`) un
   padding esplicito uguale, al pixel, a quello che Tailwind applica già
   (`p-2.5` = 10px) sarebbe indistinguibile dal "nessuna densità scelta"
   — `verifica-stile-vivo.js` lo boccerebbe come promessa vuota. 11px
   invece di 10 è la differenza minima che resta una scelta REALE (misurata
   in browser) senza inventare un aspetto diverso da "normale". */
body.tema-on[data-tm-carddens="normale"] .tm-ev { padding-top: 11px !important; padding-bottom: 11px !important; }

/* ════════════════════════════════════════════════════════════
   1. riga-editoriale — Editorial Row · SAFE
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-cardfam="riga-editoriale"] .tm-ev {
  display: grid;
  grid-template-columns: 1fr 56px;
  grid-template-areas: "testo art" "stato art";
  align-items: start;
  gap: 4px 12px;
  padding: 12px 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--tk-chipBordo);
}
body.tema-on[data-tm-cardfam="riga-editoriale"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="riga-editoriale"] .tm-ev__art {
  grid-area: art; width: 56px !important; height: 56px !important;
  border-radius: 4px !important; box-shadow: none !important; border: 1px solid var(--tk-chipBordo) !important;
}
body.tema-on[data-tm-cardfam="riga-editoriale"] .tm-ev__testo { grid-area: testo; }
/* L'invito a prenotare, nella STESSA cella della disponibilità e
   allineato a destra: la riga esiste già (`"stato art"`), quindi la
   scheda non cresce di un pixel — verificato col modello di
   `card-engine.js`, che qui è a 0.5% di divergenza e deve restarci.
   Senza, tre proposte su trentatré non avevano nessun invito ad agire:
   la riga è cliccabile, ma niente lo dice. Un'etichetta sull'accento,
   sottolineata, dice l'azione senza rompere la lettura da indice —
   stessa scelta già presa per `premium-essenziale`. */
body.tema-on[data-tm-cardfam="riga-editoriale"] .tm-ev__cta {
  display: inline-flex !important; grid-area: stato; justify-self: end; align-self: center;
  white-space: nowrap; background: transparent !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important; text-transform: none !important;
  letter-spacing: .01em; font-size: 11.5px !important; font-weight: 600 !important;
  color: var(--tk-primaryTesto, inherit) !important; border-bottom: 1px solid currentColor !important;
}
body.tema-on[data-tm-cardfam="riga-editoriale"] .tm-ev__titolo {
  font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.01em; white-space: normal !important;
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
body.tema-on[data-tm-cardfam="riga-editoriale"] .tm-ev__data {
  order: -1; font-size: 11px !important; font-weight: 600; margin-top: 1px;
  background: transparent !important; color: var(--tk-testoTenue, inherit) !important; padding: 0 !important; width: auto !important;
}
body.tema-on[data-tm-cardfam="riga-editoriale"] .tm-ev__genere {
  order: 2; text-transform: uppercase; font-size: 9px !important; letter-spacing: .1em;
  background: transparent !important; color: var(--tk-testoTenue, inherit) !important; padding: 0 !important;
}
body.tema-on[data-tm-cardfam="riga-editoriale"] .tm-ev__stato {
  grid-area: stato; align-self: start !important; background: transparent !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important; color: var(--tk-testoSecondario, inherit) !important; font-size: 10.5px !important;
}
body.tema-on[data-tm-cardfam="riga-editoriale"] .tm-ev__cta { display: none; }

/* ════════════════════════════════════════════════════════════
   2. data-guida — Date Led · SAFE
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  grid-template-areas: "data testo cta" "data stato cta";
  align-items: center;
  gap: 4px 10px;
  padding: 10px;
  border-radius: 12px;
}
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev__testo { display: contents; }
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev__meta { display: contents; }
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev__data {
  grid-area: data; grid-row: 1 / span 2; align-self: center; justify-self: center; text-align: center;
  background: var(--tk-superficie) !important; color: var(--tk-primaryTesto, inherit) !important;
  border-radius: 10px; padding: 6px 4px !important; width: 100% !important; box-sizing: border-box;
  font-weight: 800 !important; font-size: 12px !important;
}
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev__data > :first-child { font-size: 22px; line-height: 1; display: block; }
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev__art { display: none; }
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev__titolo {
  grid-area: testo; font-size: 15.5px !important; font-weight: 600 !important; white-space: normal !important;
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev__compagnia { display: block !important; }
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev__genere { display: none; }
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev__stato { grid-area: stato; }
body.tema-on[data-tm-cardfam="data-guida"] .tm-ev__cta {
  grid-area: cta; display: inline-flex !important; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0 !important; border-radius: 50% !important;
}

/* ════════════════════════════════════════════════════════════
   3. agenda-fitta — Schedule Compact · SAFE
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-cardfam="agenda-fitta"] .tm-ev {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  grid-template-areas: "data testo stato cta";
  align-items: center;
  gap: 8px;
  padding: 8px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--tk-chipBordo);
}
body.tema-on[data-tm-cardfam="agenda-fitta"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="agenda-fitta"] .tm-ev__testo { display: contents; }
body.tema-on[data-tm-cardfam="agenda-fitta"] .tm-ev__meta { display: contents; }
body.tema-on[data-tm-cardfam="agenda-fitta"] .tm-ev__data { grid-area: data; text-align: center; font-size: 11px !important; }
body.tema-on[data-tm-cardfam="agenda-fitta"] .tm-ev__art { display: none; }
body.tema-on[data-tm-cardfam="agenda-fitta"] .tm-ev__titolo {
  grid-area: testo; font-size: 14px !important; font-weight: 600 !important;
  white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
}
body.tema-on[data-tm-cardfam="agenda-fitta"] .tm-ev__compagnia,
body.tema-on[data-tm-cardfam="agenda-fitta"] .tm-ev__genere { display: none !important; }
body.tema-on[data-tm-cardfam="agenda-fitta"] .tm-ev__stato { grid-area: stato; }
body.tema-on[data-tm-cardfam="agenda-fitta"] .tm-ev__cta {
  grid-area: cta; display: inline-flex !important; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0 !important; border-radius: 10px !important;
}

/* ════════════════════════════════════════════════════════════
   4. locandina-affiancata — Poster Split
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-cardfam="locandina-affiancata"] .tm-ev {
  display: grid;
  grid-template-columns: 36% 1fr;
  grid-template-areas: "art testo" "art cta";
  align-items: start;
  gap: 4px 12px;
  padding: 10px;
  border-radius: 14px;
}
body.tema-on[data-tm-cardfam="locandina-affiancata"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="locandina-affiancata"] .tm-ev__art {
  grid-area: art; grid-row: 1 / span 2; width: 100% !important; height: auto !important;
  aspect-ratio: 3 / 4; max-height: 132px; border-radius: 10px !important;
}
body.tema-on[data-tm-cardfam="locandina-affiancata"] .tm-ev__testo { grid-area: testo; }
body.tema-on[data-tm-cardfam="locandina-affiancata"] .tm-ev__titolo {
  font-size: 16px !important; font-weight: 700 !important; white-space: normal !important;
  -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
body.tema-on[data-tm-cardfam="locandina-affiancata"] .tm-ev__compagnia { display: block !important; }
body.tema-on[data-tm-cardfam="locandina-affiancata"] .tm-ev__cta {
  grid-area: cta; display: flex !important; width: 100%; justify-content: center; margin-top: 6px;
  /* Stessa garanzia in due pezzi già spiegata per `agenda-cta`: il
     riempimento con `primary` (che regge sempre il bianco) e lo STACCO
     dalla scheda con un bordo in `primaryTesto` (AA su `superficie` per
     costruzione). Senza il bordo il pulsante coincide col fondo della
     scheda — misurato sulle 33 proposte vere: `primary` contro
     `superficie` scende a 1.00 su 10.jpg e a 1.04 su 11.webp, cioè il
     testo si legge e il pulsante non si vede. */
  border: 1px solid var(--tk-primaryTesto);
}

/* ════════════════════════════════════════════════════════════
   5. manifesto-tipografico — Manifesto
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-cardfam="manifesto-tipografico"] .tm-ev {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px !important; border: 2px solid var(--tk-textDarkTesto, currentColor) !important;
  border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
}
body.tema-on[data-tm-cardfam="manifesto-tipografico"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="manifesto-tipografico"] .tm-ev__testo { display: contents; }
body.tema-on[data-tm-cardfam="manifesto-tipografico"] .tm-ev__meta { display: contents; }
body.tema-on[data-tm-cardfam="manifesto-tipografico"] .tm-ev__art,
body.tema-on[data-tm-cardfam="manifesto-tipografico"] .tm-ev__art-demo,
body.tema-on[data-tm-cardfam="manifesto-tipografico"] .tm-ev__genere { display: none !important; }
body.tema-on[data-tm-cardfam="manifesto-tipografico"] .tm-ev__data {
  order: -1; font-size: 22px !important; font-weight: 800 !important; text-transform: uppercase;
  background: transparent !important; color: inherit !important; padding: 0 !important; width: auto !important;
}
body.tema-on[data-tm-cardfam="manifesto-tipografico"] .tm-ev__titolo {
  font-size: 15px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .02em;
  white-space: normal !important; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
body.tema-on[data-tm-cardfam="manifesto-tipografico"] .tm-ev__stato {
  background: var(--tk-terracotta, currentColor) !important; color: var(--tk-superficie) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 3px 8px !important; align-self: flex-start;
  font-size: 10px !important; text-transform: uppercase; letter-spacing: .05em;
}
body.tema-on[data-tm-cardfam="manifesto-tipografico"] .tm-ev__cta { display: none; }

/* ════════════════════════════════════════════════════════════
   6. premium-essenziale — Minimal Premium · SAFE
   ════════════════════════════════════════════════════════════ */
/* RISCRITTA DOPO AVERLA GUARDATA (Ultimate Polish §33/§34).
   La prima stesura dichiarava `display: flex; align-items: center` e
   NIENTE `flex-direction`. Ma `.tm-ev` porta già `flex flex-col` dalle
   utility Tailwind del markup: senza sovrascriverla, la famiglia
   ereditava la colonna. Risultato misurato in un browser vero
   (`flexDirection: "column"`, artwork a x=177 su una scheda larga 345):
   miniatura di 37px sospesa e centrata sopra il titolo, titolo centrato,
   compagnia centrata, disponibilità centrata — cioè l'esatto contrario
   di ciò che la regola voleva dire, e nessun errore da nessuna parte.
   È lo stesso genere di difetto già pagato altrove: una regola valida
   che non governa il markup che crede di governare.

   Due decisioni prese guardando lo scatto, non ragionando:
    · L'ARTWORK SPARISCE. A 32-37px una locandina non è più
      un'immagine, è una macchia — e sospesa sopra il titolo si legge
      come l'icona di un'immagine rotta (§34). In una scheda che vende
      silenzio, la gerarchia la fanno lo spazio e la tipografia: data,
      titolo, compagnia, disponibilità. La ricetta smette anche di
      chiedere `eventArtwork: 'miniatura'`, che qui non ha più oggetto.
    · IL FILETTO A SINISTRA DELLO STATO se ne va. Con la scheda in
      colonna diventava un trattino verticale sospeso prima del pallino,
      che nello scatto sembra un refuso di rendering.

   Griglia a tre colonne: il testo prende quel che resta, disponibilità
   e invito stanno a destra e non vanno mai a capo. */
body.tema-on[data-tm-cardfam="premium-essenziale"] .tm-ev {
  display: grid !important;
  grid-template-columns: [testo] 1fr [stato] max-content [cta] max-content;
  align-items: center; column-gap: 14px; row-gap: 0;
  padding: 20px 2px !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
  border-bottom: 1px solid var(--tk-chipBordo);
}
body.tema-on[data-tm-cardfam="premium-essenziale"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="premium-essenziale"] .tm-ev__art { display: none !important; }
body.tema-on[data-tm-cardfam="premium-essenziale"] .tm-ev__testo { grid-column: testo; min-width: 0; }
body.tema-on[data-tm-cardfam="premium-essenziale"] .tm-ev__titolo {
  font-size: 17px !important; font-weight: 500 !important; letter-spacing: .005em; line-height: 1.22;
  white-space: normal !important;
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
body.tema-on[data-tm-cardfam="premium-essenziale"] .tm-ev__compagnia { margin-top: 3px !important; }
body.tema-on[data-tm-cardfam="premium-essenziale"] .tm-ev__meta { margin-top: 7px !important; }
/* Il genere perde la pillola: in una scheda silenziosa un fondo colorato
   su due parole è l'unico elemento che grida. Resta la parola, in
   maiuscoletto spaziato, allineata alla data. */
body.tema-on[data-tm-cardfam="premium-essenziale"] .tm-ev__genere {
  background: transparent !important; padding: 0 !important; letter-spacing: .12em;
  color: var(--tk-testoTenue, inherit) !important;
}
body.tema-on[data-tm-cardfam="premium-essenziale"] .tm-ev__stato {
  grid-column: stato;
  background: transparent !important; box-shadow: none !important; border: 0 !important;
  border-radius: 0 !important; padding: 0 !important; white-space: nowrap;
  color: var(--tk-testoSecondario, inherit) !important; font-weight: 500 !important;
}
/* L'invito c'è ma non è un pulsante: senza NIENTE, niente dice che si
   possa prenotare da qui — con un pulsante pieno, la scheda smette di
   essere silenziosa. Un'etichetta sull'accento, sottolineata, è la terza
   risposta. */
body.tema-on[data-tm-cardfam="premium-essenziale"] .tm-ev__cta {
  display: inline-flex !important; grid-column: cta; white-space: nowrap;
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 0 !important; text-transform: none !important; letter-spacing: .01em;
  font-size: 11.5px !important; font-weight: 600 !important;
  color: var(--tk-primaryTesto, inherit) !important;
  border-bottom: 1px solid currentColor !important;
}

/* ════════════════════════════════════════════════════════════
   7. rivista — Magazine
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-cardfam="rivista"] .tm-ev {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 !important; border-radius: 14px !important; overflow: hidden;
}
body.tema-on[data-tm-cardfam="rivista"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="rivista"] .tm-ev__art {
  order: -1; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; max-height: 140px;
  border-radius: 0 !important; box-shadow: none !important; border: 0 !important;
}
body.tema-on[data-tm-cardfam="rivista"] .tm-ev__testo { padding: 10px 12px 12px; }
body.tema-on[data-tm-cardfam="rivista"] .tm-ev__genere {
  display: block !important; order: -1; text-transform: uppercase; font-size: 9px !important; letter-spacing: .1em;
  background: transparent !important; color: var(--tk-primaryTesto, inherit) !important; padding: 0 0 2px !important;
}
body.tema-on[data-tm-cardfam="rivista"] .tm-ev__titolo {
  font-size: 18px !important; font-weight: 700 !important; line-height: 1.15; white-space: normal !important;
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
body.tema-on[data-tm-cardfam="rivista"] .tm-ev__cta {
  display: inline-flex !important; width: fit-content; background: transparent !important; color: var(--tk-primaryTesto, inherit) !important;
  text-transform: none !important; padding: 4px 0 0 !important; box-shadow: none !important; border-radius: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   8. cinematica-scrim — Cinematic
   Unica eccezione al color ownership (§10): l'immagine dell'evento
   fa da sfondo del guscio, dietro quattro filtri duri applicati dal
   card engine (`RICHIEDE` in §5.8) — l'immagine non si tocca comunque,
   si controlla solo il contenitore e lo scrim resta un token del tema.
   ════════════════════════════════════════════════════════════ */
/* `flex-direction`/`justify-content` espliciti: senza, `.tm-ev` eredita
   `flex-col` dalle utility del markup e `align-items: flex-end` finisce
   sull'asse TRASVERSALE — cioè allinea il testo a DESTRA invece che in
   fondo al riquadro, che è l'opposto dell'intenzione. Stessa trappola
   trovata su `premium-essenziale` guardando lo scatto. */
body.tema-on[data-tm-cardfam="cinematica-scrim"] .tm-ev {
  position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: stretch; min-height: 168px;
  padding: 0 !important; border-radius: 16px !important; overflow: hidden; box-shadow: none !important;
}
body.tema-on[data-tm-cardfam="cinematica-scrim"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="cinematica-scrim"] .tm-ev__art,
body.tema-on[data-tm-cardfam="cinematica-scrim"] .tm-ev__art-demo {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  border-radius: inherit !important; box-shadow: none !important; border: 0 !important; z-index: 0;
}
body.tema-on[data-tm-cardfam="cinematica-scrim"] .tm-ev__testo {
  position: relative; z-index: 2; width: 100%; padding: 12px;
  background: linear-gradient(to top, var(--tk-bgBottom) 0%, transparent 100%);
}
body.tema-on[data-tm-cardfam="cinematica-scrim"] .tm-ev__titolo {
  color: var(--tk-superficie) !important; font-size: 17px !important; font-weight: 700 !important; white-space: normal !important;
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
body.tema-on[data-tm-cardfam="cinematica-scrim"] .tm-ev__data {
  color: var(--tk-superficie) !important; opacity: .85; background: transparent !important; padding: 0 !important; font-size: 12px !important;
}
body.tema-on[data-tm-cardfam="cinematica-scrim"] .tm-ev__stato {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: var(--tk-bgBottom) !important; color: var(--tk-superficie) !important;
}

/* ════════════════════════════════════════════════════════════
   9. scheda-morbida — Family Soft
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-cardfam="scheda-morbida"] .tm-ev {
  display: grid; grid-template-columns: 64px 1fr auto;
  grid-template-areas: "art testo cta";
  align-items: center; gap: 10px; padding: 10px !important; border-radius: 22px !important;
}
body.tema-on[data-tm-cardfam="scheda-morbida"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="scheda-morbida"] .tm-ev__art {
  grid-area: art; width: 64px !important; height: 64px !important; border-radius: 50% !important;
}
body.tema-on[data-tm-cardfam="scheda-morbida"] .tm-ev__testo { grid-area: testo; }
body.tema-on[data-tm-cardfam="scheda-morbida"] .tm-ev__titolo {
  font-size: 16.5px !important; font-weight: 600 !important; white-space: normal !important;
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
body.tema-on[data-tm-cardfam="scheda-morbida"] .tm-ev__stato {
  border-radius: 999px !important;
}
body.tema-on[data-tm-cardfam="scheda-morbida"] .tm-ev__cta {
  grid-area: cta; display: inline-flex !important; border-radius: 999px !important;
}

/* ════════════════════════════════════════════════════════════
   10. biglietto — Ticket Strip
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev {
  display: grid; grid-template-columns: 52px 1fr auto;
  grid-template-areas: "data testo cta";
  align-items: stretch; gap: 0; padding: 0 !important; border-radius: 12px !important; overflow: hidden;
}
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev__testo { display: contents; }
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev__meta { display: contents; }
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev__art,
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev__art-demo,
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev__genere,
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev__compagnia { display: none !important; }
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev__data {
  grid-area: data; display: flex !important; align-items: center; justify-content: center; text-align: center;
  background: var(--tk-terracotta, currentColor) !important; color: var(--tk-superficie) !important;
  padding: 6px 2px !important; width: 100% !important; box-sizing: border-box; font-size: 10.5px !important; font-weight: 800 !important;
}
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev__titolo {
  grid-area: testo; align-self: center; padding: 6px 10px; font-size: 14.5px !important; font-weight: 700 !important;
  white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
}
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev__stato { display: none; }
body.tema-on[data-tm-cardfam="biglietto"] .tm-ev__cta {
  grid-area: cta; display: flex !important; align-items: center; height: 100%; max-width: 40%;
  border-radius: 0 !important; font-size: 12px !important; font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════
   11. vetrina-griglia — Showcase Grid
   Due colonne: la griglia si apre sul CONTENITORE della lista, non
   sulla singola card — stesso meccanismo già usato dal layout
   `vetrina` in temi.css (una regola sul genitore `.space-y-2`).
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-cardfam="vetrina-griglia"] .space-y-2,
body.tema-on[data-tm-cardfam="vetrina-griglia"] .space-y-1\.5 {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px;
}
body.tema-on[data-tm-cardfam="vetrina-griglia"] .tm-ev {
  display: flex; flex-direction: column; gap: 4px; padding: 0 !important; border-radius: 12px !important; overflow: hidden;
}
body.tema-on[data-tm-cardfam="vetrina-griglia"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="vetrina-griglia"] .tm-ev__art {
  order: -1; width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; border-radius: 0 !important; box-shadow: none !important; border: 0 !important;
}
body.tema-on[data-tm-cardfam="vetrina-griglia"] .tm-ev__testo { padding: 6px 8px 8px; }
body.tema-on[data-tm-cardfam="vetrina-griglia"] .tm-ev__titolo {
  font-size: 14px !important; font-weight: 600 !important; white-space: normal !important;
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
body.tema-on[data-tm-cardfam="vetrina-griglia"] .tm-ev__cta { display: none; }

/* ════════════════════════════════════════════════════════════
   Densità (§6) — un moltiplicatore, non trentatré schede. Ogni
   regola è combinata con la famiglia (`[data-tm-cardfam="X"]
   [data-tm-carddens="Y"]`, sullo stesso <body>): `eredita` (il
   predefinito) e le famiglie senza `card-engine.js` in quella densità
   restano quelle di sopra.
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-carddens="compatta"] .tm-ev { padding-top: 6px !important; padding-bottom: 6px !important; }
body.tema-on[data-tm-carddens="compatta"] .tm-ev__titolo { -webkit-line-clamp: 1 !important; }
body.tema-on[data-tm-carddens="compatta"] .tm-ev__compagnia,
body.tema-on[data-tm-carddens="compatta"] .tm-ev__genere { display: none !important; }
body.tema-on[data-tm-carddens="compatta"] .tm-ev__art { transform: scale(.85); }
body.tema-on[data-tm-cardfam="agenda-fitta"][data-tm-carddens="compatta"] .tm-ev__titolo { font-size: 13px !important; }

body.tema-on[data-tm-carddens="ricca"] .tm-ev { padding-top: 18px !important; padding-bottom: 18px !important; }
body.tema-on[data-tm-carddens="ricca"] .tm-ev__titolo { -webkit-line-clamp: 3 !important; }
body.tema-on[data-tm-carddens="ricca"] .tm-ev__art { transform: scale(1.15); }

/* ════════════════════════════════════════════════════════════
   12. agenda-cta — Date Led with CTA · SAFE · NUOVA (Curated Auto)

   PERCHÉ ESISTE, misurato e non supposto. Il Visual Lab
   (`docs/CURATED_AUTO_VISUAL_ENGINE_HANDOFF.md`, §«Il catalogo
   esistente») ha aperto in Chromium tutte e undici le famiglie con
   otto eventi veri e otto locandine vere. Le tre che portano una CTA
   accanto a una data — `data-guida`, `agenda-fitta`, `biglietto` —
   la rompono tutte e tre, e per la STESSA causa: la colonna della CTA
   ha una larghezza decisa dal foglio invece che dal contenuto.

     famiglia        colonna CTA   «PRENOTA ORA» ne chiede ~90px
     data-guida       36px  (un cerchio)      → 2 righe, testo tagliato
     agenda-fitta     40px                    → 2 righe, testo tagliato
     biglietto        42px  (da `max-width: 40%`) → 2 righe

   `riga-editoriale` è pulita ma NON ha nessuna CTA
   (`.tm-ev__cta { display: none }`): chi guarda l'elenco non vede
   nessun invito a prenotare. Non esisteva quindi UNA famiglia che
   desse insieme «la data guida la riga» e «la CTA funziona» — che è
   esattamente ciò che chiedono le due ricette curate più robuste
   (`agenda-curata` e `festival-saturo`).

   La correzione è una sola proprietà, ed è il motivo per cui questa
   famiglia si aggiunge invece di ritoccarne una storica: la colonna
   della CTA è `max-content`. Non una percentuale (che su una griglia
   `auto` è circolare), non un px scelto a mano (che è giusto per
   un'etichetta e sbagliato per la successiva). L'etichetta decide la
   colonna, sempre, in ogni lingua.

   ADDITIVA. Nessuna regola qui tocca un'altra famiglia, `card`
   (stile.css) o il Manuale: vive sotto `[data-tm-cardfam="agenda-cta"]`,
   un valore che nessun tema pubblicato porta.
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev {
  display: grid;
  /* Tre colonne, due dettate dal CONTENUTO. Il rail data ha un minimo
     (perché un tile più stretto di 3.25rem non legge come tile) e un
     massimo (perché la data per esteso della lista classica —
     «30/08/2026, 21:00» — altrimenti si prenderebbe mezza riga). */
  grid-template-columns:
    [data] max-content
    [testo] minmax(0, 1fr)
    [cta] max-content;
  grid-template-areas: "data testo cta" "data stato cta";
  align-items: center;
  gap: 2px 10px;
  padding: 10px;
  border-radius: 12px;
}
/* `.tm-ev .tm-ev__riga` — DISCENDENTE, non `.tm-ev__riga` da solo. Sul
   markup di `agenda`, `calendario` e `locandina` le due classi stanno
   sullo STESSO elemento (index.html): `display: contents` lì dentro
   spegne la griglia appena aperta due righe sopra, e la scheda si
   ricompone impilata — rail della data a tutta larghezza, CTA sotto.
   Misurato: `display` calcolato `contents` invece di `grid`. Il
   discendente lascia la regola dove serve (la lista classica, dove
   `.tm-ev__riga` è un figlio) e la toglie dove fa danno. */
body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev .tm-ev__riga { display: contents; }
body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev__testo { display: contents; }
body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev__meta  { display: contents; }

/* Il rail della data. `overflow-wrap: anywhere` è la rete di sicurezza
   che manca a `data-guida`: lì la data per esteso esce dalla colonna e
   si stampa SOPRA il titolo — un difetto che non si vede rileggendo il
   CSS, si vede solo aprendo la pagina con una data vera. */
body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev__data {
  grid-area: data; grid-row: 1 / span 2; align-self: center; justify-self: stretch;
  text-align: center; box-sizing: border-box;
  background: var(--tk-superficie) !important;
  color: var(--tk-primaryTesto, inherit) !important;
  border: 1px solid var(--tk-chipBordo);
  border-radius: 10px; padding: 6px 4px !important; width: auto !important;
  font-weight: 800 !important; font-size: 11.5px !important; line-height: 1.15;
  overflow-wrap: anywhere; hyphens: none;
  /* Il rail si dimensiona sul CONTENUTO fra due estremi, invece di
     prendersi una quota fissa: sul markup di `agenda` porta «30 / DOM» e
     resta stretto (il titolo si tiene i pixel), sulla lista classica
     porta la data per esteso e si ferma prima di prendersi mezza riga. */
  min-width: 3.25rem; max-width: 4.6rem;
}
/* Sul markup di `agenda` la data ha già due figli (numero e giorno):
   il numero comanda. Sulla lista classica non ce ne sono, e la regola
   semplicemente non si applica. */
body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev__data > :first-child {
  font-size: 21px; line-height: 1; display: block; font-weight: 800;
}

/* La miniatura sparisce: a 40px accanto a un rail data non aggiunge
   informazione, aggiunge rumore — è la stessa lettura che ha fatto
   togliere l'immagine a `data-guida`. */
body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev__art { display: none; }

body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev__titolo {
  grid-area: testo; align-self: end;
  font-size: 15.5px !important; font-weight: 700 !important; letter-spacing: -.01em;
  white-space: normal !important;
  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev__compagnia { display: block !important; }
body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev__genere    { display: none; }

/* La disponibilità sta SOTTO il titolo, nella sua area: è la riga due
   della colonna testo, non una pastiglia che galleggia a destra
   scollegata dal titolo che le va a capo accanto. */
body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev__stato {
  grid-area: stato; align-self: start; justify-self: start;
  background: transparent !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important;
  color: var(--tk-testoSecondario, inherit) !important; font-size: 10.5px !important;
}

/* LA CORREZIONE. La colonna è `max-content` (sopra) e qui NON si
   dichiara nessuna larghezza: l'etichetta decide. `white-space: nowrap`
   rende impossibile la seconda riga anche se qualcuno un giorno
   restringesse la colonna. */
body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev__cta {
  grid-area: cta; grid-row: 1 / span 2; align-self: center;
  display: inline-flex !important; align-items: center; justify-content: center;
  white-space: nowrap;
  min-height: 36px; padding: 0 14px !important; border-radius: 999px !important;
  font-size: 11px !important; font-weight: 700; letter-spacing: .02em;
  /* IL COLORE DELLA CTA, e perché è questa combinazione e non un'altra.
     Misurato sui token PRODOTTI dall'Automatico per trentatré proposte
     reali (non sui token grezzi di un kit: `composePalette` li riscrive,
     ed è lì che le due scelte ovvie cadono).

       · `terracotta` + `superficie` — cade. Nel percorso Automatico
         `terracotta` passa da `ensureButton`, che la spinge al buio
         finché regge il bianco: su un kit scuro finisce accanto a
         `superficie`, e la pillola diventa scura su scuro (contrasto
         misurato fino a 1.10).
       · `primary` + bianco — il TESTO è sempre a posto (`ensureButton`
         garantisce ≥ 4.5 sul bianco: minimo misurato 4.51), ma la
         PILLOLA può coincidere col fondo della scheda (`primary` contro
         `superficie`: minimo misurato 1.00). Il testo si legge e il
         pulsante non si vede.

     Si tengono quindi le due garanzie separate, ognuna dal token che la
     dà davvero: il RIEMPIMENTO con `primary` e il bianco sopra (la
     convenzione già in casa — 27 pulsanti sono `bg-theatre-primary` +
     `text-white`, e CLAUDE.md spiega perché il bianco su fondo colorato
     non è tokenizzato), e lo STACCO dalla scheda con un bordo in
     `primaryTesto`, che `composePalette` garantisce per costruzione AA
     su `superficie` (minimo misurato 4.54). Così la pillola non può
     sparire nemmeno quando il riempimento coincide col fondo. */
  background: var(--tk-primary) !important; color: white !important;
  border: 1px solid var(--tk-primaryTesto);
}

/* A 320px la colonna della CTA resta `max-content` — non si tocca — e
   a cedere è il rail, che è l'unico dei tre che può farlo senza
   perdere leggibilità. */
@media (max-width: 359px) {
  body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev {
    grid-template-columns: [data] minmax(2.8rem, 3.6rem) [testo] minmax(0, 1fr) [cta] max-content;
    gap: 2px 7px; padding: 9px 7px;
  }
  body.tema-on[data-tm-cardfam="agenda-cta"] .tm-ev__cta { padding: 0 10px !important; font-size: 10.5px !important; }
}