/* ==========================================================================
   KOBIL — Company — Section: Timeline Highlights
   Figma D-Company 5882:51143 (1280x819 — head at 40/80 in a 1200 column,
   three 380-wide cards with 30 gaps from y=149) ·
   M-Company 5882:51440 (345x620 — one-card scroll-snap slider + 3 dashes).
   ========================================================================== */

.sec-company-timeline-highlights {
  background: var(--white);
}

.sec-company-timeline-highlights__inner {
  padding: var(--w80) var(--w40);
}

/* ---- Header: eyebrow + H2 (Figma: gap 28, then 40 to the card row) ---- */

.sec-company-timeline-highlights .cth-head {
  display: flex;
  flex-direction: column;
  gap: var(--w28);
  margin-bottom: var(--w40);
}

.sec-company-timeline-highlights .cth-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--navy-70);
  /* Figma's `tag` is a cap-trimmed 8px box, so its 12/18 line box is 5px
     taller on each side. Pulling those back in keeps every y below it on
     the frame's own numbers. */
  margin-block: calc(-1 * var(--w5));
}

.sec-company-timeline-highlights .cth-title {
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
}

/* "Firsts" carries the same indigo → pink → peach ramp as the other display
   accents on this page */
.sec-company-timeline-highlights .cth-title-accent {
  background-image: linear-gradient(
    89.58deg,
    #696ef5 22.99%,
    #ca80f4 28.87%,
    #ffc4a0 36.89%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Card row: 3 x 380 with 30 gaps (1200 total) ---- */

.sec-company-timeline-highlights .cth-row {
  display: flex;
  gap: var(--w30);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sec-company-timeline-highlights .cth-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Text block: 28 padding, 32 at the bottom (Figma card/higlights-desktop) */
.sec-company-timeline-highlights .cth-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
  padding: var(--w28) var(--w28) var(--w32);
}

.sec-company-timeline-highlights .cth-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--w3);
}

.sec-company-timeline-highlights .cth-card__year {
  font-family: var(--font-mono);
  font-size: var(--w24);
  font-weight: 500;
  line-height: var(--w32);
  color: var(--blue-dark);
}

.sec-company-timeline-highlights .cth-card__title {
  font-family: var(--font-sans);
  font-size: var(--w24);
  font-weight: 600;
  line-height: var(--w32);
  color: var(--navy);
}

/* pre-wrap: Figma text "Technology,  10M" contains a double space */
.sec-company-timeline-highlights .cth-card__lead {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w23);
  color: var(--navy);
  white-space: pre-wrap;
}

.sec-company-timeline-highlights .cth-card__copy {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

/* Photo: 380x252 (Figma) — aspect ratio instead of a fixed height, so the
   crop stays stable when shrinking. margin-top:auto pins all three photos to
   the same baseline however tall their copy runs. */
.sec-company-timeline-highlights .cth-card__media {
  width: 100%;
  height: auto;
  aspect-ratio: 380 / 252;
  object-fit: cover;
  border-radius: var(--w8);
  margin-top: auto;
}

/* ---- Pagination dashes (phone slider only) ---- */

.sec-company-timeline-highlights .cth-dots {
  display: none;
}

/* ---- Phone: single-card slider (Figma 5882:51440, 313-wide cards) ---- */

@media (max-width: 768px) {
  .sec-company-timeline-highlights__inner {
    padding: var(--m60) var(--m16) var(--m20);
  }

  .sec-company-timeline-highlights .cth-head {
    gap: var(--m24);
    margin-bottom: var(--m24);
  }

  .sec-company-timeline-highlights .cth-eyebrow {
    font-size: var(--m12);
    line-height: var(--m18);
    margin-block: calc(-1 * var(--m5));
  }

  .sec-company-timeline-highlights .cth-title {
    font-size: var(--m34);
    line-height: 1.2;
  }

  /* The phone frame runs the ramp across the whole word, starting on cyan */
  .sec-company-timeline-highlights .cth-title-accent {
    background-image: linear-gradient(
      89.8deg,
      #3ebffc 3.46%,
      #1046cf 13.16%,
      #696ef5 41.17%,
      #ca80f4 63.62%,
      #ffc4a0 99.44%
    );
  }

  .sec-company-timeline-highlights .cth-row {
    gap: var(--m16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .sec-company-timeline-highlights .cth-row::-webkit-scrollbar {
    display: none;
  }

  .sec-company-timeline-highlights .cth-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* card/higlights-mobile: 20/12 padding, gap 8 */
  .sec-company-timeline-highlights .cth-card__text {
    gap: var(--m8);
    padding: var(--m20) var(--m12);
  }

  .sec-company-timeline-highlights .cth-card__year {
    font-size: var(--m14);
    font-weight: 600;
    line-height: var(--m26);
  }

  .sec-company-timeline-highlights .cth-card__title {
    font-size: var(--m18);
    line-height: var(--m24);
  }

  .sec-company-timeline-highlights .cth-card__lead,
  .sec-company-timeline-highlights .cth-card__copy {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  /* card/higlights-mobile: 313x208 */
  .sec-company-timeline-highlights .cth-card__media {
    aspect-ratio: 313 / 208;
    border-radius: var(--m4);
    box-shadow: 0 19px 19px 0 rgba(33, 40, 51, 0.06);
  }

  /* Dashes: 16x2, gap 4, active Go Blue (Figma 5882:51445) */
  .sec-company-timeline-highlights .cth-dots {
    display: flex;
    justify-content: center;
    gap: var(--m4);
    /* Figma's dash row is 2px; the buttons keep a 24px touch target, so the
       extra 11px on each side is pulled back out of the flow. */
    margin: var(--m32) 0 calc(-1 * var(--m11));
    padding-top: 0;
  }

  .sec-company-timeline-highlights .cth-dot {
    position: relative;
    width: var(--m16);
    height: var(--m24);
    margin-top: calc(-1 * var(--m11));
    padding: 0;
  }

  .sec-company-timeline-highlights .cth-dot::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--m16);
    height: 2px;
    background: var(--navy-40);
    transition: background-color var(--dur) var(--ease);
  }

  .sec-company-timeline-highlights .cth-dot:hover::after {
    background: var(--navy-60);
  }

  .sec-company-timeline-highlights .cth-dot.is-active::after {
    background: var(--blue);
  }
}