/* 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 cinque cose, e sono le uniche cinque 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. la targhetta della purezza, che sullo schermo grande sporge
        di proposito fuori dall'immagine e sul telefono uscirebbe
        dalla pagina;
     4. gli effetti che seguono il puntatore, che senza un puntatore
        sono solo batteria consumata;
     5. le nove gocce di Gold Rain, che a 390 pixel diventano rumore.

   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) {
  .percorso__linea {
    top: 24px;
    bottom: 24px;
    left: 24px;
    width: 1px;
    height: auto;
  }

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

  .percorso__passi {
    gap: var(--sp-8);
  }

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

  .passo__nodo {
    top: 0;
    left: 0;
  }
}

/* La variante verticale della linea che si allunga. */
@keyframes linea-viva-verticale {
  0%   { height: 0; opacity: 1; }
  75%  { height: calc(100% - 48px); opacity: 1; }
  92%  { height: calc(100% - 48px); opacity: 0; }
  100% { height: 0; opacity: 0; }
}


/* LE TARGHETTE DELL'EROE */
/* ------------------------------------------------ */
/* Sullo schermo grande la targhetta della purezza sporge di proposito
   a sinistra dell'immagine. Sul telefono quella sporgenza cadrebbe
   fuori dalla pagina, e il documento scorrerebbe in orizzontale. */

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

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


/* CIO' CHE NON HA SENSO SENZA UN PUNTATORE */
/* ------------------------------------------------ */
/* alone.js non si accende affatto su un dispositivo a tocco, ma gli
   elementi resterebbero comunque disegnati nella loro posizione di
   riserva: un alone sfocato da 640 pixel e una maschera radiale che
   nessuno muovera' mai. Meglio non disegnarli. */

@media (hover: none), (pointer: coarse) {
  .alone,
  .fiore {
    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;
  }
}