/* ── video-processi ───────────────────────────────────────────────────────
   La landing del video: una colonna sola, centrata, che sta tutta in una
   schermata.

   ── La regola che governa il foglio ─────────────────────────────────────

   Titolo, sottotitolo, video, marchi e azione devono essere visibili insieme
   senza scorrere, su qualunque schermo. Non e' una preferenza estetica: chi
   arriva e' stato invitato a guardare un video e ha davanti un test da fare,
   e se una delle due cose sta sotto la piega la pagina ha gia' perso meta'
   del suo lavoro.

   ── Chi paga l'altezza ──────────────────────────────────────────────────

   Il video. Gli altri tre blocchi prendono l'altezza che gli serve, e il
   riquadro si prende tutto il resto: e' il solo `flex: 1` di una colonna alta
   quanto la finestra meno la testata. Dall'altezza cosi' ottenuta
   `aspect-ratio` ricava la larghezza, e il video non e' mai piu' largo del
   contenitore perche' il suo tetto e' scritto in larghezza di contenitore
   (`100cqw * 9 / 16`), non in pixel.

   E' il punto in cui questo foglio e' cambiato di piu'. Prima la riserva era
   un numero misurato a mano -- tre valori, uno per scaglione -- e ogni riga
   di copy in piu' andava rimisurata a mano o il video sbordava. Adesso non
   c'e' nessun numero da tenere aggiornato: si aggiunge una riga al
   sottotitolo e il video si stringe da solo di quel tanto.

   Due vincoli chiudono il conto -- il tetto e il pavimento -- e stanno
   entrambi sul riquadro, scritti in altezza. Il perche' sta nel commento
   sopra `.vp-quadro`.

   ── Il ritmo verticale ──────────────────────────────────────────────────

   Tre distanze e non una, perche' i quattro blocchi non sono quattro cose
   pari:

       --vp-stretto   titolo e sottotitolo, che sono una testata sola
       --vp-vicino    video e marchi, che i marchi stanno APPESI al video
       --vp-stacco    testata → video, marchi → azione: i due stacchi veri

   Sono in `vh` fra due estremi, non a scaglioni di larghezza: la risorsa
   scarsa qui e' l'altezza, quindi e' l'altezza a dover decidere quanto si
   respira. Su un portatile basso il ritmo si stringe da solo e il video ne
   guadagna; su un telefono alto e su un desktop si apre.

   ── Le due guide verticali ──────────────────────────────────────────────

   Niente esce dal `container-methody`: e' lo stesso che allinea la testata e
   il footer, e sono quelle due righe a dare alla pagina il suo bordo. Il
   video e' centrato e quasi sempre piu' stretto del contenitore, perche' a
   decidere la sua taglia e' l'altezza disponibile; quando la finestra e'
   molto bassa e larga puo' arrivare al bordo del contenitore, mai oltre.

   ── L'avanzo ────────────────────────────────────────────────────────────

   Quando il video e' limitato dalla larghezza -- un telefono alto, un tablet
   in verticale -- di altezza ne avanza. Quell'avanzo NON va fra i blocchi:
   il ritmo scritto sopra dice chi sta vicino a chi, e allargare lo stacco fra
   video e marchi vorrebbe dire staccare i marchi dal video, cioe' disfare
   l'unica cosa che quel gruppo dichiara. Quindi il tetto ferma la crescita del
   riquadro e l'avanzo torna alla colonna, che e' centrata: aria sopra e sotto
   tutto il blocco, nessuna distanza interna che cambia.

   `safe center` e' li' per il caso opposto: quando il contenuto e' piu' alto
   della finestra, un `center` normale taglierebbe il titolo sopra il bordo e
   non ci sarebbe modo di risalirci.

   ── Il footer in fondo ──────────────────────────────────────────────────

   `.shell-public` porta solo `min-height: 100vh`, quindi su uno schermo alto
   la pagina finiva prima della finestra e sotto al footer restava del bianco.
   Qui il corpo diventa una colonna flessibile e il `main` si prende lo spazio
   libero, cosi' il footer si appoggia al fondo. Il foglio e' caricato solo da
   questa landing, quindi la regola su `body` non esce da questa pagina.

   ── L'avvio ─────────────────────────────────────────────────────────────

   Il `<video>` nel markup ha `controls`: senza JavaScript la pagina resta un
   player nativo con il suo poster, che funziona. Lo script toglie i controlli
   e scopre il pannello di avvio disegnato qui; al primo clic li rimette e
   parte. Il disco indaco e la CTA sono i due soli punti indaco della pagina:
   l'unico colore che significa "fai qualcosa".

   ── Il movimento ────────────────────────────────────────────────────────

   Nessun ingresso, ed e' una decisione. Una pagina che sta tutta in una
   schermata e' gia' tutta vista al primo fotogramma: animarne l'arrivo non
   spiegherebbe niente e ritarderebbe l'unica cosa che il visitatore e' venuto
   a fare. Resta il movimento che risponde: il disco sotto il puntatore, la
   CTA sotto il puntatore, e il nastro dei marchi che scorre da se'. */

/* ── Il fondo pagina ─────────────────────────────────────────────────── */

/* Vedi in testa: il footer si appoggia al fondo della finestra. Solo qui,
   perche' solo questa pagina carica questo foglio. */
body.shell-public {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

body.shell-public > main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.vp-page {
    /* Identita' condivisa (DESIGN.md), nomi della pagina. */
    --vp-navy: #0f172b;
    --vp-indaco: #4f46e5;
    --vp-indaco-scuro: #4338ca;
    --vp-carta: #ffffff;
    --vp-inchiostro: #1c1917;
    --vp-inchiostro-medio: #57534e;
    --vp-inchiostro-tenue: #78716c;

    /* Le tre distanze verticali. Vedi "Il ritmo verticale" in testa: lo
       stacco largo separa i gruppi, il vicino appende i marchi al video, lo
       stretto tiene insieme titolo e sottotitolo. In `vh`, perche' qui la
       risorsa scarsa e' l'altezza. */
    --vp-stretto: clamp(9px, 1.2vh, 14px);
    --vp-vicino: clamp(16px, 2.3vh, 26px);
    --vp-stacco: clamp(26px, 4vh, 44px);

    /* L'altezza della testata di `layouts.public`: 56px di riga piu' il filo
       del bordo. Se cambia in `app.css`, cambia qui. */
    --vp-testata: 57px;

    /* Il pavimento del video. Vedi in testa: sotto questa larghezza il video
       non si guarda piu'. */
    --vp-video-min: 18rem;

    /* Il fondo del pozzo -- il riquadro del video -- e le ombre e il velo che
       ci stanno sopra. E' il navy dell'identita' portato sotto al nero del
       fotogramma: un player riempie il suo riquadro di nero puro, e un fondo
       piu' chiaro del video si vedrebbe come una cornice mentre il poster
       carica. In componenti separate perche' il velo lo usa con piu'
       opacita', e una sola dichiarazione e' meglio di sei esadecimali. */
    --vp-pozzo: 2 6 16;

    background: var(--vp-carta);
    color: var(--vp-inchiostro);
}

/* Le superfici che il browser dipinge da solo e che non appartengono a
   nessun sistema finche' non gliele si assegna. */
.vp-page ::selection {
    background: #e0e7ff;
    color: var(--vp-navy);
}

.vp-quadro ::selection {
    background: #4f46e5;
    color: #fafaf9;
}

/* ── La colonna ──────────────────────────────────────────────────────── */

/* La sezione e' alta quanto il suo contenuto: e' la colonna, non lei, a
   misurarsi sulla finestra. */
.vp-hero {
    display: block;
}

.vp-colonna {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Vedi "L'avanzo" in testa: `center` per l'avanzo, `safe center` perche'
       quando invece manca altezza il titolo non deve finire sopra il bordo.
       Le due righe insieme sono una sola regola: chi non capisce la seconda
       tiene la prima. */
    justify-content: center;
    justify-content: safe center;

    /* La finestra meno la testata. Il footer resta appena sotto la piega. */
    min-height: calc(100svh - var(--vp-testata));

    /* Il contenitore di query della pagina: e' da qui che il riquadro legge
       la larghezza disponibile (`100cqw`) per calcolare il proprio tetto. */
    container-type: inline-size;

    padding-block: clamp(0.75rem, 2.4vh, 2.25rem);
    text-align: center;
}

/* ── La testata ──────────────────────────────────────────────────────── */

/* Titolo e sottotitolo sono un blocco solo: la distanza fra loro e' la piu'
   stretta della pagina, quella che li dichiara parenti. */
.vp-testa {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: var(--vp-stretto);
    margin-bottom: var(--vp-stacco);
    width: 100%;
}

.vp-titolo {
    margin: 0;
    max-width: 60rem;
    font-family: var(--font-sans);
    /* Il tetto e' 3rem e non di piu': su schermo largo ogni riga di titolo in
       piu' e' altezza tolta al video, che e' la cosa che il visitatore e'
       venuto a vedere. Il pavimento invece e' generoso, perche' su un telefono
       il video e' limitato dalla larghezza e quell'altezza non gliela toglie
       nessuno: tanto vale darla al titolo. */
    font-size: clamp(1.875rem, 0.95rem + 1.9vw, 3rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--vp-navy);
    text-wrap: balance;
}

/* Il sottotitolo e' la sola prosa della pagina, e dice chi parla e di che
   cosa. Sta su una misura da leggere -- non sulla larghezza del titolo, che
   e' tarata su corpo grande -- e resta due o tre righe a qualunque taglia.

   Il salto dal titolo e' netto: circa 2,5 volte a schermo largo. Un
   sottotitolo che si avvicina al titolo non e' un sottotitolo, sono due
   titoli. */
.vp-sottotitolo {
    margin: 0;
    max-width: 68ch;
    font-size: clamp(1rem, 0.93rem + 0.32vw, 1.1875rem);
    line-height: 1.5;
    color: var(--vp-inchiostro-medio);
    text-wrap: balance;
}

.vp-sottotitolo-nome {
    font-weight: 500;
    color: var(--vp-inchiostro);
}

/* ── Il video ────────────────────────────────────────────────────────── */

/* L'elemento elastico della pagina. Vedi "Chi paga l'altezza" in testa: e'
   l'unico figlio della colonna che cresce, quindi la sua ALTEZZA e' quel che
   gli altri tre blocchi non hanno usato, e `aspect-ratio` la trasferisce
   alla larghezza. Non c'e' nessun `width` scritto: e' il rapporto a darla.

   E' il motivo per cui il tetto e il pavimento sono scritti in altezza e non
   in larghezza. Su un asse solo un `max-width` schiaccerebbe il 16:9 invece
   di rimpicciolirlo -- il clamp agisce sull'asse che tocca, e il rapporto lo
   subisce. Fermando l'altezza si rimpicciolisce il riquadro intero.

       tetto      il video non supera mai il contenitore: la larghezza
                  disponibile (`100cqw`, che la colonna espone come
                  contenitore di query) riportata in altezza dal rapporto.
       pavimento  un video largo `--vp-video-min`, mai meno. Scritto
                  `min(pavimento, tetto)` perche' su una finestra
                  strettissima il pavimento non deve scavalcare il tetto e
                  aprire una barra orizzontale. */
.vp-quadro {
    --vp-tetto: calc(100cqw * 9 / 16);

    position: relative;
    flex: 1 1 auto;
    aspect-ratio: 16 / 9;
    width: auto;
    min-height: min(calc(var(--vp-video-min) * 9 / 16), var(--vp-tetto));
    max-height: var(--vp-tetto);
    margin-bottom: var(--vp-vicino);
    overflow: hidden;
    border: 1px solid #0f172b1f;
    border-radius: 16px;
    /* Il fondo del riquadro e' scuro: finche' il poster non c'e', il buco si
       legge come lo schermo spento di un video e non come un errore. */
    background: rgb(var(--vp-pozzo));
    box-shadow:
        0 24px 56px rgb(var(--vp-pozzo) / 0.18),
        0 4px 10px rgb(var(--vp-pozzo) / 0.1);
}

.vp-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Il player nativo porta i suoi angoli retti: senza questo, i quattro
       spigoli sbucano da sotto il raggio del riquadro. */
    border-radius: inherit;
    background: rgb(var(--vp-pozzo));
}

/* ── L'avvio ─────────────────────────────────────────────────────────── */

/* Senza JavaScript il pannello non esiste e il player nativo resta intero.
   La classe la mette lo script, che nello stesso momento toglie `controls`. */
.vp-avvio {
    display: none;
}

.vp-quadro.is-js .vp-avvio {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin: 0;
    border: 0;
    /* Il velo. Non e' li' per scurire il poster ma per reggere l'etichetta
       bianca: la soglia AA su testo piccolo va tenuta anche quando il
       fotogramma sotto e' un cielo di mezzogiorno, ed e' il caso peggiore che
       decide la densita'. Quindi trasparente per i primi due terzi e fitto
       solo nella fascia bassa, dove sta il comando. */
    background: linear-gradient(
        180deg,
        rgb(var(--vp-pozzo) / 0) 30%,
        rgb(var(--vp-pozzo) / 0.68) 74%,
        rgb(var(--vp-pozzo) / 0.88) 100%
    );
    padding: clamp(0.75rem, 2vw, 1.375rem);
    width: 100%;
    color: #fafaf9;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease;
}

.vp-quadro.is-js .vp-avvio:hover {
    background: linear-gradient(
        180deg,
        rgb(var(--vp-pozzo) / 0.1) 30%,
        rgb(var(--vp-pozzo) / 0.74) 74%,
        rgb(var(--vp-pozzo) / 0.92) 100%
    );
}

.vp-quadro.is-js .vp-avvio:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -6px;
}

/* Il disco segue il riquadro invece di restare fisso: dentro a un 16:9 largo
   340px un disco da 56 e' un terzo dell'altezza della scena, e il comando si
   mangia cio' che dovrebbe indicare. */
.vp-avvio-disco {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--vp-indaco);
    width: clamp(44px, 9vw, 60px);
    height: clamp(44px, 9vw, 60px);
    color: #ffffff;
    box-shadow: 0 6px 16px rgb(var(--vp-pozzo) / 0.4);
    transition:
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.18s ease;
}

/* L'icona Lucide arriva con `fill="none"`: il triangolo pieno si ottiene in
   CSS, che batte l'attributo di presentazione. Il mezzo pixel a destra
   compensa il baricentro ottico del triangolo dentro al cerchio. */
.vp-avvio-disco .ico {
    fill: currentColor;
    transform: translateX(1.5px);
}

.vp-quadro.is-js .vp-avvio:hover .vp-avvio-disco,
.vp-quadro.is-js .vp-avvio:focus-visible .vp-avvio-disco {
    background: var(--vp-indaco-scuro);
    transform: scale(1.06);
}

.vp-avvio-testo {
    padding-bottom: clamp(9px, 2vw, 15px);
    font-size: clamp(0.875rem, 0.8rem + 0.3vw, 0.9375rem);
    font-weight: 500;
    letter-spacing: -0.005em;
    text-shadow: 0 1px 3px rgb(var(--vp-pozzo) / 0.5);
}

/* Uno dei due monospaziati della pagina, e sempre su una misura: la durata
   del video qui, il costo del test sotto la CTA. Nient'altro e' mono -- una
   riga di prosa in monospaziato e' un costume, non un dato.

   Meno acceso dell'etichetta, perche' e' il dato e non il comando: il verbo
   resta la cosa che si legge per prima. */
.vp-avvio-durata {
    margin-left: 2px;
    font-family: "Geist Mono", var(--font-mono);
    font-size: 0.8125em;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: #fafaf9c4;
}

/* Alla partenza spariscono il pannello e il velo: da li' in poi comanda il
   player nativo, con i suoi controlli e le sue scorciatoie da tastiera. */
.vp-quadro.is-riproduce .vp-avvio {
    display: none;
}

/* ── I marchi ────────────────────────────────────────────────────────── */

/* La banda sta appesa al video: sopra c'e' `--vp-vicino`, sotto c'e' lo
   stacco largo. Sono quei due numeri, e non una cornice, a dire che i marchi
   appartengono a cio' che sta sopra e non alla CTA che sta sotto.

   E' larga quanto il video, non quanto il contenitore, e vale la pena dire
   perche': la larghezza e' meta' della parentela (l'altra meta' e' la
   prossimita', che e' `--vp-vicino`). Provata a piena larghezza, la striscia
   arrivava 260px oltre il bordo destro del video e smetteva di leggersi come
   il suo piede -- diventava una fascia nuova che comincia li'. I `max-width`
   piu' sotto sono tarati su questo, scaglione per scaglione: ognuno vale
   all'incirca la larghezza che il video ha a quella taglia di finestra. E'
   lo stesso ragionamento scritto per esteso in `methody-partners.css`. */
.vp-marchi {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: clamp(5px, 0.8vh, 9px);
    margin-bottom: var(--vp-stacco);
    /* Il nastro dei marchi e' largo `max-content`, circa 1850px: senza questo
       allarga la colonna flessibile che lo contiene e sborda dal
       contenitore. */
    min-width: 0;
    width: 100%;
}

.vp-marchi-riga {
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--vp-inchiostro-medio);
    text-wrap: balance;
}

/* La taglia della striscia, e la finestra che la mostra. Selettore a due
   classi perche' il foglio del componente scrive sulle stesse proprieta'.

   `--mp-u` e' la manopola unica: tutte le altezze del componente sono suoi
   multipli. La durata va cambiata insieme, o cambia la velocita' invece della
   taglia -- un set misura 26,4 x u (misurato: 952px a u = 36px; il "19,6" che
   il foglio del componente porta in testa e' anteriore all'ultimo ritocco dei
   due banner) e questa pagina lo fa scorrere a 40 px/s.

   La finestra deve restare piu' STRETTA di un set, o lo stesso marchio compare
   due volte nello stesso sguardo: e' aritmetica, non una taratura. I
   `max-width` qui sotto stanno sotto la larghezza del set di ciascun
   scaglione con un margine abbondante -- la striscia non deve essere larga
   quanto puo', deve essere larga quanto il video che firma. */
.vp-marchi .mp {
    --mp-u: 26px;
    --mp-dur: 17s;
}

.vp-marchi .mp.mp--sotto {
    /* set = 26,4 x 26px = 686px; da telefono comanda comunque la colonna. */
    max-width: min(100%, 31rem);
    margin-top: 0;
    margin-inline: auto;
}

@media (min-width: 40rem) {
    .vp-marchi .mp {
        --mp-u: 31px;
        --mp-dur: 20s;
    }

    .vp-marchi .mp.mp--sotto {
        /* set = 26,4 x 31px = 818px. */
        max-width: min(100%, 37rem);
    }
}

/* Da PC i marchi erano troppo piccoli -- 26px di unita' sono la taglia con cui
   questa pagina era nata, quando ogni pixel speso qui era larghezza tolta al
   video e la striscia veniva strizzata per ultima. Qui sale, e sale a due
   scaglioni.

   Il secondo scaglione non e' di larghezza ma di ALTEZZA, ed e' il punto. Un
   portatile 1366x768 e un desktop 1920x1080 sono "PC" tutti e due, ma il primo
   ha 200px di finestra in meno e li deve al video: dargli la stessa striscia
   del secondo vorrebbe dire pagare 13px di banda con 23px di larghezza di
   video. Quindi da 860px di finestra in su la striscia prende la sua taglia
   piena, sotto si tiene quella media.

   Il tetto e' 38px e non di piu': a quella taglia i due banner di programma
   stanno a 87px, che e' gia' il secondo elemento piu' alto della pagina dopo
   il video. Questa e' una banda di riprova, non un blocco. */
@media (min-width: 64rem) {
    .vp-marchi .mp {
        --mp-u: 32px;
        --mp-dur: 21s;
    }

    .vp-marchi .mp.mp--sotto {
        /* set = 26,4 x 32px = 845px; il video, su un 1366x768, e' largo ~465. */
        max-width: min(100%, 30rem);
    }
}

@media (min-width: 64rem) and (min-height: 860px) {
    .vp-marchi .mp {
        --mp-u: 38px;
        --mp-dur: 25s;
    }

    .vp-marchi .mp.mp--sotto {
        /* set = 26,4 x 38px = 1003px; il video, su un 1440x900, e' largo ~626. */
        max-width: min(100%, 40rem);
    }
}

/* ── L'azione ────────────────────────────────────────────────────────── */

.vp-azione {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
}

.vp-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: var(--vp-indaco);
    padding: 14px 26px;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #ffffff;
    text-decoration: none;
    /* Offset e sfocatura vere: un alone centrato sarebbe decoro. */
    box-shadow:
        0 2px 4px #4f46e51f,
        0 10px 24px #4f46e529;
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.vp-cta:hover {
    background: var(--vp-indaco-scuro);
    box-shadow:
        0 3px 6px #4f46e529,
        0 14px 30px #4f46e533;
    transform: translateY(-1px);
}

.vp-cta:focus-visible {
    outline: 2px solid var(--vp-indaco);
    outline-offset: 3px;
}

.vp-cta .ico {
    transition: transform 0.18s ease;
}

.vp-cta:hover .ico {
    transform: translateX(3px);
}

.vp-costo {
    margin: clamp(0.5rem, 1.2vh, 0.75rem) 0 0;
    font-family: "Geist Mono", var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.015em;
    font-variant-numeric: tabular-nums;
    color: var(--vp-inchiostro-tenue);
}

/* ── Le misure piccole ───────────────────────────────────────────────── */

@media (max-width: 39.99rem) {
    .vp-azione {
        align-self: stretch;
    }

    .vp-cta {
        /* Su uno schermo stretto il bottone e' il bersaglio, non un elemento
           in riga: prende la colonna. */
        display: flex;
        justify-content: center;
        width: 100%;
    }
}