/* timeline block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   vertical + banded timeline */

.timeline { display: flex; flex-direction: column; border-left: 3px solid var(--line); padding-left: 1.6rem; }
.timeline-item { position: relative; padding-bottom: 1.4rem; }
.timeline-item::before { content: ""; position: absolute; left: calc(-1.6rem - 9px); top: .35rem; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 3px solid var(--white); }
.timeline-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.4375rem; color: var(--text-heading); }
.timeline-subtitle { font-size: var(--fs-min); font-weight: 700; color: var(--em-color); margin: .2rem 0 .3rem; }
.timeline-content p { font-size: var(--fs-min); color: var(--muted); }
.timeline--banded { flex-direction: row; border-left: 0; padding-left: 0; gap: 1.6rem; }
.timeline--banded .timeline-item { flex: 1 1 0; border-top: 4px solid var(--accent-on-dark); padding: 1rem 0 0; }
.timeline--banded .timeline-item::before { content: none; }

/* Double-sided: a centre spine with items alternating left / right. Previously
   had no rule, so it rendered identically to the default vertical timeline. */
.timeline--doubleside { border-left: 0; padding-left: 0; position: relative; }
.timeline--doubleside::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--line); transform: translateX(-50%); }
.timeline--doubleside .timeline-item { width: 50%; box-sizing: border-box; padding-bottom: 1.8rem; }
.timeline--doubleside .timeline-item:nth-child(odd) { text-align: right; padding-right: 2.2rem; }
.timeline--doubleside .timeline-item:nth-child(even) { margin-left: 50%; padding-left: 2.2rem; }
.timeline--doubleside .timeline-item:nth-child(odd)::before { left: auto; right: -9px; }
.timeline--doubleside .timeline-item:nth-child(even)::before { left: -9px; }
/* Mobile collapses the two columns onto one spine. The overrides have to repeat
   the :nth-child() selectors: without them the desktop rules above out-specify
   this block, the even items kept margin-left:50% and the page scrolled
   horizontally (measured 449px against a 390px viewport). */
@media (max-width: 40em) {
  .timeline--doubleside { border-left: 3px solid var(--line); padding-left: 1.6rem; }
  .timeline--doubleside::before { content: none; }
  .timeline--doubleside .timeline-item,
  .timeline--doubleside .timeline-item:nth-child(odd),
  .timeline--doubleside .timeline-item:nth-child(even) {
    width: 100%; margin-left: 0; text-align: left; padding-left: 0; padding-right: 0;
  }
  .timeline--doubleside .timeline-item::before,
  .timeline--doubleside .timeline-item:nth-child(odd)::before,
  .timeline--doubleside .timeline-item:nth-child(even)::before {
    left: calc(-1.6rem - 9px); right: auto;
  }
}

/* On a dark section ground the title (navy) and subtitle (--em-color orange)
   fail contrast. Lift them: title -> white, subtitle/eyebrow -> the brand's
   bright accent (yellow where defined for DC, else --accent-on-dark), copy ->
   a legible tint of white. Scoped to the timeline section so it is self-contained. */
.timeline-area:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .timeline-title { color: var(--white); }
.timeline-area:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .timeline-subtitle { color: var(--yellow, var(--accent-on-dark)); }
.timeline-area:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .eyebrow { color: var(--yellow, var(--accent-on-dark)); }
.timeline-area:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .timeline-content p { color: rgba(var(--on-dark-rgb), .82); }