/*
 * Applari Timeline
 * -----------------------------------------------------------------------------
 * Vertical zigzag timeline component. Items alternate left/right around a
 * centered vertical line. Each item shows a year + name (optionally linked).
 *
 * Usage (Gutenberg Custom HTML block):
 *   <ol class="applari-timeline">
 *     <li class="applari-timeline__item">
 *       <span class="applari-timeline__year">2023</span>
 *       <span class="applari-timeline__name">
 *         <a href="/...">Yritys Oy</a>
 *       </span>
 *     </li>
 *     ...
 *   </ol>
 *
 * Per-section overrides:
 *   style="--timeline-accent: var(--pink);"  // year + line + dot color
 *   style="--timeline-line-width: 3px;"
 */

.applari-timeline {
    --timeline-accent: var(--heading-clr, currentColor);
    --timeline-line-width: 2px;
    --timeline-dot-size: 16px;
    --timeline-gap: 2.5rem;
    --timeline-side-padding: 2.5rem;

    position: relative;
    list-style: none;
    padding: 1rem 0;
    margin: 0 auto;
    max-width: 1000px;
    counter-reset: timeline;
}

/* Center vertical line */
.applari-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--timeline-line-width);
    background: var(--timeline-accent);
    opacity: 0.35;
    border-radius: var(--timeline-line-width);
}

.applari-timeline__item {
    position: relative;
    width: 50%;
    padding: 0.75rem var(--timeline-side-padding);
    margin: 0 0 var(--timeline-gap);
    display: flex;
    align-items: baseline;
    gap: 1rem;
    box-sizing: border-box;
}

/* Odd (1, 3, 5…) on left side */
.applari-timeline__item:nth-child(odd) {
    margin-right: auto;
    text-align: right;
    flex-direction: row-reverse;
}

/* Even (2, 4, 6…) on right side */
.applari-timeline__item:nth-child(even) {
    margin-left: auto;
    text-align: left;
}

/* Dot on the central line */
.applari-timeline__item::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    width: var(--timeline-dot-size);
    height: var(--timeline-dot-size);
    border-radius: 50%;
    background: var(--timeline-accent);
    box-shadow: 0 0 0 4px var(--body-bg-clr, #fff);
}

.applari-timeline__item:nth-child(odd)::before {
    right: calc(var(--timeline-dot-size) / -2);
}

.applari-timeline__item:nth-child(even)::before {
    left: calc(var(--timeline-dot-size) / -2);
}

/* Year — large, accent-colored */
.applari-timeline__year {
    display: inline-block;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--timeline-accent);
    font-family: inherit;
    flex-shrink: 0;
}

/* Company name */
.applari-timeline__name {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1.4;
    color: inherit;
}

.applari-timeline__name a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.applari-timeline__name a:hover,
.applari-timeline__name a:focus {
    color: var(--timeline-accent);
}

/* Mobile: stack everything on the left, line at left edge */
@media only screen and (max-width: 768px) {
    .applari-timeline {
        --timeline-side-padding: 1.75rem;
        --timeline-gap: 1.5rem;
        padding-left: 0.5rem;
    }

    .applari-timeline::before {
        left: 8px;
        transform: none;
    }

    .applari-timeline__item,
    .applari-timeline__item:nth-child(odd),
    .applari-timeline__item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        flex-direction: row;
        padding-right: 0;
    }

    .applari-timeline__item:nth-child(odd)::before,
    .applari-timeline__item:nth-child(even)::before {
        left: -7px;
        right: auto;
        top:16px;
        transform: translateX(calc(var(--timeline-dot-size) / -2 + 8px + var(--timeline-line-width) / 2));
    }

    .applari-timeline__year {
        font-size: 1.75rem;
    }
}