/*
 * ************************************************************
 * ************************************************************
 * ** Copyright (c) flavio.ferrara.it
 * ** All rights reserved.
 * **
 * ** Strict Proprietary Notice:
 * ** This website data, source code, and associated
 * ** assets are the exclusive property of flavio.ferrara.it.
 * ** Unauthorized copying, modification,
 * ** or distribution via any medium is strictly prohibited.
 * ************************************************************
 * ************************************************************
 */

/* ==========================
   COMPONENTS / TIMELINE
========================== */

.timeline{
    position:relative;
    max-width:900px;
    margin:auto;
}

.timeline::before{
    content:"";
    position:absolute;
    left:28px;
    top:0;
    bottom:0;
    width:2px;
    background:var(--light-slate);
}

.timeline-item{
    position:relative;
    padding-left:90px;
    margin-bottom:50px;
}

.timeline-dot{
    position:absolute;
    left:18px;
    top:10px;
    width:22px;
    height:22px;
    background:var(--navy);
    border-radius:50%;
    border:4px solid var(--white);
}

.timeline-card{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px;
    box-shadow:var(--shadow);
}

.timeline-card h3{
    color:var(--navy);
    margin-bottom:8px;
}

.timeline-meta{
    color:var(--slate);
    font-weight:600;
    margin-bottom:16px;
}

.timeline-card ul{ padding-left:20px; }

.timeline-card li{ margin-bottom:10px; }

/* Contextual deep-links from a role's bullets to the case study that
   covers it in full (v14) — a faded underline by default, solidifying
   on hover/focus, so they read as "more detail available" without
   competing visually with the bullet text itself. */
.timeline-card li a{
    color:var(--accent);
    font-weight:600;
    text-decoration:underline;
    text-decoration-color:rgba(27,122,74,0.35);
    text-underline-offset:2px;
    transition:text-decoration-color 0.2s ease;
}

.timeline-card li a:hover,
.timeline-card li a:focus-visible{
    text-decoration-color:var(--accent);
}

.timeline-note{
    text-align:center;
    color:var(--slate);
    margin-top:10px;
    font-size:0.95rem;
}