/* ==========================================================================
   Sectie "reis" — Hoofdstuk één: aftelklok en reisvoortgang Spanje → Odijk
   ========================================================================== */

.so-reis {
  overflow: hidden;
  background: linear-gradient(178deg, var(--navy-900), #0e1c40 60%, var(--navy-900));
  color: var(--paper);
}
.so-reis__inner { position: relative; z-index: 2; }
/* base.css zet `.so-section h2` ná `.so-section--dark h2` (zelfde specificiteit): lokaal corrigeren. */
.so-reis h2 { color: var(--paper); }
.so-reis .so-eyebrow__star { color: var(--gold-300); font-size: 0.7rem; }

/* --- Aftelklok ------------------------------------------------------------ */
.so-reis__countdown { text-align: center; margin: 0 auto 56px; }
.so-reis__countdown-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--gold-300);
  margin-bottom: 18px;
}
.so-reis__timer { display: flex; gap: clamp(10px, 2vw, 20px); justify-content: center; }
.so-reis__unit {
  min-width: clamp(66px, 9vw, 96px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(236, 202, 123, 0.32);
  border-radius: 14px;
  padding: 14px 8px 11px;
  text-align: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.so-reis__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 600;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.so-reis__unit-label {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.so-reis__done { display: none; font-family: var(--serif); font-size: 1.8rem; color: var(--gold-300); }
.so-reis.is-done .so-reis__done { display: block; }
.so-reis.is-done .so-reis__timer { display: none; }
.so-reis__date {
  display: block;
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(251, 243, 224, 0.85);
}

/* --- Reisvoortgang -------------------------------------------------------- */
.so-reis__journey { max-width: 920px; margin: 0 auto; }
.so-reis__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--gold-300);
  margin-bottom: 34px;
}
.so-reis__status svg { flex-shrink: 0; }

/* Alle stops delen één coördinatenstelsel: de lijn loopt van 6% tot 94%. */
.so-reis__track { position: relative; height: 130px; }
.so-reis__line {
  position: absolute;
  top: 50px;
  left: 6%;
  right: 6%;
  height: 3px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(246, 231, 188, 0.35) 0 8px, transparent 8px 16px);
}
.so-reis__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--gold-300);
  box-shadow: 0 0 10px rgba(246, 231, 188, 0.6);
  transition: width 0.6s ease;
}

/* Boot of helikopter — onderkant rust op de lijn */
.so-reis__vehicle {
  position: absolute;
  top: 8px; /* 50 - 42 */
  transform: translateX(-50%);
  transition: left 0.6s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.so-reis__vehicle svg { transform: scaleX(-1); }
.so-reis__heli { display: none; }
.so-reis.is-heli .so-reis__heli { display: block; }
.so-reis.is-heli .so-reis__boat { display: none; }
.so-reis.is-heli .so-reis__vehicle { animation: heliHover 1.6s ease-in-out infinite; }

/* Stops: bolletje + label, absoluut op de juiste x */
.so-reis__stop {
  position: absolute;
  top: 43px; /* 50 - 7: bolletje van 14px gecentreerd op de lijn */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 110px;
  max-width: 110px;
}
.so-reis__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  background: var(--navy-700);
  border: 2px solid rgba(246, 231, 188, 0.4);
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.so-reis__stop.is-reached .so-reis__dot {
  background: var(--gold-300);
  border-color: var(--gold-300);
  box-shadow: 0 0 10px rgba(246, 231, 188, 0.7);
}
.so-reis__stop-label {
  margin-top: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--paper);
  line-height: 1.2;
  word-break: break-word;
  hyphens: auto;
}
.so-reis__stop.is-reached .so-reis__stop-label { color: var(--gold-300); }
.so-reis__stop-short { display: none; }
.so-reis__stop-sub {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: rgba(251, 243, 224, 0.55);
  margin-top: 3px;
  line-height: 1.2;
}

/* Mobiel (< 640px, zoals isMobile / sm:block in React) */
@media (max-width: 639px) {
  .so-reis__stop { width: 16vw; max-width: 70px; }
  .so-reis__stop-label { font-size: 0.7rem; }
  .so-reis__stop-full { display: none; }
  .so-reis__stop-short { display: inline; }
  .so-reis__stop-sub { display: none; }
}