/* ==========================================================================
   FONDOPRO — PROSE.CSS
   Stile condiviso per le pagine di solo contenuto testuale (le sottovoci
   di "Chi Siamo" e "Il Fondo"): un'unica colonna di lettura, senza
   componenti particolari — la tipografia di base (style.css) fa già la
   maggior parte del lavoro, qui solo la larghezza di lettura e la
   spaziatura tra paragrafi.
   ========================================================================== */

.fp-prose {
  /* Nessuno sfondo proprio: pagina su sfondo bianco semplice. */
}

.fp-prose__content {
  max-width: 75ch;
}

.fp-prose__content p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
}
.fp-prose__content p:last-child {
  margin-bottom: 0;
}

.fp-prose__content strong {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}

.fp-prose__content h3 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--fs-h4);
  color: var(--color-text-primary);
}
.fp-prose__content h3:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   FORMATTAZIONE DEI TESTI LUNGHI (sottosezioni, elenchi, note, email)
   Aggiunta con la revisione tipografica delle pagine interne: stessi
   colori e spaziature dei paragrafi, nessun elemento decorativo in più
   di quanto serve a orientarsi nel testo.
   -------------------------------------------------------------------------- */

/* Sottosezione (es. "Rendita a durata definita" dentro "Rendite") */
.fp-prose__content h4 {
  margin: var(--space-5) 0 var(--space-3);
  font-size: 1.4375rem; /* ~23px: appena sopra il corpo testo, sotto l'H3 */
  color: var(--color-text-primary);
}
.fp-prose__content h3 + h4 {
  margin-top: var(--space-3);
}

/* Etichetta breve dentro una sottosezione (es. "I vantaggi", "Da sapere"):
   stessa dimensione del testo, in blu istituzionale per distinguerla. */
.fp-prose__content h5 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-blue-primary);
}

/* Enfasi: il corsivo resta nel colore del testo circostante */
.fp-prose__content em {
  font-style: italic;
}

/* Elenchi puntati e numerati nel testo. Esclusa la griglia di nomi /
   indice (.fp-prose__namegrid), che ha un proprio stile senza puntini. */
.fp-prose__content ul:not(.fp-prose__namegrid),
.fp-prose__content ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.5em;
  color: var(--color-text-secondary);
}
.fp-prose__content :is(ul:not(.fp-prose__namegrid), ol) > li {
  margin-bottom: var(--space-2);
  padding-left: 0.25em;
}
.fp-prose__content :is(ul:not(.fp-prose__namegrid), ol) > li:last-child {
  margin-bottom: 0;
}
.fp-prose__content li::marker {
  color: var(--color-blue-primary);
  font-weight: var(--fw-semibold);
}

/* Elenco "vantaggi" con spunta (sostituisce il carattere ✔ nel testo):
   spunta disegnata in CSS, blu istituzionale, decorativa. */
.fp-prose__content ul.fp-prose__checklist {
  padding-left: 0;
  list-style: none;
}
.fp-prose__content ul.fp-prose__checklist > li {
  position: relative;
  padding-left: 1.75em;
}
.fp-prose__content ul.fp-prose__checklist > li::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.3em;
  width: 0.45em;
  height: 0.8em;
  border: solid var(--color-blue-primary);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Riquadro di nota per "N.B.", "IMPORTANTE", "!": fondo grigio chiaro e
   filetto blu a sinistra, sobrio ma riconoscibile. */
.fp-prose__content .fp-prose__note {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-blue-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background-color: var(--color-gray-band);
  color: var(--color-text-primary);
}

/* Indirizzi email (.fp-prose__mail): stile spostato in style.css,
   perché usato anche fuori dalle pagine di testo (es. FAQ). */

/* Pagina "Gli organi del Fondo": ogni organo (Assemblea, Consiglio,
   Collegio, Direttore Generale) diventa una sotto-sezione con icona +
   titolo, stessa logica visiva delle icone di Documenti/Modulistica. */
.fp-prose__org-section {
  margin-top: var(--space-7);
}
.fp-prose__org-section:first-of-type {
  margin-top: var(--space-6);
}

.fp-prose__org-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.fp-prose__org-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-blue-primary-light);
  color: var(--color-blue-primary);
  font-size: var(--fs-h4);
}
.fp-prose__org-heading h3 {
  margin: 0;
}

/* Etichetta di ruolo (Presidente, Segretario...) prima del nominativo:
   un piccolo richiamo cromatico, non un vero heading — non fa parte
   della struttura di navigazione della pagina. */
.fp-prose__role {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-blue-primary);
}
.fp-prose__role + p {
  margin-top: 0;
}

/* Elenchi di nominativi (Delegati, Consiglieri, Sindaci...): griglia a
   più colonne invece di un paragrafo per riga, molto più leggibile per
   liste lunghe di nomi. */
.fp-prose__namegrid {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.fp-prose__namegrid li {
  color: var(--color-text-secondary);
}

/* Pagina "Opzioni di Investimento" (e altre che presentano i 3 comparti):
   un blocco icona+titolo per Scudo/Progressione/Espansione, colorato col
   colore proprio del comparto — riusa le utility .fp-bg-scudo/
   -progressione/-espansione già definite in style.css (stesso contrasto
   testo/sfondo già validato lì, nessun duplicato). */
.fp-prose__comparto {
  margin-top: var(--space-5);
}
.fp-prose__comparto-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
.fp-prose__comparto-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: var(--fs-h4);
}
.fp-prose__comparto-heading h3,
.fp-prose__comparto-heading h4 {
  margin: 0;
  font-size: var(--fs-h4);
  color: var(--color-text-primary);
}

/* Pagina "standard vuota" (contenuto non ancora fornito dal cliente):
   un avviso sobrio al posto del testo, mai un vuoto totale che
   sembrerebbe un errore di caricamento. */
.fp-prose__placeholder {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Indice della pagina (pagine lunghe): stessa griglia di link usata in
   "Gli organi del Fondo", separata dal testo da un filetto grigio. */
.fp-prose__toc {
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-light);
}
.fp-prose__toc .fp-prose__namegrid {
  margin-bottom: 0;
  /* Più colonne dove c'è spazio (indici lunghi, es. Privacy), una sola
     colonna su smartphone. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

/* Variante del riquadro di nota per i paragrafi segnalati con "!":
   il punto esclamativo diventa un'icona blu in testa al riquadro. */
.fp-prose__content .fp-prose__note--alert {
  position: relative;
  padding-left: calc(var(--space-4) + 1.6em);
}
.fp-prose__note--alert > .bi {
  position: absolute;
  left: var(--space-4);
  top: var(--space-3);
  font-size: 1.25em;
  line-height: 1.3;
  color: var(--color-blue-primary);
}

/* Bottone di richiamo (es. "Aderisci a FondoPro ONLINE"): bottone
   primario del sito, più grande del normale, con icona maggiorata. */
.fp-prose__content .fp-prose__cta-wrap {
  margin: 0 0 var(--space-6);
}
.fp-prose__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-decoration: none;
}
.fp-prose__cta .bi {
  font-size: 2.25rem; /* icona ben più grande del testo: fa da richiamo */
  line-height: 1;
}

/* Video con copertina dentro una pagina di testo (componente
   .fp-video-cover di video-feature.css): solo lo spazio sotto. */
.fp-prose__content .fp-video-cover {
  margin: 0 0 var(--space-5);
}

/* Tabella "Programma Life Cycle": la fase (iniziale/intermedia/finale) è
   ora un'intestazione di gruppo di righe (<th scope="rowgroup">), così lo
   screen reader la annuncia per ogni riga. Prima era una cella normale e
   la regola generica "prima cella della riga" di style.css colorava di
   grigio, a righe alterne, anche la colonna degli anni. */
.fp-table--lifecycle tbody th {
  background-color: var(--color-gray-band);
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
  text-align: left;
  vertical-align: middle;
}
.fp-table--lifecycle tbody td:first-child {
  background-color: transparent;
  color: var(--color-text-primary);
  font-weight: var(--fw-medium);
  text-align: center;
}

/* Recapiti (indirizzo + email) nella pagina Reclami: blocco rientrato
   con filetto grigio, per staccarli dal testo che li introduce. */
.fp-prose__address {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-gray-light);
}
.fp-prose__content .fp-prose__address p {
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}
.fp-prose__content .fp-prose__address p:last-child {
  margin-bottom: 0;
}
.fp-prose__address .bi-geo-alt {
  color: var(--color-blue-primary);
}

/* Citazione (es. dichiarazione dei presidenti in SaluteMia) */
.fp-prose__content .fp-prose__quote {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-blue-primary);
  font-style: italic;
  color: var(--color-text-primary);
}
.fp-prose__quote strong {
  font-style: normal;
}

/* ENPAM 5x1000: immagine della campagna, codice fiscale in evidenza,
   link di download con icona (prima erano stili inline nell'HTML). */
.fp-prose__image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.fp-prose__content .fp-prose__code {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}
.fp-prose__download {
  font-weight: var(--fw-medium);
}
.fp-prose__download .bi {
  display: inline-block;
  margin-right: 0.4em;
}

/* Link lunghi (URL scritti per esteso, es. profili social in Privacy):
   possono andare a capo in qualunque punto invece di uscire dallo schermo
   su smartphone (WCAG 1.4.10). */
.fp-prose__content a:not(.fp-prose__mail):not(.btn) {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   PAGINE "A CHI SI RIVOLGE" (4 pagine di atterraggio dei riquadri in Home)
   -------------------------------------------------------------------------- */

/* Passaggi numerati affiancati (es. "Proponi / Aderisci / Informa"): un
   <ol> vero, così l'ordine arriva anche allo screen reader; il numero è
   disegnato con un contatore CSS (il marcatore nativo non si posiziona
   bene nel riquadro). Etichetta in maiuscolo via CSS, come nel testo del
   cliente, ma scritta in minuscolo nell'HTML: letta come parola e non
   compitata lettera per lettera. 1 colonna su smartphone, 3 da tablet. */
.fp-prose__content ol.fp-prose__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: fp-step;
}
@media (min-width: 768px) {
  .fp-prose__content ol.fp-prose__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.fp-prose__content ol.fp-prose__steps > li {
  counter-increment: fp-step;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-gray-band);
  color: var(--color-text-primary); /* #1a1a1a su #e9ebee: 14,6:1 */
}
.fp-prose__content ol.fp-prose__steps > li::before {
  content: counter(fp-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-blue-primary);
  color: #ffffff; /* bianco su #005191: 8,1:1 */
  font-weight: var(--fw-bold);
}
.fp-prose__content .fp-prose__steps-label {
  color: var(--color-blue-primary-dark); /* #003a68 su #e9ebee: 9,7:1 */
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Elenco di link finali (le "CTA" del documento del cliente): link testuali
   con icona, non bottoni, perché una voce contiene due link separati
   ("Confronta comparti" e "costi") che un bottone non può ospitare.
   Sottolineatura sempre visibile: nella voce doppia distingue i link dal
   testo normale "e" anche senza affidarsi al colore (WCAG 1.4.1). */
.fp-prose__content ul.fp-prose__links {
  margin: var(--space-6) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-gray-light);
  list-style: none;
}
.fp-prose__content ul.fp-prose__links > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
  font-weight: var(--fw-bold);
}
.fp-prose__content ul.fp-prose__links > li:last-child {
  margin-bottom: 0;
}
.fp-prose__links .bi {
  flex: none;
  color: var(--color-blue-primary);
  font-size: 1.5rem;
  line-height: 1.2;
}
.fp-prose__links a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}