/* ==========================================================
   VLK Route Line — Minimal Animated (v0.2.0)
   Ultra-clean: no cards, no borders (except route line).
   Scoped ONLY under .vlk-rl / .vlk-route-line
   ========================================================== */

.vlk-rl{
  /* tokens (overridable) */
  --vlk-red: #B00016;
  --vlk-font-heading: "Kantumruy Pro", serif;
  --vlk-font-body: "Kantumruy Pro", serif;

  --vlk-text: #2b2f36;
  --vlk-muted: #6b7280;
  --vlk-line: #e6e7ea;
  --vlk-card: #ffffff;
  --vlk-bg: #f5f6f8;

  /* component */
  --vlk-rl-cycle: 6500ms;
  --vlk-rl-travel: 0px; /* set by JS: trackWidth - planeWidth */
  --vlk-rl-gap: clamp(14px, 2.2vw, 22px);

  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--vlk-text);
  font-family: var(--vlk-font-body);
}

.vlk-rl[data-vlk-theme="lux"]{
  --vlk-rl-gap: clamp(16px, 2.6vw, 26px);
}

/* Head */
.vlk-rl__head{
  display: grid;
  gap: 8px;
  margin: 0 0 clamp(14px, 2vw, 20px) 0;
}

/* Bigger title (still minimal) */
.vlk-rl__kicker{
  font-family: var(--vlk-font-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--vlk-text);
  opacity: .96;
}

.vlk-rl__sub{
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--vlk-muted);
}

/* Route row */
.vlk-rl__route{
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(240px, 2.3fr) minmax(160px, 1fr);
  align-items: center;
  gap: var(--vlk-rl-gap);
}

/* Ends */
.vlk-rl__end{
  display: grid;
  gap: 8px;
}

.vlk-rl__end--to{
  text-align: right;
}

.vlk-rl__code{
  font-family: var(--vlk-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
}

.vlk-rl__label{
  font-size: 14px;
  font-weight: 400;
  color: var(--vlk-muted);
  line-height: 1.2;
}

/* Track */
.vlk-rl__track{
  position: relative;
  height: 34px;
  display: grid;
  align-items: center;
}

.vlk-rl__line{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: var(--vlk-line);
  opacity: .95;
}

/* Plane */
.vlk-rl__plane{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0px, -50%);
  color: var(--vlk-text);
  opacity: .92;
  will-change: transform;
  pointer-events: none;
}

.vlk-rl__planeSvg{
  width: clamp(26px, 2.8vw, 34px);
  height: auto;
  display: block;
}

.vlk-rl__plane--run{
  animation: vlkPlaneLoop var(--vlk-rl-cycle) linear infinite;
}

/* Leave "as it was" (no bank-turn), but proper reverse */
@keyframes vlkPlaneLoop{
  0%   { transform: translate(0px, -50%) rotate(90deg) scaleY(1); opacity: .90; }
  46%  { transform: translate(var(--vlk-rl-travel), -50%) rotate(90deg) scaleY(1); opacity: .92; }
  50%  { transform: translate(var(--vlk-rl-travel), -50%) rotate(90deg) scaleY(-1); opacity: .92; }
  96%  { transform: translate(0px, -50%) rotate(90deg) scaleY(-1); opacity: .90; }
  100% { transform: translate(0px, -50%) rotate(90deg) scaleY(1); opacity: .90; }
}

/* Meta */
.vlk-rl__meta{
  margin-top: clamp(14px, 2vw, 20px);
}

.vlk-rl__metaRow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--vlk-muted);
  font-size: 16px;
  line-height: 1.2;
}

.vlk-rl__metaItem{
  color: var(--vlk-text);
  opacity: .88;
}

.vlk-rl__dot{
  color: var(--vlk-muted);
  opacity: .7;
}

/* Soft swap */
.vlk-rl--swap [data-vlk-meta],
.vlk-rl--swap [data-vlk-from-code],
.vlk-rl--swap [data-vlk-from-label],
.vlk-rl--swap [data-vlk-to-code],
.vlk-rl--swap [data-vlk-to-label]{
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.vlk-rl [data-vlk-meta],
.vlk-rl [data-vlk-from-code],
.vlk-rl [data-vlk-from-label],
.vlk-rl [data-vlk-to-code],
.vlk-rl [data-vlk-to-label]{
  transition: opacity 180ms ease, transform 180ms ease;
}

/* Tablet: keep row, just allow more breathing */
@media (max-width: 1023px){
  .vlk-rl__route{
    grid-template-columns: minmax(150px, 1fr) minmax(220px, 2fr) minmax(150px, 1fr);
  }
}

/* Mobile: stacked, no horizontal scroll */
@media (max-width: 640px){
  .vlk-rl__route{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vlk-rl__end--to{
    text-align: left;
  }

  .vlk-rl__track{
    height: 28px;
  }

  .vlk-rl__metaRow{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    font-size: 16px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .vlk-rl__plane--run{
    animation: none !important;
  }
  .vlk-rl *{
    transition: none !important;
  }
}