/* ============================================================================
   STORY.CSS — "Unsere Geschichte": vertikale Timeline
   ============================================================================ */

.story-intro {
  padding-top: calc(var(--header-height) + 2.5rem);
  padding-bottom: 1.5rem;
}

.story-intro__title {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  margin-top: 0.5rem;
}

.story-timeline-section {
  padding-top: 0;
}

/* ============================================================================
   TIMELINE — technischer Aufbau
   ============================================================================
   .timeline            position:relative Messcontainer (siehe js/story.js)
     .timeline__rail     EINE durchgehende Linie (Grundlinie + Progress),
                          per JS exakt von Mitte des ersten bis Mitte des
                          letzten Markers positioniert (--timeline-rail-top /
                          --timeline-rail-height). Fallback ohne JS: 0–100%.
     .timeline__list      die eigentlichen Ereignisse
   ============================================================================ */

.timeline {
  position: relative;
  --timeline-rail-x: 22px;
  /* Vertikaler Abstand zwischen Item-Oberkante und Marker-Mitte. Entspricht
     exakt der halben Zeilenhöhe der Datumszeile (siehe .timeline-item__date),
     damit der Punkt immer exakt auf Höhe des Datums sitzt - unabhängig von
     Titel-/Ortslänge oder Bildhöhe. Konstant für alle Items. */
  --timeline-marker-offset: 10px;
}

.timeline__rail {
  position: absolute;
  left: var(--timeline-rail-x);
  top: var(--timeline-rail-top, 0px);
  height: var(--timeline-rail-height, 100%);
  width: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}

.timeline__track,
.timeline__progress {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: 2px;
}

.timeline__track {
  background-color: var(--color-gold-soft);
  opacity: 0.5;
}

.timeline__progress {
  background-color: var(--color-gold);
  transform-origin: top center;
  /* Default (kein JS/GSAP, oder prefers-reduced-motion): Linie vollständig
     sichtbar. Erst wenn JS die Klasse "js-scroll-progress" setzt, startet
     sie bei scaleY(0) und wächst per ScrollTrigger-Scrub kontinuierlich. */
  transform: scaleY(1);
}

.timeline.js-scroll-progress .timeline__progress {
  transform: scaleY(0);
}

.timeline__list {
  position: relative;
}

.timeline-item {
  position: relative;
  padding-left: 60px;
  padding-bottom: clamp(4rem, 10vw, 5.5rem);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item__marker {
  position: absolute;
  left: var(--timeline-rail-x);
  top: var(--timeline-marker-offset);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.timeline-item__dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-ivory);
  border: 2px solid var(--color-gold);
  transition: background-color 0.3s var(--ease-elegant), transform 0.25s var(--ease-elegant);
}

/* Fallback ohne JS: vergangene Ereignisse wirken sofort "bestätigt" (gefüllt) */
.timeline-item[data-status="past"] .timeline-item__dot {
  background-color: var(--color-anthracite);
}

/* Sobald JS die Scroll-Aktivierung übernimmt, starten Punkte neutral und
   füllen sich erst beim Erreichen (siehe js/story.js: ScrollTrigger pro Marker) */
.timeline.js-scroll-progress .timeline-item[data-status="past"] .timeline-item__dot {
  background-color: var(--color-ivory);
}

.timeline.js-scroll-progress .timeline-item.is-active:not([data-status="future"]) .timeline-item__dot {
  background-color: var(--color-anthracite);
}

/* Zukünftiges Ereignis (Kyz Uzatuu): goldener Punkt + dezenter gestrichelter Ring */
.timeline-item[data-status="future"] .timeline-item__dot {
  background-color: var(--color-gold);
}

.timeline-item[data-status="future"] .timeline-item__marker::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed var(--color-gold);
  opacity: 0.55;
}

.timeline-item__content {
  padding-top: 0;
}

.timeline-item__media {
  margin-top: 1.75rem;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.timeline-item__media img,
.timeline-item__media .img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline-item__date {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.timeline-item__title {
  font-size: 1.45rem;
  margin-bottom: 0.35rem;
}

.timeline-item__location {
  color: var(--color-anthracite-soft);
}

.timeline-item__badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.timeline-item__next-chapter {
  margin-top: 0.9rem;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-anthracite-soft);
}

/* Only the future item shows badge / next-chapter text */
.timeline-item:not([data-status="future"]) .timeline-item__badge,
.timeline-item:not([data-status="future"]) .timeline-item__next-chapter {
  display: none;
}

/* ---- Desktop: alternierendes Layout Bild/Text ------------------------------- */
@media (min-width: 1024px) {
  .timeline__rail {
    left: 50%;
  }

  .timeline-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4.5rem;
    padding-left: 0;
    align-items: start;
  }

  .timeline-item__marker {
    left: 50%;
  }

  .timeline-item__content {
    grid-column: 1;
    grid-row: 1;
  }

  .timeline-item__media {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    aspect-ratio: 3 / 2;
  }

  .timeline-item:nth-child(even) .timeline-item__content {
    grid-column: 2;
    text-align: right;
  }

  .timeline-item:nth-child(even) .timeline-item__media {
    grid-column: 1;
  }
}