/* =========================================================================
   I giornali — la sezione degli articoli sul sessantesimo
   Un foglio a parte invece di righe aggiunte a site.css: il sito approvato
   resta identico, e questa sezione si toglie o si aggiorna da sola.
   Usa la tavolozza e i caratteri già dichiarati in site.css.
   ========================================================================= */

.giornali{--g-gap:clamp(16px,2.2vw,28px)}

/* ---------- il binario ----------
   Esce dalla colonna e arriva ai bordi dello schermo: se c'è una scheda in
   più, se ne vede un pezzo, e si capisce che si può scorrere senza
   bisogno di scriverlo. */
.giornali__rail{display:flex;gap:var(--g-gap);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  margin-inline:calc(var(--px) * -1);padding:4px var(--px) 6px;
  scroll-padding-inline:var(--px);overscroll-behavior-x:contain}
.giornali__rail::-webkit-scrollbar{display:none}
.giornali__rail:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* tre schede in vista su schermo largo, due su tavoletta, una su telefono —
   la successiva, quando c'è, sporge sempre un poco */
.giornali__c{flex:0 0 calc((100% - var(--g-gap) * 2) / 3);min-width:0;
  scroll-snap-align:start;display:flex;flex-direction:column;
  background:rgba(255,255,255,.028);border:1px solid rgba(182,130,53,.2);
  border-radius:3px;overflow:hidden;color:inherit;
  transition:border-color .45s var(--e),background .45s ease,transform .45s var(--e)}
@media (max-width:999px){ .giornali__c{flex-basis:calc((100% - var(--g-gap)) / 2.15)} }
@media (max-width:620px){ .giornali__c{flex-basis:min(84%,340px)} }

@media (hover:hover) and (pointer:fine){
  .giornali__c:hover{border-color:rgba(182,130,53,.5);background:rgba(255,255,255,.05);
    transform:translateY(-3px)}
  .giornali__c:hover .giornali__targa img{transform:scale(1.04)}
  .giornali__c:hover .giornali__l{color:var(--gold-lt)}
}
.giornali__c:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- la targa della testata ----------
   Il nome non è un logo importato ma testo composto con il carattere del
   sito: nessuno stiramento, nitido a qualsiasi ingrandimento, e le testate
   parlano con la stessa voce. Il corsivo è la regola tipografica italiana
   per i nomi delle testate.
   La proporzione è 16:10, la stessa dei file: se fossero diverse, il
   contenitore ritaglierebbe la fotografia una seconda volta. */
.giornali__targa{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:11px;aspect-ratio:16/10;overflow:hidden;
  padding:18px clamp(14px,2vw,26px);text-align:center;
  border-bottom:1px solid rgba(182,130,53,.3);background:var(--ink2)}
.giornali__targa picture{position:absolute;inset:0}
/* Il viraggio verso l'oro è cotto dentro il file, non fatto qui con un
   filtro: la fotografia è già di casa prima ancora di essere velata. */
.giornali__targa img{width:100%;height:100%;object-fit:cover;opacity:.8;
  transition:transform 1.1s var(--e)}
.giornali__targa::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(13,11,9,.26),rgba(13,11,9,.62))}
.giornali__nome,.giornali__filo,.giornali__cosa{position:relative;z-index:1}
.giornali__nome{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-style:italic;font-size:clamp(27px,2.6vw,36px);line-height:1.08;
  letter-spacing:-.005em;color:var(--gold-lt);text-wrap:balance;
  text-shadow:0 1px 14px rgba(13,11,9,.55)}
.giornali__filo{display:block;width:30px;height:1px;flex:0 0 auto;
  background:rgba(226,196,141,.7)}
.giornali__cosa{font-family:'Lora',Georgia,serif;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.5;color:#c4b89f;
  text-shadow:0 1px 10px rgba(13,11,9,.6)}

/* ---------- titolo e invito ----------
   Il titolo è quello dell'articolo, nella sua lingua: anche nella versione
   inglese resta in italiano, perché tradurre il titolo di un giornale
   significherebbe attribuirgli parole che non ha scritto. */
.giornali__in{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;
  padding:clamp(18px,2vw,24px) clamp(18px,2vw,24px) clamp(20px,2.2vw,26px)}
.giornali__t{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(21px,1.75vw,25px);line-height:1.2;color:#f2ead9;margin:0;
  text-wrap:balance}
.giornali__l{margin-top:auto;display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dk);
  transition:color .4s ease}
.giornali__l i{display:block;width:7px;height:7px;flex:0 0 auto;
  border-top:1.4px solid currentColor;border-right:1.4px solid currentColor;
  transform:rotate(45deg)}

/* ---------- frecce e indicatori ----------
   Compaiono solo quando c'è davvero qualcosa da scorrere: con tre articoli
   su schermo largo stanno tutti in vista, e frecce spente sarebbero solo
   rumore. Il copione le accende appena le schede debordano. */
.giornali__barra{display:none;align-items:center;gap:14px;margin-top:clamp(18px,2.4vh,26px)}
.giornali.scorre .giornali__barra{display:flex}
.giornali__f{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid rgba(182,130,53,.4);border-radius:50%;background:transparent;
  color:var(--gold);cursor:inherit;padding:0;
  transition:background .35s ease,color .35s ease,border-color .35s ease,opacity .35s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.giornali__f:disabled{opacity:.25}
@media (hover:hover) and (pointer:fine){
  .giornali__f:not(:disabled):hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
}
.giornali__f svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.giornali__punti{display:flex;gap:7px;margin-left:4px}
.giornali__punti b{display:block;width:6px;height:6px;border-radius:3px;
  background:rgba(182,130,53,.3);transition:background .35s ease,width .35s ease}
.giornali__punti b.on{background:var(--gold-lt);width:20px}

@media (max-width:620px){ .giornali__t{font-size:21px} }

@media (prefers-reduced-motion:reduce){
  .giornali__rail{scroll-behavior:auto}
  .giornali__c,.giornali__targa img{transition:none}
}