/* =============================================================================
   Modulo: gli indirizzi a cui scrivere, in colonne.

   Nodi di design 453:1629 (il titolo) e 453:1631 (la fila), pagina Contacts.

   Il titolo nello stile `h2` del design — 40 su 48, Medium, in tondo — e 26 sotto
   la fila: tre colonne da 456 con 40 in mezzo, cioè le stesse tre colonne della
   griglia del form che segue. Ogni colonna ha il filetto bianco in cima e 16 sopra
   e sotto il testo, `body-sm` 18 su 28.

   Nessun movimento oltre al reveal.
   ========================================================================== */

/* Lo stacco del design, 160 per lato, come margine: vedi `--space-module` in
   base.css. Nel frame fra l'ultima riga di sedi e questo titolo ce ne sono 204:
   è il mock, e fra due moduli vale la regola del tema. */
.contact-channels {
    margin-block: var(--space-module);
}

.contact-channels__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.625rem; /* 26: il titolo finisce a y 1972 e la fila comincia a 1998. Non è un passo della scala */
}

/* Lo stile `h2` del design è `--text-body-xxl`, **non** il corpo dell'elemento
   `<h2>` di base.css, che è `title-upper-md`: vedi la nota sui due token in
   CLAUDE.md. */
.contact-channels__heading {
    font-size: var(--text-body-xxl);
    line-height: var(--leading-body-xxl);
    font-weight: var(--weight-medium);
}

/* Tre colonne da 456 con 40 in mezzo, in frazioni perché la colonna di contenuto si
   restringe con la finestra. Sotto la soglia una colonna sola: a 900 tre colonne
   sarebbero larghe 260, e `business@mcubedigital.com` nel design ne occupa 243 —
   un indirizzo appena più lungo andrebbe a capo a metà. */
.contact-channels__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 2.5rem; /* 40 fra le colonne, come nella griglia delle sedi */
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 901px) {
    .contact-channels__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Il filetto è bianco pieno (453:1632, `border-white`) e sta sopra, non sotto: è la
   stessa riga del filetto sotto il nome di una sede, girata. */
.contact-channels__item {
    display: grid;
    align-content: start;
    padding-block: var(--space-s);
    border-block-start: 1px solid var(--color-text-primary);
    font-size: var(--text-body-m);
    line-height: var(--leading-body-m);
    font-weight: var(--weight-medium);
}

/* Sotto la soglia le colonne sono righe, e fra una riga e l'altra il filetto basta
   da solo a separarle; lo stacco è quello di una riga di testo. */
@media (max-width: 900px) {
    .contact-channels__item + .contact-channels__item {
        margin-block-start: var(--space-s);
    }
}

.contact-channels__email {
    color: inherit;
    text-decoration: underline;
    overflow-wrap: anywhere;
}