/* ------------------------------------------------------------------
   Sorpres.one — riallineamento "carta bianca"
   Sovrascrive lo stile d'epoca senza modificarlo: per tornare indietro
   basta rimuovere questo file e la sua riga in functions.php.
   Obiettivo: stessa impaginazione da giornale, ma con la carta, i
   caratteri e i colori del giornale che viene realmente stampato.
   ------------------------------------------------------------------ */

:root{
  --carta:#FFFFFF;
  --carta2:#F5F4F1;
  --inchiostro:#14110F;
  --seppia:#5E5A54;
  --filo:#D4D0C9;
  --rosso:#C1261C;
  --ombra:rgba(0,0,0,.12);
}

/* ---------- il foglio ---------- */
body{
  background:#E9E7E2;
  font-family:"Source Serif 4",Georgia,serif;
}
.foglio{
  background:#fff;
  border:1px solid #E2DED7;
  box-shadow:0 10px 44px rgba(0,0,0,.10);
}
.foglio:before,.foglio:after{display:none;}   /* via texture invecchiata e ombra seppia */
.cornice{border:0;padding:22px 24px 28px;}

/* ---------- caratteri del giornale vero ---------- */
.gotico{
  font-family:"Archivo Black",Impact,sans-serif;font-weight:400;
  letter-spacing:-.025em;line-height:.94;
}
h1,h2,.titolone,.avvisofinale h2{
  font-family:"Archivo Black",Impact,sans-serif;font-weight:400;letter-spacing:-.015em;
}
h3,.testatina,.riquadro h3,.voce-esempio h3,.quattro h3{
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:700;
}
.capolettera:first-letter{font-family:"Archivo Black",Impact,sans-serif;font-weight:400;}
.catenaccio{font-family:"Source Serif 4",Georgia,serif;color:var(--seppia);}
.motto,.volume,.sottotitolino,.notiziola b,.lettera .chi,.campo label,.voce-esempio .dove{
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-variant:normal;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
}
.quattro .rom,.numsez{font-family:"Archivo Black",Impact,sans-serif;letter-spacing:.08em;}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea,
.mancanti button{font-family:"Source Serif 4",Georgia,serif;}

/* ---------- filetti, riquadri, superfici ---------- */
.filetto.doppio,.testatina,.motto,.volume,.indice-esempi,.colophon,.blocco{border-color:var(--inchiostro);}
.riquadro,.avvisofinale,.avvertenza{
  background:var(--carta2);border:1px solid var(--inchiostro);
}
.incisione{background:#fff;border:1px solid var(--filo);padding:0;}
.voce-esempio:hover{background:var(--carta2);}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea,#riepilogo{
  background:var(--carta2);
}

/* ---------- l'accento di colore ---------- */
.bottone{
  font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:700;
  border:0;background:var(--rosso);color:#fff;padding:13px 26px;letter-spacing:.09em;font-size:13.5px;
}
.bottone:hover{background:var(--inchiostro);color:#fff;}
.testatina{background:var(--inchiostro);color:#fff;border:0;padding:7px 10px;letter-spacing:.13em;}
.sommario a .n,.voce-esempio .dove,.quattro .rom,.numsez,.mancanti b{color:var(--rosso);}
.sommario a:hover{color:var(--rosso);}

/* ---------- fotografie ----------
   Nello spot la vita e' a colori e solo il giornale e' in bianco e nero:
   qui si applica la stessa regola, quindi via ogni filtro seppia. */
.fotoincisa .scena,.lettera .foto,.album figure img{filter:none;}
.frame{filter:none;}
.frame:after{background:linear-gradient(to top,rgba(0,0,0,.80) 0%,rgba(0,0,0,.22) 34%,rgba(0,0,0,0) 62%);}
.frame .cap,.album figure figcaption{color:#fff;}
.album figure figcaption{background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,0));font-style:normal;}
.proiezione{background:#111;}
.incisione .lastra{
  filter:none;
  background:repeating-linear-gradient(104deg,#e9e6e0 0 2px,#dcd8d1 2px 4px,#cfcac2 4px 7px);
}
.lettera .foto{background:repeating-linear-gradient(72deg,#e9e6e0 0 2px,#dcd8d1 2px 5px,#cfcac2 5px 8px);}

/* ---------- dettagli ---------- */
.didascalia{color:var(--seppia);}
.completo{color:#2E6B3F;}
@media print{ body{background:#fff;} .foglio{box-shadow:none;border:0;} }

/* ------------------------------------------------------------------
   Landing dello spot — /ogni-famiglia/
   ------------------------------------------------------------------ */
.lp-hero{display:grid;grid-template-columns:340px 1fr;gap:34px;align-items:start;margin-bottom:8px;}
@media(max-width:900px){.lp-hero{grid-template-columns:1fr;gap:22px;}}
.lp-video{border:1px solid var(--inchiostro);background:#111;line-height:0;}
.lp-video video{width:100%;height:auto;display:block;}
.lp-hero .titolone{text-align:left;font-size:clamp(34px,4.4vw,58px);line-height:.98;}
.lp-hero .catenaccio{text-align:left;margin-top:14px;font-size:clamp(17px,1.9vw,22px);}
.lp-hero .occhio{font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:13px;color:var(--rosso);margin-bottom:10px;display:block;}
.lp-hero p{font-size:17.6px;line-height:1.55;margin-top:14px;}
.lp-passi{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px;}
.lp-passi > div{padding:0 18px;border-left:1px solid var(--filo);}
.lp-passi > div:first-child{border-left:0;padding-left:0;}
.lp-passi .num{font-family:"Archivo Black",Impact,sans-serif;color:var(--rosso);font-size:15px;letter-spacing:.08em;}
.lp-passi h3{font-size:19px;margin:4px 0 6px;}
.lp-passi p{font-size:16.2px;line-height:1.46;}
@media(max-width:900px){.lp-passi{grid-template-columns:1fr;}
  .lp-passi > div{border-left:0;border-top:1px dotted var(--filo);padding:14px 0 0;}
  .lp-passi > div:first-child{border-top:0;}}
.lp-dove{border:1px solid var(--inchiostro);background:var(--carta2);padding:26px;text-align:center;margin-top:26px;}
.lp-dove h2{font-size:clamp(24px,3.2vw,36px);}
.lp-dove p{max-width:62ch;margin:12px auto 0;font-size:17.4px;}
.lp-nota{font-size:15px;font-style:italic;color:var(--seppia);text-align:center;margin-top:10px;}

/* fascia dello spot in cima alla prima pagina */
.hp-spot{display:grid;grid-template-columns:210px 1fr;gap:26px;align-items:center;
  border:1px solid var(--inchiostro);background:var(--carta2);padding:20px;margin-bottom:20px;}
@media(max-width:760px){.hp-spot{grid-template-columns:1fr;}}
.hp-spot video{width:100%;display:block;border:1px solid var(--inchiostro);background:#111;}
.hp-spot .occhio{font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:12.5px;color:var(--rosso);display:block;margin-bottom:6px;}
.hp-spot h2{font-size:clamp(23px,3vw,34px);line-height:1.02;}
.hp-spot p{font-size:17px;margin-top:9px;}

/* ---------- correzioni mobile ----------
   Archivo Black e' molto piu' largo del serif originale: il minimo di 50px
   della testata faceva uscire "Sorpres.one" dallo schermo sotto i 420px. */
.gotico{font-size:clamp(27px,9.1vw,104px);}
@media(max-width:640px){
  .foglio{padding:14px;}
  .cornice{padding:14px 12px 20px;}
  .motto{font-size:11px;letter-spacing:.08em;}
  .volume{font-size:10.5px;letter-spacing:.04em;}
  .lp-hero .titolone{font-size:clamp(28px,8.6vw,44px);}
  .hp-spot{padding:14px;}
}

/* ---------- ordine delle colonne su tablet e telefono ----------
   In griglia le colonne collassano nell'ordine del codice: la spalla
   sinistra finirebbe prima del titolo d'apertura. Qui la colonna
   centrale viene portata in cima, come sul desktop. */
@media(max-width:940px){
  .principale > *:nth-child(2){
    order:-1;
    border-top:0;margin-top:0;padding-top:0;
  }
  .principale > *:first-child{
    border-top:3px double var(--inchiostro);
    margin-top:18px;padding-top:18px;
  }
}

/* ---------- correzione overflow delle colonne ----------
   In griglia gli elementi hanno min-width:auto e non scendono sotto la
   larghezza della parola piu' lunga. Archivo Black e' molto piu' largo del
   serif originale, quindi i titoli alzavano il minimo e la terza colonna
   usciva dal foglio. min-width:0 le lascia stringere; l'a-capo evita che
   una parola singola sfori comunque. */
.principale > *,
.quattro > div,
.tre-riquadri > *,
.lp-passi > div,
.modulo > div,
.corpo-esempio > div,
.colophon > *,
.duecol > *,
.trecol > *,
.lp-hero > *{min-width:0;}

h1,h2,h3,.titolone,.testatina,.gotico,.catenaccio,.notiziola b,.voce-esempio h3{
  overflow-wrap:break-word;
}
.testatina{letter-spacing:.07em;}

/* ---------- sezioni a piena larghezza ----------
   Le sezioni lunghe stanno fuori dalla griglia a tre colonne: cosi' le
   spalle non devono inseguire una colonna centrale altissima, e il testo
   lungo si legge su piu' colonne come in un giornale vero. */
.sezione-larga{margin-top:26px;}
.sezione-larga .duecolonne{columns:3;column-gap:28px;}
@media(max-width:1000px){.sezione-larga .duecolonne{columns:2;}}
@media(max-width:640px){.sezione-larga .duecolonne{columns:1;}}
.sezione-larga .domande{columns:3;}
@media(max-width:1000px){.sezione-larga .domande{columns:2;}}
@media(max-width:640px){.sezione-larga .domande{columns:1;}}

/* ---------- niente vuoti in fondo alle colonne ----------
   Le tre colonne hanno larghezze diverse, quindi lo stesso testo occupa
   altezze diverse e non si equilibreranno mai a tutte le risoluzioni.
   Invece di inseguire il pareggio aggiungendo contenuti, lo spazio
   residuo viene distribuito fra i blocchi: la colonna arriva sempre in
   fondo e la spaziatura resta quella di un giornale. */
@media(min-width:941px){
  .principale > *{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .principale > * > *{flex:0 0 auto;}
}

/* ---------- indice degli esempi ----------
   La griglia originale (210px + 1fr + 90px) era tarata sulla larghezza
   piena: dentro la colonna centrale lasciava 170px a titolo e testo, con
   una parola per riga, e il dominio lungo sforava la prima colonna.
   Qui il dominio passa su una riga propria e il resto si adatta. */
.voce-esempio{
  grid-template-columns:1fr auto;
  gap:3px 14px;
  align-items:baseline;
}
.voce-esempio > .dove{
  grid-column:1 / -1;
  font-size:12.5px;letter-spacing:.05em;overflow-wrap:anywhere;
}
.voce-esempio > div{grid-column:1;min-width:0;}
.voce-esempio > .apri{grid-column:2;align-self:start;white-space:nowrap;}
.voce-esempio h3{font-size:clamp(19px,2.2vw,25px);}
.voce-esempio p{text-align:left;hyphens:none;font-size:15.8px;}

/* ---------- sillabazione dei titoli ----------
   break-word spezzava le parole senza trattino ("RACCOMANDAZ IONE").
   Con hyphens:auto l'a-capo avviene dove serve e con il trattino; la
   spezzatura secca resta solo come ultima risorsa. */
h1,h2,h3,.titolone,.testatina,.gotico,.catenaccio,.notiziola b,.voce-esempio h3{
  hyphens:auto;
  overflow-wrap:break-word;
}
.riquadro h3{font-size:17.5px;letter-spacing:.01em;}
.testatina{hyphens:none;}