/* Componenti condivisi fra le pagine pubbliche.
   Stanno qui e non in linea nelle singole pagine perché usati su 22 pagine:
   tenerli inline vorrebbe dire ripetere lo stesso blocco 22 volte e doverle
   modificare tutte, in sincrono, a ogni ritocco. */


/* FASCIA DELLE BRICIOLE
   ---------------------------------------------------------------------
   Va subito sotto la sezione hero, in tutte le pagine tranne la home (dove
   non ha senso: sei già alla radice).

   Il fondo è l'oro pieno #BC9659 del marchio. Su questo oro il testo NON può
   essere bianco: misurato, il bianco dà 2,59 di contrasto contro il minimo
   richiesto di 4,5, e su un testo piccolo, maiuscolo e spaziato com'è questo
   sarebbe illeggibile. Il testo è quindi scuro, che qui misura 6,85.
   Se si volesse il testo bianco, il fondo va scurito ad almeno #6B5220. */
.gz-briciole{
  background:#BC9659;
  border-top:1px solid #FFFFFF;   /* la linea di separazione dalla hero */
}
.gz-briciole-in{
  max-width:1320px;
  margin:0 auto;
  padding:13px clamp(20px,5vw,64px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#14110D;
}
/* .85 e non meno: a .75 il contrasto sull'oro scende a 4,53, cioè appena
   sopra il minimo. Così sta a 5,50 e c'è margine. */
.gz-briciole-in a{
  color:rgba(20,17,13,.85);
  text-decoration:none;
  transition:color .25s;
}
.gz-briciole-in a:hover{color:#14110D;}
.gz-briciole-sep{
  color:rgba(20,17,13,.5);
  font-size:9px;
}


/* TEXTURE A GRIGLIA
   ---------------------------------------------------------------------
   Griglia quadrata inclinata di 45 gradi, bianca e molto fine, da applicare
   alle sezioni con fondo grigio chiaro.

   Il passo è 24px, il doppio di quello provato inizialmente sulla fascia.
   È costruita con due serie di righe diagonali incrociate anziché con
   un'immagine: non c'è nessun file da scaricare e resta nitida a qualsiasi
   ingrandimento.

   L'opacità è alta (90%) perché su un fondo già chiaro come #F1F3F5 un
   bianco velato non si distinguerebbe: la differenza sarebbe di due livelli
   su 255, cioè invisibile. */
.gz-texture{
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.9) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.9) 0 1px,transparent 1px 24px);
}


/* CONTORNO DELLE SCHEDE PRODOTTO
   ---------------------------------------------------------------------
   Nelle schede l'area della bottiglia ha fondo bianco, e diverse sezioni
   che le contengono sono anch'esse bianche: senza contorno il riquadro non
   ha bordi e la bottiglia sembra fluttuare nel vuoto.

   Il filo sotto l'immagine esisteva già, di questo stesso grigio: qui viene
   semplicemente chiuso tutt'intorno alla scheda. È volutamente una linea e
   non un'ombra, perché la scheda ha già un'ombra al passaggio del mouse e
   una seconda ombra a riposo renderebbe quel movimento meno leggibile.

   Il bordo non altera gli ingombri: il box-sizing del sito è border-box. */
.gz-scheda{border:1px solid #E4E7EA;}

/* SELETTORE DI LINGUA (intestazione)
   ---------------------------------------------------------------------
   Rimanda alla stessa pagina nell'altra lingua: sulle pagine italiane
   porta a /en/, su quelle inglesi torna indietro. Mostra la sigla della
   lingua di DESTINAZIONE, non di quella corrente — è la convenzione più
   diffusa e si legge come un'azione ("vai all'inglese"), non come
   un'etichetta di stato.

   Volutamente più leggero del pulsante Horeca che gli sta accanto: è un
   servizio, non un richiamo commerciale, e non deve competere con la
   chiamata all'azione principale. */
.gz-lingua{
  display:inline-flex;align-items:center;text-decoration:none;
  color:#3F3A33;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:11px 13px;
  border:1px solid #CBD0D6;transition:color .25s,border-color .25s;
}
.gz-lingua:hover{color:#14110D;border-color:#BC9659;}

/* Sotto i 1023px l'intestazione lascia spazio solo al menu a panino:
   il selettore resta visibile ma si stringe. */
@media(max-width:1023px){
  .gz-lingua{padding:9px 10px;letter-spacing:.1em;}
}

/* SEZIONE NOTIZIE
   ---------------------------------------------------------------------
   Sta qui e non in linea nelle pagine perché le notizie crescono: ogni
   nuova pagina generata deve trovare lo stile già pronto senza doverlo
   ripetere dentro l'HTML. */

/* Filtri per categoria.
   Sono <button> e non <a> perché non portano da nessuna parte: mostrano e
   nascondono le schede già presenti. Con dei link servirebbe una pagina per
   categoria — utile solo con molte più notizie di quante ce ne siano. */
.gz-filtro{
  font-family:'Jost',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:11px 18px;border:1px solid #CBD0D6;background:transparent;
  color:#5A5247;cursor:pointer;transition:color .25s,border-color .25s,background .25s;
}
.gz-filtro:hover{color:#14110D;border-color:#BC9659;}
/* aria-pressed dice quale filtro è attivo: l'attributo serve ai lettori di
   schermo, e qui lo si usa anche per lo stile, così non c'è un secondo
   indicatore da tenere allineato. */
.gz-filtro[aria-pressed="true"]{
  background:#14110D;border-color:#14110D;color:#FBF8F2;
}

/* Corpo dell'articolo.
   La misura di riga è limitata a 68 caratteri: oltre, l'occhio fatica a
   ritrovare l'inizio della riga successiva. */
.gz-testo{font-size:17px;font-weight:300;line-height:1.8;color:#3F3A33;}
.gz-testo p{margin:0 0 1.3em;max-width:68ch;}
.gz-testo p:last-child{margin-bottom:0;}
.gz-testo strong{font-weight:500;color:#181410;}
.gz-testo em{font-style:italic;}
.gz-testo a{color:#181410;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:#BC9659;transition:color .25s;}
.gz-testo a:hover{color:#BC9659;}
.gz-testo h2,.gz-testo h3{
  font-family:'Fjalla One',sans-serif;letter-spacing:-.02em;text-transform:uppercase;
  font-weight:400;color:#181410;margin:1.8em 0 .6em;line-height:1.2;
}
.gz-testo h2{font-size:26px;}
.gz-testo h3{font-size:20px;}
.gz-testo ul,.gz-testo ol{margin:0 0 1.3em;padding-left:1.3em;max-width:68ch;}
.gz-testo li{margin-bottom:.5em;}
.gz-testo blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:2px solid #BC9659;
  font-style:italic;color:#5A5247;max-width:64ch;
}

/* ANIMAZIONI D'INGRESSO — VARIANTI
   =====================================================================
   Il sito ha già un'animazione base: gli elementi con classe .gz-reveal
   salgono di 26px sfumando, quando entrano nello schermo. La regola sta
   in linea in ogni pagina, insieme allo script che aggiunge .gz-in.

   Qui si aggiungono delle VARIANTI, per non far entrare tutto allo stesso
   modo. Il criterio non è decorativo: il movimento deve assecondare la
   lettura, non contraddirla.

   - da sinistra / da destra  →  nelle sezioni a due colonne, ogni metà
     entra dal proprio lato: il movimento racconta la disposizione
   - ingrandimento            →  sulle fotografie, che così "si aprono"
     invece di scorrere
   - solo dissolvenza         →  dove un movimento distrarrebbe: fasce di
     briciole, note a piè di sezione
   - a cascata                →  nelle griglie, le schede entrano una dopo
     l'altra invece che in blocco

   NOTA SULLA SPECIFICITÀ: le regole usano due classi (.gz-reveal.gz-rv-…)
   perché la regola base sta in un <style> in linea, che viene DOPO questo
   foglio e vincerebbe a parità di peso. */

/* --- Punto di partenza di ogni variante ----------------------------- */
.gz-reveal.gz-rv-sx   { transform:translateX(-34px); }
.gz-reveal.gz-rv-dx   { transform:translateX(34px); }
.gz-reveal.gz-rv-zoom { transform:scale(.94); }
.gz-reveal.gz-rv-fade { transform:none; }

/* --- Movimento di arrivo -------------------------------------------- */
@keyframes gz-rv-sx   { from{opacity:0;transform:translateX(-34px);} to{opacity:1;transform:none;} }
@keyframes gz-rv-dx   { from{opacity:0;transform:translateX(34px);}  to{opacity:1;transform:none;} }
@keyframes gz-rv-zoom { from{opacity:0;transform:scale(.94);}        to{opacity:1;transform:none;} }
@keyframes gz-rv-fade { from{opacity:0;}                             to{opacity:1;} }

html.gz-ready .gz-reveal.gz-rv-sx.gz-in   { animation-name:gz-rv-sx; }
html.gz-ready .gz-reveal.gz-rv-dx.gz-in   { animation-name:gz-rv-dx; }
html.gz-ready .gz-reveal.gz-rv-zoom.gz-in { animation-name:gz-rv-zoom; animation-duration:1.1s; }
html.gz-ready .gz-reveal.gz-rv-fade.gz-in { animation-name:gz-rv-fade; animation-duration:.7s; }

/* --- Cascata nelle griglie ------------------------------------------
   Il ritardo lo dà la posizione nella griglia, senza bisogno di
   JavaScript. Si ferma all'ottavo elemento: oltre, l'ultima scheda
   arriverebbe con un ritardo che si legge come un difetto, non come
   un'intenzione. */
html.gz-ready .gz-rv-cascata > .gz-reveal.gz-in:nth-child(2) { animation-delay:.07s; }
html.gz-ready .gz-rv-cascata > .gz-reveal.gz-in:nth-child(3) { animation-delay:.14s; }
html.gz-ready .gz-rv-cascata > .gz-reveal.gz-in:nth-child(4) { animation-delay:.21s; }
html.gz-ready .gz-rv-cascata > .gz-reveal.gz-in:nth-child(5) { animation-delay:.28s; }
html.gz-ready .gz-rv-cascata > .gz-reveal.gz-in:nth-child(6) { animation-delay:.35s; }
html.gz-ready .gz-rv-cascata > .gz-reveal.gz-in:nth-child(7) { animation-delay:.42s; }
html.gz-ready .gz-rv-cascata > .gz-reveal.gz-in:nth-child(n+8) { animation-delay:.49s; }

/* --- CHI HA CHIESTO MENO MOVIMENTO ----------------------------------
   Non è un dettaglio di gusto: per alcune persone le animazioni causano
   nausea o vertigini, e chi ha quel problema lo dichiara una volta nelle
   impostazioni del proprio dispositivo. Qui i contenuti compaiono e basta,
   senza spostamenti e senza ingrandimenti.

   Il sito non lo faceva: era una mancanza di accessibilità, non una
   scelta. */
@media (prefers-reduced-motion: reduce) {
  html.gz-ready .gz-reveal,
  html.gz-ready .gz-reveal.gz-in {
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}