/**
 * Blog GR — le schede degli articoli (griglia, fascia in evidenza, scheda).
 *
 * UN FOGLIO A PARTE DALLA 1.3.0, per la home. La fascia «Dal blog» in home usa
 * solo la griglia e la scheda, ma fino alla 1.2.0 si portava dietro l'intero
 * `blog.css` (circa 45 KB crudi: pagina dell'articolo, contenuti importati da
 * WordPress, paginazione, colonna laterale). Ora la home carica questo foglio e
 * basta; le pagine del blog caricano questo E `blog.css`, nell'ordine
 * (priorita' 79 e 80), cosi' dentro il livello le regole restano nell'ordine
 * in cui erano scritte in un file solo.
 *
 * Stesse regole di `blog.css`: tutto in `@layer ps-modules`, ogni selettore in
 * `:where()`, nessun colore letterale (solo `var()` con ripiego). Le misure
 * della scheda (`--gr-blog-*`) sono le manopole dichiarate in `blog.css` su
 * `.gr-blog`; in home la fascia non sta dentro `.gr-blog` e ogni uso ha il suo
 * ripiego.
 */

@layer ps-modules {

  /* ==========================================================================
     3. LA GRIGLIA DELL'ELENCO
     --------------------------------------------------------------------------
     `auto-fill` e una larghezza minima, non un numero di colonne per punto di
     rottura: le colonne diventano tre, due o una da sole, e la stessa griglia
     regge l'elenco a tutta pagina e quello stretto accanto alla colonna
     laterale — che con i punti di rottura sarebbe un secondo elenco di media
     query da tenere allineato.

     `min(100%, …)` protegge il caso stretto: senza, una scheda da 17rem dentro
     una colonna da 15rem sfonda, e la pagina scorre di lato.
     ========================================================================== */

  :where(.gr-blog-griglia) {
    display: grid;
    /* `auto-fit` e non `auto-fill`: la differenza si vede solo quando gli
       articoli sono MENO delle colonne che ci starebbero. `auto-fill` crea
       comunque le tracce vuote per riempire la riga — in home, con tre
       articoli in evidenza su una fascia larga, ne generava quattro e la
       quarta restava vuota, lasciando un buco a destra e schede piu' strette
       del necessario. `auto-fit` collassa le tracce vuote e distribuisce
       lo spazio fra le schede che ci sono davvero. Sull'elenco, dove gli
       articoli riempiono la riga, le due forme si comportano identiche. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gr-blog-scheda-minima, 17rem)), 1fr));
    gap: var(--gr-blog-stacco, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :where(.gr-blog-griglia > li) {
    display: flex;
    min-width: 0;
  }

  /* ==========================================================================
     3-bis. LA FASCIA IN EVIDENZA, IN HOME
     --------------------------------------------------------------------------
     Riusa la griglia e la scheda dell'elenco: qui c'e' solo cio' che in
     un'altra pagina non serve — l'intestazione con il collegamento «Tutti gli
     articoli» accanto al titolo.

     `flex-wrap` e non una media query: quando il titolo e il collegamento non
     ci stanno su una riga vanno a capo da soli, a qualunque larghezza succeda,
     e non c'e' un punto di rottura da indovinare.
     ========================================================================== */

  :where(.gr-blog-evidenza) {
    margin-block: var(--gr-blog-stacco, 2rem);
  }

  :where(.gr-blog-evidenza__intestazione) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;
  }

  :where(.gr-blog-evidenza__titolo) {
    margin: 0;
  }

  :where(.gr-blog-evidenza__tutti) {
    color: inherit;
  }

  /* ==========================================================================
     4. LA SCHEDA
     --------------------------------------------------------------------------
     Il collegamento sta sul titolo, e un pseudo-elemento steso sopra rende
     cliccabile tutta la scheda. L'alternativa — avvolgere l'intera scheda in un
     `<a>` — la rende cliccabile allo stesso modo, ma il nome accessibile di
     quel collegamento diventa tutto il testo dentro: data, categoria, titolo e
     riassunto letti di fila, per ogni scheda dell'elenco. E rende impossibile
     mettere nella scheda un secondo collegamento, perche' un `<a>` dentro un
     `<a>` non e' HTML valido: la categoria smetterebbe di essere cliccabile.
     ========================================================================== */

  :where(.gr-blog-scheda) {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    background: var(--fondo, var(--gr-paper, transparent));
    border: 1px solid var(--filetto, var(--gr-line, color-mix(in srgb, currentColor 14%, transparent)));
    border-radius: 2px;
    overflow: hidden;
  }

  :where(.gr-blog-scheda__copertina) {
    position: relative;
    display: block;
    margin: 0;
    aspect-ratio: var(--gr-blog-copertina, 3 / 2);
    overflow: hidden;
    background: var(--fondo-alt, var(--gr-bg, color-mix(in srgb, currentColor 6%, transparent)));
  }

  :where(.gr-blog-scheda__immagine) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gr-blog-durata, 180ms) var(--gr-blog-curva, ease);
  }

  :where(.gr-blog-scheda:hover .gr-blog-scheda__immagine),
  :where(.gr-blog-scheda:focus-within .gr-blog-scheda__immagine) {
    transform: scale(1.03);
  }

  :where(.gr-blog-scheda__testo) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
  }

  :where(.gr-blog-scheda__meta) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--testo-tenue, var(--gr-mute, color-mix(in srgb, currentColor 65%, transparent)));
  }

  /* La categoria e' un secondo collegamento dentro una scheda gia' cliccabile:
     `z-index` la tiene sopra la zona stesa dal titolo, altrimenti il clic
     finisce sempre all'articolo e la categoria sembra rotta. */
  :where(.gr-blog-scheda__categoria) {
    position: relative;
    z-index: 1;
    color: var(--accento, var(--gr-accent, currentColor));
    text-decoration: none;
  }

  :where(.gr-blog-scheda__categoria:hover),
  :where(.gr-blog-scheda__categoria:focus-visible) {
    text-decoration: underline;
  }

  :where(.gr-blog-scheda__titolo) {
    margin: 0;
    font-family: var(--display, var(--gr-font-display, inherit));
    font-size: 1.25rem;
    font-weight: var(--peso-titoli, 600);
    line-height: 1.15;
    text-wrap: balance;
  }

  :where(.gr-blog-scheda__collegamento) {
    color: inherit;
    text-decoration: none;
  }

  /* La zona cliccabile stesa su tutta la scheda. */
  :where(.gr-blog-scheda__collegamento)::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  :where(.gr-blog-scheda__collegamento:hover) {
    color: var(--accento, var(--gr-accent, currentColor));
  }

  /* Il contorno di messa a fuoco deve seguire la scheda, non il titolo: chi
     naviga da tastiera vede evidenziato l'oggetto che sta per aprire. Il
     contorno sul solo titolo, con la zona cliccabile grande dieci volte tanto,
     e' il genere di dettaglio che fa perdere il segno. */
  :where(.gr-blog-scheda:has(.gr-blog-scheda__collegamento:focus-visible)) {
    outline: 2px solid var(--accento, var(--gr-accent, currentColor));
    outline-offset: 3px;
  }

  :where(.gr-blog-scheda__riassunto) {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--testo-tenue, var(--gr-mute, color-mix(in srgb, currentColor 78%, transparent)));

    /* Tre righe e poi si taglia. I riassunti arrivano da due strade diverse —
       alcuni scritti a mano, gli altri ricavati dal contenuto — e senza un
       limite la griglia diventa una fila di schede di altezze diverse, con una
       che ne sfora due. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  /* L'articolo in evidenza. Un filetto d'accento sul bordo alto e nient'altro:
     una scheda piu' grande spezzerebbe la griglia, un fondo colorato la
     farebbe sembrare pubblicita'. */
  :where(.gr-blog-scheda--evidenza) {
    border-block-start: 3px solid var(--accento, var(--gr-accent, currentColor));
  }


  /* Il telefono: su uno schermo stretto la scheda perde un po' di imbottitura
     (era nella sezione 13 di `blog.css`). */
  @media (max-width: 47.99rem) {
    :where(.gr-blog-scheda__testo) {
      padding: 1rem;
    }
  }

  /* Movimento ridotto: vedi la sezione 14 di `blog.css` per il perche'. */
  @media (prefers-reduced-motion: reduce) {
    :where(.gr-blog-scheda__immagine) {
      transition: none;
    }

    :where(.gr-blog-scheda:hover .gr-blog-scheda__immagine),
    :where(.gr-blog-scheda:focus-within .gr-blog-scheda__immagine) {
      transform: none;
    }
  }
}