/* =====================================================================
   Timeline — vertical connected milestone timeline.
   Optional centred H2 (Axiforma Medium 32/45) + intro, then a vertical
   timeline. Each item = a 360x200 image (left), a centre connector (a
   vertical line running through a dot, continuous top-to-bottom across
   every item), and a content column (right): a prominent Year (OneGold
   blue, never translated), a heading (H3 24/medium), and a body (16/reg).
   Zebra-free. Content locked to 1240 via .container; tokens only.
   Component-local --tl-* custom properties for non-token values.
   ===================================================================== */

.timeline {
  /* --- component-local values (no token edits) --- */
  --tl-img-w: 360px;
  --tl-img-h: 200px;
  --tl-item-h: 240px;          /* image 200 + 20 top/bottom = centred */
  --tl-col-gap: 40px;
  --tl-point-w: 20px;
  --tl-dot: 10px;
  --tl-line-top: 35px;         /* line length above the dot */
  --tl-line-w: 1px;

  background: var(--color-bg);
  padding-block: var(--redeem-band-pad-y);
}

.timeline__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--redeem-adv-stack-gap);
}

/* ---- Heading + intro (centred, optional) ---- */
.timeline__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--redeem-stack-gap);
  text-align: center;
  max-width: var(--faq-set-max);
}
.timeline__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--gray-8);
  word-break: break-word;
}
.timeline__intro {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: normal;
  color: var(--color-text-muted);
  word-break: break-word;
}

/* ---- Vertical list ---- */
.timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.timeline__item {
  display: flex;
  gap: var(--tl-col-gap);
  align-items: center;
  justify-content: center;
  min-height: var(--tl-item-h);
}

/* ---- Image (left) ---- */
.timeline__media {
  flex: 0 0 var(--tl-img-w);
  width: var(--tl-img-w);
  height: var(--tl-img-h);
  border-radius: var(--radius-10);
  overflow: hidden;
}
.timeline__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-10);
}

/* ---- Centre connector: line through a dot, continuous top-to-bottom ----
   The fill line stretches to the bottom of each item; because items are
   flush (no list gap), it meets the next item's top line, so the rail is
   unbroken through every dot. align-items:stretch makes the point column
   span the full item height. */
.timeline__point {
  flex: 0 0 var(--tl-point-w);
  width: var(--tl-point-w);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline__line {
  width: var(--tl-line-w);
  background: var(--soft-blue);
}
.timeline__line--top {
  flex: 0 0 var(--tl-line-top);
  height: var(--tl-line-top);
}
.timeline__line--fill {
  flex: 1 1 auto;
}
/* First item: no rail above the first dot. Last item: stop the rail at
   the dot so the connector terminates cleanly at the final milestone. */
.timeline__item:first-child .timeline__line--top {
  visibility: hidden;
}
.timeline__item:last-child .timeline__line--fill {
  visibility: hidden;
}
.timeline__dot {
  flex: 0 0 var(--tl-dot);
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  background: var(--og-blue);
}

/* ---- Content (right) ---- */
.timeline__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: center;
  word-break: break-word;
}
.timeline__year {
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--og-blue);
  font-variant-numeric: tabular-nums;
}
.timeline__title {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--gray-8);
  word-break: break-word;
}
.timeline__body {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--gray-7);
  word-break: break-word;
}

/* ---- Tablet: start stacking image above content at tablet widths ---- */
@media (max-width: 1023.98px) {
  .timeline__heading {
    font-size: clamp(26px, 3.5vw, var(--fs-32));
    line-height: 1.3;
  }
  .timeline__list {
    padding-left: calc(var(--tl-point-w));
  }
  .timeline__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
    min-height: 0;
    position: relative;
    padding-bottom: 32px;
  }
  /* left rail + dot */
  .timeline__point {
    position: absolute;
    left: calc(-1 * var(--tl-point-w));
    top: 6px;
    bottom: 0;
    width: var(--tl-point-w);
    height: auto;
    align-self: auto;
  }
  .timeline__line--top {
    flex: 0 0 0;
    height: 0;
    visibility: hidden;
  }
  .timeline__line--fill {
    flex: 1 1 auto;
  }
  .timeline__item:last-child .timeline__line--fill {
    visibility: hidden;
  }
  .timeline__media {
    flex: none;
    width: 100%;
    max-width: var(--tl-img-w);
    height: auto;
    aspect-ratio: 360 / 200;
  }
  .timeline__year {
    font-size: var(--fs-24);
    line-height: 1.2;
  }
}

/* ---- Mobile: stack image above content; simplify connector to a left
   rail so the timeline stays connected without the centre column. ---- */
@media (max-width: 767.98px) {
  .timeline__heading {
    font-size: clamp(24px, 6.4vw, var(--fs-32));
    line-height: 1.3;
  }
  .timeline__list {
    padding-left: calc(var(--tl-point-w));
  }
  .timeline__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
    min-height: 0;
    position: relative;
    padding-bottom: 32px;
  }
  /* left rail + dot */
  .timeline__point {
    position: absolute;
    left: calc(-1 * var(--tl-point-w));
    top: 6px;
    bottom: 0;
    width: var(--tl-point-w);
    height: auto;
    align-self: auto;
  }
  .timeline__line--top {
    flex: 0 0 0;
    height: 0;
    visibility: hidden;
  }
  .timeline__line--fill {
    flex: 1 1 auto;
  }
  .timeline__item:last-child .timeline__line--fill {
    visibility: hidden;
  }
  .timeline__media {
    flex: none;
    width: 100%;
    max-width: var(--tl-img-w);
    height: auto;
    aspect-ratio: 360 / 200;
  }
  .timeline__year {
    font-size: var(--fs-24);
    line-height: 1.2;
  }
}