/* About trajectory: deterministic pure-CSS connector geometry.
   Each milestone owns its horizontal offset; the rail stays fixed and continuous. */

.trajectory-map {
  --rail-inset: 1.05rem;
}

.trajectory-map .trajectory-rail {
  z-index: 2;
}

/* Keep a small outer gutter, while connectors start exactly on the rail. */
.trajectory-map .trajectory-rail--technical {
  left: var(--rail-inset) !important;
}

.trajectory-map .trajectory-rail--delivery {
  right: var(--rail-inset) !important;
}

.trajectory-map .trajectory-items {
  padding-left: 0 !important;
}

.trajectory-map .trajectory-items--delivery {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.trajectory-map .trajectory-card {
  --offset: 4rem;
  position: relative;
  box-sizing: border-box;
  margin-left: var(--offset) !important;
  width: calc(100% - var(--offset));
}

.trajectory-map .trajectory-card--tech-1 { --offset: 4rem; }
.trajectory-map .trajectory-card--tech-2 { --offset: 5.7rem; }
.trajectory-map .trajectory-card--tech-3 { --offset: 4.55rem; }
.trajectory-map .trajectory-card--tech-4 { --offset: 6.35rem; }

.trajectory-map .trajectory-card--delivery {
  margin-left: 0 !important;
  margin-right: var(--offset) !important;
}

.trajectory-map .trajectory-card--delivery-1 { --offset: 4.2rem; }
.trajectory-map .trajectory-card--delivery-2 { --offset: 5.65rem; }
.trajectory-map .trajectory-card--delivery-3 { --offset: 4.55rem; }
.trajectory-map .trajectory-card--delivery-4 { --offset: 6.35rem; }

/* Preserve the intentional vertical staggering between milestones. */
.trajectory-map .trajectory-card--tech-3 { margin-top: 1.8rem !important; }
.trajectory-map .trajectory-card--delivery-2 { margin-top: 0.4rem !important; }
.trajectory-map .trajectory-card--delivery-3 { margin-top: 2.3rem !important; }

/* Left track: line starts on the inset rail and ends at the card edge. */
.trajectory-map .trajectory-card:not(.trajectory-card--delivery)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: calc(var(--offset) - var(--rail-inset));
  height: 1px;
  background: color-mix(in srgb, var(--color-brand) 66%, transparent);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* Right track mirrors the same geometry and the dashed rail language. */
.trajectory-map .trajectory-card--delivery::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: calc(var(--offset) - var(--rail-inset));
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-brand) 58%, transparent) 0 0.42rem,
    transparent 0.42rem 0.78rem
  );
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* Nodes sit on top of the line, always at the same distance from the card. */
.trajectory-map .trajectory-node {
  left: -1.58rem !important;
  right: auto !important;
  top: 50% !important;
  width: 0.78rem;
  height: 0.78rem;
  transform: translateY(-50%) !important;
  z-index: 3;
  opacity: 1 !important;
  scale: 1 !important;
}

.trajectory-map .trajectory-node::before,
.trajectory-map .trajectory-node::after {
  content: none !important;
}

.trajectory-map .trajectory-node--outline {
  left: auto !important;
  right: -1.58rem !important;
}

@media (max-width: 767px) {
  .trajectory-map {
    --rail-inset: 0.8rem;
  }

  .trajectory-map .trajectory-rail--technical,
  .trajectory-map .trajectory-rail--delivery {
    left: var(--rail-inset) !important;
    right: auto !important;
  }

  .trajectory-map .trajectory-card,
  .trajectory-map .trajectory-card--delivery {
    --offset: 2.75rem;
    margin-left: var(--offset) !important;
    margin-right: 0 !important;
    width: calc(100% - var(--offset));
  }

  .trajectory-map .trajectory-card--tech-3,
  .trajectory-map .trajectory-card--delivery-2,
  .trajectory-map .trajectory-card--delivery-3 {
    margin-top: 0 !important;
  }

  .trajectory-map .trajectory-card::before,
  .trajectory-map .trajectory-card--delivery::before {
    left: auto;
    right: 100%;
    width: calc(var(--offset) - var(--rail-inset));
  }

  .trajectory-map .trajectory-node,
  .trajectory-map .trajectory-node--outline {
    left: -1.38rem !important;
    right: auto !important;
  }
}