/* Il telefono, la rete aperta della pagina iniziale (APPROVATO.md §12, schermata 2): la apre js/telefono-rete.js
   mettendo «rete-telefono» sulla pagina. Titolo, nodi in alto e «Per chi» spariscono; le quattro colonne di vetro
   stanno una accanto all'altra come sul computer: in cima la testa (la scheda: icona e titolo), sotto i quattro
   nodi come pillole col solo nome e il pallino del colore; i nodi più stretti delle colonne lasciano posto ai fili;
   sotto la spiegazione. Teste, nodi, colonne e spiegazione diventano pezzi di una sola griglia della pagina. L'invito
   «Ti sembra complicato?» sul telefono non c'è (telefono.css). «Torna» e la didascalia stanno sotto la barra. */
.rete-telefono :is(.hero, .graph, .per-chi) {
  display: none;
}
.rete-telefono :is(main, .method, .cards, .rete-aperta, .ra-nodi, .ra-colonne) {
  display: contents;
}
.rete-telefono .site {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 9px 6px;
  padding: calc(var(--sotto-barra) + 54px) var(--pad) calc(24px + var(--menu-sotto));
}
/* le colonne di vetro dietro, i fili sopra di loro (js/telefono-rete.js; quelli del computer qui non ci sono), teste
   e nodi davanti */
.rete-telefono .ra-colonna {
  position: relative;
  z-index: 0;
  grid-row: 1 / 6;
  border-radius: 16px;
}
.rete-telefono .ra-colonna .step,
.rete-telefono .ra-fili {
  display: none;
}
.rete-telefono .card,
.rete-telefono .ra-nodo {
  position: relative;
  z-index: 2;
}
.rete-telefono .card {
  grid-row: 1;
  padding: 8px 6px 2px;
  background: none;
  box-shadow: none;
}
.rete-telefono .card::before,
.rete-telefono .card p {
  display: none;
}
.rete-telefono .card .n-icon {
  width: 24px;
  height: 24px;
}
.rete-telefono .card h2 {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
}

/* i nodi: pillole col solo nome, su due righe; il pallino del colore resta nell'angolo */
.rete-telefono .ra-nodo {
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  min-height: 38px;
  margin: 0 10px;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 19px;
  text-align: center;
  opacity: 1;
}
.rete-telefono .ra-nodo:nth-child(4) {
  margin-bottom: 8px;
}
/* cambiando pagina a metà apertura la rete esce di lato da dov'è (js/telefono-rete.js): poi nella pagina vecchia del
   passaggio fra le pagine restano solo sfondo, barra, lingua e menu */
.rete-uscita .site > :is(main, .rete-aperta, .fili-telefono) {
  visibility: hidden;
}
/* sui telefoni stretti (sotto i 390 punti) i nomi dei nodi hanno un po' più di spazio, così ci stanno interi */
@media (max-width: 389px) {
  .rete-telefono .ra-nodo {
    margin-inline: 6px;
    padding-inline: 4px;
  }
}
.rete-telefono .ra-nodo .n-icon {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  background: none;
  box-shadow: none;
}
.rete-telefono .ra-nodo .n-icon svg {
  display: none;
}
.rete-telefono .ra-nodo .n-tint {
  width: 5px;
  height: 5px;
}
.rete-telefono .ra-nome {
  font-size: 10.5px;
  line-height: 1.15;
  white-space: normal;
}

/* dove sta ogni pezzo: la colonna, e la riga del nodo sotto la testa */
.rete-telefono .card:nth-of-type(1),
.rete-telefono .ra-colonna:nth-child(1),
.rete-telefono .ra-gruppo:nth-child(1) .ra-nodo {
  grid-column: 1;
}
.rete-telefono .card:nth-of-type(2),
.rete-telefono .ra-colonna:nth-child(2),
.rete-telefono .ra-gruppo:nth-child(2) .ra-nodo {
  grid-column: 2;
}
.rete-telefono .card:nth-of-type(3),
.rete-telefono .ra-colonna:nth-child(3),
.rete-telefono .ra-gruppo:nth-child(3) .ra-nodo {
  grid-column: 3;
}
.rete-telefono .card:nth-of-type(4),
.rete-telefono .ra-colonna:nth-child(4),
.rete-telefono .ra-gruppo:nth-child(4) .ra-nodo {
  grid-column: 4;
}
.rete-telefono .ra-nodo:nth-child(1) {
  grid-row: 2;
}
.rete-telefono .ra-nodo:nth-child(2) {
  grid-row: 3;
}
.rete-telefono .ra-nodo:nth-child(3) {
  grid-row: 4;
}
.rete-telefono .ra-nodo:nth-child(4) {
  grid-row: 5;
}

/* «Torna» e la didascalia */
.rete-telefono .ra-barra {
  top: calc(var(--sotto-barra) + 12px);
  right: var(--pad);
  gap: 10px;
  opacity: 1;
}
.rete-telefono .ra-torna {
  flex: none;
  height: 32px;
  padding: 0 12px 0 9px;
  gap: 6px;
  font-size: 13.5px;
}
.rete-telefono .ra-torna svg {
  width: 15px;
  height: 15px;
}
.rete-telefono .ra-didascalia {
  font-size: 13px;
  line-height: 1.3;
}
/* sotto: la spiegazione, larga quanto lo schermo */
.rete-telefono .ra-spiega {
  position: relative;
  left: auto;
  right: auto;
  grid-column: 1 / -1;
  width: calc(100vw - 2 * var(--pad));
  margin-top: 12px;
  gap: 10px;
  opacity: 1;
}
.rete-telefono .ra-spiega .intro-side {
  font-size: 14px;
  line-height: 1.45;
}

/* Aprendo e chiudendo (scelta di Leo, proposta F): i nomi dei pezzi e i tempi li dà js/telefono-rete-piano.js;
   chiudendo è l'apertura al contrario. La scheda sfuma nella colonna mentre cambia forma: il loro vetro, un velo che
   non sfoca, è uguale nelle foto e nella pagina, così alla fine niente cambia di colpo; la barra del menu e la lingua
   restano sopra a tutto. */
::view-transition-group(rete-barra),
::view-transition-group(rete-lingue) {
  z-index: 2;
}
::view-transition-old(*.rete-colonna),
::view-transition-new(*.rete-colonna) {
  height: 100%;
  object-fit: fill;
}
/* i tempi sono tutti dello script */
:root.rete-apre::view-transition-group(*.rete-colonna),
:root.rete-apre::view-transition-old(*.rete-colonna),
:root.rete-apre::view-transition-new(*.rete-colonna),
:root.rete-apre::view-transition-old(*.rete-sopra),
:root.rete-apre::view-transition-new(*.rete-testa),
:root.rete-apre::view-transition-new(*.rete-nodo),
:root.rete-apre::view-transition-new(rete-fili),
:root.rete-apre::view-transition-new(*.rete-intorno),
:root.rete-chiude::view-transition-group(*.rete-colonna),
:root.rete-chiude::view-transition-old(*.rete-colonna),
:root.rete-chiude::view-transition-new(*.rete-colonna),
:root.rete-chiude::view-transition-new(*.rete-sopra),
:root.rete-chiude::view-transition-old(*.rete-testa),
:root.rete-chiude::view-transition-old(*.rete-nodo),
:root.rete-chiude::view-transition-old(rete-fili),
:root.rete-chiude::view-transition-old(*.rete-intorno) {
  animation: none;
}