/* =============================================================================
   Modulo: il testo lungo.

   Nodi di design della pagina ESG: 662:5374 (attacco, titolo, paragrafi, elenco,
   citazione) e 662:5458 (titolo, paragrafo, fila di pulsanti, titolo, sottotitolo,
   paragrafi). Non è una scena: nessun pin, nessun progresso, nessun `data-scene`, e
   nessun reveal — il perché sta nel PHP.

   Le misure del design, per non doverle ricercare:

     colonna     952 su 1512, 280 di margine per lato
     paragrafo   18/28 Medium al 90%; 16 fra i blocchi
     h2          40/48 Medium, bianco pieno; 72 sopra
     h3          28/40 SemiBold, bianco pieno; 72 sopra, 16 se segue un titolo
     elenco      pallini, 16 fra le voci
     citazione   riquadro da 40 di padding, angoli 24, 72 sopra e sotto, 28/40
     pulsanti    `cta-l-white`, 24 fra loro, 40 sotto il testo
     parti       72 fra una e l'altra

   ⚠ **Quasi tutto è `.reading-text` di base.css**, la tipografia del corpo di un
   articolo, che dal 9 ottobre è in comune con l'articolo, `post-content` e
   `wysiwyg`. Qui restano le sole differenze: i titoli un gradino più su, lo stacco
   fra due titoli di fila, i pulsanti.
   ========================================================================== */

.rich-text {
    margin-block: var(--space-module);
}

/* ⚠ **Il design mette la colonna a x 294, e qui sta a 280.** Tutti e due i testi
   della pagina — 662:5374 e 662:5458 — sono spostati di 14 a destra del centro,
   mentre sulla stessa pagina il claim della hero, il titolo di «Our values» e le
   card sono centrati a 756. È una colonna trascinata, non una regola: la colonna di
   lettura del tema è centrata ovunque, a cominciare dall'articolo. */
.rich-text__inner {
    display: grid;
    gap: 4.5rem; /* 72 fra due parti: 56 di padding più i 16 del `gap`, nel nodo */
    inline-size: min(var(--reading-column), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

/* La colonna la dà `__inner`, che porta anche i pulsanti: la griglia di
   `.reading-text` si allarga quanto lui invece che quanto `.container`, e le sue
   colonne laterali valgono zero. */
.rich-text__text {
    width: auto;
}

/* ⚠ **Niente attacco, e nell'articolo c'è.** Nel nodo 662:5379 il primo paragrafo
   («At M-Cube, we are steadfast…») è a 20/32 SemiBold all'80%, come l'attacco di un
   articolo: era un errore del design, e dal 6 ottobre il primo paragrafo è un
   paragrafo come gli altri. Non va rimesso copiandolo da `singles/article.css`. */

/* I titoli, un gradino più su di quelli dell'articolo.

   ⚠ I token sono `--text-body-xxl` e `--text-body-xl`, e **non** sono i corpi degli
   elementi `<h2>` e `<h3>` di base.css: il nome nel design viene dall'elemento, il
   ruolo no. Qui però il ruolo e l'elemento coincidono, ed è la ragione per cui la
   redazione sceglie «Heading 2» e «Heading 3» dalla tendina e ottiene il design.

   `h4` **non è nel design**: è il gradino sotto, 20 su 32. Colore e peso degli
   altri, e i corpi di `h5` e `h6`, sono quelli di `.reading-text`. */
.rich-text__text h2 {
    font-size: var(--text-body-xxl);
    line-height: var(--leading-body-xxl);
    font-weight: var(--weight-medium);
}

.rich-text__text h3 {
    font-size: var(--text-body-xl);
    line-height: var(--leading-body-xl);
}

.rich-text__text h4 {
    font-size: 1.25rem;
    line-height: 2rem;
}

/* -----------------------------------------------------------------------------
   Gli stacchi fra i blocchi.

   Quelli di `.reading-text`, con due differenze.
   -------------------------------------------------------------------------- */

/* 72 sopra un `h3` come sopra un `h2`, nei nodi 662:5380 e 662:5516: qui l'`h3` è
   un titolo di sezione e non un sottotitolo. */
.rich-text__text > * + h3 {
    margin-block-start: 4.5rem;
}

/* ⚠ **Un titolo subito sotto un altro titolo ne prende 16**, ed è la coppia
   «Governance» / «Quality» del nodo 662:5519: là il sottotitolo è a un `gap` dal
   titolo, non a un padding. Senza questa regola, due titoli di fila si
   staccherebbero come due sezioni. */
.rich-text__text > :is(h2, h3, h4) + :is(h3, h4, h5, h6) {
    margin-block-start: var(--space-s);
}

/* -----------------------------------------------------------------------------
   I pulsanti.

   `cta-l-white`, cioè `.button--outline` di base.css: nel design di pulsanti ce n'è
   uno. 24 fra l'uno e l'altro e 40 sotto il testo — nel nodo 662:5495 sono i 24 di
   padding della fila più i 16 del `gap`. Vanno a capo da sé: sei lingue sono larghe
   802 su una colonna da 952, e le etichette cambiano con la lingua della pagina.
   -------------------------------------------------------------------------- */

.rich-text__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    list-style: none;
    margin: 0;
    padding: 0;
}

.rich-text__text + .rich-text__buttons {
    margin-block-start: 2.5rem;
}