/* ==========================================================================
   Tech4TIME — pages/milestones.css

   THE TIMELINE, AND NOTHING ELSE. It lived in pages/company-profile.css until
   the history became a page of its own; TWO PAGES DRAW IT NOW, so it is a
   stylesheet of its own and both of them load it. The alternative was a copy,
   and a copy is what drifts.

   /pages/milestones/ loads this alone. /pages/company-profile/ loads it and
   then pages/company-profile.css, which is every other band on that page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The live site's alternated timeline, not the NextJS one: a centre rail with
   entries zig-zagging either side of it, and each entry's year sitting opposite
   its box across the rail.

   The live rule set does this with flex plus order:-1 on even entries; the same
   arrangement is cleaner as a two-column grid, where an entry only has to name
   which column its year and its box belong to. Below the tablet band both
   collapse to the left of the rail, exactly as the live site does at 36rem.
   -------------------------------------------------------------------------- */

.timeline {
  --rail: 1.25rem;              /* where the rail sits, until it moves to 50% */
  --dot: 1.75rem;               /* the marker's distance below the box top    */

  position: relative;
  max-width: 60rem;
  padding: 0;
  margin-inline: auto;
  list-style: none;
}

/* One continuous rail for the whole list, rather than a segment per entry:
   consecutive segments have to meet exactly to look unbroken, and they do not
   once entries differ in height. */
.timeline::before {
  content: "";
  position: absolute;
  top: var(--dot);
  bottom: var(--dot);
  left: var(--rail);
  width: 2px;
  transform: translateX(-50%);
  background-color: var(--border-strong);
}

.timeline__item {
  position: relative;
}

.timeline__item:not(:last-child) {
  margin-block-end: var(--space-lg);
}

.timeline__year {
  margin-block-end: var(--space-2xs);
  margin-inline-start: 3.5rem;
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1;
  color: var(--accent-text);
}

.timeline__box {
  position: relative;
  margin-inline-start: 3.5rem;
  padding: var(--space-lg);
  background-color: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out);
}

.timeline__item:hover .timeline__box {
  border-color: var(--silver-accent-mid);
  box-shadow: var(--shadow-sm);
}

/* The marker, sitting on the rail. Drawn on the box so it tracks the box's
   edge when the entry flips sides.

   The border width in every offset below is not a fudge. An absolutely
   positioned element is laid out against its containing block's PADDING box,
   so an offset of -2.25rem here starts from inside the box's 1px border and
   lands the marker 1px past the rail — to the right on odd entries and,
   mirrored, to the left on even ones. Adding the border back cancels it. */
.timeline__box::after {
  content: "";
  position: absolute;
  top: var(--dot);
  left: calc(-2.25rem - var(--border-width));
  width: 1.1rem;
  height: 1.1rem;
  transform: translate(-50%, -50%);
  background-image: var(--silver-gradient-fill);
  border: 3px solid var(--bg-base);
  border-radius: 50%;
}

.timeline__title {
  margin-block-end: var(--space-3xs);
  font-size: var(--text-lg);
}

.timeline__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* --- alternated, once there is room for two columns ---------------------- */

@media (min-width: 48em) {
  .timeline {
    --rail: 50%;
    --gap: 5rem;                /* the rail runs down the middle of this gap */
  }

  .timeline__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap);
    align-items: start;
  }

  /* Odd entries: year on the left of the rail, box on the right. */
  .timeline__year,
  .timeline__box {
    grid-row: 1;
    margin-inline-start: 0;
  }

  .timeline__year {
    grid-column: 1;
    justify-self: end;
    /* Lines the year up with the marker rather than the top of the box. */
    padding-block-start: calc(var(--dot) - 0.5em);
    margin-block-end: 0;
    text-align: end;
    font-size: var(--text-xl);
  }

  .timeline__box {
    grid-column: 2;
  }

  .timeline__box::after {
    left: calc(var(--gap) / -2 - var(--border-width));
  }

  /* Even entries: the same row, mirrored. */
  .timeline__item:nth-child(even) .timeline__year {
    grid-column: 2;
    justify-self: start;
    text-align: start;
  }

  .timeline__item:nth-child(even) .timeline__box {
    grid-column: 1;
  }

  .timeline__item:nth-child(even) .timeline__box::after {
    left: auto;
    right: calc(var(--gap) / -2 - var(--border-width));
    transform: translate(50%, -50%);
  }
}