/* `milestones_timeline` — the history timeline on `/pages/about-us`.
 *
 * Every number is off the live page at 1440:
 *
 *   heading     36px on a 50px line, 60px below it
 *   frame       1200px centred; 638px picture column + 50px gap + 464px entry column (1160)
 *   picture     638x590, stacked one per milestone and faded between
 *   entries     132.6px apart (6 x 132.6 = 796), a 2px rgb(224,224,224) rule, a 20px dot each
 *   section     6000px tall — 600px pinned frame + 5400px of scroll on live
 *
 * The pin is `position: sticky` rather than ScrollTrigger: same behaviour, no library. The section's
 * height is the measured 6000px, which is what keeps the page's total right.
 */

.milestones-section {
  display: flow-root;
  /* The measured height of the whole section, so the scroll past it matches live even though our
     frame is as tall as its own content rather than clipped to 600px. */
  height: var(--milestones-height, auto);
}

.milestones {
  /* The pin. `top` clears the header, which is 80px at this width. */
  position: sticky;
  top: calc(var(--header-row-height-lg, 80px) + 20px);
  display: flex;
  flex-direction: column;
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

.milestones__heading {
  margin: 0 0 60px;
  font-size: 36px;
  line-height: 50px;
  font-weight: 600;
  color: var(--color-heading);
}

.milestones__frame {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}

/* ------------------------------------------------------------------ the pictures */

.milestones__images {
  position: relative;
  width: 638px;
  flex: none;
  /* Measured: the column is as tall as the entries beside it, with the picture at its top. */
  height: 590px;
}

.milestones__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 638px;
  height: 590px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.milestones__image.is-active {
  opacity: 1;
}

/* ------------------------------------------------------------------- the entries */

.milestones__track {
  position: relative;
  width: 464px;
  flex: none;
}

.milestones__line {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 9px;
  width: 2px;
  background: rgb(224 224 224);
}

.milestones__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.milestones__item {
  position: relative;
  box-sizing: border-box;
  /* Measured pitch: 132.6px. Six of them are the 796px the picture column sits against. */
  height: 132.6px;
  padding-left: 50px;
}

.milestones__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid rgb(224 224 224);
  border-radius: 50%;
  background: var(--bg-body);
}

.milestones__item.is-active .milestones__dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.milestones__title {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-body);
}

.milestones__item.is-active .milestones__title {
  color: var(--color-heading);
}

.milestones__date {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-body);
}

/* The narrow-screen copy of the picture, which the wide-screen stack already shows. */
.milestones__mobile-image {
  display: none;
}

/* ------------------------------------------------------------------ breakpoints */

@media (max-width: 47.99em) {
  .milestones-section {
    /* No pin on a phone: the entries are the page. */
    height: auto;
  }

  .milestones {
    position: static;
  }

  .milestones__heading {
    margin-bottom: 30px;
    font-size: 28px;
    line-height: 36px;
  }

  .milestones__frame {
    flex-direction: column;
    gap: 0;
  }

  /* The stack of wide-screen pictures goes away; each entry carries its own. */
  .milestones__images {
    display: none;
  }

  .milestones__track {
    box-sizing: border-box;
    width: 100%;
    padding-left: 20px;
  }

  .milestones__line {
    left: 9px;
  }

  .milestones__item {
    height: auto;
    padding: 0 0 40px 40px;
  }

  .milestones__mobile-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    border-radius: var(--block-border-radius);
  }
}

/* ---------------------------------------------------------------------- spacer */

.spacer-section {
  height: var(--spacer-height, 0);
}