/* IL TELEFONO */
/* ------------------------------------------------ */
/* Tutto il resto del progetto e' scritto partendo dal telefono, quindi
   qui NON c'e' la disposizione a colonna singola: quella e' gia' la
   regola di base.

   Qui c'e' soltanto cio' che sul telefono va RIPENSATO, non impilato.
   Sono dieci cose, e sono le uniche dieci in cui mettere gli
   elementi uno sotto l'altro non basta:

     1. la tabella dei rendimenti, che a quattro colonne esce dallo
        schermo e diventa tre schede;
     2. la linea del percorso Gold Way, che ruota da orizzontale a
        verticale insieme alla sua animazione;
     3. le due targhette dell'eroe, che sullo schermo grande stanno a
        cavallo dei bordi della fotografia e qui rientrano;
     4. la coppia alone + fiore che segue il puntatore, che senza un
        puntatore e' solo batteria consumata — resta invece la coppia
        che vaga da sola, l'unica che scopre il fiore sul telefono;
     5. le nove gocce di Gold Rain, che a 390 pixel diventano rumore;
     6. il carosello degli articoli, che perde le lastre da quattro e
        scorre a scheda singola;
     7. le quattro pillole dei canali Gold Insight, che una per riga
        sono quattro righe quasi vuote;
     8. le quattro card della Partnership B2B, che una sotto l'altra
        fanno scorrere quasi tre schermate;
     9. le quattro schede dei Gold Specialist dentro «chi siamo», che
        una per riga occupano piu' di due schermate;
    10. i due pulsanti nella pagina di un Gold Specialist, che a
        larghezza piena andrebbero a capo e sembrerebbero due azioni
        di peso diverso.

   Il nastro degli eventi non e' in elenco: non e' un ripensamento per
   il telefono ma la stessa griglia che, sotto i 900 pixel, smette di
   stare su una riga e diventa scorrevole. Sta in struttura.css
   insieme al resto della sezione.

   L'export non aveva nemmeno una @media: le sue griglie a quattro
   colonne restavano a quattro colonne, e a 390 pixel la barra di
   navigazione usciva dallo schermo. */


/* LA TABELLA DIVENTA TRE SCHEDE */
/* ------------------------------------------------ */
/* Quattro colonne di numeri non stanno in 390 pixel, e ridurre il
   corpo del testo finche' ci stanno le rende illeggibili. Ogni riga
   diventa una scheda con le voci una sotto l'altra: l'etichetta a
   sinistra, il valore a destra.
   Le etichette vengono dagli attributi data-testa delle celle, che
   ripetono le intestazioni nascoste. */

@media (max-width: 599px) {
  .tabella,
  .tabella tbody,
  .tabella tr,
  .tabella tbody th,
  .tabella td {
    display: block;
    width: 100%;
  }

  .tabella {
    background: none;
  }

  .tabella thead {
    display: none;
  }

  .tabella tr {
    margin-bottom: var(--sp-4);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-m);
    background: var(--superficie);
    overflow: hidden;
  }

  /* La riga alternata non ha piu' senso quando le righe sono schede
     staccate: darebbe due colori a caso. */
  .tabella tbody tr:nth-child(even) {
    background: var(--superficie);
  }

  .tabella tbody th {
    padding: var(--sp-4) var(--sp-5) var(--sp-3);
    border-bottom: 1px solid var(--bordo-tenue);
    text-align: left;
  }

  .tabella td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    text-align: right;
  }

  .tabella td::before {
    content: attr(data-testa);
    color: var(--testo-tenue);
    font-size: var(--testo-xxs);
    letter-spacing: var(--traccia-m);
    text-align: left;
    text-transform: uppercase;
  }

  /* Il richiamo sotto la tabella e' un titolo: a 390 pixel il corpo
     dei titoli va a capo male. */
  .numeri__richiamo {
    font-size: var(--testo-xl);
  }
}


/* IL PERCORSO DIVENTA VERTICALE */
/* ------------------------------------------------ */
/* La linea ruota di novanta gradi e i nodi si allineano a sinistra.
   L'onda che li accende scorre dall'alto verso il basso invece che da
   sinistra a destra: e' la stessa animazione con l'altezza al posto
   della larghezza. */

@media (max-width: 899px) {
  /* La linea finisce nel centro del quarto nodo, non in fondo al
     riquadro. Con quattro righe alte uguali e tre scarti da 32 pixel
     l'ultima riga vale (100% - 96px) / 4: togliendole il mezzo nodo
     si ottiene lo stacco dal fondo, e il tratto che resta e'
     75% + 24px. Prima la linea proseguiva oltre l'ultimo nodo per il
     15% della sua lunghezza, e i nodi non cadevano piu' a un terzo
     l'uno dall'altro: e' la ragione per cui sul telefono l'onda
     arrivava in anticipo anche dopo aver corretto i ritardi. */
  .percorso__linea {
    --percorso-tratto: calc(75% + 24px);
    top: 24px;
    bottom: calc(25% - 48px);
    left: 23px;
    width: 2px;
    height: auto;
  }

  .percorso__linea--viva {
    width: 2px;
    height: 0;
    bottom: auto;
    animation-name: linea-viva-verticale;
  }

  /* Righe alte uguali. Non e' estetica: e' la condizione che rende
     vera la formula qui sopra. Con la quarta tappa piu' alta delle
     altre — ha una riga di testo in piu' — il quarto nodo cadeva al
     92% del tratto invece che alla fine, e l'onda gli arrivava con
     mezzo secondo di ritardo. */
  .percorso__passi {
    gap: var(--sp-8);
    grid-auto-rows: 1fr;
  }

  .passo {
    min-height: 48px;
    padding: 0 0 0 var(--sp-18);
  }

  /* Discendente di .passo e non .passo__nodo da solo: la stessa
     classe la porta anche il nodo del racconto di «chi siamo», che
     non sta in un .passo e ha una sinistra sua. Scritta larga, questa
     regola gliela sovrascriveva — telefono.css e' caricato dopo
     pagine.css e la specificita' era pari — e i quattro cerchi
     finivano dentro la colonna di testo invece che sulla linea. */
  .passo .passo__nodo {
    top: 0;
    left: 0;
  }
}

/* La variante verticale della linea che si allunga. Il tratto e' lo
   stesso della regola qui sopra, letto dalla variabile: erano due
   numeri da tenere d'accordo a mano. */
@keyframes linea-viva-verticale {
  0%   { height: 0; opacity: 1; }
  75%  { height: var(--percorso-tratto); opacity: 1; }
  92%  { height: var(--percorso-tratto); opacity: 0; }
  100% { height: 0; opacity: 0; }
}

/* Con i movimenti ridotti la linea resta disegnata anche qui. La
   regola gemella in animazioni.css agisce sulla larghezza, che sul
   telefono e' lo spessore: da sola lasciava la linea alta zero,
   cioe' invisibile. */
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .percorso__linea--viva {
    height: var(--percorso-tratto);
  }
}


/* LE TARGHETTE DELL'EROE */
/* ------------------------------------------------ */
/* Sullo schermo grande le due targhette stanno a cavallo dei bordi
   orizzontali della fotografia. Sul telefono l'immagine e' larga
   quanto la pagina e non ha spazio sopra ne' sotto: rientrano
   entrambe, agli stessi due angoli. */

@media (max-width: 899px) {
  .fregio--purezza {
    top: var(--sp-4);
    right: var(--sp-4);
  }

  .fregio--custodia {
    bottom: var(--sp-4);
    left: var(--sp-4);
  }
}


/* CIO' CHE NON HA SENSO SENZA UN PUNTATORE */
/* ------------------------------------------------ */
/* Su un dispositivo a tocco la coppia che insegue il puntatore non si
   accende mai, ma i suoi due elementi resterebbero disegnati nella
   posizione di riserva: un alone sfocato da 640 pixel e una maschera
   radiale che nessuno muovera'. alone.js li toglie dal documento, e
   questa regola li spegne comunque nell'attimo prima che lo faccia.

   La coppia vagante invece resta: non ha bisogno di un puntatore, ed
   e' l'unica cosa che sul telefono scopre il fiore. */

@media (hover: none), (pointer: coarse) {
  .alone--segui,
  .fiore--segui {
    display: none;
  }
}


/* MENO RUMORE SUGLI SCHERMI PICCOLI */
/* ------------------------------------------------ */

@media (max-width: 599px) {
  /* Nove gocce in 390 pixel sono una griglia, non una pioggia. */
  .goccia:nth-child(n + 6) {
    display: none;
  }

  /* Gli anelli di sfondo hanno un diametro di mezzo migliaio di
     pixel: su un telefono coprono la sezione invece di suggerirla. */
  .anello {
    display: none;
  }
}


/* IL CAROUSEL A SCHEDA SINGOLA */
/* ------------------------------------------------ */
/* Le lastre da quattro articoli si dissolvono e a scorrere restano le
   singole schede, agganciate una alla volta. display: contents toglie
   la lastra dalla disposizione lasciando dentro i suoi figli, quindi
   le schede diventano figlie dirette della pista.

   I trattini spariscono: contano le lastre, e qui le lastre non
   esistono piu'. Le frecce restano, e vogliono dire un'altra cosa:
   scheda precedente e successiva. Non sono un doppione del dito — a
   questa larghezza si arriva anche senza, con una finestra stretta
   sul computer o con un tablet e il mouse, e li' non resterebbe
   nessun comando, perche' la barra di scorrimento e' nascosta. */

@media (max-width: 899px) {
  .carousel__lastra {
    display: contents;
  }

  .carousel__pista {
    gap: var(--sp-4);
    padding-bottom: var(--sp-2);
  }

  .carousel .scheda {
    min-width: 82%;
    scroll-snap-align: start;
  }

  .carousel__punti {
    display: none;
  }

  /* 38 pixel bastano al puntatore, non al polpastrello: sotto i 44
     il bersaglio si sbaglia. */
  .carousel__freccia {
    width: 44px;
    height: 44px;
  }
}


/* I CANALI, DUE PER RIGA */
/* ------------------------------------------------ */
/* Quattro pillole una sotto l'altra sono quattro righe quasi vuote:
   ognuna occupa tutta la larghezza per scriverci dentro una parola.
   Due per riga le riducono a due righe piene.

   L'invito «Iscriviti» sparisce: e' l'evidenziazione che compare al
   passaggio del puntatore, e su un telefono non compare mai. Tolto,
   la pillola non deve piu' spartire duecento pixel fra due testi, e
   il nome puo' restare centrato. */

@media (max-width: 599px) {
  .canali {
    grid-template-columns: 1fr 1fr;
  }

  .canale__collegamento {
    justify-content: center;
    padding-inline: var(--sp-4);
  }

  .canale__invito {
    display: none;
  }
}


/* I PARTNER, DUE PER RIGA */
/* ------------------------------------------------ */
/* Quattro card a tutta larghezza, con dentro un paragrafo ciascuna,
   facevano scorrere quasi tre schermate per arrivare in fondo alla
   sezione. Due per riga le dimezzano.

   Imbottitura e corpo del titolo scendono di un gradino, come per le
   schede dei Gold Specialist in «chi siamo»: a 175 pixel di larghezza
   «Golden Referral» al corpo pieno resta una parola per riga. */

@media (max-width: 599px) {
  .partnership__griglia {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  .partner,
  .accademia {
    padding: var(--sp-4);
  }

  .partner__nome,
  .accademia__titolo {
    font-size: var(--testo-l);
  }

  .partner__testo,
  .accademia__testo {
    font-size: var(--testo-xs);
    line-height: var(--interlinea-media);
  }

  .partner__testo {
    margin: var(--sp-3) 0 var(--sp-5);
  }

  .accademia {
    gap: var(--sp-3);
  }
}


/* LA LINEA DEL RACCONTO SI STRINGE */
/* ------------------------------------------------ */
/* Il rientro da 72 pixel e il cerchio da 48 sono tarati sulla colonna
   di lettura larga 600. A 390 pixel di schermo la colonna scende a
   263 e la prosa a corpo 17 ci va a capo ogni cinque parole. Cerchio
   e rientro scendono di un gradino e restituiscono sedici pixel al
   testo; la linea si sposta di conseguenza, perche' il suo asse deve
   restare il centro del cerchio. */

@media (max-width: 599px) {
  .racconto[data-racconto-attivo] {
    padding-left: var(--sp-14);
  }

  .racconto[data-racconto-attivo]::before,
  .racconto[data-racconto-attivo]::after {
    left: 19px;
  }

  .racconto__nodo {
    left: calc(-1 * var(--sp-14));
    width: 40px;
    height: 40px;
  }

  .racconto__nodo .segno {
    width: 20px;
    height: 20px;
  }

  .racconto[data-racconto-attivo] h2 {
    min-height: 40px;
  }
}


/* I PILASTRI, DUE E UNO */
/* ------------------------------------------------ */
/* Sullo schermo grande i tre pilastri della missione stanno su una
   riga sola e li' restano. Sotto i 900 pixel diventavano una colonna
   di tre card larghe tutta la pagina: due per riga, con la terza
   larga quanto le due che ha sopra, occupano meta' dello scorrimento
   e la terza resta comunque in evidenza.

   L'ultima si allarga SOLO se resterebbe spaiata: i pilastri arrivano
   dal frontmatter di chi-siamo.md e domani potrebbero essere quattro,
   e una quarta card larga il doppio delle altre sarebbe un difetto. */

@media (max-width: 899px) {
  .pilastri {
    grid-template-columns: 1fr 1fr;
  }

  .pilastro:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Imbottitura e corpo del titolo scendono di un gradino, sotto i 600.
   Non e' rifinitura: a 390 pixel la colonna e' larga 139, e «La
   consapevolezza» al corpo pieno ne chiede 164 — il titolo andava a
   capo dopo «La». Con 16 pixel di imbottitura la colonna sale a 155 e
   al corpo --testo-l quelle due parole ne occupano 141: stanno sulla
   prima riga con quattordici pixel di margine. Misurato sulla pagina,
   non stimato. */
@media (max-width: 599px) {
  .pilastro {
    padding: var(--sp-4);
  }

  .pilastro__titolo {
    font-size: var(--testo-l);
  }
}


/* L'ANTEPRIMA DELLA RETE, DUE PER RIGA */
/* ------------------------------------------------ */
/* In «chi siamo» i Gold Specialist sono un'anteprima, non l'elenco:
   quattro schede una sotto l'altra facevano scorrere due schermate
   prima di arrivare al resto della pagina. Due per riga le rimettono
   in una sola.

   Vale solo qui: sulla pagina /gold-specialist/ le schede portano
   anche l'invito «scrivi a ...», e in 155 pixel di larghezza quella
   riga non ci sta. Da qui la classe --anteprima, che finora non
   aveva regole proprie.

   Imbottitura e corpo del nome scendono di un gradino, altrimenti al
   nome piu' lungo restano quaranta pixel per riga. */

@media (max-width: 599px) {
  .consulenti--anteprima {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  .consulenti--anteprima .consulente {
    padding: var(--sp-4);
  }

  .consulenti--anteprima .consulente__nome {
    font-size: var(--testo-xl);
  }
}


/* I DUE PULSANTI DELLA SCHEDA STANNO SU UNA RIGA SOLA */
/* ------------------------------------------------ */
/* «Chiama Francesco» e «Scrivi un'email» andavano a capo: chiedono
   418 pixel e su un telefono da 390 ce ne sono 335. Impilati
   sembravano due azioni di peso diverso, la prima piu' importante,
   mentre sono la stessa cosa detta in due modi.

   Il divario si chiude senza toccare le parole. `flex: 1 1 0` con
   `min-width: 0` da' meta' riga esatta a ciascuno — senza il
   min-width un elemento flessibile non scende sotto il proprio
   contenuto e la riga sborderebbe lo stesso. Il resto lo fanno tre
   misure che si stringono con lo schermo invece di essere fisse:
   imbottitura, corpo del testo e spaziatura fra le lettere, che
   scende da --traccia-l a --traccia-s.

   Il caso peggiore e' il nome piu' lungo della rete, «Chiama
   Francesco», sedici caratteri. Misurato con shot-scraper su
   320, 360, 390, 414 e 430 pixel di larghezza: una riga sola
   dappertutto, e il testo entra fino a «Chiama Pierfrancesco», venti
   caratteri, su tutte e cinque. C'e' quindi margine per quattro
   lettere oltre il nome piu' lungo che oggi esiste.

   Se un giorno entra qualcuno con un nome ancora piu' lungo, il
   controllo va rifatto: `white-space: nowrap` e' proprio cio' che
   rende visibile lo sforamento invece di nasconderlo mandando a capo
   dentro il pulsante. */

@media (max-width: 599px) {
  .scheda-persona__azioni {
    flex-wrap: nowrap;
    gap: var(--sp-2);
  }

  .scheda-persona__azioni .bottone {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: clamp(8px, 2.6vw, 16px);
    font-size: clamp(10px, 2.7vw, 12px);
    letter-spacing: var(--traccia-s);
    white-space: nowrap;
  }
}