/* =============================================================================
   Modulo: testo e immagine.

   Un frame di design per questa sezione non c'è. Dal 15 ottobre il modulo parla
   il vocabolario del resto del sito invece di quello dello scheletro, e ogni
   misura qui sotto viene da un modulo che c'è già:

   - lo stacco coi vicini è `--space-module`, come margine — fino a quel giorno era
     il `.section` dello scheletro, il cui padding si sommava al margine dei vicini
     (è lo stesso difetto che `wysiwyg` aveva fino al 9 ottobre);
   - il titolo è un titolo di sezione: `title-upper-md` col riempimento sfumato,
     come `awards-grid` e `steps-wheel`;
   - il testo è quello di `text-block`, `body-sm` 18 su 28 in Medium, con una riga
     vuota fra due paragrafi;
   - il pulsante è `cta-l-white`, `.button--outline`, come in `claim-video` e
     `cta-fullscreen`: lo scheletro aveva il pulsante pieno azzurro, che nel design
     non esiste;
   - l'immagine ha gli angoli a 24 (`--radius-l`) delle card, e sotto il fondo
     dietro un media per il tempo in cui non è arrivata.

   Le due colonne partono sopra i 900px, la soglia del telefono, con 64
   (`--space-2xl`) fra loro: è una scelta, non una misura.
   ========================================================================== */

.testo-immagine {
    margin-block: var(--space-module);
}

.testo-immagine__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

/* `order` sposta il media senza cambiare l'ordine del DOM, così la sequenza di
   lettura resta la stessa per screen reader e tastiera in entrambe le varianti. */
@media (min-width: 901px) {
    .testo-immagine__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-2xl);
    }

    .testo-immagine--media-right .testo-immagine__media {
        order: 2;
    }
}

.testo-immagine__media {
    margin: 0;
    /* La variabile la scrive il JS del modulo (parallax leggero): senza JS
       resta 0 e l'immagine è semplicemente statica. È `translate` e non
       `transform`, che è del reveal: le due si compongono. */
    translate: 0 var(--parallax-offset, 0);
    will-change: translate;
}

.testo-immagine__image {
    display: block;
    width: 100%;
    border-radius: var(--radius-l);
    background-color: var(--color-scene-bg);
}

/* La didascalia è la stessa delle immagini dentro un articolo: `label-md` al 70%. */
.testo-immagine__caption {
    margin-block-start: var(--space-2xs);
    font-size: var(--text-label-l);
    line-height: var(--leading-label-l);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}

/* 24 fra il titolo e il testo, e 40 prima del pulsante: gli stacchi di
   `cta-fullscreen` e di `claim-video` fra una frase e la sua CTA. */
.testo-immagine__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);
}

/* `title-upper-md`: 40 su 40, peso 900, maiuscolo.

   ⚠ Niente `margin` qui: lo possiede `.display-gradient` (base.css), che ci mette
   un negativo per compensare il proprio padding. */
.testo-immagine__title {
    font-size: var(--text-title);
    line-height: var(--leading-solid);
    font-weight: var(--weight-black);
    text-transform: uppercase;
}

/* `body-sm`: 18 su 28, peso 500, come `text-block`. Fra due paragrafi una riga
   vuota, che è come il design separa i paragrafi di quel modulo (nodo 552:4017). */
.testo-immagine__text {
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
    font-weight: var(--weight-medium);

    & > * + * {
        margin-block-start: calc(var(--text-body-m) * var(--leading-body-m));
    }
}

.testo-immagine__cta {
    margin-block-start: var(--space-s);
}