/* Tiger Timeline */
.tg-tl { width: 100%; position: relative; }
.tg-tl-track { position: relative; }

/* ---- Scroll-reveal ---- */
.tg-tl-anim-yes .tg-tl-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.tg-tl-anim-yes .tg-tl-horizontal .tg-tl-item,
.tg-tl-horizontal.tg-tl-anim-yes .tg-tl-item { transform: translateY(16px); }
.tg-tl-anim-yes .tg-tl-item.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .tg-tl-anim-yes .tg-tl-item { opacity: 1; transform: none; transition: none; }
}

/* ---- Pulsing markers ---- */
.tg-tl-pulse-yes .tg-tl-dot { position: relative; }
.tg-tl-pulse-yes .tg-tl-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    z-index: -1;
    animation: tg-tl-pulse 2s ease-out infinite;
}
@keyframes tg-tl-pulse {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .tg-tl-pulse-yes .tg-tl-dot::after { animation: none; }
}

/* ---- Navigation arrows (horizontal) ---- */
.tg-tl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #007bff;
    color: #fff;
    cursor: pointer;
    z-index: 6;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transition: transform .2s ease, opacity .2s ease;
}
.tg-tl-nav:hover { transform: translateY(-50%) scale(1.08); }
.tg-tl-nav[hidden] { display: none; }
.tg-tl-nav-prev { left: -6px; }
.tg-tl-nav-next { right: -6px; }
.tg-tl-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #007bff;
    color: #fff;
    flex: 0 0 auto;
    z-index: 1;
}
.tg-tl-card {
    display: block;
    background: #fff;
    padding: 18px 20px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease;
}
a.tg-tl-card:hover { transform: translateY(-3px); }
.tg-tl-dot {
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 0 0 4px rgba(0,123,255,.12);
}
.tg-tl-item:hover .tg-tl-dot { transform: scale(1.08); }
.tg-tl-img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}
.tg-tl-date { display: block; font-weight: 700; color: #007bff; font-size: 13px; }
.tg-tl-title { margin: 4px 0 8px; color: #111; font-size: 18px; line-height: 1.3; }
.tg-tl-text  { margin: 0; color: #666; line-height: 1.55; }

/* ---------- VERTICAL ---------- */
/* The rail stops at the LAST marker rather than running on to the bottom of
   the last card, which left a stub of line hanging below the timeline. Card
   heights vary, so the end point cannot be expressed in CSS — tiger-timeline.js
   measures the last dot and sets --tg-tl-line-end. The 100% fallback keeps the
   original full-height rail if that script never runs. */
.tg-tl-vertical .tg-tl-track::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: auto;
    height: var(--tg-tl-line-end, 100%);
    width: var(--tg-tl-line, 3px);
    background: #e0e4e8;
}
.tg-tl-vertical .tg-tl-item {
    position: relative;
    display: flex;
    gap: 20px;
    padding-bottom: 32px;
}
.tg-tl-vertical .tg-tl-item:last-child { padding-bottom: 0; }
.tg-tl-vertical .tg-tl-card { flex: 1 1 auto; }

/* All-left (default flow): line on the left, dot over it */
.tg-tl-vertical.tg-tl-v-left  .tg-tl-track::before { left: 18px; transform: translateX(-50%); }
.tg-tl-vertical.tg-tl-v-right .tg-tl-track::before { right: 18px; transform: translateX(50%); }
.tg-tl-vertical.tg-tl-v-right .tg-tl-item { flex-direction: row-reverse; }

/* Alternating */
.tg-tl-vertical.tg-tl-v-alternate .tg-tl-track::before { left: 50%; transform: translateX(-50%); }
.tg-tl-vertical.tg-tl-v-alternate .tg-tl-item {
    width: 50%;
    box-sizing: border-box;
    padding-right: 40px;
    flex-direction: row-reverse;
}
.tg-tl-vertical.tg-tl-v-alternate .tg-tl-item:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 40px;
    flex-direction: row;
}
/*
 * Alternating markers must sit centred ON the rail. An item's inner edge already
 * lands exactly on the centre line (odd = right edge, even = left edge at 50%),
 * so anchoring the dot to that edge and pulling it back by half its own width
 * centres it — regardless of the configured dot size. The previous rules added a
 * hard -18px on TOP of the 50% translate, which double-shifted every dot off the
 * line (odd ones to the right, even ones to the left).
 */
.tg-tl-vertical.tg-tl-v-alternate .tg-tl-dot {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(50%);
}
.tg-tl-vertical.tg-tl-v-alternate .tg-tl-item:nth-child(even) .tg-tl-dot {
    right: auto;
    left: 0;
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    /* Collapse alternating to a single left rail on mobile */
    .tg-tl-vertical.tg-tl-v-alternate .tg-tl-track::before,
    .tg-tl-vertical.tg-tl-v-alternate .tg-tl-progress { left: 18px; transform: translateX(-50%); }
    .tg-tl-vertical.tg-tl-v-alternate .tg-tl-progress { transform: translateX(-50%) scaleY(var(--tg-tl-progress, 0)); }
    .tg-tl-vertical.tg-tl-v-alternate .tg-tl-item,
    .tg-tl-vertical.tg-tl-v-alternate .tg-tl-item:nth-child(even),
    .tg-tl-vertical.tg-tl-v-alternate.tg-tl-altflip-flip .tg-tl-item,
    .tg-tl-vertical.tg-tl-v-alternate.tg-tl-altflip-flip .tg-tl-item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
        gap: 20px;
        flex-direction: row;
    }
    .tg-tl-vertical.tg-tl-v-alternate .tg-tl-dot,
    .tg-tl-vertical.tg-tl-v-alternate .tg-tl-item:nth-child(even) .tg-tl-dot,
    .tg-tl-vertical.tg-tl-v-alternate.tg-tl-altflip-flip .tg-tl-dot,
    .tg-tl-vertical.tg-tl-v-alternate.tg-tl-altflip-flip .tg-tl-item:nth-child(even) .tg-tl-dot {
        position: relative;
        left: auto;
        right: auto;
        transform: none;
    }
    /* Pointer points left toward the single rail when collapsed. */
    .tg-tl-pointer-yes.tg-tl-v-alternate .tg-tl-card::after,
    .tg-tl-pointer-yes.tg-tl-v-alternate .tg-tl-item:nth-child(even) .tg-tl-card::after {
        left: calc(var(--tg-tl-pointer, 10px) / -2);
        right: auto;
    }
}

/* ---------- HORIZONTAL ---------- */
.tg-tl-horizontal .tg-tl-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 48px 4px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;            /* Firefox — arrows drive navigation */
    -ms-overflow-style: none;
}
.tg-tl-horizontal .tg-tl-track::-webkit-scrollbar { display: none; }
.tg-tl-horizontal .tg-tl-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
    height: var(--tg-tl-line, 3px);
    background: #e0e4e8;
}
.tg-tl-horizontal .tg-tl-item {
    position: relative;
    flex: 0 0 280px;
    scroll-snap-align: start;
}
.tg-tl-horizontal .tg-tl-dot {
    position: absolute;
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
}

/* ---------- HORIZONTAL: cards above the line ---------- */
.tg-tl-horizontal.tg-tl-h-above .tg-tl-track { padding: 8px 4px 48px; }
.tg-tl-horizontal.tg-tl-h-above .tg-tl-track::before { top: auto; bottom: 18px; }
.tg-tl-horizontal.tg-tl-h-above .tg-tl-dot { top: auto; bottom: -48px; }

/* ---------- HORIZONTAL: alternating (line through the middle) ---------- */
.tg-tl-horizontal.tg-tl-h-alternate .tg-tl-track {
    padding: 8px 4px;
    align-items: stretch;
    min-height: 340px;
}
.tg-tl-horizontal.tg-tl-h-alternate .tg-tl-track::before {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}
.tg-tl-horizontal.tg-tl-h-alternate .tg-tl-item {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
}
.tg-tl-horizontal.tg-tl-h-alternate .tg-tl-dot {
    position: static;
    grid-row: 2;
    justify-self: center;
    top: auto; left: auto; transform: none;
    margin: 10px 0;
}
.tg-tl-horizontal.tg-tl-h-alternate .tg-tl-card { grid-row: 3; align-self: start; }
.tg-tl-horizontal.tg-tl-h-alternate .tg-tl-item:nth-of-type(odd) .tg-tl-card {
    grid-row: 1;
    align-self: end;
}
/* Flip: swap which side the first card starts on. */
.tg-tl-horizontal.tg-tl-h-alternate.tg-tl-altflip-flip .tg-tl-card { grid-row: 1; align-self: end; }
.tg-tl-horizontal.tg-tl-h-alternate.tg-tl-altflip-flip .tg-tl-item:nth-of-type(odd) .tg-tl-card { grid-row: 3; align-self: start; }

/* ---------- Vertical alternating: flip start side ---------- */
.tg-tl-vertical.tg-tl-v-alternate.tg-tl-altflip-flip .tg-tl-item {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 40px;
    flex-direction: row;
}
.tg-tl-vertical.tg-tl-v-alternate.tg-tl-altflip-flip .tg-tl-item:nth-child(even) {
    margin-left: 0;
    padding-left: 0;
    padding-right: 40px;
    flex-direction: row-reverse;
}
/* Flip variant — same centring rule, sides swapped (see note above). */
.tg-tl-vertical.tg-tl-v-alternate.tg-tl-altflip-flip .tg-tl-dot { right: auto; left: 0; transform: translateX(-50%); }
.tg-tl-vertical.tg-tl-v-alternate.tg-tl-altflip-flip .tg-tl-item:nth-child(even) .tg-tl-dot { left: auto; right: 0; transform: translateX(50%); }

/* ---------- Progress line fill ---------- */
.tg-tl-dot { position: relative; z-index: 2; }
.tg-tl-progress {
    position: absolute;
    z-index: 0;
    background: #007bff;
    pointer-events: none;
    transition: transform .15s linear;
}
.tg-tl-vertical .tg-tl-progress {
    top: 0;
    width: var(--tg-tl-line, 3px);
    /* Must track the rail above, or the fill would overshoot the last marker. */
    height: var(--tg-tl-line-end, 100%);
    transform-origin: top center;
}
.tg-tl-vertical.tg-tl-v-left  .tg-tl-progress { left: 18px;  transform: translateX(-50%) scaleY(var(--tg-tl-progress, 0)); }
.tg-tl-vertical.tg-tl-v-right .tg-tl-progress { right: 18px; transform: translateX(50%)  scaleY(var(--tg-tl-progress, 0)); }
.tg-tl-vertical.tg-tl-v-alternate .tg-tl-progress { left: 50%; transform: translateX(-50%) scaleY(var(--tg-tl-progress, 0)); }
.tg-tl-horizontal .tg-tl-progress {
    left: 0; right: 0;
    top: 18px;
    height: var(--tg-tl-line, 3px);
    transform-origin: left center;
    transform: scaleX(var(--tg-tl-progress, 0));
}
.tg-tl-horizontal.tg-tl-h-above .tg-tl-progress { top: auto; bottom: 18px; }
.tg-tl-horizontal.tg-tl-h-alternate .tg-tl-progress { top: 50%; bottom: auto; transform: translateY(-50%) scaleX(var(--tg-tl-progress, 0)); }

/* ---------- Card pointer (triangle toward the line) ---------- */
.tg-tl-pointer-yes .tg-tl-card { position: relative; }
.tg-tl-pointer-yes .tg-tl-card::after {
    content: "";
    position: absolute;
    width: var(--tg-tl-pointer, 10px);
    height: var(--tg-tl-pointer, 10px);
    background: #fff;
    transform: rotate(45deg);
    z-index: -1;
}
/* Vertical */
.tg-tl-pointer-yes.tg-tl-v-left  .tg-tl-card::after { left: calc(var(--tg-tl-pointer, 10px) / -2); top: 22px; }
.tg-tl-pointer-yes.tg-tl-v-right .tg-tl-card::after { right: calc(var(--tg-tl-pointer, 10px) / -2); left: auto; top: 22px; }
.tg-tl-pointer-yes.tg-tl-v-alternate .tg-tl-card::after { right: calc(var(--tg-tl-pointer, 10px) / -2); left: auto; top: 22px; }
.tg-tl-pointer-yes.tg-tl-v-alternate .tg-tl-item:nth-child(even) .tg-tl-card::after { left: calc(var(--tg-tl-pointer, 10px) / -2); right: auto; }
.tg-tl-pointer-yes.tg-tl-v-alternate.tg-tl-altflip-flip .tg-tl-card::after { left: calc(var(--tg-tl-pointer, 10px) / -2); right: auto; }
.tg-tl-pointer-yes.tg-tl-v-alternate.tg-tl-altflip-flip .tg-tl-item:nth-child(even) .tg-tl-card::after { right: calc(var(--tg-tl-pointer, 10px) / -2); left: auto; }
/* Horizontal */
.tg-tl-pointer-yes.tg-tl-h-below .tg-tl-card::after { top: calc(var(--tg-tl-pointer, 10px) / -2); left: 50%; transform: translateX(-50%) rotate(45deg); }
.tg-tl-pointer-yes.tg-tl-h-above .tg-tl-card::after { top: auto; bottom: calc(var(--tg-tl-pointer, 10px) / -2); left: 50%; transform: translateX(-50%) rotate(45deg); }
.tg-tl-pointer-yes.tg-tl-h-alternate .tg-tl-card::after { top: calc(var(--tg-tl-pointer, 10px) / -2); bottom: auto; left: 50%; transform: translateX(-50%) rotate(45deg); }
.tg-tl-pointer-yes.tg-tl-h-alternate .tg-tl-item:nth-of-type(odd) .tg-tl-card::after { top: auto; bottom: calc(var(--tg-tl-pointer, 10px) / -2); }
.tg-tl-pointer-yes.tg-tl-h-alternate.tg-tl-altflip-flip .tg-tl-card::after { top: auto; bottom: calc(var(--tg-tl-pointer, 10px) / -2); }
.tg-tl-pointer-yes.tg-tl-h-alternate.tg-tl-altflip-flip .tg-tl-item:nth-of-type(odd) .tg-tl-card::after { top: calc(var(--tg-tl-pointer, 10px) / -2); bottom: auto; }

/* Icon-only stepper: "Show Step Labels" = off hides the cards, leaving the
   circles + connecting line (and nav arrows) as a clean process stepper. */
.tg-tl-no-labels .tg-tl-card { display: none !important; }
.tg-tl-no-labels .tg-tl-item { justify-content: center; }