/* =========================================================
 * FiLA — Timeline della filiera
 * ---------------------------------------------------------
 * Misure ricavate dal mockup Figma a 1280px (Desktop.png):
 * numero grande 266px di altezza cifre, illustrazioni 214px
 * appoggiate sull'asse, titolo tappa 30px maiuscolo, corpo
 * 16px con passo di riga 24px, trattini 32x4 con 7px di gap.
 *
 * I font NON sono dichiarati: si eredita quello del sito.
 * Il mockup è in Satoshi, ma la tipografia globale del sito
 * è passata a Manrope; fissarne uno qui vorrebbe dire
 * scontrarsi con il kit Elementro al primo cambio.
 * ======================================================= */

.fila-timeline{
    /* ---- colori, dal mockup ---- */
    --tl-rosso:#BC5151;
    --tl-rosso-chiaro:#DBAEA8;
    --tl-verde:#24342A;
    --tl-numero:#FFFFFF;

    /* ---- geometria della scena ---- */
    --tl-scena-h:255px;   /* altezza totale: comprende la parte di numero
                             che scende sotto l'asse. Misurata perché il titolo
                             attacchi 46px sotto l'asse come nel progetto: la
                             riga del titolo ha ~7px di spalla sopra le
                             maiuscole, che qui sono già scontati */
    /* Aria sopra la scena. La pista deve ritagliare in orizzontale (è un
       contenitore di scorrimento) e il ritaglio vale per entrambi gli assi:
       senza questo margine interno la cima delle cifre veniva rasata di
       qualche pixel. Il padding della pista è dentro l'area ritagliata,
       quindi qui ci sta; l'asse si sposta dello stesso valore con la calc
       qui sotto, così la geometria misurata dal progetto non cambia. */
    --tl-aria-alto:40px;
    --tl-asse-base:216px; /* distanza dell'asse dal bordo alto della scena */
    --tl-asse-y:calc(var(--tl-asse-base) + var(--tl-aria-alto));
    --tl-illu-h:214px;    /* altezza massima di ogni illustrazione */
    --tl-numero-h:360px;  /* font-size del numero grande */
    --tl-inset:200px;     /* rientro del testo: solo a sinistra, per lasciare
                             spazio all'anello come nel progetto */
    --tl-gap-col:72px;

    position:relative;
    margin:0;
    color:var(--tl-verde);
}

/* ---------------------------------------------------------
 * ASSE E ANELLO
 * Stanno fuori dalla pista che scorre: sono la timeline e
 * devono restare fermi mentre le tappe si muovono.
 * ------------------------------------------------------- */
.fila-timeline__asse{
    position:absolute;
    top:var(--tl-asse-y);
    left:0;
    right:0;
    height:2px;
    background:var(--tl-rosso);
    /* Sopra il numero, sotto le illustrazioni: nel progetto la linea
       attraversa la cifra ma passa dietro i pittogrammi */
    z-index:2;
    pointer-events:none;
}

.fila-timeline__anello{
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    width:68px;
    height:68px;
    border:2px solid var(--tl-rosso);
    border-radius:50%;
    background:transparent;
}
/* Il pieno centrale dell'anello */
.fila-timeline__anello::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--tl-rosso);
}

/* ---------------------------------------------------------
 * PISTA
 * Scorrimento nativo con agganciamento: swipe e inerzia di
 * sistema gratis, al JS restano frecce, trattini e autoplay.
 * ------------------------------------------------------- */
.fila-timeline__pista{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    /* La barra di scorrimento va nascosta: qui misurerebbe l'altezza
       della pista e sballerebbe l'allineamento con l'asse */
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-top:var(--tl-aria-alto);
}
.fila-timeline__pista::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
}

.fila-timeline__tappa{
    flex:0 0 100%;
    width:100%;
    min-width:0;
    scroll-snap-align:start;
    padding:0 0 0 var(--tl-inset);
    box-sizing:border-box;
}

/* ---------------------------------------------------------
 * SCENA: numero grande + illustrazioni sull'asse
 * ------------------------------------------------------- */
.fila-timeline__scena{
    position:relative;
    height:var(--tl-scena-h);
    /* Il rientro del testo non vale per la scena: le illustrazioni
       vanno centrate rispetto a tutta la sezione, come nel progetto */
    margin-left:calc(-1 * var(--tl-inset));
}

.fila-timeline__numero{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    z-index:1;
    font-size:var(--tl-numero-h);
    /* .685 e non 1: l'interlinea corta tira le cifre in alto e le porta a
       filo del bordo della scena. Valore ricavato dal progetto, dove il
       numero sta 216px sopra l'asse e 49px sotto. */
    line-height:.685;
    font-weight:700;
    letter-spacing:-.02em;
    color:var(--tl-numero);
    user-select:none;
}

/* Il numero è decorazione di fondo: il testo gli passa sopra.
   Senza questo, essendo il numero posizionato e il titolo no, la cifra
   coprirebbe le ultime lettere dei titoli lunghi. */
.fila-timeline .fila-timeline__titolo,
.fila-timeline__colonne{
    position:relative;
    z-index:4;
}

.fila-timeline__illustrazioni{
    position:absolute;
    /* Centratura per traslazione invece di left:0/right:0 più width: con
       tutti e tre insieme il browser deve scartare una delle tre regole e
       il risultato dipende dalla direzione del testo */
    left:50%;
    transform:translateX(-50%);
    /* Appoggiate sull'asse: il bordo inferiore coincide con la linea.
       Qui va --tl-asse-base e non --tl-asse-y: questo contenitore è dentro la
       scena, che parte già sotto l'aria in alto della pista, mentre asse-y è
       misurato dal bordo della sezione. Usando asse-y le illustrazioni
       finirebbero sotto la linea di tutta l'aria. */
    top:0;
    height:var(--tl-asse-base);
    z-index:3;
    display:flex;
    align-items:flex-end;
    /* space-between su una fascia larga il 70% della sezione: sono le
       proporzioni del progetto, dove i pittogrammi della prima tappa
       arrivano al 15,6% e all'85,9% della larghezza e il numero grande si
       legge nel mezzo. In percentuale e non in pixel, così la distanza
       cresce con il contenitore di Elementor invece di restare fissa. */
    justify-content:space-between;
    gap:clamp(12px, 3vw, 48px);
    width:min(70%, 1150px);
    margin:0 auto;
}
/* Con una sola illustrazione space-between la spingerebbe a sinistra */
.fila-timeline .fila-timeline__illustrazione:only-child{
    margin-left:auto;
    margin-right:auto;
}

.fila-timeline .fila-timeline__illustrazione{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    max-height:var(--tl-illu-h);
    margin:0;
    /* object-fit non serve: sono PNG trasparenti a proporzione libera,
       vanno scalati interi senza ritagli */
    object-fit:contain;
}

/* ---------------------------------------------------------
 * TESTI
 * ------------------------------------------------------- */
.fila-timeline .fila-timeline__titolo{
    margin:0;
    padding:0;
    color:var(--tl-rosso);
    font-size:1.875rem !important;   /* 30px */
    line-height:1.2 !important;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.01em;
}

.fila-timeline__colonne{
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:var(--tl-gap-col);
    margin-top:20px;
    align-items:start;
}

.fila-timeline .fila-timeline__testo p,
.fila-timeline .fila-timeline__innovazione p{
    margin:0 0 .75em;
    font-size:1rem !important;       /* 16px */
    line-height:1.5 !important;
    color:var(--tl-verde);
}
.fila-timeline .fila-timeline__testo p:last-child,
.fila-timeline .fila-timeline__innovazione p:last-child{
    margin-bottom:0;
}

.fila-timeline .fila-timeline__innovazione p{
    font-style:italic;
}
.fila-timeline .fila-timeline__innovazione-eti{
    font-weight:700;
    font-style:italic;
}

/* ---------------------------------------------------------
 * NAVIGAZIONE
 * ------------------------------------------------------- */
.fila-timeline__nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(28px, 8vw, 114px);
    margin-top:56px;
}

.fila-timeline .fila-timeline__freccia{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:44px;
    height:26px;
    padding:0;
    color:var(--tl-rosso);
    background:none;
    border:0;
    border-radius:0;
    cursor:pointer;
    transition:opacity .2s ease, transform .2s ease;
}
.fila-timeline .fila-timeline__freccia svg{
    display:block;
    width:44px;
    height:16px;
}
.fila-timeline .fila-timeline__freccia:hover{
    opacity:.7;
}
.fila-timeline .fila-timeline__freccia:focus-visible{
    outline:2px solid var(--tl-rosso);
    outline-offset:4px;
}

/* La barra dei trattini, con l'etichetta del numero sopra a quello attivo */
.fila-timeline__barra{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:7px;
    /* La barra si dimensiona sul suo contenuto, non su una larghezza fissa:
       così resta centrata fra le due frecce con qualunque numero di tappe.
       Con una larghezza da 11 trattini (422px nel progetto) e solo sei tappe
       pubblicate, i trattini si ammassavano a sinistra dentro un contenitore
       più largo del necessario. */
    flex:0 1 auto;
    width:auto;
    max-width:100%;
    padding-top:26px;   /* spazio per l'etichetta */
}

.fila-timeline__eti{
    position:absolute;
    top:0;
    left:0;
    color:var(--tl-rosso);
    font-size:1rem;
    line-height:1;
    font-weight:500;
    /* La posizione orizzontale la scrive il JS leggendo il trattino
       attivo: resta giusta con qualunque larghezza e numero di tappe */
    transition:left .25s ease;
    pointer-events:none;
}

/* I trattini sono <button>, e Woodmart più il kit di Elementor stilano i
   button nudi con padding, min-height da area tattile, bordi e raggio: senza
   forzare queste righe i trattini vengono fuori come quadrotti stondati alti
   trenta pixel invece dei "meno" spessi 4px del progetto. Qui !important
   serve contro altri !important, non contro la normale cascata. */
.fila-timeline .fila-timeline__passo{
    /* Larghezza vera e non solo flex-basis: i trattini sono <button> vuoti, e
       per calcolare la propria larghezza naturale la barra guarda la
       larghezza del contenuto degli elementi (zero), non la loro base flex.
       Con `flex:0 1 32px` la barra veniva fuori larga 158px invece di 422 e i
       trattini si schiacciavano sul min-width di 8px.
       Non crescono (32px è la misura del progetto) ma si restringono fino a
       8px quando lo schermo è stretto. */
    flex:0 1 auto;
    width:32px !important;
    min-width:8px !important;
    height:4px !important;
    min-height:0 !important;
    max-height:4px !important;
    padding:0 !important;
    line-height:0 !important;
    background:var(--tl-rosso-chiaro);
    border:0 !important;
    border-radius:999px !important;
    box-shadow:none !important;
    box-sizing:border-box;
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
    transition:background-color .2s ease;
}
.fila-timeline .fila-timeline__passo--attivo{
    background:var(--tl-rosso);
}
.fila-timeline .fila-timeline__passo:focus-visible{
    outline:2px solid var(--tl-rosso);
    outline-offset:4px;
}

/* ---------------------------------------------------------
 * TABLET
 * ------------------------------------------------------- */
@media (max-width:1024px){
    .fila-timeline{
        --tl-scena-h:220px;
        --tl-asse-base:178px;
        --tl-illu-h:176px;
        --tl-numero-h:280px;
        --tl-inset:80px;
        --tl-gap-col:40px;
    }
    .fila-timeline__anello{
        width:56px;
        height:56px;
    }
    .fila-timeline__anello::after{
        width:22px;
        height:22px;
    }
    .fila-timeline .fila-timeline__titolo{
        font-size:1.625rem !important;   /* 26px */
    }
    .fila-timeline__nav{
        margin-top:40px;
    }
}

/* ---------------------------------------------------------
 * MOBILE
 * Una colonna sola, frecce a sinistra e barra sotto, come
 * nel progetto mobile. Le illustrazioni rientrano nella
 * larghezza invece di essere tagliate dal bordo.
 * ------------------------------------------------------- */
@media (max-width:767px){
    .fila-timeline{
        --tl-scena-h:205px;
        --tl-asse-base:152px;
        --tl-illu-h:150px;
        /* Più grande del proporzionale: sul telefono le illustrazioni coprono
           quasi tutta la larghezza e con 190px la cifra dietro non si
           capiva. Scende sotto l'asse, come nel progetto mobile. */
        --tl-numero-h:250px;
        --tl-inset:0px;
        --tl-gap-col:0px;
    }
    .fila-timeline__anello{
        width:44px;
        height:44px;
    }
    .fila-timeline__anello::after{
        width:17px;
        height:17px;
    }
    .fila-timeline__illustrazioni{
        /* Sul telefono il progetto le vuole larghe e vicine, non distribuite
           su una fascia ristretta: la cifra grande sta dietro, non in mezzo.
           Lo spazio a sinistra lascia visibile l'anello. */
        left:0;
        transform:none;
        width:100%;
        padding:0 0 0 52px;
        justify-content:flex-start;
    }
    .fila-timeline__numero{
        left:auto;
        right:0;
        transform:none;
    }
    .fila-timeline .fila-timeline__titolo{
        font-size:1.375rem !important;   /* 22px */
        margin-top:14px;
    }
    .fila-timeline__colonne{
        grid-template-columns:1fr;
        gap:22px;
        margin-top:14px;
    }

    .fila-timeline__nav{
        display:grid;
        grid-template-columns:auto auto 1fr;
        justify-content:start;
        align-items:center;
        gap:0 56px;
        margin-top:32px;
    }
    /* Posizionamento esplicito: la barra occupa tutta la riga, e lasciata
       all'auto-placement spingerebbe la seconda freccia su una terza riga,
       impilando le due frecce invece di affiancarle. */
    .fila-timeline .fila-timeline__freccia--prec{
        grid-row:1;
        grid-column:1;
    }
    .fila-timeline .fila-timeline__freccia--succ{
        grid-row:1;
        grid-column:2;
    }
    .fila-timeline__barra{
        grid-row:2;
        grid-column:1 / -1;
        /* Sul telefono le frecce sono allineate a sinistra e la barra parte
           dallo stesso bordo, come nel progetto mobile: qui non si centra */
        justify-content:flex-start;
        width:100%;
        max-width:none;
        margin-top:26px;
    }
}

/* Chi ha chiesto meno animazioni al sistema non subisce né autoplay
   (spento dal JS) né scorrimento animato */
@media (prefers-reduced-motion:reduce){
    .fila-timeline__pista{scroll-behavior:auto;}
    .fila-timeline__eti{transition:none;}
}