/* ==========================================================================
   KOBIL — Company: Timeline Highlights (Figma 16578:18597 "TIMELINE
   HIGHLIGHs", 1280x907). "Four Decades of Firsts" + 3 Foto-Karten
   (1996/1998/2011) auf weißer Flush-Fläche (Mitte des Company-Stapels).
   Mobile (16578:18809): Ein-Karten-Slider mit Pagination-Strichen.
   ========================================================================== */

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

/* Figma-Frame ist 1280 breit — zentriert in der 1360er-Sektionsfläche */
.sec-company-timeline-highlights__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 40px;
}

/* ---- Kopf: Eyebrow + H3 (Figma: Gap 28, danach 80 bis zur Kartenreihe) ---- */

.sec-company-timeline-highlights .cth-head {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 80px;
}

/* Tagline/desktop: 12px-Dot, Gap 10, Tracking 0.48 */
.sec-company-timeline-highlights .cth-eyebrow {
  display: flex;
  gap: 10px;
  color: var(--navy-70);
  letter-spacing: 0.48px;
  line-height: 18px;
}

.sec-company-timeline-highlights .cth-eyebrow::before {
  width: 12px;
  height: 12px;
}

.sec-company-timeline-highlights .cth-title {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
  color: var(--navy);
}

.sec-company-timeline-highlights .cth-title-accent {
  color: var(--blue);
}

/* ---- Kartenreihe: 3 x 380 mit 30er-Gaps (1200 gesamt) ---- */

.sec-company-timeline-highlights .cth-row {
  display: flex;
  gap: 30px;
  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;
}

/* Textblock: 28er-Padding, 32 unten (Figma 16578:18604) */
.sec-company-timeline-highlights .cth-card__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 28px 32px;
}

.sec-company-timeline-highlights .cth-card__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sec-company-timeline-highlights .cth-card__year {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--blue);
}

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

/* pre-wrap: Figma-Text "Technology,  10M" enthält ein doppeltes Leerzeichen */
.sec-company-timeline-highlights .cth-card__lead {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
  color: var(--navy);
  white-space: pre-wrap;
}

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

/* Foto: 380x252 (Figma) — Seitenverhältnis statt Festhöhe, damit der
   Bildausschnitt beim Schrumpfen stabil bleibt. margin-top:auto pinnt alle
   Fotos auf gleiche Höhe (Figma fixiert dafür den Textblock auf 184px) */
.sec-company-timeline-highlights .cth-card__media {
  width: 100%;
  height: auto;
  aspect-ratio: 380 / 252;
  object-fit: cover;
  border-radius: 8px;
  margin-top: auto;
}

/* ---- Pagination-Striche (nur Mobile-Slider) ---- */

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

/* ---- Tablet ---- */

@media (max-width: 1024px) {
  .sec-company-timeline-highlights__inner {
    padding: 60px 32px;
  }

  .sec-company-timeline-highlights .cth-head {
    margin-bottom: 56px;
  }

  .sec-company-timeline-highlights .cth-row {
    gap: 20px;
  }

  .sec-company-timeline-highlights .cth-card__text {
    padding: 20px 16px 24px;
  }

  .sec-company-timeline-highlights .cth-card__year,
  .sec-company-timeline-highlights .cth-card__title {
    font-size: 20px;
    line-height: 26px;
  }

  .sec-company-timeline-highlights .cth-card__lead,
  .sec-company-timeline-highlights .cth-card__copy {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ---- Mobile: Ein-Karten-Slider (Figma 16578:18809, 345 breit) ---- */

@media (max-width: 768px) {
  .sec-company-timeline-highlights__inner {
    padding: 60px 16px 20px;
  }

  /* Kein H3 im Mobile-Design — Tagline direkt über dem Slider, Gap 24 */
  .sec-company-timeline-highlights .cth-head {
    margin-bottom: 24px;
  }

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

  /* Tagline/mobile: 8px-Dot, Gap 8 */
  .sec-company-timeline-highlights .cth-eyebrow {
    gap: 8px;
  }

  .sec-company-timeline-highlights .cth-eyebrow::before {
    width: 8px;
    height: 8px;
  }

  .sec-company-timeline-highlights .cth-row {
    gap: 16px;
    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/12er-Padding, Gap 8 */
  .sec-company-timeline-highlights .cth-card__text {
    gap: 8px;
    padding: 20px 12px;
  }

  .sec-company-timeline-highlights .cth-card__year {
    font-size: 20px;
    line-height: 26px;
  }

  .sec-company-timeline-highlights .cth-card__title {
    font-size: 18px;
    line-height: 24px;
  }

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

  /* Striche: 16x2, Gap 4, aktiv Blau (Figma 16578:18822) */
  .sec-company-timeline-highlights .cth-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 32px;
  }

  .sec-company-timeline-highlights .cth-dot {
    position: relative;
    width: 16px;
    height: 24px;
    padding: 0;
  }

  .sec-company-timeline-highlights .cth-dot::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    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);
  }
}