/* ============================================================
   Horizontal scrollable timeline
   Prefix: .stl / --stl-*   (no collision with existing --sg-* or site vars)
   Depends on: Montserrat (already loaded site-wide)
   ============================================================ */

.stl {
  --stl-blue:        #00578a;   /* matches --primary-blue */
  --stl-blue-dark:   #004570;
  --stl-cyan:        #0097c7;
  --stl-magenta:     #a60066;
  --stl-ink:         #1e2a33;
  --stl-muted:       #6b7680;
  --stl-line:        #d5dde3;
  --stl-bg:          #fff;

  --stl-point-w:     280px;     /* card width */
  --stl-gap:         32px;      /* space between cards */
  --stl-line-y:      28px;      /* where the rule sits inside each point */
  --stl-img-h:       120px;     /* image height */

  position: relative;
  padding: 8px 0 20px;
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--stl-ink);
}

/* --- Viewport / track ---------------------------------------- */
.stl-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;             /* Firefox */
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  outline: none;
  /* fade the edges so it's obvious there's more */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.stl-viewport::-webkit-scrollbar { display: none; }
.stl-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.stl-viewport.is-dragging * { user-select: none; pointer-events: none; }
.stl-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--stl-cyan); }

.stl-track {
  display: flex;
  gap: var(--stl-gap);
  list-style: none;
  margin: 0;
  padding: 0 calc(50% - var(--stl-point-w) / 2);   /* first/last point can center */
  position: relative;
  /* Without this the track is only as wide as the viewport and the points
     overflow it, so ::before (the connecting line) stops after ~3 points. */
  width: max-content;
  min-width: 100%;
  box-sizing: content-box;
}

/* the continuous rule */
.stl-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--stl-line-y);
  height: 2px;
  background: var(--stl-line);
}

/* --- Point ----------------------------------------------------- */
.stl-point {
  position: relative;
  flex: 0 0 var(--stl-point-w);
  scroll-snap-align: center;
  padding-top: calc(var(--stl-line-y) + 24px);
}

.stl-point__marker {
  position: absolute;
  top: calc(var(--stl-line-y) - 7px);
  left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--stl-bg);
  border: 3px solid var(--stl-blue);
  box-sizing: border-box;
  transition: transform .2s ease, background-color .2s ease;
}
.stl-point.is-active .stl-point__marker {
  background: var(--stl-magenta);
  border-color: var(--stl-magenta);
  transform: scale(1.25);
}

/* short tick connecting the marker to the card */
.stl-point__body {
  position: relative;
  padding-left: 22px;
  border-left: 2px solid var(--stl-line);
  margin-left: 7px;               /* aligns with marker center */
  min-height: 60px;
}
.stl-point.is-active .stl-point__body { border-left-color: var(--stl-magenta); }

.stl-point__date {
  display: block;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--stl-blue-dark);
  margin-bottom: 12px;
}

.stl-point__figure {
  margin: 0 0 12px;
  width: 100%;
  height: var(--stl-img-h);
  overflow: hidden;
  border-radius: 4px;
  background: #eef2f5;
}
.stl-point__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.stl-point__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--stl-ink);
}
.stl-point__text {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--stl-muted);
}
.stl-point__text p:last-child { margin-bottom: 0; }

/* --- Prev / next ---------------------------------------------- */
.stl-nav {
  position: absolute;
  top: calc(var(--stl-line-y) + 8px);
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--stl-blue);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, opacity .15s ease;
}
.stl-nav:hover, .stl-nav:focus-visible { background: var(--stl-blue-dark); outline: none; }
.stl-nav:focus-visible { box-shadow: 0 0 0 3px rgba(0,151,199,.45); }
.stl-nav[disabled] { opacity: .3; cursor: default; }
.stl-nav--prev { left: 0; }
.stl-nav--next { right: 0; }

/* --- Play / pause ---------------------------------------------- */
.stl-playpause {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--stl-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.stl-playpause:hover, .stl-playpause:focus-visible { color: var(--stl-blue); outline: none; }
.stl-playpause:focus-visible { box-shadow: 0 0 0 2px rgba(0,151,199,.45); }
.stl-playpause::before {
  content: "";
  display: block;
  width: 10px; height: 12px;
  background: currentColor;
  /* two bars = pause */
  clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%, 62% 0);
}
.stl-playpause[data-state="paused"]::before {
  /* triangle = play */
  width: 12px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* --- Progress bar ---------------------------------------------- */
.stl-progress {
  margin: 20px auto 0;
  width: min(240px, 60%);
  height: 3px;
  background: var(--stl-line);
  border-radius: 3px;
  overflow: hidden;
}
.stl-progress__bar {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--stl-blue);
  transform-origin: left;
  transition: width .2s ease;
}

/* --- Responsive ------------------------------------------------- */
@media (max-width: 767.98px) {
  .stl { --stl-point-w: 240px; --stl-gap: 24px; --stl-img-h: 100px; }
  .stl-nav { width: 34px; height: 34px; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .stl-viewport { scroll-behavior: auto; }
  .stl-point__marker, .stl-nav, .stl-progress__bar { transition: none; }
}