/* =============================================================================
   Timeline, stile «Passi in fila» (dalla 1.2.711). Markup: views/pages/page.twig,
   ramo tl_stile == 'passi'. Colori della sezione: --tl-accent (cerchi),
   --tl-item-color (colore della singola voce, se scelto), --tl-text (testi).
   Su telefono e tablet i passi vanno uno sotto l'altro, uniti da una linea;
   dal computer in fila (fino a 4) con una freccia fra l'uno e l'altro.
   ============================================================================= */
.timeline-passi {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.timeline-passi .tl-passo {
    --tl-passo-colore: var(--tl-item-color, var(--tl-accent, #22c55e));
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Il cerchio col numero */
.timeline-passi .tl-passo-numero {
    position: relative;
    z-index: 1;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--tl-passo-colore);
    border-radius: 50%;
    background: var(--tl-passo-colore);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
/* Futuro / atteso: cerchio vuoto; in corso: un alone */
.timeline-passi .tl-stato-pending .tl-passo-numero {
    background: var(--tl-bg, #fff);
    color: var(--tl-passo-colore);
}
.timeline-passi .tl-stato-current .tl-passo-numero {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--tl-passo-colore) 22%, transparent);
}

/* Titolo e testo accanto */
.timeline-passi .tl-passo-corpo { min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.timeline-passi .tl-passo-sopra {
    margin: 0 0 4px;
    color: var(--tl-passo-colore);
    font-size: 13px;
    font-weight: 600;
}
.timeline-passi .tl-passo-titolo {
    margin: 0 0 6px;
    padding: 0; /* app.css dà 10px sopra e sotto a tutti i titoli */
    color: var(--tl-text, #0f172a);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
.timeline-passi .tl-passo-testo {
    margin: 0;
    color: color-mix(in srgb, var(--tl-text, #0f172a) 68%, transparent);
    font-size: 14px;
    line-height: 1.6;
}

/* Telefono e tablet: una linea sottile unisce i cerchi */
@media (max-width: 1023.98px) {
    .timeline-passi .tl-passo:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 50px;
        bottom: -22px;
        left: 21px;
        width: 2px;
        background: color-mix(in srgb, var(--tl-text, #0f172a) 14%, transparent);
    }
}

/* Computer: in fila, con la freccia nello spazio fra un passo e l'altro */
@media (min-width: 1024px) {
    .timeline-passi {
        grid-template-columns: repeat(var(--tl-passi, 3), minmax(0, 1fr));
        gap: 32px 56px;
    }
    .timeline-passi .tl-passo:not(:last-child)::after {
        content: "\2192";
        content: "\2192" / ""; /* la freccia non si legge ad alta voce */
        position: absolute;
        top: 12px;
        right: -40px;
        width: 24px;
        color: color-mix(in srgb, var(--tl-text, #0f172a) 40%, transparent);
        font-size: 20px;
        line-height: 1;
        text-align: center;
    }
    /* Oltre 4 passi vanno a capo: le frecce indicherebbero il vuoto */
    .timeline-passi--tanti .tl-passo:not(:last-child)::after { display: none; }
}