/* =============================================================================
   Modulo: il blocco di testo.

   Nodi di design della pagina di un progetto: 552:4000 (occhiello + titolo +
   paragrafo), 637:2512 (titolo piccolo + paragrafo), 552:4009 / 552:4017 /
   552:4019 (solo paragrafo).

   Non è una scena: nessun pin, nessun progresso, nessun `data-scene`. Il solo
   movimento è il reveal globale di base.css.
   ========================================================================== */

.text-block {
    /* La colonna di lettura del design: 960 su 1512, cioè 276 di margine per lato.

       ⚠ **Non è `.container-narrow`**, che è 736 ed è la colonna di una privacy
       policy. È una terza misura, e sta qui finché la vuole solo questo modulo —
       il giorno che la vuole un secondo modulo vero, va in base.css con gli altri.

       Il `min()` col gutter serve sotto i 960 + due margini: la colonna smette di
       essere 960 e diventa lo schermo meno i margini di pagina. */
    --text-block-column: 60rem;

    margin-block: var(--space-module);
}

.text-block__inner {
    display: grid;

    /* Lo stacco fra il gruppo del titolo e il paragrafo. Il valore vero lo mettono
       i due modificatori più sotto; questo è il caso senza titolo, dove non c'è
       nessuno stacco da fare. */
    gap: 0;
    inline-size: min(var(--text-block-column), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

/* Occhiello e titolo: 8 in mezzo (`--space-2xs`), il `gap` del frame nel design. */
.text-block__lead {
    display: grid;
    gap: var(--space-2xs);
}

/* `label-sm`: 12 su 16, peso 600, tracking 12%, maiuscolo. */
.text-block__label {
    font-size: var(--text-label);
    line-height: var(--leading-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* Il corpo lo danno i due modificatori: qui c'è solo quel che i due condividono.

   ⚠ **Niente `.display-gradient` e niente maiuscolo.** Questi non sono i titoli di
   sezione del tema: nel design sono frasi in tondo e **bianche piene**, ed è
   misurato, non dedotto. Campionando il massimo per riga sul render della pagina,
   «SANTASOFIA27, a creative hub in the heart of Milan» dà 255 a ogni altezza; sulla
   stessa pagina e con lo stesso metodo la headline di `cta-fullscreen`, che il
   riempimento ce l'ha, sale da 198 a 209 sulla prima riga e da 216 a 228 sulla
   seconda. Il metodo distingue, quindi il piatto è un piatto.

   ⚠ **Il massimo per riga, non la media.** Con la media le righe di cima e di fondo
   escono scure comunque — lì l'inchiostro è tutto antialiasing — e un testo bianco
   pieno sembra sfumato: la prima misura di questo titolo dava 218 in cima e 237 in
   fondo, che è esattamente la rampa che non c'è. È il controllo da rifare prima di
   applicare la classe a un titolo nuovo. */
.text-block__heading {
    font-weight: var(--weight-medium);
}

/* `body-sm`: 18 su 28, peso 500. Il corpo sta sul contenitore e non sui paragrafi,
   così lo ereditano anche le liste e tutto quello che l'editor scrive. */
.text-block__text {
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
    font-weight: var(--weight-medium);

    /* ⚠ **Fra due paragrafi il design lascia una riga vuota, non uno spazio della
       scala.** Misurato sul render del nodo 552:4017: il passo fra due righe dello
       stesso paragrafo è 28, fra l'ultima riga di uno e la prima del successivo è
       56 — cioè esattamente un'interlinea in più. `--space-m` darebbe 52 e
       `--space-l` 60: la scala non ha il 28, e qui il numero giusto non è un passo
       di spaziatura ma la riga di testo stessa.

       Stessa specificità della regola di `.wysiwyg` in base.css (0,1,0): vince
       perché il CSS di un modulo si accoda dopo quello di base. */
    & > * + * {
        margin-block-start: calc(var(--text-body-m) * var(--leading-body-m));
    }
}

/* -----------------------------------------------------------------------------
   I due corpi del titolo.

   Un modificatore sulla sezione e non due classi sui figli: fra le due varianti
   cambiano il corpo del titolo **e** lo stacco verso il paragrafo, che sono due
   facce di una decisione sola — se il blocco apre una parte del racconto o ci sta
   dentro. È lo stesso patto di `.hero-shrink-video--page`.
   -------------------------------------------------------------------------- */

/* Nodo 552:4000. Lo stile `h2` del design: 40 su 48 in Medium, tracking zero.

   ⚠ Il token è `--text-body-xxl` e **non** è il corpo dell'elemento `<h2>`, che
   resta `--text-title`: hanno lo stesso corpo e sono due stili diversi, uno Black su
   interlinea 40 e uno Medium su 48. L'avvertenza è in base.css. */
.text-block--lg {
    & .text-block__inner {
        gap: 2.5rem; /* 40: non è un passo della scala, che va da 32 a 48 */
    }

    & .text-block__heading {
        font-size: var(--text-body-xxl);
        line-height: var(--leading-body-xxl);
    }
}

/* Nodo 637:2512. Lo stile `h3` del design: 28 su 40 in SemiBold.

   ⚠ Anche qui il token — `--text-body-xl` — non è il corpo dell'elemento `<h3>`. */
.text-block--sm {
    & .text-block__inner {
        gap: var(--space-s); /* 16 */
    }

    & .text-block__heading {
        font-size: var(--text-body-xl);
        line-height: var(--leading-body-xl);
        font-weight: var(--weight-semibold);
    }
}