/* 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 nove cose, e sono le uniche nove 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.

   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);
  }
}