/* ============================================
   Timeline Tree – polished (tokens only)
   ============================================ */

.timeline-tree {
    position: relative;
    padding-left: 0;
    margin-top: var(--gap-lg);
}

/* vertical trunk */
.timeline-tree::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-primary-300);
    z-index: 0;
}

.timeline-node {
    position: relative;
    margin-bottom: var(--gap-xl);
    padding-left: 60px;
    z-index: 1;
}

/* dot on the line */
.timeline-node::before {
    content: "";
    position: absolute;
    left: calc(30px - 8px);
    top: 20px;
    width: 16px;
    height: 16px;
    background: var(--color-primary-500);
    border: 3px solid var(--color-surface-muted);
    border-radius: 50%;
    z-index: 2;
}

/* card */
.timeline-node .card {
    display: flex;
    gap: var(--gap-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--padding-md);
    background: var(--color-surface-muted);
    transition: box-shadow 0.2s ease;
}

.timeline-node .card:hover {
    box-shadow: var(--shadow-lg);
}

/* image wrapper – remove figure default margins */
.node-image {
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    /* size will be set per breakpoint */
}

.node-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.node-body {
    flex: 1;
}

.node-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--gap-xs);
    color: var(--color-text-primary);
}

.node-date {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-primary-700);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--gap-sm);
}

.node-description {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    margin-bottom: var(--gap-sm);
    color: var(--color-text-primary);
}

.node-link {
    display: inline-block;
    color: var(--color-link);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.node-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* ==============================
   Breakpoint 1: < 576px (xs)
   ==============================
   Image on top, text below – same as current desktop look */
@media (max-width: 575.98px) {
    .timeline-tree::before {
        left: 15px;
    }
    .timeline-node {
        padding-left: 35px;
    }
    .timeline-node::before {
        left: calc(15px - 8px);
    }
    .timeline-node .card {
        flex-direction: column;
    }
    .node-image {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        align-self: center;
    }
}

/* ==============================
   Breakpoint 2: 576px – 767.98px (sm)
   ==============================
   Keep horizontal layout (image left, text right)
   but image gets a fixed width so it fits nicely */
@media (min-width: 576px) and (max-width: 767.98px) {
    .timeline-tree::before {
        left: 30px;
    }
    .timeline-node {
        padding-left: 60px;
    }
    .timeline-node::before {
        left: calc(30px - 8px);
    }
    .timeline-node .card {
        flex-direction: row;
    }
    .node-image {
        width: 120px;
        height: 80px;
    }
}

/* ==============================
   Breakpoint 3: ≥ 768px (md and above)
   ==============================
   Alternating left/right cards, vertical image+text inside */
@media (min-width: 768px) {
    .timeline-tree::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .timeline-node {
        width: calc(50% - 50px);
        padding-left: 0;
    }

    .timeline-node.left {
        margin-right: auto;
        margin-left: 0;
        text-align: right;
        padding-right: 50px;
        padding-left: 0;
    }

    .timeline-node.left::before {
        left: auto;
        right: -42px;
    }

    .timeline-node.right {
        margin-left: auto;
        margin-right: 0;
        padding-left: 50px;
        text-align: left;
    }

    .timeline-node.right::before {
        left: -42px;
        right: auto;
    }

    .timeline-node .card {
        flex-direction: column;
    }

    .node-image {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        align-self: center;
        margin: 0 auto;
    }
}