Eventi: titolo e data dell'inaugurazione su due righe

Chiesto da Adriano il 19/08. Sono due tag e non un testo con un a capo dentro:
la data si cambia da sola se l'evento si sposta, e un ritorno a capo dentro un
valore di testo non sopravvive all'editor del pannello.

Il titolo vive anche nel database: in produzione va aggiornato
eventi.inaugurazione.title a "Inaugurazione", altrimenti resta la riga unica.
Il tag nuovo (.date) non e' in tabella e viene dal seed.

src/pages/promo-eventi/eventi.astro

@@ -18,6 +18,7 @@ const waLink = `https://wa.me/39${wa.replace(/\D/g, '')}`;
     <div class="container">
       <article class="evento" data-reveal>
         <T tag="eventi.inaugurazione.title" as="h2" />
+        <T tag="eventi.inaugurazione.date" as="p" class="evento__data" />
         <T tag="eventi.inaugurazione.body" as="p" />
         <a class="btn" href={waLink} target="_blank" rel="noopener">{t('eventi.cta.label')}</a>
       </article>
@@ -29,6 +30,7 @@ const waLink = `https://wa.me/39${wa.replace(/\D/g, '')}`;
 <style>
   .evento { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
   .evento :global(h2) { text-transform: uppercase; letter-spacing: .1em; margin: 0; }
+  .evento :global(.evento__data) { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .18em; font-size: .82rem; color: var(--c-accent-dark); margin-top: -8px; }
   .evento :global(p) { margin: 0; }
   .evento__torna { text-align: center; margin-top: 46px; }
   .evento__torna a { font-family: var(--font-heading); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-heading); text-decoration: none; }