/* ============================================
   Archives Page — Timeline (formerly Experiences Page)
   ============================================ */

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-xl) 0;
}

/* Vertical line */
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-coral), var(--accent-gold), var(--accent-sage));
  transform: translateX(-50%);
}

.timeline__item {
  position: relative;
  width: 50%;
  padding: var(--space-xl);
}

.timeline__item:nth-child(odd) {
  left: 0;
  padding-right: var(--space-3xl);
  text-align: right;
}

.timeline__item:nth-child(even) {
  left: 50%;
  padding-left: var(--space-3xl);
}

/* Dot on the line */
.timeline__dot {
  position: absolute;
  top: var(--space-xl);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-coral);
  border: 3px solid var(--bg-primary);
  box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.3);
  z-index: var(--z-base);
}

.timeline__item:nth-child(odd) .timeline__dot {
  right: -8px;
}

.timeline__item:nth-child(even) .timeline__dot {
  left: -8px;
}

.timeline__dot--sage { background: var(--accent-sage); box-shadow: 0 0 0 3px rgba(129, 178, 154, 0.3); }
.timeline__dot--gold { background: var(--accent-gold); box-shadow: 0 0 0 3px rgba(242, 204, 143, 0.3); }

.timeline__year {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--accent-gold);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-sm);
}

.timeline__content {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  color: var(--text-dark);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.timeline__content:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.timeline__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--text-dark);
  margin-bottom: var(--space-sm);
}

.timeline__text {
  font-size: var(--fs-small);
  color: var(--text-dark-muted);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.timeline__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.timeline__item:nth-child(odd) .timeline__tags { justify-content: flex-end; }

/* ── Responsive ── */
@media (max-width: 767px) {
  .timeline::before { left: 20px; }

  .timeline__item,
  .timeline__item:nth-child(odd),
  .timeline__item:nth-child(even) {
    left: 0;
    width: 100%;
    padding-left: 50px;
    padding-right: var(--space-md);
    text-align: left;
  }

  .timeline__item:nth-child(odd) .timeline__dot,
  .timeline__item:nth-child(even) .timeline__dot {
    left: 12px;
    right: auto;
  }

  .timeline__item:nth-child(odd) .timeline__tags { justify-content: flex-start; }
}