/* ══════════════════════════════════════════════════════════════════════════
   AnotherWorld.network — Rassegna (prima pagina d'edizione)
   ──────────────────────────────────────────────────────────────────────────
   Specifica: docs/planning-rassegna/design/specifica.md **v2.0**
   (D-018, D-019, D-024). Copia canonica servita: `deploy/css/` (S-05);
   nessuna copia in `../css/`.

   Impianto a COLONNE di uguale larghezza (1/2/3/4 a 30/48/75rem), una voce
   per cella, ordine di pubblicazione dal più recente letto RIGA PER RIGA.

   Regole non negoziabili:
     · bianco e nero: solo i token del sito (`--black`, `--white`, `--mid`,
       `--light`) e `--focus` **solo** per l'outline di focus;
     · nessuna immagine, icona, emoji, nessun JavaScript sotto l'header;
     · nessun colore nuovo, nessun `border-radius`, nessuna ombra, nessun
       gradiente, nessuna `background-image`;
     · ordine visivo = ordine del DOM: **mai** `grid-auto-flow: dense`,
       `order:`, `column-count`, posizionamento assoluto sulle voci;
     · nessun testo può uscire dalla cella (§6.3).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── token nuovi della rassegna (§2.2) — nessun colore nuovo ── */
:root {
  --rassegna-gutter:        clamp(1rem, 2.5vw, 2.5rem);
  --rassegna-gap:           clamp(1rem, 1.6vw, 1.5rem);
  --rassegna-pad:           clamp(0.6rem, 1.1vw, 0.9rem);
  --rassegna-filetto:       1px;
  --rassegna-filetto-forte: 3px;
  --rassegna-filetto-tema:  2px;
  --rassegna-titolo:        clamp(16px, 1.5vw, 19px);
  --rassegna-estratto:      clamp(14px, 1.15vw, 16px);
  --rassegna-meta:          clamp(12px, 1vw, 13px);
  --rassegna-tema:          clamp(10px, 0.9vw, 12px);
  --rassegna-tracking:      0.12em;
  --rassegna-line:          1.5;
  --rassegna-line-titolo:   1.2;
  --rassegna-misura:        62ch;
  --rassegna-tap:           44px;
  --rassegna-radius:        0;
}

/* ── contenitore della pagina ── */
.rassegna-wrap {
  max-width: var(--max-w, 1200px);
  margin: 0 auto;
  padding: 0 var(--rassegna-gutter);
}

/* ── solo per gli screen reader (il titolo «Le notizie del giorno», §5.4) ── */
.rassegna-wrap .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Nessuna sillabazione fuori dai titoli e dagli estratti (§7.5): il sito
   imposta `hyphens: auto` sui paragrafi e sui titoli degli articoli.
   ATTENZIONE all'ordine: questa regola viene PRIMA di §5.5, e la sillabazione
   vera è riattivata là su `.voce__titolo`/`.voce__estratto` **e sui loro
   discendenti** (`a`, `span`), perché `hyphens` si eredita e la `none`
   impostata sull'`<a>` del titolo vincerebbe su quella del `h3`. */
.rassegna-wrap,
.rassegna-wrap p,
.rassegna-wrap h1,
.rassegna-wrap h2,
.rassegna-wrap h3,
.rassegna-wrap a,
.rassegna-wrap time,
.rassegna-wrap span {
  hyphens: none;
  -webkit-hyphens: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   §5.1 Testata d'edizione
   ══════════════════════════════════════════════════════════════════════════ */
.edizione-testata {
  margin: 2rem 0 1.2rem;
  padding: 0.9rem 0 1rem;
  border-top: var(--rassegna-filetto-forte) solid var(--black);
  border-bottom: var(--rassegna-filetto) solid var(--black);
  text-align: left;
}

.edizione-testata__occhiello {
  font-family: var(--mono);
  font-size: var(--rassegna-tema);
  letter-spacing: var(--rassegna-tracking);
  text-transform: uppercase;
  color: var(--mid);
  margin: 0 0 0.4rem;
}

.edizione-testata__titolo {
  font-family: var(--serif);
  font-size: var(--h1-size, clamp(26px, 5.5vw, 52px));
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 0.6rem;
}

.edizione-testata__riga {
  font-family: var(--mono);
  font-size: var(--rassegna-meta);
  color: var(--mid);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  margin: 0;
  /* i dati vanno a capo per blocchi interi, mai a metà di una data */
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.55rem;
  overflow-wrap: break-word;
}

/* Separatore fra i dati della riga di testata (§5.1).
   Il «·» NON può stare nel `::before` del dato: quando il dato va a capo
   porta il separatore a inizio riga («· 123 notizie»), che in tipografia non
   si fa (stessa regola dell'invito, A-17). Qui il separatore è un `::after`,
   cioè sta **in coda** al dato *precedente*: se è quello a chiudere la riga,
   il «·» finisce a fine riga, dove è corretto, e la riga nuova comincia con
   la parola. Verificato a 320/375/480 px: 0 righe che iniziano con «·». */
.edizione-testata__dato:not(:last-child)::after {
  content: ' ·';
  white-space: pre;
  color: var(--mid);
}

/* ══════════════════════════════════════════════════════════════════════════
   §5.2 Banner «Edizione in corso» — l'unico elemento invertito
   ══════════════════════════════════════════════════════════════════════════ */
.edizione-in-corso {
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  font-size: var(--rassegna-meta);
  letter-spacing: var(--rassegna-tracking);
  text-transform: uppercase;
  text-align: center;
  padding: 0.55rem 0.75rem;
  margin: 0 0 1.2rem;
  font-variant-numeric: tabular-nums;
}

.edizione-in-corso time {
  color: var(--white);
}

/* ══════════════════════════════════════════════════════════════════════════
   §5.3 Navigazione edizioni
   ══════════════════════════════════════════════════════════════════════════ */
.edizione-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0;
  border-bottom: var(--rassegna-filetto) solid var(--light);
  font-family: var(--mono);
  font-size: var(--rassegna-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.edizione-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--rassegna-tap);
  color: var(--black);
  text-decoration: none;
}

.edizione-nav a:hover,
.edizione-nav a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.edizione-nav a:visited {
  color: var(--mid);
}

.edizione-nav a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.edizione-nav__archivio {
  color: var(--mid) !important;
}

/* chiusura dell'edizione: la nav ripetuta sopra il footer del sito (§5.3) */
.edizione-chiusura {
  margin-top: 1.2rem;
  border-top: var(--rassegna-filetto-forte) solid var(--black);
  padding-top: 0.4rem;
}

.edizione-chiusura .edizione-nav {
  margin-bottom: 0;
  border-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   §5.4 Orientamento nella giornata (fasce di tre ore)
   ══════════════════════════════════════════════════════════════════════════ */
.edizione-ore {
  /* Griglia a due colonne: l'etichetta «FASCE» occupa la prima colonna e le
     voci la seconda. Con `flex-wrap` le voci andavano a capo **sotto**
     l'etichetta (x=16 invece di x=79) e la seconda riga non era allineata
     alla prima. Con la griglia le voci restano tutte nella loro colonna, a
     qualunque numero di righe. */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 1rem;
  padding: 0.5rem 0 0.9rem;
  border-bottom: var(--rassegna-filetto-forte) solid var(--black);
  margin-bottom: var(--rassegna-gap);
  font-family: var(--mono);
  font-size: var(--rassegna-meta);
  font-variant-numeric: tabular-nums;
}

.edizione-ore__label {
  color: var(--mid);
  letter-spacing: var(--rassegna-tracking);
  text-transform: uppercase;
  grid-column: 1;
  min-height: var(--rassegna-tap);
  display: flex;
  align-items: center;
}

/* le ancore stanno tutte nella seconda colonna e vanno a capo fra loro */
.edizione-ore__voci {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

/* telefono molto stretto: etichetta sopra, voci a piena larghezza sotto.
   Serve perché a 320 px due colonne lascerebbero ~250 px alle voci. */
@media (max-width: 22rem) {
  .edizione-ore {
    grid-template-columns: 1fr;
  }
  .edizione-ore__label,
  .edizione-ore__voci {
    grid-column: 1;
  }
}

.edizione-ore__voce {
  color: var(--mid);
  text-decoration: none;
  min-height: var(--rassegna-tap);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.edizione-ore__voce:hover,
.edizione-ore__voce:focus {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.edizione-ore__voce:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.edizione-ore__n {
  color: var(--mid);
  font-size: var(--rassegna-meta);
}

/* ══════════════════════════════════════════════════════════════════════════
   §6.1 Griglia delle colonne — 1 → 2 → 3 → 4, MAI dense, MAI column-count
   ══════════════════════════════════════════════════════════════════════════ */
.edizione-colonne {
  display: grid;
  grid-template-columns: 1fr;                  /* telefono: una colonna */
  gap: var(--rassegna-gap) 0;
  grid-auto-flow: row;                         /* mai `dense` */
  align-items: stretch;                        /* le celle di una riga hanno la stessa altezza */
  margin-bottom: 2rem;
}

@media (min-width: 30rem) {
  .edizione-colonne { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48rem) {
  .edizione-colonne { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 75rem) {
  .edizione-colonne { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   §6.2 Filetti fra le celle
   ══════════════════════════════════════════════════════════════════════════ */

/* sopra ogni voce: chiude la voce precedente della stessa colonna */
.voce {
  border-top: var(--rassegna-filetto) solid var(--light);
}

/* fra le colonne: la voce NON è la prima della sua riga.
   Le `.voce` sono gli unici figli della griglia: `:nth-child` è quindi
   affidabile (D-020 punto 1 — con un `<h2>` in mezzo si sfaserebbe). */
@media (min-width: 30rem) {
  .edizione-colonne > .voce:nth-child(2n) {
    border-left: var(--rassegna-filetto) solid var(--light);
  }
}

@media (min-width: 48rem) {
  .edizione-colonne > .voce:nth-child(2n) { border-left: 0; }
  .edizione-colonne > .voce:not(:nth-child(3n+1)) {
    border-left: var(--rassegna-filetto) solid var(--light);
  }
}

@media (min-width: 75rem) {
  .edizione-colonne > .voce:nth-child(3n+2),
  .edizione-colonne > .voce:nth-child(3n) { border-left: 0; }
  .edizione-colonne > .voce:not(:nth-child(4n+1)) {
    border-left: var(--rassegna-filetto) solid var(--light);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   §5.5 / §6.3 Voce — nessun testo fuori dalla cella
   ══════════════════════════════════════════════════════════════════════════ */
.voce {
  display: flex;
  flex-direction: column;
  min-width: 0;                    /* la cella può restringersi in Grid */
  min-height: 0;
  padding: var(--rassegna-pad);
  background: var(--white);
}

/* ── §5.6 etichetta del tema ── */
.voce__tema {
  font-family: var(--mono);
  font-size: var(--rassegna-tema);
  letter-spacing: var(--rassegna-tracking);
  text-transform: uppercase;
  color: var(--mid);
  margin: 0 0 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: var(--rassegna-filetto-tema) solid var(--black);
  overflow-wrap: anywhere;
}

/* ── titolo + link ── */
.voce__titolo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--rassegna-titolo);
  line-height: var(--rassegna-line-titolo);
  letter-spacing: -0.01em;
  margin: 0.45rem 0 0;
  /* il titolo non si tronca mai (§7.2): cresce, non si taglia */
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Sillabazione italiana (A-13) sui testi delle voci, **compresi i discendenti**:
   senza `.voce__titolo a` la `hyphens: none` globale sull'`<a>` (che è
   l'elemento che contiene il testo del titolo) avrebbe la meglio. */
/* `hyphens: auto` (A-13) sui testi delle voci. La specificità conta: la regola
   globale qui sopra è `.rassegna-wrap h3` / `.rassegna-wrap p`, cioè (0,1,1),
   e vincerebbe su `.voce__titolo` (0,1,0) qualunque sia l'ordine. Per questo i
   selettori sono ancorati a `.rassegna-wrap` e valgono (0,2,0) o più. Senza
   `.voce__titolo a` la sillabazione non arriverebbe al testo, che sta nel link. */
.rassegna-wrap .voce__titolo,
.rassegna-wrap .voce__titolo a,
.rassegna-wrap .voce__estratto {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* al telefono la colonna è larga tutta la pagina: sillabare non serve (§4.4) */
@media (max-width: 29.99rem) {
  .rassegna-wrap .voce__titolo,
  .rassegna-wrap .voce__titolo a,
  .rassegna-wrap .voce__estratto {
    hyphens: none;
    -webkit-hyphens: none;
  }
}

.voce__link {
  /* le tre condizioni perché un titolo lungo vada a capo dentro la cella
     invece di sfondarla (§6.3) */
  display: inline-block;
  max-width: 100%;
  min-height: var(--rassegna-tap);
  overflow-wrap: anywhere;
  color: var(--black);
  text-decoration: none;
}

.voce__link:hover,
.voce__link:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.voce__link:visited {
  color: var(--mid);
}

.voce__link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ── estratto: su OGNI voce, senza eccezioni (§7.1, A-12) ── */
.voce__estratto {
  font-family: var(--serif);
  font-size: var(--rassegna-estratto);
  line-height: var(--rassegna-line);
  color: var(--mid);
  margin: 0.55rem 0 0;
  max-width: min(100%, var(--rassegna-misura));
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ── §5.7 riga metadati: segue il testo, non è ancorata in fondo ── */
.voce__meta {
  font-family: var(--mono);
  font-size: var(--rassegna-meta);
  color: var(--mid);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  margin: 0.55rem 0 0;
  overflow-wrap: anywhere;
}

.voce__ora {
  font-variant-numeric: tabular-nums;
}

/* ── §5.8 invito «Leggi e commenta →» ── */
.voce__invito {
  margin: 0.45rem 0 0;
  padding-top: 0.35rem;
  border-top: var(--rassegna-filetto) solid var(--light);
}

.voce__invito-link {
  font-family: var(--mono);
  font-size: var(--rassegna-meta);
  letter-spacing: var(--rassegna-tracking);
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  /* va a capo come blocco: l'invito e il conteggio non si distanziano */
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.4em;
  min-height: var(--rassegna-tap);
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* «· 2 commenti →» resta attaccato, non si spezza a metà */
.voce__invito-link > span {
  white-space: nowrap;
}

.voce__invito-link:hover,
.voce__invito-link:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.voce__invito-link:visited {
  color: var(--mid);
}

.voce__invito-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* L'ancora di fascia (§5.4) e il contenitore delle colonne che riceve il focus
   dallo skip-link (§8.1) sono **punti di arrivo**, non controlli da attivare:
   senza queste regole il browser disegnerebbe un riquadro blu su tutta la
   griglia dopo aver premuto «Vai alle notizie». Il focus c'è (la tastiera
   riparte da lì), semplicemente non si vede come se fosse un pulsante. */
.voce:focus,
.edizione-colonne:focus,
.edizione-vuota:focus {
  outline: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   §5.10 Stato vuoto
   ══════════════════════════════════════════════════════════════════════════ */
.edizione-vuota {
  border-top: var(--rassegna-filetto) solid var(--light);
  border-bottom: var(--rassegna-filetto) solid var(--light);
  padding: 3rem 0;
  margin: 0 0 2rem;
  max-width: var(--rassegna-misura);
}

.edizione-vuota h2 {
  font-family: var(--serif);
  font-size: clamp(18px, 2.9vw, 26px);
  line-height: var(--rassegna-line-titolo);
  margin: 0 0 0.8rem;
  color: var(--black);
}

.edizione-vuota p {
  font-family: var(--serif);
  font-size: var(--body-size, clamp(16px, 2.2vw, 19px));
  line-height: var(--rassegna-line);
  color: var(--mid);
  margin: 0;
}

.edizione-vuota a {
  color: var(--black);
  text-underline-offset: 3px;
}

.edizione-vuota a:visited {
  color: var(--mid);
}

.edizione-vuota a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   §8.6 prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .rassegna-wrap *,
  .rassegna-wrap *::before,
  .rassegna-wrap *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   §8.7 Stampa — A4, 2 colonne, nessun URL stampato
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
  @page {
    size: A4;
    margin: 15mm;
  }

  html,
  body {
    background: #fff;
    color: #000;
    font-size: 10pt;
  }

  .rassegna-wrap {
    max-width: 100%;
    padding: 0;
  }

  .skip-link,
  .edizione-nav,
  .edizione-ore,
  .edizione-in-corso,
  .site-nav,
  .edizione-chiusura {
    display: none !important;
  }

  .edizione-colonne {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4mm 6mm;
  }

  .voce {
    break-inside: avoid;
    page-break-inside: avoid;
    padding: 0 0 2mm;
  }

  .voce__link,
  .voce__invito-link {
    color: #000 !important;
    text-decoration: none;
  }

  /* nessun URL stampato: i link restano testo (§8.7) */
  .voce__invito {
    border-top: 0.5pt solid #000;
  }
}