/* Il valore leggibile accanto alle icone dei contatti.
   ============================================================
   Prima c'erano solo i simboli: un mondo, una cornetta, la
   fotocamera di Instagram. Chi guarda non sa dove portano finche'
   non ci clicca -- e da telefono "provo a cliccare per vedere dove
   va" e' proprio il gesto che non si fa.

   Foglio suo e non dentro modern-theme.css: quel file lo modificano
   in tanti nello stesso periodo, e questa e' una aggiunta che deve
   potersi togliere senza andare a cercarla in mezzo a tremila righe.

   Solo token della grafica Fresh Cloud, nessun colore scritto a mano. */

/* --- la barra della galleria del cliente --- */
.gal-fissa-valore{
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  letter-spacing:.01em;
}
.gal-fissa-contatti a{
  gap:6px;
  /* Le icone erano allineate al centro senza testo accanto. Con il
     testo servono tutti e due allineati sulla stessa linea di base
     ottica, altrimenti il numero "galleggia" sopra la cornetta. */
  align-items:center;
}

/* Sotto i 760 px la barra sta in alto ed e' stretta: quattro contatti
   con il valore scritto non ci stanno in una riga sola accanto al logo.
   Nasconderli vorrebbe dire togliere proprio da telefono la cosa che
   serve di piu'; farli scorrere di lato li lascia meta' tagliati e non
   si capisce che si possono spingere. Quindi vanno A CAPO: il logo
   tiene la sua riga, i contatti si dispongono sotto e si vedono tutti. */
@media (max-width:760px){
  .gal-fissa{ flex-wrap:wrap; gap:6px 10px; padding:9px 14px; }
  .gal-fissa-destra{
    min-width:0;
    width:100%;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .gal-fissa-contatti{
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 14px;
    /* Le tre righe qui sotto servono tutte e tre. Nel foglio principale
       questa fila ha "flex-shrink:0", cioe' "non stringerti mai": senza
       scavalcarlo la riga resta larga quanto le serve e sborda dallo
       schermo invece di andare a capo. min-width:0 e' la seconda meta'
       della stessa medicina -- un elemento flex non scende sotto la sua
       larghezza naturale finche' non glielo si dice. */
    flex-shrink:1;
    min-width:0;
    max-width:100%;
  }
  .gal-fissa-valore{ font-size:11.5px; }
}

/* La variante a colonna: icona e valore uno sotto l'altro non ci stanno
   in 74 px, ma nella colonna larga (172 px) ci stanno benissimo
   affiancati. Sotto quella misura il valore si toglie: in 74 px
   diventerebbe una colonna di due lettere per riga. */
@media (min-width:761px) and (max-width:1099px){
  body.gal-header-lato .gal-fissa-valore{ display:none; }
}
@media (min-width:1100px){
  body.gal-header-lato .gal-fissa-contatti a{
    justify-content:flex-start;
    width:100%;
  }
  body.gal-header-lato .gal-fissa-valore{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
  }
}

/* --- fondo chiaro o scuro FORZATO ---
   Quando la galleria impone il suo fondo i token normali non seguono
   piu' il tema di chi guarda: il valore eredita il colore del
   collegamento che lo contiene, quindi qui non serve ridichiarare
   niente. Resta scritto perche' la prossima persona non perda tempo
   a chiedersi se manca. */

/* --- la vetrina pubblica (/portfolio) --- */
.pf-contatto-valore{
  font-size:12.5px;
  line-height:1;
  white-space:nowrap;
}
.pf-contatti a{ gap:7px; align-items:center; }
@media (max-width:640px){
  .pf-contatti{ flex-wrap:wrap; justify-content:center; }
  .pf-contatto-valore{ font-size:11.5px; }
}