/*
  T10 Timeline Component
  ---------------------
  Markup (existing):
    <div class="milestones panel--light t10-timeline" role="list"> ... </div>
  JS adds .is-active to the most-visible .milestone as you scroll.
*/

.t10-timeline {
  /*
    Colour baseline: T10 page tokens
    We align the milestone circle to the T10 palette (navy/blue),
    replacing the legacy bright-blue treatment.
  */
  --t10-timeline-dot-start: var(--t10-blue, #1F4E79);
  --t10-timeline-dot-end: var(--t10-navy, #0B2A4A);
  --t10-timeline-ink: var(--t10-ink, #0b1b2b);
  --t10-timeline-muted: var(--t10-muted, rgba(11, 27, 43, 0.66));
  --t10-timeline-surface: var(--t10-surface, #ffffff);
  --t10-timeline-border: rgba(11, 27, 43, 0.10);

  position: relative;
}

/* Layering model
   - Default: dot sits "in front" of the card
   - Hover/focus: card rises above the dot so the dot visually tucks "behind" the card
*/
.t10-timeline .milestone{ position: relative; }
.t10-timeline .milestone-card{ position: relative; z-index: 2; }
.t10-timeline .milestone-dot{ position: absolute; z-index: 3; }

/* When hovering/focusing a milestone, lift the card above the dot and let the dot "tuck" behind */
.t10-timeline .milestone:hover .milestone-card,
.t10-timeline .milestone:focus-within .milestone-card{
  z-index: 4;
}

.t10-timeline .milestone:hover .milestone-dot,
.t10-timeline .milestone:focus-within .milestone-dot{
  z-index: 1;
  transform: translateY(12px) scale(0.98);
  filter: saturate(0.95) brightness(0.98);
}

/* Make the track subtle under T10 */
.t10-timeline .milestones-track {
  opacity: 0.35;
}

/* Ensure cards are stable for hover/active transitions */
.t10-timeline .milestone-card {
  background: var(--t10-timeline-surface);
  border: 1px solid var(--t10-timeline-border);
  box-shadow: 0 10px 30px rgba(11, 27, 43, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  will-change: transform;
}

.t10-timeline .milestone-card h3 {
  color: var(--t10-timeline-ink);
}

.t10-timeline .milestone-card p {
  color: var(--t10-timeline-muted);
}

/* Circle / dot */
.t10-timeline .milestone-dot {
  background: linear-gradient(135deg, var(--t10-timeline-dot-start) 0%, var(--t10-timeline-dot-end) 100%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(11, 27, 43, 0.14);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.t10-timeline .milestone-dot svg {
  opacity: 0.9;
}

.t10-timeline .milestone-year {
  color: #fff;
}

/* Hover / focus */
.t10-timeline .milestone:hover .milestone-card,
.t10-timeline .milestone:focus-within .milestone-card {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(11, 27, 43, 0.14);
  border-color: rgba(31, 78, 121, 0.28);
}

.t10-timeline .milestone:hover .milestone-dot,
.t10-timeline .milestone:focus-within .milestone-dot {
  box-shadow: 0 16px 36px rgba(11, 27, 43, 0.18);
}

/* Active (scroll-spy) */
.t10-timeline .milestone.is-active .milestone-card {
  transform: translateY(-4px);
  box-shadow: 0 18px 56px rgba(11, 27, 43, 0.18);
  border-color: rgba(31, 78, 121, 0.42);
}

.t10-timeline .milestone.is-active .milestone-dot {
  transform: scale(1.06);
  box-shadow: 0 18px 44px rgba(11, 27, 43, 0.22);
}

/* Keyboard focus ring on card */
.t10-timeline .milestone a:focus-visible,
.t10-timeline .milestone button:focus-visible,
.t10-timeline .milestone-card:focus-visible {
  outline: 3px solid rgba(31, 78, 121, 0.55);
  outline-offset: 4px;
  border-radius: 14px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .t10-timeline .milestone-card,
  .t10-timeline .milestone-dot {
    transition: none;
  }
}