/* PRESS-1 — la vetrina editoriale.
 *
 * QUESTA PAGINA NON EREDITA NIENTE. Non estende `core/base.html` — è un SITO,
 * servito su un altro dominio — quindi non riceve né il reset né i token della
 * shell: tutto ciò che le serve è dichiarato qui, `box-sizing` compreso. È la
 * lezione del portale di catalog, dove i campi sfondavano il contenitore di
 * 24px per un reset che non c'era.
 *
 * ZERO JAVASCRIPT e nessun terzo: i font sono quelli di sistema, e un sito che
 * smette di leggersi perché un CDN non risponde è un sito chiuso.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --press-ink: #1a1a1a;
  --press-muted: #5a5a5a;
  --press-line: #e2e2e2;
  --press-bg: #ffffff;
  --press-accent: #7a2e0e;
  /* La MISURA DI LETTURA: ~68 caratteri. Una riga più lunga costringe l'occhio
   * a cercare l'inizio della successiva, ed è la prima causa di abbandono su
   * un testo lungo. */
  --press-measure: 42rem;
  /* Un ELENCO non si legge riga per riga, si scorre: la misura di lettura lo
   * strozzerebbe in una colonna sola su uno schermo largo. */
  --press-wide: 64rem;
}

body {
  margin: 0;
  background: var(--press-bg);
  color: var(--press-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.7;
}

.press-article {
  max-width: var(--press-measure);
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

.press-head { margin-bottom: 2.5rem; }

.press-head h1 {
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 .75rem;
  letter-spacing: -0.01em;
}

.press-sub {
  font-size: 1.25rem;
  color: var(--press-muted);
  margin: 0 0 1rem;
  line-height: 1.45;
}

/* La firma e la data in un carattere diverso dal testo: sono metadati, e
 * distinguerli dal corpo è ciò che permette di saltarli leggendo. */
.press-byline, .press-date {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .9375rem;
  color: var(--press-muted);
  margin: 0 0 .25rem;
}

.press-byline { font-weight: 600; color: var(--press-ink); }

/* La dicitura di trasparenza sta SOPRA il contenuto e si vede: un contenuto
 * sponsorizzato marcato in fondo è marcato per il regolamento, non per chi
 * legge. */
.press-disclosure {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--press-accent);
  border: 1px solid var(--press-accent);
  border-radius: 3px;
  padding: .4rem .7rem;
  display: inline-block;
  margin: 0 0 1.5rem;
}

.press-body > * { margin: 0 0 1.5rem; }

.press-h {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 2.5rem 0 1rem;
}

.press-p { margin: 0 0 1.5rem; }

.press-quote {
  margin: 2.5rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--press-accent);
  font-size: 1.3rem;
  line-height: 1.5;
  font-style: italic;
}
.press-quote p { margin: 0 0 .5rem; }
.press-quote cite {
  display: block;
  font-size: .9375rem;
  font-style: normal;
  color: var(--press-muted);
  font-family: system-ui, -apple-system, sans-serif;
}

.press-figure { margin: 2.5rem 0; }
/* PRESS-COLLAUDO-1b — `max-width`, NON `width`.
 *
 * Con `width: 100%` un'immagine PIU' PICCOLA della colonna veniva INGRANDITA:
 * un logo o una foto a bassa risoluzione uscivano sgranati, e nell'anteprima
 * di collaudo il PNG di prova da 8x8 diventava un riquadro grigio alto mezzo
 * schermo. Con `max-width` una piccola resta alla sua misura e una grande si
 * adatta: nessuna immagine viene mai stirata oltre i suoi pixel.
 *
 * `height: auto` resta e serve: senza, un `height` dichiarato nell'HTML
 * deformerebbe le proporzioni appena la larghezza cambia.
 *
 * Vale anche per l'ANTEPRIMA in redazione: usa questi stessi template. */
.press-figure img {
  max-width: 100%;
  height: auto;
  /* CENTRATA NELLA COLONNA (PRESS-COLLAUDO-1c). `display: block` da solo
   * incolla a sinistra l'immagine piu' stretta della colonna: con il
   * `max-width` di 1b una foto piccola resta piccola, e restava piccola e
   * spostata. `margin-inline: auto` la mette al centro; la didascalia la
   * segue, o direbbe di un'immagine che sta da un'altra parte. */
  margin-inline: auto;
}

.press-figure { text-align: center; }
.press-figure figcaption { text-align: center; }
.press-figure figcaption,
.press-gallery figcaption {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .875rem;
  color: var(--press-muted);
  margin-top: .5rem;
  line-height: 1.4;
}

/* Le immagini «wide» e «full» escono dalla misura di lettura: è il motivo per
 * cui esiste quel campo. Il testo resta stretto, la fotografia respira. */
.press-figure--wide { margin-inline: -4rem; }
.press-figure--full { margin-inline: calc(50% - 50vw); }

.press-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
  margin: 2.5rem 0;
}
/* Stessa regola della figura: una foto piu' piccola della cella non si
 * ingrandisce. Esteso in PRESS-COLLAUDO-1c — in 1b la decisione firmata
 * nominava la sola figura dell'articolo, e le altre due superfici erano
 * rimaste indietro. */
.press-gallery img { max-width: 100%; height: auto; display: block; margin-inline: auto; }

.press-video a, .press-sources a { color: var(--press-accent); }

/* Il blocco di ripiego dell'import: TESTO PIANO, e si vede che è da
 * sistemare. Non si nasconde — un difetto invisibile non si corregge. */
.press-legacy {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .8125rem;
  background: #f6f6f6;
  border: 1px dashed var(--press-line);
  padding: 1rem;
  color: var(--press-muted);
}

.press-sources {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--press-line);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .9375rem;
}
.press-sources h2 {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--press-muted);
  margin: 0 0 .75rem;
}
.press-sources ul { margin: 0; padding-left: 1.1rem; }
.press-sources li { margin-bottom: .35rem; }

/* ---------------------------------------------------------------------------
 * PRESS-2a — LE SUPERFICI CHE NON SONO UN ARTICOLO.
 *
 * Fino a qui il foglio vestiva una pagina sola. La regola `body` valeva
 * comunque per tutte, ed è esattamente ciò che ha reso il difetto invisibile:
 * home composta e liste avevano il carattere giusto e nient'altro — nessuna
 * misura, nessun respiro, i link blu di sistema — e in un test tutto passava,
 * perché il markup c'era. L'ha trovato uno scatto.
 *
 * La MISURA di lettura non vale qui: un elenco non si legge riga per riga come
 * un testo, si scorre. Il contenitore è più largo (`--press-wide`), e a 390 px
 * ogni griglia diventa una colonna sola.
 * ------------------------------------------------------------------------- */

.press-composed,
.press-list,
.press-latest {
  max-width: var(--press-wide);
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

/* I titoli delle voci sono di lettura, non di corpo: carattere di sistema, che
 * a corpo grande sta in piedi meglio del serif su schermo. */
.press-composed h3,
.press-list-title,
.press-eblock-title {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.25;
  text-wrap: balance;
}

/* I LINK DELLA VETRINA NON SONO BLU E NON SONO SOTTOLINEATI A RIPOSO: il blu di
 * sistema è la firma di una pagina non vestita. La sottolineatura torna al
 * passaggio e al focus, dove serve a dire che è un bersaglio. */
.press-composed a,
.press-list a,
.press-latest a {
  color: inherit;
  text-decoration: none;
}

.press-composed a:hover,
.press-composed a:focus-visible,
.press-list a:hover,
.press-list a:focus-visible,
.press-latest a:hover,
.press-latest a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .18em;
  color: var(--press-accent);
}

/* --- la pagina composta, blocco per blocco --- */

.press-eblock { margin-bottom: 3.5rem; }

.press-eblock-title {
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--press-muted);
  border-bottom: 1px solid var(--press-line);
  padding-bottom: .6rem;
  margin: 0 0 1.75rem;
}

.press-hero h3 { font-size: clamp(1.75rem, 4.5vw, 2.6rem); margin: 0 0 .6rem; }
.press-hero-excerpt { margin: 0; color: var(--press-muted); }

/* `auto-fit` e non un numero di colonne: la capienza di uno slot è 6, ma un
 * blocco con tre voci non deve lasciare tre buchi. */
.press-eblock--griglia .press-eblock-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
}

.press-cell h3 { font-size: 1.25rem; margin: 0; }

.press-eblock--lista .press-eblock-items {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.press-row { border-top: 1px solid var(--press-line); padding-top: 1.25rem; }
.press-row:first-child { border-top: 0; padding-top: 0; }
.press-row h3 { font-size: 1.4rem; margin: 0 0 .4rem; }
.press-row-excerpt,
.press-feature-excerpt { margin: 0; color: var(--press-muted); font-size: 1rem; }

.press-feature {
  border-left: 3px solid var(--press-accent);
  padding-left: 1.25rem;
}
.press-feature h3 { font-size: 1.6rem; margin: 0 0 .4rem; }

/* --- le liste (categoria, tag, archivio, autore) e il ripiego --- */

.press-list-title { font-size: clamp(1.6rem, 4vw, 2.25rem); margin: 0 0 .5rem; }

/* La biografia di un autore e la descrizione di una categoria fanno lo stesso
   mestiere — dire di che cosa parla questo elenco — e si vestono uguale. */
.press-author-bio,
.press-list-description {
  color: var(--press-muted);
  margin: 0 0 2.5rem;
  max-width: var(--press-measure);
}

.press-list-items,
.press-latest-list { list-style: none; margin: 2rem 0 0; padding: 0; }

.press-list-item,
.press-latest-item {
  border-top: 1px solid var(--press-line);
  padding: 1.5rem 0;
}

.press-list-item > a,
.press-latest-item > a {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  display: inline-block;
}

.press-list-excerpt,
.press-latest-excerpt { margin: .5rem 0 0; color: var(--press-muted); font-size: 1rem; }

.press-empty { color: var(--press-muted); margin-top: 2rem; }

/* La paginazione sono LINK, e devono sembrarlo: qui la sottolineatura a riposo
 * ci vuole, perché non c'è un titolo attorno che dica che si può cliccare. */
.press-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  border-top: 1px solid var(--press-line);
  padding-top: 1.5rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .9375rem;
}

.press-pager a { color: var(--press-accent); text-decoration: underline; }
.press-pager a[rel="next"] { margin-left: auto; }

/* --- i dati di un EVENTO, sull'articolo ---
 *
 * Stanno sopra il titolo perché data e luogo sono l'informazione per cui si
 * apre la pagina di un evento. Senza queste regole erano tre righe di testo
 * indistinguibili dal corpo, ed è così che si vedevano nello scatto. */

.press-event {
  font-family: system-ui, -apple-system, sans-serif;
  border-left: 3px solid var(--press-accent);
  padding: .25rem 0 .25rem 1rem;
  margin: 0 0 1.75rem;
}

.press-event p { margin: 0; }
.press-event-when { font-size: 1.0625rem; font-weight: 600; }
.press-event-where { color: var(--press-muted); font-size: .9375rem; }

/* CONCLUSO NON VUOL DIRE SPARITO (D18): la pagina resta, e lo stato si legge.
 * Il grigio dice «passato» senza che nessuno debba leggere la data e fare il
 * conto. */
.press-event-over {
  display: inline-block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--press-muted);
  border: 1px solid var(--press-line);
  border-radius: 3px;
  padding: .2rem .5rem;
  margin-bottom: .5rem !important;
}

.press-event--over { border-left-color: var(--press-line); }

/* PRESS-2c — L'ELENCO, e i LINK dentro il testo.
 *
 * Il rientro dell'elenco è quello del corpo, non uno in più: un elenco che
 * sporge rispetto ai paragrafi spezza la colonna di lettura.
 */

.press-list-block {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
}

.press-list-block li { margin-bottom: .5rem; }

/* I LINK DEL CORPO SI VEDONO. In una lista si toglie la sottolineatura perché
 * lì il titolo è già il bersaglio; in un articolo no: un link che non si
 * distingue dal testo è un link che nessuno clicca, e l'intera ragione per cui
 * i run esistono è che i rimandi dell'archivio sopravvivano. */
.press-body a,
.press-list-block a {
  color: var(--press-accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.press-body a:hover,
.press-body a:focus-visible,
.press-list-block a:hover,
.press-list-block a:focus-visible { text-decoration-thickness: 2px; }

/* PRESS-AUDIO-1 — IL PODCAST.
 *
 * Il player e' quello NATIVO del browser: `controls` e basta. Riscriverlo
 * vorrebbe dire mantenere codice per rifare cio' che il browser fa gia' — e su
 * questa vetrina la CSP e' `script-src 'self'` con zero inline, quindi un
 * player nostro sarebbe anche un file in piu' da servire.
 *
 * `width: 100%`: i controlli nativi hanno una larghezza propria che su
 * telefono sborda dalla colonna.
 */

.press-player {
  width: 100%;
  margin: .5rem 0 0;
}

.press-episode {
  border-left: 3px solid var(--press-accent);
  padding: .25rem 0 .5rem 1rem;
  margin: 0 0 2rem;
}

.press-episode-length {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .875rem;
  color: var(--press-muted);
  margin: .4rem 0 0;
}

/* La scheda del blocco «Dal podcast»: copertina a sinistra, testo e player a
 * destra — come il blocco del sito attuale. A 390 px si impila. */
.press-episode-card {
  display: grid;
  /* UNA COLONNA DI DEFAULT. Con `8rem 1fr` fisso, un episodio senza copertina
   * finisce tutto nella prima colonna — titolo a capo ogni due parole e un
   * player largo otto centimetri. Le due colonne le chiede il modificatore. */
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
  border-top: 1px solid var(--press-line);
  padding-top: 1.25rem;
}

.press-episode-card--cover { grid-template-columns: 8rem 1fr; }

.press-episode-card:first-child { border-top: 0; padding-top: 0; }
.press-episode-cover img { max-width: 100%; height: auto; display: block; border-radius: 3px; }
.press-episode-card h3 { font-size: 1.25rem; margin: 0 0 .3rem; }
.press-episode-excerpt { margin: 0; color: var(--press-muted); font-size: .9375rem; }

.press-eblock--podcast .press-eblock-items {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

@media (max-width: 32rem) {
  .press-composed,
  .press-list,
  .press-latest { padding: 2rem 1rem 3.5rem; }

  /* Una griglia a 390 px è una colonna. `auto-fit` con `minmax(15rem, …)` ci
   * arriverebbe da solo, ma solo finché nessuno alza quel minimo. */
  .press-eblock--griglia .press-eblock-items { grid-template-columns: 1fr; gap: 1.75rem; }
  /* La scheda dell'episodio si impila: 8rem di copertina piu' un player a
   * fianco non stanno in 390 px senza schiacciare entrambi. */
  .press-episode-card--cover { grid-template-columns: 1fr; gap: .75rem; }
  .press-episode-cover img { max-width: 12rem; }
  .press-eblock { margin-bottom: 2.5rem; }

  body { font-size: 1.0625rem; }
  .press-article { padding: 2rem 1.1rem 3.5rem; }
  /* Su telefono la misura di lettura è già la larghezza dello schermo: le
   * immagini «wide» non hanno margine da cui uscire, e sporgerebbero. */
  .press-figure--wide { margin-inline: 0; }
}

@media print {
  .press-sources { border-top-color: #999; }
  .press-legacy { border-color: #999; }
}

/* PRESS-COLLAUDO-1d — categorie e tag.
 *
 * La CATEGORIA sta in testata e dice di che cosa parla il pezzo; il TAG sta in
 * fondo ed e' un rimando laterale. Due pesi diversi, quindi due rese diverse:
 * la prima si legge prima del titolo del paragrafo, il secondo dopo l'ultimo.
 */

.press-terms {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
}

.press-terms--category .press-term {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}

.press-terms--tag { margin-top: 2rem; }

.press-terms--tag .press-term {
  font-size: .82rem;
  padding: .15rem .6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
}