/* =========================================================
   Timeline component: base variables and container
   ========================================================= */
.timeline {
  --timeline-line-colour: #000;
  --timeline-dot-colour: #000;
  --timeline-date-colour: #222;
  --timeline-text-colour: #222;

  --timeline-centre-gap: 3rem;
  --timeline-line-width: 6px;
  --timeline-dot-size: 14px;
  --timeline-content-pad: 1.25rem;

  --timeline-max-width: 1100px;
  --timeline-item-vpad: 1rem;

  --bp-md: 768px;

  --timeline-dot-cap-correction: 0.15em;

  box-sizing: border-box;
  margin: 2rem auto;
  max-width: var(--timeline-max-width);
  padding: 0 1rem;
  position: relative;
  color: var(--timeline-text-colour);
}

/* =========================================================
   Continuous centre line and marker dots (desktop)
   ========================================================= */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: var(--timeline-line-width);
  transform: translateX(-50%);
  background: var(--timeline-line-colour);
  border-radius: var(--timeline-line-width);
  z-index: 0;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--timeline-centre-gap) 1fr;
  grid-template-rows: auto min-content;
  align-items: start;
  min-height: 3.75rem;
  padding: var(--timeline-item-vpad) 0;
  z-index: 1;
}

.timeline-marker {
  grid-column: 2;
  grid-row: 2;
  position: relative;
}

.timeline-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--timeline-dot-cap-correction);
  transform: translateX(-50%);
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  background: var(--timeline-dot-colour);
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff;
}

/* =========================================================
   Alternating layout for desktop
   ========================================================= */
.timeline-item:nth-child(odd) .timeline-date    { grid-column: 1; grid-row: 1; text-align: center; color: var(--timeline-date-colour); }
.timeline-item:nth-child(odd) .timeline-content { grid-column: 1; grid-row: 2; padding-right: var(--timeline-content-pad); }

.timeline-item:nth-child(even) .timeline-date    { grid-column: 3; grid-row: 1; text-align: center; color: var(--timeline-date-colour); }
.timeline-item:nth-child(even) .timeline-content { grid-column: 3; grid-row: 2; padding-left: var(--timeline-content-pad); }

/* =========================================================
   Content styles
   ========================================================= */
.timeline-date {
  font-weight: 600;
  line-height: 1.4;
  display: block;
  margin-bottom: 0.35rem;
}

.timeline-content { line-height: 1.55; text-align: center; }
.timeline-title   { margin: 0 0 0.25rem; font-size: 1rem; line-height: 1.35; }
.timeline p       { margin: 0; color: var(--timeline-text-colour); }

/* =========================================================
   Rail masks for top heading and bottom paragraph
   ========================================================= */
.timeline > .container > h3,
.timeline > .container > p:last-child {
  position: relative;
  z-index: 2;
  background: #fff;
  display: inline-block;
  padding: 0 .5rem;
  margin: 0.5rem 0;
}

/* =========================================================
   Responsive behaviour: static rail and dot alignment
   ========================================================= */
@media (max-width: 768px) {
  .timeline {
    padding-left: 0;
    --rail-centre: 24px;
    --timeline-centre-gap: 48px;
    --timeline-dot-cap-correction: 1.8em;
  }

  .timeline::before {
    left: calc(var(--rail-centre) - var(--timeline-line-width) / 2);
    transform: none;
  }

  .timeline-item {
    position: static;
    display: grid;
    grid-template-columns: var(--timeline-centre-gap) 1fr;
    grid-template-rows: auto min-content;
    align-items: start;
  }

  .timeline-marker {
    position: absolute;
    left: calc(var(--rail-centre) - var(--timeline-dot-size) / 2);
    grid-column: 1;
    grid-row: 2;
    font-size: 1rem;
    line-height: 1.35;
  }

  .timeline-marker::after {
    left: 0;
    top: var(--timeline-dot-cap-correction);
    transform: none;
    width: var(--timeline-dot-size);
    height: var(--timeline-dot-size);
    background: var(--timeline-dot-colour);
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fff;
  }

  .timeline-item:nth-child(odd) .timeline-date,
  .timeline-item:nth-child(even) .timeline-date {
    grid-column: 2; grid-row: 1; text-align: center; margin-bottom: 0.35rem;
  }

  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    grid-column: 2; grid-row: 2; padding-left: var(--timeline-content-pad); padding-right: 0; text-align: center;
  }
}

/* =========================================================
   Optional states and accessibility tweaks
   ========================================================= */
.timeline-item.is-upcoming .timeline-title { font-weight: 700; }
.timeline-item.is-upcoming .timeline-marker::after { background: #0070f3; }

.timeline-item.is-muted .timeline-date,
.timeline-item.is-muted .timeline-content { color.timeline-item.is-muted .timeline-content { color: #777; }
.timeline-item.is-muted .timeline-marker::after { background: #777; }

@media (prefers-contrast: more) {
  .timeline { --timeline-dot-size: 16px; }
  .timeline-marker::after { box-shadow: 0 0 0 4px #fff; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  
/* IE Week section colour scheme fix */

.ie-week-lightgrey--bg {
  background-color: #f2f2f2 !important;
}

.ie-week-white--bg {
  background-color: #ffffff !important;
}