/* =========================================================================
   Timeline Cards (Figma 362:11168 — "Our Journey")
   Header (eyebrow + heading left / subhead right) above a zig-zag run of
   period cards. Cards alternate left/right (native flex column, 40px gaps),
   connected by dotted-teal elbow links. A teal dot scrubs down the combined
   link path as the user scrolls (JS in js/sections/timeline-cards.js).

   Desktop (>=1024px): two-column zig-zag + SVG connectors + traveling dot.
   Mobile  (<1024px):  single column + left vertical dotted spine + dot.
   ========================================================================= */

.timeline-cards {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
}

.timeline-cards__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-10); /* 40px between header and timeline (Figma) */
}

/* ----------- Header ----------- */
.timeline-cards__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* 24px eyebrow -> heading row */
}

.timeline-cards__eyebrow {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-navy-blue);
}

.timeline-cards__eyebrow-slash {
  color: var(--color-green-2);
  margin-right: 0.25em;
}

.timeline-cards__header-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .timeline-cards__header-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(40px, 6vw, 168px); /* Figma desktop: 855 - 687 = 168 */
  }
}

.timeline-cards__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-navy-blue);
  max-width: 687px;
}

.timeline-cards__subheading {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: 28px;
  color: var(--color-body-copy-text);
  max-width: 585px;
}

/* ----------- Timeline shell ----------- */
.timeline-cards__timeline {
  position: relative;
}

/* SVG overlay carrying the dotted-teal connectors. Sized + pathed by JS to
   match the rendered card positions. Sits behind the cards (z-index) so the
   traveling dot tucks behind a card while crossing it. */
.timeline-cards__track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.timeline-cards__connector {
  fill: none;
  stroke: var(--color-teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.25 8; /* fine dots (Figma) */
}

/* The traveling dot — teal core + soft halo. Rides offset-path (desktop) set
   by JS, scrubbed via --timeline-cards-progress. */
.timeline-cards__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(65, 224, 209, 0.5); /* r6.5 halo over r3.5 core */
  z-index: 1; /* above connectors, below cards */
  offset-rotate: 0deg;
  offset-anchor: center;
  offset-distance: calc(var(--timeline-cards-progress, 0) * 100%);
}

/* ----------- Cards ----------- */
.timeline-cards__items {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px; /* Figma vertical gap between staggered cards */
}

.timeline-cards__item {
  position: relative;
  z-index: 2; /* above the dot + connectors */
  width: 100%;
}

.timeline-cards__card {
  background-color: var(--color-background);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: var(--space-7); /* 32px */
  display: flex;
  align-items: center;
  gap: 48px; /* Figma gap between period / divider / points */
  transition: border-color 0.3s ease;
}

/* Cards activate (grey -> teal border) as the traveling dot reaches them.
   JS toggles .is-active per card based on scroll progress; card 1 is active
   from the start. */
.timeline-cards__item.is-active .timeline-cards__card {
  border-color: var(--color-teal);
}

.timeline-cards__period {
  flex-shrink: 0;
  width: 228px; /* Figma fixed */
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* 8px */
}

.timeline-cards__year {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3); /* 30px cap */
  font-weight: var(--font-weight-semibold);
  line-height: 32px;
  color: var(--color-navy);
}

.timeline-cards__label {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 28px;
  color: var(--color-body-copy);
}

/* 1px vertical divider, grey gradient fading at both ends (Figma Vector 5). */
.timeline-cards__divider {
  flex-shrink: 0;
  align-self: stretch;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(178, 178, 178, 0) 0%,
    var(--color-border) 51%,
    rgba(178, 178, 178, 0) 100%
  );
}

.timeline-cards__points {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding-left: 24px; /* marker indent (Figma ms-24) */
  list-style: disc;
}

.timeline-cards__points li {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 2; /* Figma leading-[2] */
  color: var(--color-body-copy);
}

/* ----------- Desktop zig-zag (>=1024px) ----------- */
@media (min-width: 1024px) {
  .timeline-cards__item {
    width: 57.64%; /* 830 / 1440 (Figma) */
  }
  /* Visual order = DOM order; odd cards hug the left, even hug the right. */
  .timeline-cards__item:nth-child(even) {
    align-self: flex-end;
  }
}

/* ----------- Stacked card internals (<1200px) -----------
   Overrides the 1024px breakpoint on purpose: the zig-zag timeline itself
   survives down to 1024, but inside a card the period / divider / points row
   runs out of horizontal room sooner — a 228px period column plus the bullet
   list can't sit side by side once the card is roughly half a narrow viewport.
   So the CARD stacks at 1200 while the TIMELINE keeps its two-column layout
   until 1024 (that switch lives in the block below). */
@media (max-width: 1199.98px) {
  .timeline-cards__card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6); /* 24px */
  }

  .timeline-cards__period {
    width: 100%;
  }

  /* Divider becomes a horizontal rule between period and points. */
  .timeline-cards__divider {
    align-self: stretch;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(178, 178, 178, 0) 0%,
      var(--color-border) 51%,
      rgba(178, 178, 178, 0) 100%
    );
  }
}

/* ----------- Mobile single column (<1024px) ----------- */
@media (max-width: 1023.98px) {
  /* Hide the SVG zig-zag track; use a straight left spine instead. */
  .timeline-cards__track {
    display: none;
  }

  .timeline-cards__items {
    padding-left: 28px; /* room for the spine + dot */
  }

  /* Vertical dotted-teal spine down the left edge. */
  .timeline-cards__items::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background-image: radial-gradient(var(--color-teal) 1px, transparent 1.5px);
    background-size: 2px 8px;
    background-repeat: repeat-y;
  }

  /* Mobile dot rides the spine straight down via --timeline-cards-progress. */
  .timeline-cards__dot {
    offset-path: none;
    offset-distance: 0;
    top: 6px;
    left: 3px; /* centers the 7px dot on the 2px spine (center ~6px) */
    transform: translateY(calc(var(--timeline-cards-progress, 0) * var(--timeline-cards-spine, 0px)));
  }

  /* Card internals (stacked period / divider / points) already handled by the
     <1200px block above — they stay stacked all the way down. */
}

/* Reduced motion: pin the dot at the start, no scroll scrubbing. */
@media (prefers-reduced-motion: reduce) {
  .timeline-cards__dot {
    offset-distance: 0;
    transform: none;
  }
}