/* Timeline
   A vertical milestone track. A centre line runs the full height, with a dot
   marking each entry; cards alternate left and right on wide screens and stack
   into one column on narrow screens. Colour and type from tokens.css. */

.dp-timeline {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6);
}

.dp-timeline-track {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the centre line */
.dp-timeline-track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: var(--dp-border);
}

.dp-timeline-item {
  position: relative;
  width: 50%;
  padding: 0 var(--dp-space-8) var(--dp-space-8);
  box-sizing: border-box;
}

.dp-timeline-item:last-child { padding-bottom: 0; }

/* odd items on the left, even items on the right */
.dp-timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}

.dp-timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}

/* the dot sits on the centre line */
.dp-timeline-marker {
  position: absolute;
  top: 0.35rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--dp-radius-full);
  background: var(--dp-blue-700);
  border: 3px solid var(--dp-bg);
}

.dp-timeline-item:nth-child(odd) .dp-timeline-marker {
  right: calc(var(--dp-space-8) * -1 - 0.425rem);
  transform: translateX(1px);
}

.dp-timeline-item:nth-child(even) .dp-timeline-marker {
  left: calc(var(--dp-space-8) * -1 - 0.425rem);
  transform: translateX(-1px);
}

.dp-timeline-year {
  margin: 0 0 var(--dp-space-1);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dp-link);
}

.dp-timeline-heading {
  margin: 0 0 var(--dp-space-2);
  font-size: var(--dp-text-xl);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-timeline-text {
  margin: 0;
  font-size: var(--dp-text-base);
  color: var(--dp-text-muted);
}

@media (max-width: 720px) {
  .dp-timeline-track::before { left: 0.425rem; }

  .dp-timeline-item,
  .dp-timeline-item:nth-child(odd),
  .dp-timeline-item:nth-child(even) {
    width: 100%;
    left: 0;
    text-align: left;
    padding: 0 0 var(--dp-space-8) var(--dp-space-8);
  }

  .dp-timeline-item:nth-child(odd) .dp-timeline-marker,
  .dp-timeline-item:nth-child(even) .dp-timeline-marker {
    left: 0;
    right: auto;
    transform: none;
  }
}