/* =============================================================================
   Modulo: la fila di media.

   Nodi di design della pagina di un progetto: 552:4005 (un media 1448×680) e
   552:4013 (tre media 472×680 con 16 di stacco). Sono la stessa fila — 472 × 3 +
   16 × 2 fa 1448 esatti — e qui è un numero solo.

   Non è una scena: nessun pin, nessun progresso, nessun `data-scene`. Il solo
   movimento è il reveal globale di base.css, più il filmato che parte in vista.
   ========================================================================== */

.media-row {
    margin-block: var(--space-module);
}

/* ⚠ **Il rapporto sta sulla fila, non sulle celle, ed è la ragione per cui non
   servono due composizioni.** Dichiarando 1448/680 sul contenitore e lasciando le
   celle a `1fr`, l'altezza esce dalla larghezza e ogni cella prende quel che
   avanza: con una viene 1448×680, con tre 472×680, con due 716×680. Il numero del
   design è uno, e nel CSS resta uno.

   ⚠ **Ne discende che non serve nessun breakpoint**, sopra i 900px: sotto la fila
   si scorre col dito (vedi in fondo). Altezza della fila e larghezza
   di una cella scalano entrambe con la larghezza del contenitore, quindi il rapporto
   di una cella è **costante a ogni misura di finestra**: la composizione del design
   si conserva in proporzione invece di essere ricomposta più sotto.

   ⚠ **`grid-auto-flow: column` e non `repeat(auto-fit, …)`.** Qui le celle non
   devono andare a capo: il rapporto è del contenitore, e una seconda riga lo
   sforerebbe senza che niente lo dica. Da una a tre restano una riga sola.

   ⚠ **Ed è per questo che `.container` sta su un elemento a parte.** La prima
   versione metteva le due cose sullo stesso `<ul>`, e la fila veniva alta **710
   invece di 680**: `aspect-ratio` si misura sul *border box*, quindi i 32 di
   `padding-inline` del gutter entravano nel conto — 1512 × 680/1448 = 710, mentre
   le celle dentro restavano larghe 1448. Misurato in headless, non dedotto. Con il
   `.container` sul genitore la fila è larga quanto il contenuto e il rapporto cade
   dove il design lo mette. Vale per chiunque dia un `aspect-ratio` a un elemento
   che porta anche il gutter. */
.media-row__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-s);
    aspect-ratio: 1448 / 680;
    margin: 0;
    padding: 0;
    list-style: none;
}

.media-row__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-l);

    /* Il fondo dietro il media, per il tempo in cui il filmato non è arrivato. È
       `--color-scene-bg` e sta sulla **cella**, non sulla sezione: nel design tutte
       le sezioni lasciano vedere il fondo pagina col suo pattern. */
    background-color: var(--color-scene-bg);
}

/* `height: 100%` esplicito: il reset di base.css impone `height: auto` a video e
   img, che qui lascerebbe la cella a riempirsi a metà. `object-fit: cover` ritaglia
   invece di deformare. */
.media-row__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* -----------------------------------------------------------------------------
   Telefono: la fila si scorre col dito.

   Il design mobile di questa schermata non c'è. Tre media nel rapporto del desktop
   — 1448 su 680 — su un telefono sono tre francobolli alti 184. Da telefono la fila
   è quella del carosello dei case study (nodo 860:2881): da bordo a bordo, la card
   successiva che si affaccia, aggancio al margine di pagina, i pallini sotto. Ogni
   media è 4:5, cioè una fotografia verticale come il telefono che la mostra.

   Con **un media solo** non c'è niente da scorrere: è largo quanto la colonna, e i
   pallini non si accendono da sé (`scrollDots()` ne vuole almeno due). */
@media (max-width: 900px) {
    .media-row__list {
        display: flex;
        gap: var(--space-2xs);
        aspect-ratio: auto;
        margin-inline: calc(-1 * var(--gutter));
        padding-inline: var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .media-row__item {
        flex: 0 0 auto;
        width: min(22rem, 100vw - 2 * var(--gutter) - 2.5rem);
        aspect-ratio: 4 / 5;
        scroll-snap-align: start;

        &:only-child {
            width: 100%;
        }
    }
}