/* SALVETTA — schede tecniche dei vini.
   Il linguaggio visivo e' quello della newsletter, non quello del sito: fondo
   crema, cartoncino bianco, testa e piede scuri, Georgia per il testo e Arial
   per le etichette maiuscole. Le schede nascono per essere anche stampate e
   allegate a un'email, quindi restano documenti a se' stanti, senza la
   navigazione del sito. In fondo al file c'e' il foglio per la stampa. */

:root{
  --pagina:#f2ede4;      /* fondo attorno al cartoncino */
  --carta:#fdfcf8;       /* corpo della scheda */
  --bianco:#ffffff;
  --scuro:#1a1a18;       /* testa e piede */
  --barra:#2c2920;       /* fascia sotto la testa */
  --oro:#a08c5c;
  --oro-chiaro:#d4b87a;
  --bordo:#d4c89a;       /* contorno dei riquadri dati */
  --filo:#c8b98a;        /* linea delle righe di sezione */
  --pannello:#f5f0e4;    /* fondo delle citazioni */
  --testo:#3a3a36;
  --tenue:#7a7a72;
  --tenue-2:#8a8278;
  --citazione:#4a4436;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box}
body{margin:0;padding:24px 16px;background:var(--pagina);
  font-family:var(--serif);color:var(--testo);
  -webkit-text-size-adjust:100%}

.foglio{max-width:600px;margin-inline:auto;background:var(--bianco);
  border-radius:4px;overflow:hidden}

/* ---------------- testa ---------------- */
.foglio__testa{background:var(--scuro);padding:36px 40px 28px;text-align:center}
.foglio__testa .occhiello{margin:0 0 10px}
/* Il marchio e' gia' un tondo con gli angoli trasparenti: non serve ne'
   l'anello dorato ne' il ritaglio circolare, che erano quelli della
   newsletter, dove al centro c'era una fotografia quadrata. 'contain'
   invece di 'cover' perche' non venga mai ritagliato. */
.foglio__marchio{width:100px;height:100px;margin:0 auto 14px;
  display:block;object-fit:contain}
.foglio__nome{margin:0 0 4px;font-family:var(--serif);font-size:22px;
  letter-spacing:4px;color:var(--oro-chiaro);text-transform:uppercase}
.foglio__sede{margin:0;font-family:var(--sans);font-size:10px;letter-spacing:2px;
  color:var(--tenue);text-transform:uppercase}

/* fascia con i tre richiami, separati da pallini dorati */
.foglio__barra{background:var(--barra);padding:10px 40px;display:flex;
  align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--sans);font-size:10px;letter-spacing:2px;
  color:var(--oro);text-transform:uppercase;text-align:center;white-space:nowrap}
.foglio__barra span:first-child{text-align:left}
.foglio__barra span:last-child{text-align:right}
.foglio__barra i{width:4px;height:4px;background:var(--oro);border-radius:50%;
  flex:none;display:block}

/* ---------------- corpo ---------------- */
.foglio__corpo{background:var(--carta);padding:40px 40px 32px}

.occhiello{font-family:var(--sans);font-size:11px;letter-spacing:3px;
  color:var(--oro);text-transform:uppercase;margin:0 0 10px}
.foglio__titolo{margin:0 0 8px;font-family:var(--serif);font-size:26px;
  font-weight:normal;color:var(--scuro);line-height:1.3}
.foglio__luogo{margin:0 0 6px;font-family:var(--sans);font-size:11px;
  color:var(--tenue-2);font-style:italic}
.foglio__sommario{margin:0 0 24px;font-family:var(--serif);font-style:italic;
  font-size:15px;color:var(--tenue);line-height:1.6}

/* il fregio a tre losanghe che nella newsletter separa l'apertura dal testo */
.fregio{margin:0 0 24px;padding:8px 0;text-align:center;font-family:var(--serif);
  font-size:16px;color:var(--oro);letter-spacing:8px}

.foglio__corpo p{margin:0 0 20px;font-family:var(--serif);font-size:15px;
  line-height:1.8;color:var(--testo)}
.foglio__corpo p:last-child{margin-bottom:0}
/* senza il piede l'ultimo blocco chiude il cartoncino: il suo margine
   si sommerebbe all'imbottitura, lasciando un vuoto sproporzionato */
.foglio__corpo > *:last-child{margin-bottom:0}
.foglio__corpo strong{font-weight:bold}

/* citazione: filetto dorato a sinistra e fondo crema */
.citazione{margin:24px 0;display:flex;background:var(--pannello);
  border-left:4px solid var(--oro)}
.citazione p{margin:0;padding:14px 20px;font-style:italic;font-size:15px;
  color:var(--citazione);line-height:1.7}

/* riga di sezione: etichetta dorata e linea che prosegue fino al margine */
.riga{display:flex;align-items:center;gap:12px;margin:32px 0 14px;
  font-family:var(--sans);font-size:10px;letter-spacing:3px;color:var(--oro);
  text-transform:uppercase}
.riga::after{content:"";flex:1;height:0;border-top:1px solid var(--filo)}

/* ---------------- riquadri dei dati ---------------- */
.dati{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin:0 0 28px;list-style:none;padding:0}
.dato{background:var(--bianco);border:1px solid var(--bordo);border-radius:4px;
  padding:14px 16px}
/* le voci discorsive occupano tutta la riga: su due colonne andrebbero
   a capo troppe volte e la scheda diventerebbe illeggibile */
.dato--largo{grid-column:1/-1}
.dato__voce{display:block;margin:0 0 4px;font-family:var(--sans);font-size:10px;
  letter-spacing:2px;color:var(--oro);text-transform:uppercase}
.dato__valore{display:block;font-family:var(--sans);font-size:14px;
  font-weight:bold;color:var(--scuro);line-height:1.5}
.dato--largo .dato__valore{font-weight:normal;font-size:13.5px}

/* etichetta della bottiglia */
.etichetta{margin:0 0 28px}
.etichetta img{width:100%;height:auto;display:block;border:1px solid var(--bordo);
  border-radius:4px}
.etichetta figcaption{margin:6px 0 0;font-family:var(--sans);font-size:11px;
  color:var(--tenue-2);text-align:center;font-style:italic}

/* ---------------- piede ----------------
   NON IN USO: il piede e' stato tolto da entrambe le schede. Le regole
   restano qui perche' servirebbero subito se si decidesse di farlo
   ricomparire nella sola stampa, dove indirizzo e partita IVA hanno senso. */
.foglio__piede{background:var(--scuro);padding:24px 40px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.foglio__piede address{font-style:normal;font-family:var(--sans);font-size:10px;
  color:var(--tenue);line-height:1.8}
.foglio__piede a.bottone{font-family:var(--sans);font-size:10px;color:var(--oro);
  letter-spacing:2px;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--oro);padding:8px 14px;border-radius:2px;
  display:inline-block;margin:0 0 6px 8px;white-space:nowrap}
.foglio__piede a.bottone:hover{background:var(--oro);color:var(--scuro)}

/* ritorno al sito: fuori dal cartoncino, discreto */
.ritorno{max-width:600px;margin:0 auto 14px;font-family:var(--sans);font-size:10px;
  letter-spacing:2px;text-transform:uppercase}
.ritorno a{color:var(--oro);text-decoration:none;border-bottom:1px solid transparent}
.ritorno a:hover{border-bottom-color:var(--oro)}

/* ---------------- su schermo largo: scheda a tutta pagina ----------------
   Fino a ottobre il cartoncino restava largo 600 pixel a qualsiasi dimensione
   di finestra: da computer era la versione per telefono ingrandita, lunga da
   scorrere. Da 1000 pixel in su diventa una pagina vera: il racconto a
   sinistra, i dati e l'etichetta nella colonna di destra, le domande frequenti
   in fondo su due colonne. Si guadagna in larghezza quello che si risparmia in
   altezza. Nessun contenuto cambia: cambia solo la disposizione.
   Sotto i 1000 pixel i due contenitori spariscono (display:contents) e tutto
   torna in fila come prima: la versione per telefono resta intatta. */
.foglio__racconto,.foglio__lato{display:contents}

@media (min-width:1000px){
  body{padding:40px clamp(24px,4vw,56px)}
  /* overflow:hidden impedirebbe alla colonna dei dati di restare a vista:
     clip taglia gli angoli arrotondati allo stesso modo ma non crea un'area
     di scorrimento, quindi il comportamento persistente funziona. */
  .foglio{max-width:1320px;overflow:clip}
  .foglio__testa{padding:48px 56px 36px}
  .foglio__testa img{width:138px}
  .foglio__nome{font-size:32px}

  .foglio__corpo{display:grid;align-items:start;
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    column-gap:clamp(40px,4vw,72px);
    padding:56px clamp(40px,4vw,64px) 52px}
  .foglio__racconto{display:block;grid-column:1}
  /* La colonna dei dati resta a vista mentre si legge: nella scheda del Vino
     Santo il racconto e' tre volte piu' lungo, e senza questo accorgimento
     meta' schermo restava vuota per tutta la lettura. */
  .foglio__lato{display:block;grid-column:2;position:sticky;top:28px;align-self:start}
  /* le domande chiudono la scheda a tutta larghezza */
  .foglio__corpo > .riga,.foglio__corpo > .faq{grid-column:1/-1}

  /* colonna di destra: un dato sotto l'altro. L'etichetta non sta qui: da sola
     allungava la colonna di mezzo schermo rispetto al testo, lasciando un vuoto
     a sinistra. Sta sotto, a tutta larghezza, dove fa da stacco verso le domande. */
  .foglio__lato .riga:first-child{margin-top:0}
  .dati{grid-template-columns:1fr;gap:10px;margin-bottom:0}
  .dato{padding:13px 15px}
  .dato--largo .dato__valore{font-size:14px}
  /* anche il suo filetto si ferma a meta': a tutta larghezza attraversava gli
     spazi fra i riquadri dei dati mentre si scorre */
  .foglio__corpo > .riga:has(+ .etichetta){grid-column:1}
  /* L'etichetta resta nella colonna del racconto e allineata a sinistra: a
     tutta larghezza finiva sotto la colonna dei dati, che scorrendo le passava
     sopra. */
  .foglio__corpo > .etichetta{grid-column:1;max-width:440px;margin-inline:0;
    margin-bottom:8px}

  /* domande e risposte affiancate a due a due */
  /* il filetto sta sopra ogni domanda, non sopra il blocco intero: altrimenti
     attraversa anche lo spazio fra le due colonne e le due righe in alto
     sembrano collegate */
  .faq{display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(32px,3.4vw,56px);align-content:start}
  .foglio__corpo > .faq{border-top:0}
  .faq__voce{border-top:1px solid var(--bordo)}
  .faq__r p{font-size:15.5px}

  /* stessa larghezza del foglio, cosi' la freccetta parte dal suo bordo */
  .ritorno{max-width:1320px}

  .foglio__titolo{font-size:40px}
  .foglio__corpo p{font-size:16px}
  .citazione p{font-size:16px}
}

@media (max-width:620px){
  body{padding:12px 10px}
  .foglio__testa,.foglio__piede{padding-inline:20px}
  .foglio__corpo{padding:24px 20px}
  .foglio__barra{padding-inline:20px;font-size:9px;letter-spacing:1px}
  .foglio__titolo{font-size:22px}
  .foglio__piede{flex-direction:column;align-items:flex-start}
  .foglio__piede a.bottone{margin-left:0;margin-right:8px}
}

/* ---------------- stampa ----------------
   Chi preme Stampa deve ottenere un PDF pulito da allegare a un'email o da
   dare a un distributore: via il fondo colorato attorno, via il link di
   ritorno, e nessun riquadro spezzato fra due pagine. */
/* ---------------- domande frequenti ----------------
   Sono le domande che Google mostra accanto ai risultati (sezione 5 delle
   Modifiche di Emerge). Si aprono e si chiudono da sole, con <details>: la
   scheda non carica alcuno script e non deve iniziarlo a fare adesso. La
   risposta resta nel documento anche a tendina chiusa, quindi i motori di
   ricerca la leggono comunque. */
.faq{margin-top:4px;border-top:1px solid var(--bordo)}
.faq__voce{border-bottom:1px solid var(--bordo)}
.faq__voce > summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  gap:14px;padding:14px 2px}
.faq__voce > summary::-webkit-details-marker{display:none}
.faq__voce > summary:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.faq__d{flex:1;margin:0;font-family:var(--sans);font-size:14px;font-weight:bold;
  line-height:1.45;color:var(--citazione)}
/* il segno "+" ruota di 45 gradi e diventa una "x" quando la voce e' aperta */
.faq__segno{flex:none;width:16px;height:16px;position:relative;margin-top:3px;color:var(--oro);
  transition:transform .25s ease}
.faq__segno::before,.faq__segno::after{content:"";position:absolute;background:currentColor}
.faq__segno::before{left:0;right:0;top:7px;height:2px}
.faq__segno::after{top:0;bottom:0;left:7px;width:2px}
.faq__voce[open] .faq__segno{transform:rotate(45deg)}
.faq__r{padding:0 30px 16px 2px}
.faq__r p{margin:0;font-family:var(--serif);font-size:15px;line-height:1.75;color:var(--testo)}
.faq__r p + p{margin-top:12px}
.negozio{color:var(--oro);font-weight:bold;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.negozio:hover{color:var(--citazione)}
@media (prefers-reduced-motion:reduce){.faq__segno{transition:none}}
@media (max-width:620px){.faq__r{padding-right:2px}}

@media print{
  @page{margin:12mm}
  body{padding:0;background:#fff}
  .ritorno{display:none}
  .foglio{max-width:none;border-radius:0}
  .foglio__corpo{display:block}
  .faq{display:block}
  .foglio__racconto,.foglio__lato{display:block}
  .foglio__testa,.foglio__barra,.foglio__piede{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dato,.citazione,.etichetta{break-inside:avoid;page-break-inside:avoid}
  .riga{break-after:avoid;page-break-after:avoid}
  .foglio__piede a.bottone{display:none}
  .faq__voce{break-inside:avoid;page-break-inside:avoid}
  .faq__segno{display:none}
  /* su carta le risposte vanno stampate tutte, anche a tendina chiusa */
  .faq__voce > .faq__r{display:block}
}