/*
  Timeline — Website Refresh 2026 1e (Figma), "Timeline" frame
  (Timeline year, Timeline Item), plus the real usage seen on the
  Company/About page section.
  Component: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8064-36349
  Page usage: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=6031-42584

  Requires tokens.css and icons.css to be loaded first.

  STRUCTURE: each row is a 3-column grid — [left card slot] [year +
  spine, fixed 160px] [right card slot]. Per the real page usage, a
  row can have a card on the left only, the right only, or both (it's
  not a strict alternation — content-driven). Two things follow from
  a slot being empty, and both are markup choices, not something CSS
  alone can express: the last row in a timeline omits its trailing
  spine (confirmed from Figma: the final item's wrapper is 80px tall,
  not 160px, since there's nothing below to connect to) via not
  rendering .rs-timeline-year__spine; and any row's arm
  (.rs-timeline-year__arm--left / --right) should only be rendered on
  the side(s) that actually have a card — an arm pointing at empty
  space reads as a rendering error, not an intentional design.

  ROW HEIGHT IS CONTENT-DRIVEN, NOT FIXED: cards size to their own
  content (icon + text + padding), not a fixed 160px — text length
  varies per entry. Each slot reserves 32px of padding-bottom below
  its card, guaranteeing at least that much vertical gap before the
  next row's content, and the year column stretches (align-self) to
  match however tall that ends up making the row, with its spine
  flex-growing to fill the gap — so the spine still runs continuously
  through the reserved gap space rather than stopping short of it.

  WHY THIS WORKS AT ANY CONTAINER WIDTH, NOT JUST FIGMA'S 880PX: the
  connecting horizontal "arm" lines have a fixed length (40px) baked
  into the year marker, sized to exactly span from the 80px disc to
  the edge of its fixed 160px column. Each card fills its grid track
  completely and butts directly against that same column edge (via
  grid + no gap), so the arm always meets the card's edge exactly,
  regardless of how wide the left/right tracks actually are. Figma's
  880px total (360 + 160 + 360) was just one specific rendering of
  this, not a hard requirement.

  MOBILE — FLAGGED AS UNCONFIRMED: Figma has no mobile design for
  this component yet. Below is one reasonable interpretation per
  verbal direction only (spine moves to a narrow left column, both
  left- and right-side cards stack to its right) — review this
  against the real design once one exists, don't treat it as sourced
  from Figma the way everything else in this file is.

  MOBILE SPACING MODEL: two different gaps, not one. 16px between two
  cards belonging to the *same* year (when a row has both a left and
  right card, now stacked), and 32px between one year's last card and
  the next year's first card. .rs-timeline-row__cards is the wrapper
  those two rules attach to: at desktop it's `display:contents` (so
  it's invisible to the 3-column grid — its slot children are placed
  directly via their own grid-column, unaffected by the wrapper
  existing at all), and at mobile it becomes a real flex column that
  stacks the two slots with the 16px gap, with the 32px carried as
  its own padding-bottom so a spine still runs continuously through
  it (via .rs-timeline-year's align-self: stretch matching whatever
  that wrapper's full height — cards + gap + padding — ends up being).

  Only render a slot's markup when it actually has a card — an empty
  slot <div> left in the DOM would still take part in the mobile
  flex gap, producing a phantom extra 16px next to a single card.
  Same principle as omitting unused arms/spine, just extended here.
*/

.rs-timeline {
  display: flex;
  flex-direction: column;
}

.rs-timeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr);
  /* Nothing stretches by default — .rs-timeline-year opts back in
     below. Without this, both slots (and the cards inside them)
     would stretch to match the tallest column, which is how cards
     ended up far taller than their content needed. */
  align-items: start;
}

.rs-timeline-row__cards {
  display: contents;
}

.rs-timeline-row__slot {
  display: flex;
  align-items: flex-start;
  /* Desktop's between-row gap. .rs-timeline-row__cards is
     display:contents here so it has no box of its own to carry this
     instead — it only becomes a real spacing container at mobile,
     where this is overridden to 0 in favour of the wrapper's own
     gap/padding-bottom (see the mobile block). */
  padding-bottom: var(--space-32);
}
.rs-timeline-row__slot--left {
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-end;
}
.rs-timeline-row__slot--right {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-start;
}

/* ---------- Timeline year ---------- */

.rs-timeline-year {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  width: 160px;
}

.rs-timeline-year__top {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  height: 80px;
}

.rs-timeline-year__disc {
  position: absolute;
  left: 40px;
  top: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px solid var(--color-green-300);
  border-radius: 50%;
  background-color: var(--color-green-300);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-green-900);
}

.rs-timeline-year__arm {
  position: absolute;
  top: 39px;
  width: 40px;
  height: 2px;
  background-color: var(--color-green-300);
}
.rs-timeline-year__arm--left {
  left: 0;
}
.rs-timeline-year__arm--right {
  right: 0;
}

.rs-timeline-year__spine {
  flex: 1 1 auto;
  min-height: var(--space-32);
  width: 2px;
  background-color: var(--color-green-300);
}

/* ---------- Timeline card ---------- */

.rs-timeline-card {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  padding: var(--space-16);
  border: 2px solid transparent;
  background-color: var(--color-neutral-100);
}
.rs-timeline-card--left {
  border-right-color: var(--color-green-300);
  border-top-left-radius: var(--space-16);
  border-bottom-left-radius: var(--space-16);
}
.rs-timeline-card--right {
  border-left-color: var(--color-green-300);
  border-top-right-radius: var(--space-16);
  border-bottom-right-radius: var(--space-16);
}

.rs-timeline-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--space-8);
  background-color: var(--color-neutral-white-50);
}
.rs-timeline-card__icon .rs-icon {
  width: 32px;
  height: 32px;
  color: var(--color-neutral-900);
  /* stroke-width left at the .rs-icon default — not verified against
     Figma's specific export for these icons (medal/users/etc.), flag
     if it reads as too thick/thin once seen live (see controls.css
     for why render size affects this). */
}

.rs-timeline-card__text {
  flex: 1 1 0%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-transparency-dark-90);
}

/* ---------- Mobile — unconfirmed, see file header ---------- */

@media (max-width: 768px) {
  .rs-timeline-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .rs-timeline-row__cards {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    gap: var(--space-16);
    padding-bottom: var(--space-32);
    /* the year column must always render first (leftmost) regardless
       of whether the "left" or "right" card comes first in source
       order — desktop uses grid-column for that, but this element is
       a flex sibling of .rs-timeline-year here, so order does the
       equivalent job */
    order: 1;
  }

  .rs-timeline-row__slot {
    /* superseded by .rs-timeline-row__cards' own gap/padding-bottom
       at this breakpoint */
    padding-bottom: 0;
  }
  .rs-timeline-row__slot--left,
  .rs-timeline-row__slot--right {
    justify-content: flex-start;
  }

  .rs-timeline-year {
    order: 0;
    width: 56px;
    flex-shrink: 0;
  }
  .rs-timeline-year__top {
    width: 56px;
    height: 48px;
  }
  .rs-timeline-year__disc {
    left: 4px;
    width: 48px;
    height: 48px;
    font-size: 14px;
  }
  .rs-timeline-year__arm {
    display: none;
  }

  .rs-timeline-card--left,
  .rs-timeline-card--right {
    max-width: none;
    border-right-color: transparent;
    border-left-color: var(--color-green-300);
    border-radius: 0 var(--space-16) var(--space-16) 0;
  }
}