/* =============================================================================
   Le ultime uscite, in fondo a un articolo.

   Nodo di design 662:3258. Una sezione ferma: nessun pin, nessun `data-scene`,
   nessun JavaScript. Il solo movimento è il reveal globale di base.css e lo zoom
   della fotografia all'hover.

   Le misure del design:

     titolo     `title-upper-md`, 40 su 40, Black, centrato, sfumato
     fila       tre card da 456 con 40 fra l'una e l'altra, 40 sotto il titolo
     card       fotografia 456×280 angoli 24, 16 fra fotografia, titolo e data
     pulsante   `cta-l-white`, 40 sotto la fila, centrato
   ========================================================================== */

.article-latest {
    /* Lo stacco fra moduli, `--space-module`, come ovunque. Sopra c'è la fine del
       testo dell'articolo, che non dichiara niente sotto di sé, quindi a schermo è
       tutto questo: 160. Nel frame sono 146 — i 160 di padding di una sezione che
       comincia 14 sopra la fine del testo — e non vale la pena di inseguirli: è il
       genere di sovrapposizione fra frame che CLAUDE.md documenta per i servizi. */
    margin-block: var(--space-module);
}

.article-latest__inner {
    display: grid;
    justify-items: center;
    gap: 2.5rem; /* 40: non è un passo della scala, che va da 32 a 48 */
}

/* `title-upper-md`: 40 su 40, Black, maiuscolo, tracking zero. Il riempimento è
   `.display-gradient`, tinto dal colore della pagina come nel design — vedi il
   commento nel template — e il margine non si tocca, per la ragione scritta lì. */
.article-latest__heading {
    font-size: var(--text-title);
    line-height: var(--leading-solid);
    font-weight: var(--weight-black);
    text-transform: uppercase;
    text-align: center;
}

.article-latest__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 2.5rem;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* -----------------------------------------------------------------------------
   La card. È la stessa dell'indice del magazine, e il CSS è ripetuto — vedi il
   template per il perché. Chi cambia qualcosa qui lo cambia anche in
   `flexible-content/magazine-index.css`.
   -------------------------------------------------------------------------- */

/* Tutta la card è il link: fotografia, titolo e data. 16 fra i tre. */
.article-latest__card {
    display: grid;
    gap: var(--space-s);
    color: inherit;
    text-decoration: none;
}

/* 456×280 nel design. Il rapporto e non l'altezza, perché la card è un terzo della
   colonna e con lei si stringe. */
.article-latest__media {
    position: relative;
    display: block;
    aspect-ratio: 456 / 280;
    overflow: hidden;
    border-radius: var(--radius-l);
    background-color: var(--color-scene-bg);
}

/* ⚠ **Lo zoom all'hover è provvisorio.** Nel design la prima card dell'indice porta
   un'annotazione «riferimenti animazione — card hover» (nodo 895:5526) che rimanda a
   un'animazione che nel file non c'è: il componente `card-magazine-hover` ha una
   variante sola, identica a riposo. Finché il riferimento non arriva, la fotografia
   si avvicina del 5% — il gesto più sobrio che dica «è cliccabile» — e cambiarlo è
   questa regola e la gemella nell'indice. */
.article-latest__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale var(--duration-slow) var(--ease-out);
}

.article-latest__card:is(:hover, :focus-visible) .article-latest__image {
    scale: 1.05;
}

/* La pastiglia dell'argomento: nera al 40%, angoli 16, padding 8/12, a 8 dall'angolo,
   `label-sm` — 12 su 16, peso 600, tracking 12%, maiuscolo. */
.article-latest__topic {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-m);
    background-color: rgb(0 0 0 / 0.4);
    font-size: var(--text-label);
    line-height: var(--leading-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* 20 su 26, Medium, tracking 1%. Non è uno stile del design — nel file non è legato
   a nessuna variabile — ed è misurato sul nodo, quindi resta locale come i tre corpi
   della pagina About che sono nella stessa condizione. */
.article-latest__title {
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.01em;
}

/* `label-sm` al 60% di bianco. */
.article-latest__date {
    color: rgb(255 255 255 / 0.6);
    font-size: var(--text-label);
    line-height: var(--leading-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Layout stretto. Il design non c'è: due colonne, poi una.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

    .article-latest__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Con due colonne la terza card resterebbe sola in una riga: si toglie, perché
       «le ultime uscite» sono una fila e non una griglia. */
    .article-latest__item:nth-child(3) {
        display: none;
    }
}

@media (max-width: 640px) {

    .article-latest__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .article-latest__item:nth-child(3) {
        display: block;
    }
}