/* ════════════════════════════════════════════════════════════
   art-direction.css — Art Direction Engine V2

   Le regole di LINGUAGGIO delle dieci direzioni artistiche (handoff §7),
   i sei stili di barra in basso (§13.3) e i due sistemi trasversali che
   le accompagnano. Collegato DOPO stile.css e temi.css: a parità di
   specificità vince l'ultimo, e la direzione DEVE poter comandare sopra
   layout e dimensioni — è lo strato che li coordina (§D3 dell'handoff).

   REGOLE DURE, verificate da `verifica-preset.js`:
   - nessun `#rrggbb` letterale: solo `var(--tk-…)`;
   - `[data-tm-ad="nessuna"]` e `[data-tm-bn="classico"]` non compaiono in
     NESSUN selettore — sono i predefiniti, e un cliente che non ha mai
     scelto una direzione non si sposta di un pixel;
   - il blocco `.tmbn` dipinge SOLO col vocabolario sicuro di §13.4
     (terracotta, primaryTesto, textDarkTesto, superficie, bgBottom) —
     mai `primary`/`textDark`, che su un kit a tinta piena sono troppo
     vicini al fondo per staccarsi.

   `body.tema-on` non è mai attivo nel pannello admin (CLAUDE.md, «Cosa
   ritinge un kit»): ogni selettore qui sotto, per quanto largo
   (`.tm-main button`, `h1.papyrus-title`…), non tocca l'admin per
   costruzione — non serve restringerlo oltre.
   ════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   1. EDITORIALE — Editorial Culture
   Niente scatole: filetti al posto delle ombre, metadati minuscoli e
   maiuscoli, la data inline dopo il titolo.
   ──────────────────────────────────────────────────────────── */
body.tema-on[data-tm-ad="editoriale"] .tm-main { padding-inline: 26px; }
body.tema-on[data-tm-ad="editoriale"] .space-y-2 > div {
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid var(--tk-chipBordo);
  padding-block: 14px;
}
body.tema-on[data-tm-ad="editoriale"] .space-y-2 > div p.font-semibold {
  font-weight: 700;
}
body.tema-on[data-tm-ad="editoriale"] .space-y-2 > div .text-\[9px\] {
  text-transform: uppercase;
  letter-spacing: .14em;
  background: none;
  border-radius: 0;
  padding: 0;
  color: var(--tk-testoTenue);
}
body.tema-on[data-tm-ad="editoriale"] h1.papyrus-title,
body.tema-on[data-tm-ad="editoriale"] .tm-testata-hero__nome {
  letter-spacing: 0;
  text-transform: none;
}
/* La barra in basso di questa direzione è governata da `bnStile`
   (`data-tm-bn`, §13.3), mai da `data-tm-ad` direttamente: due selettori
   sulla stessa `.tmbn` sarebbero un secondo modo di dipingerla, fuori dal
   vocabolario ristretto che quel blocco garantisce. */

/* ────────────────────────────────────────────────────────────
   2. CONTEMPORANEA — Contemporary Grid
   Una griglia svizzera dietro il contenuto, nessun raggio, nessuna
   ombra, numeri di tono spaziati negativi.
   ──────────────────────────────────────────────────────────── */
body.tema-on[data-tm-ad="contemporanea"] .tm-main {
  background-image: repeating-linear-gradient(90deg, var(--tk-chipBordo) 0, var(--tk-chipBordo) 1px, transparent 1px, transparent 25%);
  background-position: 0 0;
}
body.tema-on[data-tm-ad="contemporanea"] .space-y-2 > div {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--tk-chipBordo);
}
body.tema-on[data-tm-ad="contemporanea"] .space-y-2 > div p.font-semibold {
  letter-spacing: -.03em;
}
body.tema-on[data-tm-ad="contemporanea"] h1.papyrus-title,
body.tema-on[data-tm-ad="contemporanea"] .tm-testata-hero__nome {
  letter-spacing: -.04em;
}

/* ────────────────────────────────────────────────────────────
   3. CINEMATICA — Cinematic
   Buio in sala, la locandina illuminata: nessun bordo sulle schede,
   uno scrim invece di una scatola.
   ──────────────────────────────────────────────────────────── */
body.tema-on[data-tm-ad="cinematica"] .space-y-2 > div {
  box-shadow: none;
  background: linear-gradient(180deg, transparent 60%, var(--tk-bgBottom) 100%), var(--tk-superficie);
}
body.tema-on[data-tm-ad="cinematica"] .space-y-2 > div p.font-semibold {
  text-transform: uppercase;
  letter-spacing: .02em;
}
body.tema-on[data-tm-ad="cinematica"] .tm-testata-hero::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, var(--tk-bgBottom) 100%);
  opacity: .7;
}

/* ────────────────────────────────────────────────────────────
   4. TEATRALE — Theatrical Classic
   Doppio filetto, molta aria, un ornamento fra le sezioni.
   ──────────────────────────────────────────────────────────── */
body.tema-on[data-tm-ad="teatrale"] .tm-header {
  border-bottom: 2px solid var(--tk-chipBordo);
  padding-bottom: 12px;
}
body.tema-on[data-tm-ad="teatrale"] .space-y-2 { gap: 18px; }
body.tema-on[data-tm-ad="teatrale"] .space-y-2 > div {
  padding: 18px 16px;
  box-shadow: none;
  border: 1px solid var(--tk-chipBordo);
  position: relative;
}
body.tema-on[data-tm-ad="teatrale"] .space-y-2 > div + div::before {
  content: "";
  display: block;
  position: absolute;
  top: -10px; left: 50%;
  width: 6px; height: 6px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--tk-terracotta);
}
body.tema-on[data-tm-ad="teatrale"] .space-y-2 > div p.font-semibold {
  font-weight: 500;
}

/* ────────────────────────────────────────────────────────────
   5. MANIFESTO — Manifesto
   Nessun raggio su niente, banda diagonale per «esaurito», maiuscolo
   ovunque.
   ──────────────────────────────────────────────────────────── */
body.tema-on[data-tm-ad="manifesto"] .space-y-2 > div {
  border: 2px solid var(--tk-textDark) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.tema-on[data-tm-ad="manifesto"] .space-y-2 > div p.font-semibold {
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 800;
}
body.tema-on[data-tm-ad="manifesto"] .space-y-2 > div [class*="rounded-full"] {
  border-radius: 0 !important;
  background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(0,0,0,.08) 3px 6px);
}
body.tema-on[data-tm-ad="manifesto"] h1.papyrus-title,
body.tema-on[data-tm-ad="manifesto"] .tm-testata-hero__nome {
  letter-spacing: .01em;
}

/* ────────────────────────────────────────────────────────────
   6. ESSENZIALE — Minimal Premium
   Il vuoto è il motivo: niente bordi, niente ombre, niente fondo sulle
   schede, un solo filetto fra una riga e l'altra.
   ──────────────────────────────────────────────────────────── */
body.tema-on[data-tm-ad="essenziale"] .space-y-2 { gap: 0; }
body.tema-on[data-tm-ad="essenziale"] .space-y-2 > div {
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--tk-chipBordo);
  padding-block: 20px;
}
body.tema-on[data-tm-ad="essenziale"] .space-y-2 > div:last-child { border-bottom: none; }
body.tema-on[data-tm-ad="essenziale"] .space-y-2 > div p.font-semibold { font-weight: 500; }
body.tema-on[data-tm-ad="essenziale"] .tm-main { padding-top: 30px; }

/* ────────────────────────────────────────────────────────────
   7. NATURALE — Organic
   Ombre morbide e larghe, un divisorio a onda fra un mese e l'altro.
   ──────────────────────────────────────────────────────────── */
body.tema-on[data-tm-ad="naturale"] .space-y-2 > div {
  box-shadow: 0 8px 26px rgba(15,23,42,.08) !important;
  border: none !important;
}
body.tema-on[data-tm-ad="naturale"] .space-y-2 { gap: 16px; }
body.tema-on[data-tm-ad="naturale"] .space-y-2 > div + div::before {
  content: "";
  display: block;
  position: absolute;
  width: 24px; height: 6px;
  margin: -11px auto 0;
  left: 0; right: 0;
  border-radius: 999px;
  background: var(--tk-terracotta);
  opacity: .35;
}
body.tema-on[data-tm-ad="naturale"] .space-y-2 > div { position: relative; }

/* ────────────────────────────────────────────────────────────
   8. FAMIGLIE — Playful Family
   Raggi grandi, bordi tratteggiati, un motivo a pallini dietro la
   testata.
   ──────────────────────────────────────────────────────────── */
body.tema-on[data-tm-ad="famiglie"] .space-y-2 > div {
  border-radius: 22px !important;
  border: 2px dashed var(--tk-chipBordo) !important;
  box-shadow: none !important;
}
body.tema-on[data-tm-ad="famiglie"] .tm-header {
  background-image: radial-gradient(var(--tk-terracotta) 1.4px, transparent 1.4px);
  background-size: 14px 14px;
  background-position: center top;
  opacity: 1;
}
body.tema-on[data-tm-ad="famiglie"] .space-y-2 > div span[class*="text-base"] {
  font-size: 28px;
}

/* ────────────────────────────────────────────────────────────
   9. NOTTE — Night / Music
   I due bagliori portati ad alpha alta, un filetto d'accento sotto la
   testata, schede senza bordo su fondo scuro.
   ──────────────────────────────────────────────────────────── */
body.tema-on[data-tm-ad="notte"] .tm-header {
  border-bottom: 2px solid var(--tk-terracotta);
}
body.tema-on[data-tm-ad="notte"] .space-y-2 > div {
  border: none !important;
  box-shadow: none !important;
}
body.tema-on[data-tm-ad="notte"] .space-y-2 > div p.font-semibold {
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ────────────────────────────────────────────────────────────
   10. ISTITUZIONALE — Institutional Modern
   Una chiave verticale a sinistra di ogni riga, ritmo regolare e
   prevedibile, nessuna ombra.
   ──────────────────────────────────────────────────────────── */
body.tema-on[data-tm-ad="istituzionale"] .space-y-2 { gap: 10px; }
body.tema-on[data-tm-ad="istituzionale"] .space-y-2 > div {
  box-shadow: none !important;
  border: 1px solid var(--tk-chipBordo) !important;
  border-left: 3px solid var(--tk-primary) !important;
  border-radius: 4px !important;
}

/* ════════════════════════════════════════════════════════════
   Motivi (§7, campo `motif`) applicati una volta sola, sul filo che
   apre ogni scheda dell'home — così restano un tratto della pagina,
   non un ornamento ripetuto scheda per scheda.
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-ad="editoriale"] .tm-home > .space-y-2:first-of-type,
body.tema-on[data-tm-ad="istituzionale"] .tm-home > .space-y-2:first-of-type {
  padding-top: 2px;
}


/* ════════════════════════════════════════════════════════════
   Visual Quality Polish — §6 dell'handoff dedicato: la GERARCHIA
   tipografica, non solo il font. `scalaTipo` (`data-tm-scala`) è un
   PROFILO: scala del display, titolo di sezione, titolo evento,
   metadati, CTA e navigazione insieme — undici proprietà che non sono
   indipendenti. `standard` (il predefinito) non ha nessuna regola qui:
   il rapporto display/titolo di oggi resta quello di sempre.

   Selettori, per ruolo (misure sulla colonna telefono, 448px):
     display        → header h1.papyrus-title (il nome del cliente)
     titolo sezione  → .tm-main h3
     titolo evento   → .space-y-2 p.font-semibold (la scheda evento)
     metadati        → .space-y-2 .text-\[9px\], .space-y-2 .text-\[10.5px\]
     CTA             → .tm-cta (il "Prenota ora" principale)
     navigazione     → .tmnav__testo
   ════════════════════════════════════════════════════════════ */

/* ─── editoriale — titoli ampi e stretti, corpo generoso ────── */
body.tema-on[data-tm-scala="editoriale"] header h1.papyrus-title {
  font-size: 34px !important; font-weight: 800; letter-spacing: -.025em; line-height: .98;
}
body.tema-on[data-tm-scala="editoriale"] .tm-main h3 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
body.tema-on[data-tm-scala="editoriale"] .space-y-2 p.font-semibold { font-size: 17px; font-weight: 700; }
body.tema-on[data-tm-scala="editoriale"] .space-y-2 .text-\[9px\],
body.tema-on[data-tm-scala="editoriale"] .space-y-2 .text-\[10\.5px\] {
  font-size: 10px; letter-spacing: 0; text-transform: uppercase; color: var(--tk-testoTenue);
}
body.tema-on[data-tm-scala="editoriale"] .tm-cta {
  background: none !important; color: var(--tk-primaryTesto) !important; box-shadow: none !important;
  border-bottom: 1px solid var(--tk-primaryTesto); border-radius: 0 !important; text-transform: none;
}
body.tema-on[data-tm-scala="editoriale"] .tmnav__testo { font-size: 11px; text-transform: none; }

/* ─── monumentale — grandissimo, tutto maiuscolo, molto contrasto ── */
body.tema-on[data-tm-scala="monumentale"] header h1.papyrus-title {
  font-size: 40px !important; font-weight: 800; letter-spacing: -.04em; line-height: .90;
}
body.tema-on[data-tm-scala="monumentale"] .tm-main h3 {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
}
body.tema-on[data-tm-scala="monumentale"] .space-y-2 p.font-semibold {
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
}
body.tema-on[data-tm-scala="monumentale"] .space-y-2 .text-\[9px\],
body.tema-on[data-tm-scala="monumentale"] .space-y-2 .text-\[10\.5px\] {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
}
body.tema-on[data-tm-scala="monumentale"] .tm-cta {
  border-radius: 4px !important; text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
}
body.tema-on[data-tm-scala="monumentale"] .tmnav__testo { font-size: 9px; letter-spacing: .10em; text-transform: uppercase; }

/* ─── elegante — pesi leggeri, molto tracking ────────────────── */
body.tema-on[data-tm-scala="elegante"] header h1.papyrus-title {
  font-size: 26px !important; font-weight: 400; letter-spacing: .10em; line-height: 1.1; text-transform: none;
}
body.tema-on[data-tm-scala="elegante"] .tm-main h3 {
  font-size: 11px; letter-spacing: .20em; font-weight: 500; text-transform: none;
}
body.tema-on[data-tm-scala="elegante"] .space-y-2 p.font-semibold {
  font-size: 15px; font-weight: 500; letter-spacing: .03em;
}
body.tema-on[data-tm-scala="elegante"] .space-y-2 .text-\[9px\],
body.tema-on[data-tm-scala="elegante"] .space-y-2 .text-\[10\.5px\] { font-size: 10px; letter-spacing: .06em; }
body.tema-on[data-tm-scala="elegante"] .tm-cta {
  border-radius: 2px !important; font-weight: 600; text-transform: none; letter-spacing: .04em;
}
body.tema-on[data-tm-scala="elegante"] .tmnav__testo { font-size: 10px; letter-spacing: .12em; text-transform: none; }

/* ─── sobria — misurata e prevedibile ─────────────────────────── */
body.tema-on[data-tm-scala="sobria"] header h1.papyrus-title {
  font-size: 24px !important; font-weight: 600; letter-spacing: 0; line-height: 1.15;
}
body.tema-on[data-tm-scala="sobria"] .tm-main h3 {
  font-size: 11px; letter-spacing: .08em; font-weight: 700; text-transform: uppercase;
}
body.tema-on[data-tm-scala="sobria"] .space-y-2 p.font-semibold { font-size: 14.5px; font-weight: 600; }
body.tema-on[data-tm-scala="sobria"] .space-y-2 .text-\[9px\],
body.tema-on[data-tm-scala="sobria"] .space-y-2 .text-\[10\.5px\] { font-size: 10px; letter-spacing: 0; }
body.tema-on[data-tm-scala="sobria"] .tm-cta {
  background: transparent !important; color: var(--tk-primaryTesto) !important;
  border: 1.5px solid var(--tk-primaryTesto) !important; box-shadow: none !important; font-weight: 600;
}
body.tema-on[data-tm-scala="sobria"] .tmnav__testo { font-size: 10px; text-transform: none; }

/* ─── amichevole — corpo grande, righe larghe, nessun maiuscolo ─── */
body.tema-on[data-tm-scala="amichevole"] header h1.papyrus-title {
  font-size: 27px !important; font-weight: 700; letter-spacing: 0; line-height: 1.1; text-transform: none;
}
body.tema-on[data-tm-scala="amichevole"] .tm-main h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
body.tema-on[data-tm-scala="amichevole"] .space-y-2 p.font-semibold { font-size: 16.5px; font-weight: 600; }
body.tema-on[data-tm-scala="amichevole"] .space-y-2 .text-\[9px\],
body.tema-on[data-tm-scala="amichevole"] .space-y-2 .text-\[10\.5px\] {
  font-size: 12px; text-transform: none; letter-spacing: 0;
}
body.tema-on[data-tm-scala="amichevole"] .tm-cta {
  border-radius: 999px !important; font-weight: 700; text-transform: none;
}
body.tema-on[data-tm-scala="amichevole"] .tmnav__testo { font-size: 11px; text-transform: none; }

/* ════════════════════════════════════════════════════════════
   Visual Quality Polish — C-D: il pannello SaaS condiviso.
   `.tm-pannello` (index.html, cinque contenitori dell'home, aggiunta
   additiva) era `bg-white/70 backdrop-blur-xl rounded-[24px]
   shadow-[…]` sotto TUTTE e dieci le direzioni: era quel vetro
   smerigliato arrotondato a far dire «software» a qualunque direzione,
   più delle righe che ci stanno dentro. Ogni direzione qui sotto
   sovrascrive il CONTENITORE, non solo le righe (che restano governate
   da `.space-y-2 > div` più sopra). Nessuna regola per `nessuna` (il
   predefinito): un cliente che non ha mai scelto una direzione non si
   sposta di un pixel.
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-ad="editoriale"] .tm-pannello {
  background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important; border-radius: 0 !important; padding-inline: 0 !important;
}
body.tema-on[data-tm-ad="contemporanea"] .tm-pannello {
  background: var(--tk-superficie) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important; border-radius: 0 !important; border: 1px solid var(--tk-chipBordo);
}
body.tema-on[data-tm-ad="cinematica"] .tm-pannello {
  background: var(--tk-superficie) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important; border-radius: 10px !important;
}
body.tema-on[data-tm-ad="teatrale"] .tm-pannello {
  background: var(--tk-superficie) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--tk-chipBordo); box-shadow: none !important; border-radius: 6px !important;
}
body.tema-on[data-tm-ad="manifesto"] .tm-pannello {
  background: var(--tk-superficie) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 2px solid var(--tk-textDark) !important; box-shadow: none !important; border-radius: 0 !important;
}
body.tema-on[data-tm-ad="essenziale"] .tm-pannello {
  background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important; border-radius: 0 !important; padding-inline: 0 !important;
}
body.tema-on[data-tm-ad="naturale"] .tm-pannello {
  background: var(--tk-superficie) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important; border-radius: 28px !important;
}
body.tema-on[data-tm-ad="famiglie"] .tm-pannello {
  background: var(--tk-superficie) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 2px dashed var(--tk-chipBordo) !important; box-shadow: none !important; border-radius: 26px !important;
}
body.tema-on[data-tm-ad="notte"] .tm-pannello {
  background: var(--tk-superficie) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important; border-radius: 12px !important;
}
body.tema-on[data-tm-ad="istituzionale"] .tm-pannello {
  background: var(--tk-superficie) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--tk-chipBordo); box-shadow: none !important; border-radius: 6px !important;
}

/* ════════════════════════════════════════════════════════════
   Visual Quality Polish — C-C: la presentazione dell'artwork di un
   evento (§5). `.tm-artwork` (index.html, i tre wrapper immagine
   dell'elenco: calendario, agenda, lista classica) è additiva — le
   classi Tailwind di dimensione (`w-9 h-12`, `w-7 h-9`) restano, qui si
   sovrascrivono SOLO quando `eventArtwork` non è `libero` (il
   predefinito, nessuna regola: segue la scheda scelta, come oggi).
   `!important` non è un vezzo: è la stessa tecnica già usata da
   `card:'piena'` in stile.css, e serve a battere quella stessa regola
   di scheda (qui il caso reale: un evento singolo con un artwork che
   non deve prendere il controllo cromatico della rassegna).
   ════════════════════════════════════════════════════════════ */
body.tema-on[data-tm-artwork="contenuto"] .tm-artwork {
  background: var(--tk-superficie) !important;
  border: 1px solid var(--tk-chipBordo) !important;
  box-shadow: none !important; position: static !important;
}
body.tema-on[data-tm-artwork="miniatura"] .tm-artwork {
  width: 32px !important; height: 32px !important; border-radius: 8px !important;
  box-shadow: none !important; border: none !important; position: static !important;
}
body.tema-on[data-tm-artwork="manifesto"] .tm-artwork {
  width: 40% !important; height: auto !important; aspect-ratio: 3 / 4 !important;
  border-radius: 10px !important; box-shadow: none !important; border: none !important; position: static !important;
}
body.tema-on[data-tm-artwork="manifesto"] .tm-artwork img { object-fit: cover !important; }
body.tema-on[data-tm-artwork="cornice"] .tm-artwork {
  width: 64px !important; height: 64px !important; padding: 10px !important; box-sizing: border-box !important;
  background: var(--tk-terracotta) !important; border-radius: 10px !important;
  box-shadow: none !important; border: none !important; position: static !important;
}
body.tema-on[data-tm-artwork="cornice"] .tm-artwork img { object-fit: contain !important; border-radius: 4px !important; }
body.tema-on[data-tm-artwork="pieno"] .tm-artwork {
  width: 72px !important; height: 72px !important; border-radius: 14px !important;
  box-shadow: none !important; border: none !important; position: static !important;
}
body.tema-on[data-tm-artwork="pieno"] .tm-artwork img { object-fit: cover !important; }
body.tema-on[data-tm-artwork="assente"] .tm-artwork { display: none !important; }

/* ════════════════════════════════════════════════════════════
   Visual Quality Polish — C-B: come il poster è composto (§4).
   `.tm-testata-hero` è invariato nel markup: queste regole giocano
   SOLO con le proprietà che `stile.css` già governa (aspect-ratio,
   object-fit, position, il velo `::after`), mai con la struttura.
   `standard` (il predefinito) non ha nessuna regola: il comportamento
   di oggi. Il velo scuro resta il default e si spegne solo dove il
   testo non sta più sopra il poster (§4 dell'handoff) — l'unica
   garanzia di leggibilità sulle immagini chiare.

   Nota d'ordine: questo blocco precede quello di `nomeTestata` più
   sotto. Le due dimensioni non condividono selettori identici per le
   stesse proprietà tranne dove esplicitamente coordinato (vedi i
   commenti nel blocco `nomeTestata`) — la cascata fra i due, a parità
   di specificità, decide in base all'ordine nel file: `nomeTestata`
   viene dopo, e vince dove le due si toccano davvero (il caso
   `editoriale`+`editoriale`, guardato con `:not()` più sotto).
   ════════════════════════════════════════════════════════════ */

/* esposizione — il poster come un'opera appesa: passe-partout, mai crop. */
body.tema-on[data-tm-herocomp="esposizione"] .tm-testata-hero {
  margin: 0; padding: 16px; box-sizing: border-box; border-radius: 16px;
  background: var(--tk-superficie);
}
body.tema-on[data-tm-herocomp="esposizione"]:not([data-tm-hero-modalita="riempi"]) .tm-testata-hero img { object-fit: contain; border-radius: 8px; }
body.tema-on[data-tm-herocomp="esposizione"] .tm-testata-hero::after { display: none; }
body.tema-on[data-tm-herocomp="esposizione"] .tm-testata-hero__fondale { display: none; }
body.tema-on[data-tm-herocomp="esposizione"] header { padding-top: 24px; }

/* editoriale — poster 55% + identità a fianco, come una rivista.

   Difetto trovato guardando lo screenshot (state-branding-polish/hero,
   nome «Teatro Comunale» a 320px): `.tm-testata-hero__testo` è `flex: 1`
   senza `min-width`, che di default vale `auto` — cioè il min-content
   della parola più lunga del nome. Un flex item non scende sotto quel
   valore, quindi quando lo spazio disponibile è più stretto della parola
   più lunga il testo NON va a capo: sborda, e l'`overflow: hidden` che
   la testata porta da sempre lo taglia in silenzio a metà parola
   («Teatro Comuna», l'ultima sillaba sparita senza puntini). Misurato:
   a 320px, con l'immagine al 55% e il gap di 16px, restano ~106px per il
   testo — meno dei ~120px che «Comunale» chiede da sola. Su un nome
   lungo («Associazione Culturale Armamaxa») la prima parola arriva a
   toccare il bordo dello schermo.

   Tre correzioni, nessuna delle quali rimpicciolisce il font a un punto
   ridicolo:
    1. `min-width: 0` — la correzione strutturale: permette al riquadro
       di testo di restringersi sotto il min-content, così il testo può
       davvero andare a capo invece di sbordare;
    2. sotto i 400px l'immagine cede quota al testo (55% → 44%): è lo
       stesso poster, solo con più spazio per il nome, quando lo spazio
       totale è quello che manca di più;
    3. `overflow-wrap: break-word` resta come rete di sicurezza per la
       singola parola che, anche con tutto questo, non ci sta in una
       riga sola (nomi molto lunghi in un solo blocco) — spezza la
       parola invece di lasciarla sparire nel taglio invisibile di
       `overflow: hidden`. */
body.tema-on[data-tm-herocomp="editoriale"] .tm-testata-hero {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  aspect-ratio: auto; margin: 0;
}
body.tema-on[data-tm-herocomp="editoriale"] .tm-testata-hero__fondale { display: none; }
body.tema-on[data-tm-herocomp="editoriale"] .tm-testata-hero img {
  position: static; width: 55%; height: auto; object-fit: contain; border-radius: 10px; flex-shrink: 0;
}
body.tema-on[data-tm-herocomp="editoriale"] .tm-testata-hero::after { display: none; }
body.tema-on[data-tm-herocomp="editoriale"] .tm-testata-hero__testo {
  position: static; flex: 1; min-width: 0; text-align: left; color: var(--tk-testoTitolo); text-shadow: none;
}
body.tema-on[data-tm-herocomp="editoriale"] .tm-testata-hero__nome,
body.tema-on[data-tm-herocomp="editoriale"] .tm-testata-hero__sotto {
  text-shadow: none; overflow-wrap: break-word; hyphens: auto;
}
body.tema-on[data-tm-herocomp="editoriale"] header { padding-top: 24px; }
@media (max-width: 400px) {
  body.tema-on[data-tm-herocomp="editoriale"] .tm-testata-hero img { width: 44%; }
}

/* pieno — a tutta larghezza, crop consentito, scurimento dal basso.
   `composeTokens()` non lo assegna mai quando il poster è
   `posterIntegrity:'intatta'`, ad alto rischio di crop o verticale
   (ricade su `cornice`): qui si presume lecito ritagliare. */
body.tema-on[data-tm-herocomp="pieno"] .tm-testata-hero img { object-fit: cover; }
body.tema-on[data-tm-herocomp="pieno"] .tm-testata-hero__fondale { display: none; }
body.tema-on[data-tm-herocomp="pieno"] .tm-testata-hero::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 32%, var(--tk-bgBottom) 100%);
  opacity: .85;
}

/* cornice — poster intero, mai crop, dentro una cornice a tinta piena. */
body.tema-on[data-tm-herocomp="cornice"] .tm-testata-hero {
  margin: 0; padding: 14px; box-sizing: border-box; border-radius: 14px;
  background: var(--tk-terracotta);
}
body.tema-on[data-tm-herocomp="cornice"]:not([data-tm-hero-modalita="riempi"]) .tm-testata-hero img { object-fit: contain; border-radius: 6px; }
body.tema-on[data-tm-herocomp="cornice"] .tm-testata-hero::after { display: none; }
body.tema-on[data-tm-herocomp="cornice"] .tm-testata-hero__fondale { display: none; }
body.tema-on[data-tm-herocomp="cornice"] header { padding-top: 24px; }

/* asimmetrica — poster decentrato al 62%, un terzo tipografico accanto. */
body.tema-on[data-tm-herocomp="asimmetrica"] .tm-testata-hero {
  display: flex; flex-direction: row-reverse; align-items: center; gap: 14px;
  aspect-ratio: auto; margin: 0;
}
body.tema-on[data-tm-herocomp="asimmetrica"] .tm-testata-hero__fondale { display: none; }
body.tema-on[data-tm-herocomp="asimmetrica"] .tm-testata-hero img {
  position: static; width: 62%; height: auto; object-fit: contain; border-radius: 10px; flex-shrink: 0;
}
body.tema-on[data-tm-herocomp="asimmetrica"] .tm-testata-hero::after { display: none; }
body.tema-on[data-tm-herocomp="asimmetrica"] .tm-testata-hero__testo {
  position: static; flex: 1; text-align: left; color: var(--tk-testoTitolo); text-shadow: none;
}
body.tema-on[data-tm-herocomp="asimmetrica"] .tm-testata-hero__nome,
body.tema-on[data-tm-herocomp="asimmetrica"] .tm-testata-hero__sotto { text-shadow: none; }
body.tema-on[data-tm-herocomp="asimmetrica"] header { padding-top: 24px; }

/* tipografica — il poster si riduce a una banda bassa, il nome comanda. */
body.tema-on[data-tm-herocomp="tipografica"] .tm-testata-hero {
  aspect-ratio: 21 / 9; margin: 0; border-radius: 0;
}
body.tema-on[data-tm-herocomp="tipografica"] .tm-testata-hero img { object-fit: cover; opacity: .32; }
body.tema-on[data-tm-herocomp="tipografica"] .tm-testata-hero::after {
  background: var(--tk-bgBottom); opacity: .55;
}
body.tema-on[data-tm-herocomp="tipografica"] .tm-testata-hero__testo { text-align: center; color: var(--tk-testoTitolo); text-shadow: none; }
body.tema-on[data-tm-herocomp="tipografica"] .tm-testata-hero__nome { font-size: 30px; letter-spacing: -.01em; }

/* ════════════════════════════════════════════════════════════
   Visual Quality Polish — dove sta il nome della rassegna (§9 «G»
   dell'handoff): indipendente da `heroComp`, si somma a qualunque
   composizione. `sovrapposto` (il predefinito) non ha nessuna regola:
   il nome scritto sopra l'immagine col velo di sempre.
   ════════════════════════════════════════════════════════════ */

/* nascosto — il manifesto porta già il titolo: il nome resta nel
   documento per lo screen reader, non a schermo (tecnica sr-only). */
body.tema-on[data-tm-nome="nascosto"] .tm-testata-hero__testo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* discreto — piccolo, in un angolo: l'immagine resta protagonista. */
body.tema-on[data-tm-nome="discreto"] .tm-testata-hero__testo { bottom: auto; top: 14px; left: 14px; right: auto; }
body.tema-on[data-tm-nome="discreto"] .tm-testata-hero__nome { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
body.tema-on[data-tm-nome="discreto"] .tm-testata-hero__sotto { display: none; }

/* editoriale — sotto l'immagine, allineato a sinistra, un filetto sopra.
   `overflow: visible` lascia uscire il testo, che non è più un overlay
   ma un blocco in coda: il margine sotto riserva lo spazio che
   altrimenti la testata (dimensionata da `aspect-ratio`) non darebbe.
   Guardia `:not([data-tm-herocomp="editoriale"])`: quando la direzione
   `editoriale` usa ANCHE `heroComp: 'editoriale'` (la sua stessa
   composizione a fianco), il testo è già `position: static` dentro il
   layout a due colonne — questa regola non deve competere con quella. */
body.tema-on[data-tm-nome="editoriale"]:not([data-tm-herocomp="editoriale"]) .tm-testata-hero {
  overflow: visible; margin-bottom: 44px;
}
body.tema-on[data-tm-nome="editoriale"]:not([data-tm-herocomp="editoriale"]) .tm-testata-hero::after { display: none; }
body.tema-on[data-tm-nome="editoriale"]:not([data-tm-herocomp="editoriale"]) .tm-testata-hero__testo {
  position: absolute; top: 100%; bottom: auto; left: 0; right: 0;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tk-chipBordo);
  color: var(--tk-testoTitolo); text-align: left; text-shadow: none;
  /* Il rientro orizzontale non è estetico, è correttivo. `.tm-testata-hero`
     esce al vivo dal bordo della colonna: misurato a `x = -9px` su un
     viewport da 390. Con `left: 0` e nessun padding il nome eredita quel
     -9 e la prima lettera finisce fuori campo — «eatro Comunale» su nove
     locandine su undici. I 20px sono gli stessi di `separato`, che per
     questo non ha mai avuto il difetto. */
  padding-left: 20px; padding-right: 20px;
}
body.tema-on[data-tm-nome="editoriale"] .tm-testata-hero__nome,
body.tema-on[data-tm-nome="editoriale"] .tm-testata-hero__sotto { text-shadow: none; }

/* dominante — grande e deciso: il nome È l'identità. */
body.tema-on[data-tm-nome="dominante"] .tm-testata-hero__nome { font-size: 34px; font-weight: 900; letter-spacing: -.01em; }
body.tema-on[data-tm-nome="dominante"] .tm-testata-hero::after { opacity: .82; }

/* separato — fascia propria sopra l'immagine, sfondo pieno: logo e
   nome non si sovrappongono a nulla (niente testo su foto).

   Difetto trovato guardando lo screenshot (poster 02.webp, proposta
   «Premium Silenzioso»): un alone scuro sfocato dietro «Teatro di
   Prova», su una fascia CHIARA con testo scuro. `text-shadow: none` qui
   sopra è sulla fascia (`__testo`), non su `.tm-testata-hero__nome` —
   che porta la SUA propria dichiarazione (l'ombra bianca-su-foto della
   testata base, `0 2px 14px rgba(0,0,0,.5)`). `text-shadow` è
   ereditabile, ma un elemento con una dichiarazione propria non eredita
   mai dal genitore: azzerarlo sul genitore non tocca il figlio. Stesso
   difetto per `.tm-testata-hero__sotto` se non fosse già coperto due
   righe sotto — `.tm-testata-hero__nome` no. */
body.tema-on[data-tm-nome="separato"] .tm-testata-hero__testo {
  bottom: auto; top: 0; left: 0; right: 0; background: var(--tk-superficie);
  color: var(--tk-testoTitolo); padding: 14px 20px; text-shadow: none;
}
body.tema-on[data-tm-nome="separato"] .tm-testata-hero__nome,
body.tema-on[data-tm-nome="separato"] .tm-testata-hero__sotto { text-shadow: none; }
body.tema-on[data-tm-nome="separato"] .tm-testata-hero::after { display: none; }

/* Automatico Pro keeps the existing renderer, but its authored hierarchy is
   visibly content-first on small screens and never relies on the fixed legacy
   toolbar.  Text on themed surfaces uses the contrast-paired token instead of
   Tailwind's unthemed stone ramp. Placed before §13.3 (rather than after, where
   it was first authored) because verifica-preset.js scans everything between
   the first `.tmbn` selector and the end of the file for the bottom-bar's
   restricted token vocabulary — this block uses --tk-chipBordo, which is safe
   here (it never paints `.tmbn`) but would trip that guard were it left after
   the barra-in-basso section. */
body.tema-on[data-theme-source="auto-pro"] [data-detail-section] .text-stone-500,
body.tema-on[data-theme-source="auto-pro"] [data-detail-section] .text-stone-600,
body.tema-on[data-theme-source="auto-pro"] [data-detail-section] .text-stone-700,
body.tema-on[data-theme-source="auto-pro"] [data-detail-section] .text-stone-400,
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] .text-stone-500,
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] .text-stone-600,
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] .text-stone-700,
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] .text-stone-400,
/* `.text-theatre-terracotta`/`.text-theatre-primary` resolve from the
   tenant's own brand-secondary/brand-primary palette, tuned for the white
   cards Automatico shows them on. Pro's surfaces can be dark for the same
   tenant, and nothing guarantees the brand accent still reads against a
   dark --tk-superficie — it did not for the demo palettes, which is why the
   organiser subtitle, the booking heading and the confirmation code were
   unreadable. Same contrast-paired token as everything else in this block. */
body.tema-on[data-theme-source="auto-pro"] [data-detail-section] .text-theatre-terracotta,
body.tema-on[data-theme-source="auto-pro"] [data-detail-section] .text-theatre-primary,
body.tema-on[data-theme-source="auto-pro"] [data-booking-section] .text-theatre-primary,
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] .text-theatre-primary,
body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] .text-theatre-terracotta,
body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] .text-theatre-primary {
  color: var(--tk-textDarkTesto) !important;
}
/* The "festival" quick-action circle (POSIZIONE/PREZZI) paints
   background: terracotta, color: superficie -- outside the safe
   (bgBottom|superficie -> primaryTesto|textDarkTesto|terracotta) pairing
   documented above the ten nav families, because `superficie` here is
   playing foreground instead of background AND `terracotta` is playing
   background instead of foreground. On a light kit that's close enough to
   pass; on a dark/saturated kit `superficie` is itself dark, so a dark
   glyph landed on the terracotta circle, which independent review
   confirmed was "near-invisible". Swapping only the foreground to
   `primaryTesto` (kept as a `!important` override for one build) turned out
   to still fail real WCAG contrast math on two of three demo kits --
   `terracotta` is guaranteed safe as a FOREGROUND against bgBottom/
   superficie, never verified as a background for any foreground token. Use
   the "TENUE" scheme instead (background: superficie, color: primaryTesto)
   -- an actually-documented, contract-guaranteed pair -- rather than
   inventing a new one and hoping. Verified: contrastRatio(primaryTesto,
   superficie) >= 3:1 on all three demo tenants (Automatico Pro remediation,
   Phase I contrast check). */
body.tema-on[data-theme-source="auto-pro"] .tmnav__cerchio {
  background: var(--tk-superficie) !important;
  color: var(--tk-primaryTesto) !important;
}
/* `.tm-cta` (the detail-page primary "PRENOTA ORA") never consumed the
   `ctaStyle` token at all -- only the booking form's own submit button did
   (`[data-tm-cta="outline"] form button[type=submit]`). It is instead
   governed by `scalaTipo`, and the "sobria" variant (il-posto-delle-favole's
   real generated value) makes it a transparent outline with no shadow.
   Pro's own generator already sets `ctaStyle: 'pieno'` specifically so "one
   consistent, solid fill across tenants" isn't a per-tenant accident of
   which typography scale a recipe happened to land on -- independent review
   confirmed the outline button lost visual hierarchy to an adjacent status
   chip on exactly this tenant. Force the fill for Pro regardless of scala. */
body.tema-on[data-theme-source="auto-pro"] .tm-cta {
  background: var(--tk-primary) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18) !important;
}
/* Only "sobria" and "editoriale" re-paint `.tm-cta`'s text color (both to
   `primaryTesto`, tuned as an outline color against bgBottom/superficie --
   never verified as a foreground against a solid `--tk-primary` fill, the
   fill this rule just forced). `primary` is documented elsewhere in this
   codebase as always dark enough to carry white text (the ORIGINAL markup's
   own `bg-theatre-primary text-white`, before any scala override, and the
   contrast verifica-temi.js itself enforces for every real kit) -- so restore
   that same white, for these two scala values only. Not written here:
   verifica-preset.js bans any literal `#rrggbb` in this file. stile.css
   already carries the same literal in other force-overrides (§ file header),
   so the rule lives there instead, at higher specificity than either scala
   selector so file load order can't matter. */
body.tema-on[data-theme-source="auto-pro"] [data-detail-section] .text-xs,
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] label {
  font-family: ui-sans-serif, system-ui, sans-serif;
}
body.tema-on[data-theme-source="auto-pro"] [data-detail-section] :is(.bg-white, .bg-stone-100),
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] :is(.bg-white, .bg-stone-100),
body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] :is(.bg-white, .bg-stone-50\/50, .bg-stone-50) {
  color: var(--tk-textDarkTesto);
}
body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] {
  color: var(--tk-textDarkTesto);
  font-family: ui-sans-serif, system-ui, sans-serif;
}
body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] .font-mono,
body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] .font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif;
}
body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] > :is(div, p) {
  border-color: var(--tk-chipBordo);
}
body.tema-on[data-theme-source="auto-pro"] [data-pro-receipt] [class*="text-stone-"] {
  color: var(--tk-textDarkTesto) !important;
}
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] :is(label, [data-booking-group-header] p),
body.tema-on[data-theme-source="auto-pro"] ol[aria-label^="Percorso"] li {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
/* The step chips (`ol[aria-label^="Percorso"] li`) carry no text-color class
   at all in the markup — they inherit whatever the ancestor sets, tuned for
   the `bg-white` card the runtime theme engine repaints dark on Pro's
   surfaces. Without an explicit color they stayed dark-on-dark. */
body.tema-on[data-theme-source="auto-pro"] ol[aria-label^="Percorso"] li {
  color: var(--tk-textDarkTesto);
}
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] label {
  color: var(--tk-textDarkTesto) !important;
  font-size: max(12px, .75rem);
}
body.tema-on[data-theme-source="auto-pro"] .tm-home :is(button, a),
body.tema-on[data-theme-source="auto-pro"] [data-detail-section] :is(button, a),
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] :is(button, a) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.tema-on[data-theme-source="auto-pro"]:not([data-tm-nav="classico"]) .tmnav__testo,
body.tema-on[data-theme-source="auto-pro"] .tm-ev__titolo,
body.tema-on[data-theme-source="auto-pro"] .tm-ev__compagnia,
body.tema-on[data-theme-source="auto-pro"] .tm-ev__stato span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  max-width: 100%;
}
body.tema-on[data-theme-source="auto-pro"] .tmnav {
  width: 100%;
}
body.tema-on[data-theme-source="auto-pro"] .tmnav__voce {
  flex: 0 1 auto;
  min-width: 76px;
}
body.tema-on[data-theme-source="auto-pro"] .tm-ev__titolo {
  display: block !important;
  line-height: 1.25 !important;
}
/* Several heroComp choices (galleria, immersiva…) paint `.tm-testata-hero__fondale`
   behind a contained poster: a blurred, scaled-up duplicate of the same image,
   filling the gutters either side. It reads fine on a real high-resolution
   photo; on the low-resolution demo posters it is a smeared, heavily-pixelated
   mess framing an already-small clear image. Pro suppresses it in favour of
   the plain dark surface already behind the hero — the same treatment
   esposizione/editoriale/pieno/cornice/asimmetrica already use. */
body.tema-on[data-theme-source="auto-pro"] .tm-testata-hero__fondale {
  display: none !important;
}
/* event-cards.css (loaded after this file) gives nearly every one of its
   eleven card families its own `.tm-ev__titolo` truncation rule — e.g.
   agenda-fitta's `white-space: nowrap !important` and the density block's
   `-webkit-line-clamp: 1 !important` — each at the exact same specificity as
   the reset above, so the later file kept winning ties and re-clipped titles
   like "La notte delle storie · replica 2" to "La notte delle stori…". Two
   extra attribute selectors (matching what every family/density rule keys
   on, whatever its value) outweigh all of them regardless of file order. */
body.tema-on[data-theme-source="auto-pro"][data-tm-cardfam][data-tm-carddens] .tm-ev__titolo {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}
body.tema-on[data-theme-source="auto-pro"] .tm-ev__riga {
  align-items: flex-start;
}
/* Pro desktop reserves the first viewport for both identity and conversion.
   `contain` here ("keep the whole poster visible, just cap the box") reads
   fine for a landscape source close to the box's own wide-short ratio, but a
   portrait or square source shrinks to a narrow strip with the rest of the
   box left as flat, uncovered surface -- exactly the "empty band, name
   floating disconnected below it" defect a real independent review flagged.
   `cover` (identical to what mobile already does successfully, and to what
   the legacy Automatico hero does for this same asset) always fills the box,
   at the cost of cropping the source's edges rather than letterboxing it --
   the right trade for a fixed-height identity band. Bias the crop upward:
   event photography puts faces/subjects in the upper two-thirds far more
   often than centered, and centering vertically tends to crop through heads
   on a short box.
   Placed here (before §13.3) rather than after, where it was first authored:
   verifica-preset.js scans everything between the first `.tmbn` selector and
   the end of the file for the bottom-bar's restricted token vocabulary, and
   the low-resolution hero fallback below paints with --tk-bgTop/--tk-bgBottom
   -- safe here (it never paints `.tmbn`) but trips that guard if left after
   the barra-in-basso section, same reasoning as the block above. */
@media (min-width: 769px) {
  body.tema-on[data-theme-source="auto-pro"] .tm-testata-hero {
    height: min(28vh, 260px) !important;
    max-height: min(28vh, 260px) !important;
    aspect-ratio: auto !important;
  }
  body.tema-on[data-theme-source="auto-pro"] .tm-testata-hero > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 30% !important;
  }
  /* Some sources are not merely a different shape but genuinely too small
     to fill a full-bleed band at any reasonable scale (the real asset that
     exposed this whole class of defect is 34x46px -- `cover` at full width
     is a ~40x stretch, all visible pixelation, no amount of object-position
     fixes that). `data-tm-hero-bassa-risoluzione` is set from the real,
     measured natural size of whichever file actually loaded (js/app.js
     `onHeroTestataCaricata`), never a per-tenant guess. Below that
     threshold: stop stretching it and frame a smaller, undistorted copy
     over a brand-derived gradient, the same trade a print poster makes when
     the only source photo available is small. */
  body.tema-on[data-theme-source="auto-pro"][data-tm-hero-bassa-risoluzione="1"] .tm-testata-hero {
    height: 220px !important;
    max-height: 220px !important;
    background: linear-gradient(160deg, var(--tk-bgTop), var(--tk-bgBottom)) !important;
  }
  body.tema-on[data-theme-source="auto-pro"][data-tm-hero-bassa-risoluzione="1"] .tm-testata-hero > img {
    width: auto !important;
    height: 68% !important;
    max-width: 42% !important;
    object-fit: contain !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
  }
  /* `.tm-ev__art` means something different in every card family: a small
     inline thumbnail in agenda-cta (w-9 h-12, ~36x48px), and the entire
     full-bleed background poster itself in the "locandina" family (the
     <img> IS `.tm-ev__art`, with the card's whole text+status+CTA overlaid
     on top of it via `.tm-locandina-testo`). A blanket `height:120px` here
     previously shrank the locandina poster to a 120px band while its
     overlaid text stayed positioned for a full-height card -- the CTA
     rendered far below the visible poster, effectively missing. Fixed by
     removing the blanket override rather than special-casing the family:
     each card family already sizes its own artwork correctly, and only
     agenda-cta's genuinely small default (36x48px, tuned for a dense list)
     needed a Pro-specific bump -- scoped to the class the row-card variants
     actually use for a wide desktop composition instead of `.tm-ev__art` in
     general. */
  body.tema-on[data-theme-source="auto-pro"] .tm-home .tm-ev__riga .tm-ev__art.w-7,
  body.tema-on[data-theme-source="auto-pro"] .tm-home .tm-ev__riga .tm-ev__art.w-9 {
    width: 64px !important;
    height: 64px !important;
  }
  body.tema-on[data-theme-source="auto-pro"] .tm-home .tm-ev__riga .tm-ev__art.w-7 img,
  body.tema-on[data-theme-source="auto-pro"] .tm-home .tm-ev__riga .tm-ev__art.w-9 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  body.tema-on[data-theme-source="auto-pro"] .tm-home .tm-ev__cta {
    display: block !important;
  }
}
/* The event-detail hero image is the same base-product `aspect-video` +
   `object-cover` markup Automatico also uses (untouched here), so a
   low-resolution source is stretched exactly as wide as the hero was
   before the fix above -- same asset, same defect, same fix: stop
   stretching it, frame a smaller undistorted copy over a brand backdrop.
   Scoped to Pro only; Automatico/Manuale keep their existing behaviour. */
body.tema-on[data-theme-source="auto-pro"][data-tm-hero-bassa-risoluzione="1"] [data-detail-section] .aspect-video {
  background: linear-gradient(160deg, var(--tk-bgTop), var(--tk-bgBottom)) !important;
}
body.tema-on[data-theme-source="auto-pro"][data-tm-hero-bassa-risoluzione="1"] [data-detail-section] .aspect-video img {
  width: 46% !important;
  height: 62% !important;
  object-fit: contain !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
}
@media (max-width: 640px) {
  body.tema-on[data-theme-source="auto-pro"] .tm-testata-hero {
    margin-left: -12px;
    margin-right: -12px;
    border-radius: 0 0 28px 28px;
  }
  body.tema-on[data-theme-source="auto-pro"] .tm-ev {
    border-left: 4px solid var(--tk-terracotta);
  }
  /* The step chips (`ol[aria-label^="Percorso"]`) already ship as a 2-column
     grid (`grid-cols-2` in the markup) that fits 390px fine once label
     contrast and wrapping are fixed elsewhere in this file. Forcing a single
     column here only doubled the stepper's height and pushed booking content
     further down the page for no legibility gain — reviewed and confirmed a
     real regression, not a Pro improvement, so it is not reintroduced. */

  /* Visual Quality Pass — P2 «programme-grid»: la locandina è una fascia
     di supporto, non un francobollo `contain` fra due bande morte di
     `--tk-superficie`. Cover, altezza contenuta, e l'elenco attacca
     subito. Il `:not(...riempi)` cede alla regolazione manuale
     dell'inquadratura, come le quattro composizioni di heroComp. */
  body.tema-on[data-theme-source="auto-pro"][data-tm-desktop="griglia"]:not([data-tm-hero-modalita="riempi"]) .tm-testata-hero {
    aspect-ratio: auto !important;
    height: 150px !important;
    max-height: 150px !important;
  }
  body.tema-on[data-theme-source="auto-pro"][data-tm-desktop="griglia"]:not([data-tm-hero-modalita="riempi"]) .tm-testata-hero > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 32% !important;
  }
  /* Banner netto, non una pastiglia: niente raggio grande in fondo, e il
     nome «separato» come masthead solido alla base della fascia invece di
     una striscia bianca che mangia i primi 55px del poster. */
  body.tema-on[data-theme-source="auto-pro"][data-tm-desktop="griglia"] .tm-testata-hero {
    border-radius: 0 0 14px 14px !important;
    margin-top: 16px !important;
  }
  body.tema-on[data-theme-source="auto-pro"][data-tm-desktop="griglia"] .tm-testata-hero__testo {
    top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    padding: 8px 16px 9px !important;
  }
  body.tema-on[data-theme-source="auto-pro"][data-tm-desktop="griglia"] .tm-testata-hero__nome {
    font-size: 21px !important; line-height: 1.1 !important;
  }
  body.tema-on[data-theme-source="auto-pro"][data-tm-desktop="griglia"] .tm-home {
    margin-top: 4px;
  }
  /* Meno vuoto fra le pastiglie e l'elenco: su «programme-grid» il
     programma è il protagonista e deve attaccare presto. */
  body.tema-on[data-theme-source="auto-pro"][data-tm-desktop="griglia"] .tmnav {
    margin-bottom: 10px;
  }
  /* Visual Quality Pass — P1 «editorial-stage»: ritmo verticale editoriale.
     Automatico impila le schede fitte; qui respirano, con un filetto di
     stacco fra una e l'altra invece del bordo-scheda. */
  body.tema-on[data-theme-source="auto-pro"][data-tm-cardfam="rivista"] .tm-home .tm-ev + .tm-ev {
    margin-top: 26px;
  }
}

/* ════════════════════════════════════════════════════════════
   §13.2bis — Automatico Pro: superfici e contrasto (Visual Quality Pass).
   La differenziazione Auto/Pro era già PASS. Questo blocco chiude la
   QUALITÀ su un kit scuro/saturo, dove i controlli erano riquadri dello
   STESSO colore del loro contenitore, separati solo da un bordo quasi
   invisibile: pastiglie «numero spettatori», chip di percorso, cerchi
   delle azioni rapide, schede evento. Vocabolario ammesso su kit chiaro
   E scuro: `primaryTesto`/`textDarkTesto` (AA su bgBottom e superficie
   per contratto), `chipSfondo`/`chipBordo` (lo stacco del riquadro).
   Tutto scopato a `[data-theme-source="auto-pro"]`.
   ════════════════════════════════════════════════════════════ */

/* La locandina di Pro non si infila mai sotto la testata: la fascia del
   nome (separato/discreto/editoriale) le è ancorata al `top` e verrebbe
   tagliata — misurato su P2/P3, «Casa Aurora» usciva mezzo fuori campo.
   Il margine orizzontale al vivo resta (regole più sotto e sopra). */
body.tema-on[data-theme-source="auto-pro"] .tm-testata-hero {
  margin-top: 0;
}

/* Cerchi delle azioni rapide: un bordo li rende visibili anche quando lo
   sfondo del cerchio (`superficie`) coincide quasi col fondo pagina. */
body.tema-on[data-theme-source="auto-pro"] .tmnav__cerchio {
  border: 1.5px solid var(--tk-primaryTesto) !important;
}
body.tema-on[data-theme-source="auto-pro"] .tmnav__testo {
  color: var(--tk-textDarkTesto) !important;
}

/* Schede evento in home: superficie dichiarata + bordo + ombra, così non
   si fondono col fondo su un kit scuro. */
body.tema-on[data-theme-source="auto-pro"] .tm-home .tm-ev {
  background: var(--tk-superficie);
  border: 1px solid var(--tk-chipBordo);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
}

/* Pastiglie «numero spettatori» e ogni bottone di scelta del form: da
   non selezionato il fill è `superficie` (= il fondo della card che lo
   contiene), quindi lo distingue solo il bordo. Bordo in `primaryTesto`.
   Il selezionato resta `bg-theatre-primary` + testo bianco dal markup. */
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] button.border {
  border-color: var(--tk-primaryTesto) !important;
  border-width: 1.5px !important;
}
body.tema-on[data-theme-source="auto-pro"] form[data-booking-flow] select {
  border-color: var(--tk-primaryTesto) !important;
  color: var(--tk-textDarkTesto) !important;
}

/* Chip di percorso (`1. Biglietti…`): nessun colore di sfondo nel markup,
   ereditavano il fondo scuro della card e sparivano. */
body.tema-on[data-theme-source="auto-pro"] ol[aria-label^="Percorso"] li {
  background: var(--tk-chipSfondo);
  border: 1px solid var(--tk-chipBordo);
  border-radius: 10px;
  padding: 8px 10px;
}

/* P3 «visual-shelves»: `discreto` è l'UNICA àncora d'identità su una
   pagina tutta locandine scure, e a 12px bianco su mat scuro si perdeva.
   Resta discreto — un piccolo cartiglio d'angolo — ma diventa leggibile:
   fondo `superficie`, bordo `chipBordo`, testo `testoTitolo`. */
body.tema-on[data-theme-source="auto-pro"][data-tm-nome="discreto"] .tm-testata-hero__testo {
  top: 12px; left: 12px; right: auto;
  background: var(--tk-superficie);
  border: 1px solid var(--tk-chipBordo);
  border-radius: 8px;
  padding: 5px 10px;
}
body.tema-on[data-theme-source="auto-pro"][data-tm-nome="discreto"] .tm-testata-hero__nome {
  font-size: 13px !important; font-weight: 700 !important;
  color: var(--tk-testoTitolo) !important; text-shadow: none !important;
}

/* P1 «editorial-stage»: la CTA di `rivista` è di famiglia un link di testo.
   Sull'unica scheda di una home editoriale è la sola call-to-action, e un
   link sottolineato piccolo non regge quel ruolo — indipendent review:
   «meno evidente della status chip accanto». Un vero bottone pieno, e i
   metadati/stato allineati a sinistra come il titolo, non centrati. */
body.tema-on[data-theme-source="auto-pro"][data-tm-cardfam="rivista"] .tm-ev__testo {
  padding: 14px 16px 16px !important;
  align-items: flex-start;
  text-align: left;
}
body.tema-on[data-theme-source="auto-pro"][data-tm-cardfam="rivista"] .tm-ev__stato {
  align-self: flex-start;
  margin: 4px 0 0 !important;
}
body.tema-on[data-theme-source="auto-pro"][data-tm-cardfam="rivista"] .tm-ev__cta {
  display: inline-flex !important;
  width: auto !important;
  margin-top: 12px !important;
  padding: 9px 20px !important;
  background: var(--tk-primary) !important;
  color: white !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .06em;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16) !important;
}

/* ════════════════════════════════════════════════════════════
   §13.3 — I sei stili di barra in basso. Additivo: le classi Tailwind
   di sempre restano tutte sui quattro `<button>`; con `bnStile:
   'classico'` (il default) nessuna regola qui sotto si applica e la
   barra è identica al bit — la stessa tecnica di `.tmnav`.
   ════════════════════════════════════════════════════════════ */

/* mono — un solo colore, l'azione attiva in evidenza. */
body.tema-on[data-tm-bn="mono"] .tmbn { background: var(--tk-superficie); }
body.tema-on[data-tm-bn="mono"] .tmbn__cerchio {
  background: var(--tk-superficie) !important;
  border: 1px solid var(--tk-primaryTesto);
  color: var(--tk-primaryTesto) !important;
  opacity: .6;
}
body.tema-on[data-tm-bn="mono"] .tmbn__voce[aria-current="true"] .tmbn__cerchio {
  background: var(--tk-primaryTesto) !important;
  border-color: var(--tk-primaryTesto);
  color: var(--tk-primaryTesto) !important;
  opacity: 1;
}
/* Il testo usa lo stesso token del cerchio (mai un secondo, fuori dal
   vocabolario sicuro §13.4): l'opacità distingue l'azione attiva dalle
   altre, non un colore diverso. */
body.tema-on[data-tm-bn="mono"] .tmbn__testo { color: var(--tk-primaryTesto) !important; opacity: .6; }
body.tema-on[data-tm-bn="mono"] .tmbn__voce[aria-current="true"] .tmbn__testo { opacity: 1; }

/* contorno — cerchi vuoti col segno dentro, neutro. */
body.tema-on[data-tm-bn="contorno"] .tmbn { background: var(--tk-superficie); }
body.tema-on[data-tm-bn="contorno"] .tmbn__cerchio {
  background: transparent !important;
  border: 1.5px solid var(--tk-primaryTesto);
  color: var(--tk-primaryTesto) !important;
}
body.tema-on[data-tm-bn="contorno"] .tmbn__voce[aria-current="true"] .tmbn__cerchio {
  border-width: 2px;
  background: var(--tk-bgBottom) !important;
}
body.tema-on[data-tm-bn="contorno"] .tmbn__testo {
  color: var(--tk-primaryTesto) !important;
  font-size: 9px;
  letter-spacing: .08em;
}

/* pieno — sagome piene sull'accento della direzione. */
body.tema-on[data-tm-bn="pieno"] .tmbn { background: var(--tk-superficie); }
body.tema-on[data-tm-bn="pieno"] .tmbn__cerchio {
  background: var(--tk-bgBottom) !important;
  color: var(--tk-primaryTesto) !important;
}
body.tema-on[data-tm-bn="pieno"] .tmbn__voce[aria-current="true"] .tmbn__cerchio {
  background: var(--tk-terracotta) !important;
  color: var(--tk-superficie) !important;
}
body.tema-on[data-tm-bn="pieno"] .tmbn__testo { color: var(--tk-textDarkTesto) !important; }

/* tenue — nessun cerchio: solo il segno, discreto. */
body.tema-on[data-tm-bn="tenue"] .tmbn { background: var(--tk-superficie); }
body.tema-on[data-tm-bn="tenue"] .tmbn__cerchio {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--tk-primaryTesto) !important;
  opacity: .6;
}
body.tema-on[data-tm-bn="tenue"] .tmbn__voce[aria-current="true"] .tmbn__cerchio {
  color: var(--tk-primaryTesto) !important;
  border-bottom: 2px solid var(--tk-primaryTesto);
  border-radius: 0;
  opacity: 1;
}
body.tema-on[data-tm-bn="tenue"] .tmbn__testo { color: var(--tk-primaryTesto) !important; opacity: .6; font-size: 9px; }
body.tema-on[data-tm-bn="tenue"] .tmbn__voce[aria-current="true"] .tmbn__testo { opacity: 1; }

/* scuro — fondo scuro, segni chiari. Notturna.
   Nota: la tabella §13.3 dell'handoff indicava `textDark` come sfondo —
   corretto qui a `bgBottom`, l'unico dei due nel vocabolario sicuro
   (§13.4/§17): sulle direzioni che usano davvero questo stile
   (cinematica, notte) `bgBottom` è già scuro per costruzione (kit
   `notte`/`profondo`), quindi il risultato visivo è lo stesso voluto
   dalla tabella, ma senza il token che il quality gate boccia. */
body.tema-on[data-tm-bn="scuro"] .tmbn {
  background: var(--tk-bgBottom);
  border-top-color: transparent;
}
body.tema-on[data-tm-bn="scuro"] .tmbn__cerchio {
  background: transparent !important;
  color: var(--tk-superficie) !important;
  opacity: .62;
}
body.tema-on[data-tm-bn="scuro"] .tmbn__voce[aria-current="true"] .tmbn__cerchio {
  background: var(--tk-terracotta) !important;
  color: var(--tk-superficie) !important;
  opacity: 1;
}
body.tema-on[data-tm-bn="scuro"] .tmbn__testo { color: var(--tk-superficie) !important; opacity: .7; }
body.tema-on[data-tm-bn="scuro"] .tmbn__voce[aria-current="true"] .tmbn__testo { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body.tema-on[data-tm-bn] .tmbn__cerchio { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   ULTIMATE POLISH — I TRATTAMENTI DELLA LOCANDINA (§7/§8)

   IL DIFETTO CHE CHIUDONO, misurato e non supposto. Le 33 proposte vere
   sulle 11 locandine reali (visual-lab-output/ultimate-polish/baseline/)
   mostravano 33 volte su 33 il poster dentro un rettangolo di
   `--tk-superficie` o `--tk-terracotta`. La causa non era il colore di
   quel rettangolo — era il suo RAPPORTO: `heroAltezza` ne offre quattro
   (21/9, 1/1, 4/3, 3/4), le locandine vere ne hanno undici diversi, e
   `object-fit: contain` lasciava sempre due bande. Su 07.jpeg (banner
   2.98:1 dentro 2.33:1) e 10.jpg (1.33:1 dentro 1:1) c'era più
   superficie colorata che immagine.

   `--tm-hero-ar` porta il rapporto VERO del file (app.js,
   `heroTestataStile`): con quello il riquadro È il poster, le bande non
   esistono, e il passe-partout — dove una ricetta lo vuole — torna a
   essere una cornice uniforme invece di uno sbilanciamento.

   Le regole stanno IN CODA al file di proposito: `heroComp` è governato
   da questo foglio già più sopra, e a parità di specificità vince
   l'ultimo. Un blocco inserito a metà file resterebbe scavalcato dalle
   regole originali della stessa dimensione.
   ════════════════════════════════════════════════════════════ */

/* ─── §15: LA SCELTA MANUALE HA LA PRECEDENZA ─────────────────
   I trattamenti prendono il rapporto vero del file e mostrano la
   locandina intera. Ma se qualcuno apre «Regola inquadratura» nello
   Studio e sceglie di ritagliare (`heroModalita: 'riempi'`), quella
   scelta deve vincere — di qui la guardia
   `:not([data-tm-hero-modalita="riempi"])` su ogni regola di rapporto e
   di `object-fit`, qui e sulle due composizioni storiche più sopra.
   Non è pignoleria di specificità: con un riquadro che ha ESATTAMENTE il
   rapporto del poster, `cover` e `contain` danno lo stesso risultato e
   non c'è niente da ritagliare. Sotto `riempi` il riquadro torna quello
   di `heroAltezza` (stile.css) — un rapporto DIVERSO da quello del file —
   e solo lì trascinamento e zoom hanno un effetto visibile.
   ─────────────────────────────────────────────────────────── */

/* galleria — la locandina e basta: al vivo, nel suo formato, senza
   riquadro. Il fondale sfocato resta acceso per gli slivers residui del
   clamp [0.75, 2.6], così anche lì non compare mai una tinta piatta.

   `margin-top: 0` e non il `-40px` di `stile.css`: quel negativo tira la
   testata SOTTO la riga del selettore lingua. Col riquadro di prima non
   si vedeva (il poster stava dentro un box con padding), ma qui il
   poster è al vivo e il negativo gli mangia i primi 40px — misurato su
   01.jpg, dove spariva la prima riga del titolo. Il bordo che conta è
   quello laterale, e quello resta al vivo. */
body.tema-on[data-tm-herocomp="galleria"] .tm-testata-hero {
  margin: 0 -24px 0; padding: 0; border-radius: 0; background: var(--tk-bgBottom);
}
body.tema-on[data-tm-herocomp="galleria"]:not([data-tm-hero-modalita="riempi"]) .tm-testata-hero {
  aspect-ratio: var(--tm-hero-ar, 4 / 3);
}
body.tema-on[data-tm-herocomp="galleria"] header { padding-top: 24px; }
body.tema-on[data-tm-herocomp="galleria"]:not([data-tm-hero-modalita="riempi"]) .tm-testata-hero img { object-fit: contain; border-radius: 0; }
body.tema-on[data-tm-herocomp="galleria"] .tm-testata-hero__fondale { display: block; opacity: .5; }
body.tema-on[data-tm-herocomp="galleria"] .tm-testata-hero::after { display: none; }

/* esposizione — invariata nell'intenzione (il passe-partout), corretta
   nel rapporto: il mat è ora uniforme sui quattro lati invece di essere
   due bande larghe da una parte e due sottili dall'altra. */
body.tema-on[data-tm-herocomp="esposizione"]:not([data-tm-hero-modalita="riempi"]) .tm-testata-hero {
  aspect-ratio: var(--tm-hero-ar, 4 / 3);
}

/* cornice — stessa correzione, con l'accento al posto della superficie.
   Senza, il passe-partout a tinta piena resta lo sbilanciamento e non
   l'intenzione. */
body.tema-on[data-tm-herocomp="cornice"]:not([data-tm-hero-modalita="riempi"]) .tm-testata-hero {
  aspect-ratio: var(--tm-hero-ar, 4 / 3);
}

/* immersiva — la locandina SOSPESA NELLA PROPRIA LUCE: il riquadro è più
   alto del file, e il di più non è una tinta piatta ma la locandina
   stessa, sfocata e allargata. Il poster non tocca mai un bordo netto e
   non viene mai tagliato.

   DUE STESURE BOCCIATE PRIMA DI QUESTA, entrambe guardando:

    1. `aspect-ratio: 4/5` + `object-fit: cover` sul punto focale.
       Cinematografica su una fotografia (10.jpg, la sala del Teatro
       Verdi), distruttiva su qualunque manifesto con del testo: 02.webp
       «respIRA» ridotto a «spIRA», 07.jpeg (banner 3:1) «ACQUAVIVA»
       ingrandito fino a non significare più niente, 11.webp «Gran Gala
       Internazional…» e «Teatro Com…» troncati. Tre casi su quattro. E
       non esiste un segnale affidabile per distinguere «foto senza
       testo» da «manifesto con testo»: `typeDominance` misura la densità
       dei bordi e vale 0.04 su una locandina interamente tipografica
       (01.jpg).

    2. Rapporto vero del file + una sfumatura in fondo. Non tagliava più,
       ma `verifica-stile-vivo.js` l'ha bocciata: «indistinguibile da
       galleria — due nomi per la stessa cosa, e la seconda scelta è una
       promessa vuota». Aveva ragione: una direzione artistica che si
       riduce a un gradiente di dieci pixel non è una direzione.

   Questa è misurabilmente un'altra cosa: il riquadro è il 38% più alto
   del file (`calc(var(--tm-hero-ar) / 1.38)`, quindi proporzionale — su
   un banner 3:1 sono cinquanta pixel, su un quadrato novanta, mai un
   vuoto sproporzionato), il fondale sfocato è acceso e forte, e il
   contenuto sotto nasce dalla sfumatura invece di cominciare a un bordo. */
body.tema-on[data-tm-herocomp="immersiva"] .tm-testata-hero {
  margin: 0 -24px 0; padding: 0; border-radius: 0; background: var(--tk-bgBottom);
}
body.tema-on[data-tm-herocomp="immersiva"]:not([data-tm-hero-modalita="riempi"]) .tm-testata-hero {
  /* `max(0.72, …)`: l'Automatico assegna questo trattamento solo ai
     formati orizzontali, ma nel Manuale lo si può scegliere su una
     locandina verticale — e lì il 38% in più farebbe una testata alta
     l'85% dello schermo, con l'elenco tutto sotto la piega. Misurato su
     un poster 3:4: 714px su 844. Col limite resta a 542. */
  aspect-ratio: max(0.72, calc(var(--tm-hero-ar, 1.3333) / 1.38));
}
body.tema-on[data-tm-herocomp="immersiva"] header { padding-top: 24px; }
body.tema-on[data-tm-herocomp="immersiva"]:not([data-tm-hero-modalita="riempi"]) .tm-testata-hero img { object-fit: contain; border-radius: 0; }
/* Il fondale è la locandina stessa: `inset` negativo e scala perché i
   bordi sfocati non lascino mai vedere il fondo sotto. */
body.tema-on[data-tm-herocomp="immersiva"] .tm-testata-hero__fondale {
  display: block; inset: -40px; opacity: .78; filter: blur(28px) saturate(1.15); transform: scale(1.25);
}
body.tema-on[data-tm-herocomp="immersiva"] .tm-testata-hero::after {
  display: block;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, var(--tk-bgBottom) 100%);
  opacity: .96;
}