/* Timeline Component Styles */

/* The main timeline container */
.timeline-container {
  position: relative;
  max-width: var(--timeline-max-width);
  margin: 0 auto;
}

/* The vertical line running through the timeline */
.timeline-container::after {
  content: '';
  position: absolute;
  width: var(--timeline-line-width);
  background-color: var(--doist-gray-light);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: calc(var(--timeline-line-width) / -2);
  z-index: -1;
}

/* The circular markers on the timeline */
.timeline-marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--timeline-marker-size);
  height: var(--timeline-marker-size);
  border-radius: 50%;
  background-color: var(--doist-bg);
  border: var(--timeline-marker-border) solid var(--doist-gray-light);
  z-index: 1;
  transition: background-color var(--transition-medium), 
              border-color var(--transition-medium), 
              transform var(--transition-medium);
  cursor: pointer;
}

.timeline-marker:hover {
  transform: translateX(-50%) scale(1.2);
  border-color: var(--doist-red);
}

/* Styling for the timeline event cards */
.timeline-event {
  padding: var(--spacing-lg) var(--spacing-xl);
  position: relative;
  width: 50%;
}

.timeline-event.left {
  left: 0;
  padding-right: var(--spacing-2xl);
}

.timeline-event.right {
  left: 50%;
  padding-left: var(--spacing-2xl);
}

/* Arrow pointing from the card to the timeline */
.timeline-event::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  top: var(--timeline-card-top-offset);
}

.timeline-event.left::after {
  right: var(--timeline-arrow-offset);
  border-width: var(--timeline-arrow-size) 0 var(--timeline-arrow-size) var(--timeline-arrow-size);
  border-color: transparent transparent transparent var(--white);
}

.timeline-event.right::after {
  left: var(--timeline-arrow-offset);
  border-width: var(--timeline-arrow-size) var(--timeline-arrow-size) var(--timeline-arrow-size) 0;
  border-color: transparent var(--white) transparent transparent;
}

/* Highlighting active elements */
.timeline-item.active .timeline-marker {
  background-color: var(--doist-red);
  border-color: var(--doist-red);
}

.timeline-content {
  transition: transform var(--transition-medium), 
              box-shadow var(--transition-medium);
}

.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.timeline-item.active .timeline-content {
  transform: scale(1.02);
}