/* ==========================================================================
   CORREZIONI DEL PORT — non fa parte del tema WordPress.

   `theme.css` e `hcn-cookie-banner.min.css` restano identici byte per byte al
   tema live (verifica `tools/verifica/asset.mjs`), quindi le correzioni ai
   difetti trovati nelle versioni tablet e telefono stanno qui. Il tema live ha
   gli stessi difetti: questo foglio è la divergenza dichiarata, non una
   riscrittura. Ogni blocco dice cosa si rompeva e perché la regola lo chiude.
   ========================================================================== */

/* 1. TESTATA FRA 960 E 1120px (tablet orizzontale, 1024 compreso).
      La navigazione orizzontale compare a 60rem, ma logo + 7 voci + comandi
      non entrano sotto ~1120px: a 1024 la testata era larga 1091px e la pagina
      scorreva in orizzontale di 77px, con la pillola di ricerca tagliata e il
      toggle del tema fuori schermo (e nessun burger, perché a questa misura è
      nascosto). In questa banda si stringono solo spazi e corpo del menu. */
@media (min-width: 60rem) and (max-width: 69.99rem) {
  .header__inner {
    gap: 12px;
  }

  .header__list {
    gap: 6px;
  }

  .header__list a {
    font-size: 1rem;
    padding: 5px 6px;
  }

  .header__search-kbd {
    display: none;
  }
}

/* 2. TITOLO DELL'ARTICOLO FRA 768 E 1000px.
      `.art__hero-testo` è una grid con `justify-items: start`: l'h1 a riga
      unica prende la larghezza del testo (843px) invece di quella della
      colonna (684px), sborda `.art__hero` e viene ritagliato a metà lettera —
      senza ellissi, che il tema prevede ma non scattava. Con il limite alla
      colonna il titolo entra e l'ellissi funziona. */
.art__titolo {
  max-inline-size: 100%;
}

/* 3. TESTATA DEL PALINSESTO (tutte le larghezze).
      `/palinsesto-anime/<slug>/` stampa la testata con le classi dell'hero —
      `.art__hero-testo` e il titolo bianco pensato sopra la copertina — ma
      senza `.art__hero`: titolo, sottotitolo e riga «Stagione …» restavano
      bianchi su bianco (rapporto 1:1) dentro una fascia vuota di ~200px.
      Qui la testata torna testo normale e va a capo: non è un hero, è la
      testata di una pagina elenco. */
.single-palinsesto-anime .art__hero-testo {
  /* Senza la scatola dell'hero il rientro orizzontale non serve: la testata
     si allinea a «Ricerca Avanzata» e alle schede. */
  padding-inline: 0;
}

.single-palinsesto-anime .art__titolo,
.single-palinsesto-anime .art__sotto {
  color: var(--color-text);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.single-palinsesto-anime .art__sotto,
.single-palinsesto-anime .art__data {
  color: var(--color-text-muted);
}

/* 4. TITOLO DEI RISULTATI DI RICERCA (tutte le larghezze).
      `search.php` stampa `h1.hero-arch__titolo` — bianco, pensato sopra la
      copertina di `.hero-arch` — dentro `.arch__testata`, che è testo su
      fondo bianco: anche qui rapporto 1:1, titolo invisibile. */
.search-results .arch__testata .hero-arch__titolo {
  color: var(--color-text);
  /* L'ombra serviva a staccare il bianco dalla foto: su fondo chiaro sporca. */
  text-shadow: none;
}

/* 5. AREE DI TOCCO SOTTO 24px (WCAG 2.5.8, AA) su tablet e telefono.
      Etichette e «Vedi tutto» sono alti 16–23px: il testo resta com'è, ma il
      collegamento si estende di pochi pixel in altezza (e 2 in larghezza) con
      uno pseudo-elemento trasparente, che non sposta nulla nel layout. */
.topbar__links a,
.hero__view-all,
.section__view-all,
.leadlist__view-all {
  position: relative;
}

.topbar__links a::after,
.hero__view-all::after,
.section__view-all::after,
.leadlist__view-all::after {
  content: '';
  position: absolute;
  inset-block: -4px;
  inset-inline: -2px;
}