/* =============================================================================
   Modulo: card informative in una fila che si scorre a mano.

   Nodo di design 1278:2861, «our industry». Le misure, per non doverle
   ricercare: titolo `title-upper-lg` centrato, 64 fino alla fila, card 472x520
   ad angoli 32 con 16 fra l'una e l'altra, la prima allineata al margine di
   pagina; dentro la card 24 di padding, 4 fra nome e riga, il nome in
   `title-upper-sm` (32/32) e la riga in `body-xs` (16/24); 24 sotto la fila le
   due frecce da 56, distanti 24, appoggiate al margine destro.

   Tre card riempiono esattamente la colonna di contenuto — 472x3 + 16x2 fa
   1448 — quindi la fila comincia a uscire dallo schermo dalla quarta. Nel design
   ce ne sono tre, e l'annotazione sul nodo dice che i settori sono dieci.
   ========================================================================== */

.cards-swipe {
    /* La card. Fluida sulla larghezza del frame di design: 472 su 1512 sono
       31,22vw. Il minimo è una card che su un telefono lascia vedere che ce n'è
       un'altra dopo — 272px su 390 ne lasciano 118. */
    --card-w: clamp(17rem, 31.22vw, 29.5rem);

    /* Il rientro della fila: **il margine di pagina, a qualunque larghezza**. La
       fila è a tutta larghezza perché le card devono poter uscire dallo schermo a
       destra, e a sinistra rientra di quanto rientra tutto il resto — quindi su
       uno schermo grande si vede come su un laptop.

       ⚠ **Non è il conto di `.container`, ed è una scelta.** Fino al 22 settembre
       era `max(var(--gutter), (100% - var(--container-max)) / 2 + var(--gutter))`,
       cioè la prima card allineata alla **colonna di contenuto**: esatto sul frame
       del design, dove la colonna *è* lo schermo, e sbagliato sopra i 1512, dove
       la colonna si ferma e il rientro continua a crescere con quel che avanza ai
       lati. Misurato: 236px su una finestra da 1920 e **556 su una da 2560**,
       mentre la fila intanto continua a uscire dallo schermo a destra — mezza
       schermata di vuoto da una parte e il pieno dall'altra.

       Il prezzo, e va saputo prima di rimetterci mano: la prima card non è più
       allineata né al titolo né alle frecce, che stanno in `.container` e restano
       nella colonna. Il titolo è centrato e non lo dà a vedere; le frecce sì, e
       sopra i 1512 si appoggiano al bordo destro della colonna mentre le card
       passano loro accanto.

       Il token resta al posto di due `var(--gutter)`: `padding-inline` e
       `scroll-padding-inline-start` devono essere lo **stesso** numero — è quello
       che riporta la card agganciata sul bordo da cui è partita — e due copie
       divergono al primo ritocco. */
    --track-pad: var(--gutter);

    /* Lo stacco del design, 160 per lato. È un margine e non un padding: due
       moduli adiacenti lo fanno collassare e a schermo restano 160.
       Vedi `--space-module` in base.css. */
    margin-block: var(--space-module);

    color: var(--color-text-primary);
}

/* `title-upper-lg`: 72 su 64, peso 900, maiuscolo, centrato, col riempimento
   sfumato.

   ⚠ Niente `margin` su questo elemento: porta `.display-gradient`, che si allarga
   di `--fill-display-bleed` e si ritira con un margine negativo uguale. Un
   `margin` qui, anche `margin: 0`, azzererebbe la compensazione. Vedi base.css →
   `.display-gradient`. `.container` sta sul gruppo qui sotto, non su lui. */
.cards-swipe__heading {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    font-weight: var(--weight-black);
    text-transform: uppercase;
    text-align: center;
}

.cards-swipe__line {
    display: block;
}

/* Il titolo e la riga sotto, 16 di stacco come nei moduli della pagina About. */
.cards-swipe__header {
    display: grid;
    justify-items: center;
    gap: var(--space-s);
    text-align: center;
}

/* La fila.

   `overflow-x: auto` e non una traslazione guidata dal JavaScript: così la si
   muove col dito, col trackpad, con la rotella orizzontale e da tastiera senza
   che il tema debba implementare niente di tutto questo. Il JavaScript aggiunge
   **solo** il trascinamento col mouse e le due frecce.

   ⚠ **`scroll-padding-inline-start` vale quanto il padding**, ed è la riga che fa
   quel che il design chiede: fermandosi, la card agganciata si allinea al margine
   di pagina. Senza, l'aggancio porterebbe il suo bordo sinistro a filo dello
   schermo, cioè 32px più a sinistra di qualunque altra cosa in pagina — la card
   non sarebbe tagliata, ma sarebbe nel posto sbagliato.

   `overscroll-behavior-x: contain` tiene il gesto dentro la fila: senza, sui
   trackpad uno scorrimento orizzontale che arriva in fondo prosegue come
   «indietro» nella cronologia del browser.

   La barra di scorrimento non si mostra — nel design non c'è, e le frecce dicono
   già che ci si muove. È l'unico punto in cui il modulo nasconde un'affordance
   del browser, ed è compensato da quelle. */
.cards-swipe__track {
    display: flex;
    gap: var(--space-s);
    margin: 0;
    margin-block-start: var(--space-2xl);
    padding: 0;
    padding-inline: var(--track-pad);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--track-pad);
    scrollbar-width: none;

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

/* La card. `aspect-ratio` e non un'altezza: 472x520 è un rapporto, e la card è
   larga in vw.

   `overflow: clip` e non `hidden`: taglia agli angoli senza rendere la card un
   contenitore di scorrimento, che dentro una fila che scorre è proprio quel che
   non serve. */
.cards-swipe__card {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-3xs);
    inline-size: var(--card-w);
    aspect-ratio: 472 / 520;
    padding: var(--space-m);
    border-radius: var(--radius-xl);
    overflow: clip;
    scroll-snap-align: start;

    /* Il fondo dietro l'immagine, per il tempo in cui non è arrivata o manca.
       Non è il fondo di una sezione: quello resta il fondo pagina. */
    background-color: var(--color-scene-bg);
}

.cards-swipe__media {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: clip;
}

.cards-swipe__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* Il velo del design: sale dal fondo, pieno al 35% dell'altezza e spento al 70%.
   ⚠ Nel file il **componente** dichiara 0,4 e le due istanze visibili 0,5: si
   tiene 0,5, che è quel che si vede nelle due card su tre renderizzate. */
.cards-swipe__scrim {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to top,
        rgb(0 0 0 / 0.5) 35%,
        rgb(0 0 0 / 0) 70%
    );
}

/* La fascia: gli ultimi 240px su 520, cioè il 46,15% dell'altezza. Nel design è
   **un livello solo** — un rettangolo con un riempimento sfumato dal trasparente
   al nero 0,4 a metà, e sopra un background blur da 4px — e qui sono due, per la
   ragione che sta nel commento della sfocatura.

   Questo è il velo: la rampa del design, tale e quale. */
.cards-swipe__shade {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 46.15%;
    background-image: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0) 0%,
        rgb(0 0 0 / 0.4) 50%
    );
}

/* La sfocatura, che è ciò che dà il nome alla card nel design (`card-blur`).

   ⚠ **Va sfumata, altrimenti si vede dove comincia.** In Figma il background blur
   è mascherato dall'**alfa del livello**: dove il riempimento è trasparente non
   sfoca, dove è pieno sfoca tutto, e siccome quel riempimento è un gradiente la
   sfocatura entra con lui. `backdrop-filter` non fa niente del genere — sfoca
   tutta la propria scatola e si ferma di netto sul bordo, e a schermo è una riga
   orizzontale che taglia la fotografia.

   Misurato sul render del nodo 1278:2972, riga per riga, come dettaglio
   orizzontale normalizzato sulla luminanza: 0,19 costante fino a metà card, poi
   una discesa **graduale** fino a 0,07 una sessantina di pixel più in basso.
   Nessun gradino.

   La maschera riproduce l'alfa del riempimento: zero in cima alla fascia, piena a
   metà, cioè la stessa rampa del velo qui sopra. Da lì la separazione dei due
   livelli — una maschera si applica a tutto quel che l'elemento dipinge, quindi
   tenendoli insieme spegnerebbe anche il velo, e il velo nel design non è
   mascherato: **è** la maschera.

   ⚠ **Sfoca l'immagine, non il testo**: sta dentro `__media`, quindi sotto il
   nome e la riga, che sono in flusso. Se finisse sopra, sfocherebbe anche loro.

   ⚠ Sta dentro un antenato con `overflow: clip` e `border-radius`, ed è quello
   che le tiene gli angoli: `backdrop-filter` dipinge sulla propria scatola, che
   qui è un rettangolo. */
.cards-swipe__frost {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 46.15%;
    backdrop-filter: blur(4px);
    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, #000 50%);
}

/* ⚠ **`position: relative` sul testo, e non è decorativo.** Il media è in
   assoluto, quindi dipinge **sopra** il contenuto in flusso della card per quanto
   stia prima nel DOM: senza una posizione anche sul testo, nome e riga
   finirebbero sotto la fotografia. Non lo prende nessun controllo numerico — la
   geometria è giusta, il testo è semplicemente coperto. */
.cards-swipe__title,
.cards-swipe__text {
    position: relative;
}

/* `title-upper-sm` del design: 32 su 32, peso 900, maiuscolo.

   ⚠ **Non è un token, e per ora non deve esserlo.** Il tema ha 40 (`--text-title`)
   e 20 (`--text-title-s`), e questo 32 lo usa questo modulo soltanto: il giorno
   che lo vuole un secondo modulo vero, va in base.css con gli altri. Fluido come
   loro — 32 su 1512 sono 2,12vw — perché su una card larga in vw un corpo fisso
   si mangerebbe la card.

   ⚠ Nota per chi torna sul file di design: lì `title-upper-sm` **è questo**, 32
   su 32, mentre quello che il tema chiama `--text-title-s` nel file si chiama
   `title-upper-xs` (20/24/0,04em). I valori del tema sono giusti, il nome nel
   commento di base.css è vecchio. */
.cards-swipe__title {
    font-size: clamp(1.5rem, 2.12vw, 2rem);
    line-height: var(--leading-solid);
    font-weight: var(--weight-black);
    text-transform: uppercase;
}

/* `body-xs`: 16 su 24, peso 500, tracking dell'1%. */
.cards-swipe__text {
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-body-s);
}

/* Le frecce. Senza JavaScript non ci sono: la fila si scorre lo stesso, e due
   pulsanti che non fanno niente sono due fermate inutili nella tabulazione. */
.cards-swipe__controls {
    display: none;
}

@media (scripting: enabled) {
    .cards-swipe__controls {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-m);
        margin-block-start: var(--space-m);
    }

    /* Quando la fila ci sta tutta non c'è niente da scorrere: la classe la mette
       il JS, che è l'unico a sapere se la pista sborda. */
    .cards-swipe.is-still .cards-swipe__controls {
        display: none;
    }
}

/* ⚠ **Bianco pieno da attive e al 50% da spente**, e nel design è così: il nodo
   dà `white` sulla freccia avanti e `rgba(255,255,255,0.5)` su quella indietro,
   che nel frame è spenta perché la fila è all'inizio. È una scala diversa da
   quella dei pulsanti della ruota dei passi, che stanno al 70% sempre: sono due
   moduli e ognuno porta i propri: se un terzo li rivuole uguali, è quello il
   momento di portarli in base.css. */
.cards-swipe__nav {
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--color-text-primary);
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-text-primary);
    cursor: pointer;
    transition:
        border-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}

.cards-swipe__nav:disabled {
    border-color: var(--color-text-dim);
    color: var(--color-text-dim);
    cursor: default;
}

/* La freccia indietro è **la stessa icona specchiata**, non un secondo file.
   `scale: -1 1` e non `rotate: 180deg`: la rotazione ribalta anche l'asse
   verticale, che su un chevron simmetrico non si vede, ma lo specchio è quello
   che si intende. */
.cards-swipe__nav--prev > svg {
    scale: -1 1;
}

/* Il trascinamento col mouse. La classe la mette il JS fra `pointerdown` e
   `pointerup`.

   ⚠ **L'aggancio va spento mentre si trascina.** Il JS scrive `scrollLeft` a ogni
   movimento, e con `scroll-snap-type: mandatory` il browser riporta la fila al
   punto d'aggancio più vicino a ogni fermata: le due cose si contendono la
   posizione e la fila resta incollata alla prima card. Rimettendolo al rilascio,
   il browser aggancia da sé la card più vicina — che è esattamente il gesto che
   ci si aspetta. */
.cards-swipe__track.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}

/* -----------------------------------------------------------------------------
   Telefono: le misure del carosello dei case study, e i pallini.

   Il design mobile di questa fila non c'è, e questa è già una fila che si scorre
   col dito: quel che cambia è che si allinea a quella che il design mobile disegna
   (nodo 860:2881, card 861:3175 e pallini 862:2133). La card è larga 352 su un
   frame da 440, cioè lo schermo meno il margine e meno i 40 che lasciano vedere la
   successiva, con 8 in mezzo; 24 fra il titolo e la fila; e sotto i pallini invece
   delle due frecce, che su un telefono sono due bersagli per fare quel che il dito
   fa già. */
@media (max-width: 900px) {
    .cards-swipe {
        --card-w: min(22rem, 100vw - 2 * var(--gutter) - 2.5rem);
    }

    .cards-swipe__track {
        gap: var(--space-2xs);
        margin-block-start: var(--space-m);
    }

    .cards-swipe__card {
        border-radius: var(--radius-l);
    }

    .cards-swipe__controls {
        display: none;
    }
}