/* Virtual ride: the origin/destination picker's helper note, and the
   cinematic full-screen ride itself -- a sticky HUD (current stop, play/pause,
   a mileage track with a marker that moves as you pass each stop) above a
   stack of full-viewport scenes, one per stop, each with its own background
   photo. js/ride.js drives all of it; with no JS none of this markup exists
   (#r-wrap stays hidden) so there's no broken fallback state to style. */

/* The site header is sticky everywhere else; on this page letting it scroll
   out of view along with the picker keeps the ride full-screen and out of
   the way once it starts, closer to an actual "ride" than a normal page. */
body.ride-page .site-header { position: relative; }

.ride-note {
  max-width: 860px; margin: 14px auto 0;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  text-align: center;
}

/* ---------------- HUD ---------------- */

.ride-hud {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--navy-deep);
  color: var(--cream);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -6px 18px rgba(14,33,54,.35);
}

.rh-top {
  max-width: 1100px; margin: 0 auto;
  padding: 10px 20px 6px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}

.rh-now { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rh-name {
  font-family: var(--serif); font-size: 19px; font-weight: 700;
  color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-meta {
  font-family: var(--sans); font-size: 12px; letter-spacing: .03em;
  color: var(--gold-soft); white-space: nowrap;
}

.rh-controls { display: flex; align-items: center; gap: 8px; }
.rh-btn {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .04em;
  background: var(--rust); color: #fdf6e9; border: 1px solid var(--rust);
  border-radius: 3px; padding: 7px 14px; cursor: pointer;
}
.rh-btn:hover { background: var(--rust-dark); }
.rh-btn-ghost { background: none; color: var(--cream); border-color: rgba(242,234,214,.4); }
.rh-btn-ghost:hover { background: rgba(242,234,214,.12); }
.rh-speed {
  font-family: var(--sans); font-size: 12.5px;
  background: var(--navy); color: var(--cream);
  border: 1px solid rgba(242,234,214,.35); border-radius: 3px;
  padding: 6px 6px;
}

.rh-track {
  position: relative; height: 30px;
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
}
.rh-line {
  position: absolute; left: 20px; right: 20px; top: 50%;
  height: 3px; margin-top: -1.5px;
  background: rgba(242,234,214,.25); border-radius: 2px;
}
.rh-ticks { position: absolute; inset: 0; }
.rh-tick {
  position: absolute; top: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--cream-dim);
}
.rh-tick.rh-tick-major { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--gold-soft); }
.rh-tick.rh-tick-passed { background: var(--gold); }
.rh-marker {
  position: absolute; top: 50%; left: 0;
  /* The marker only ever advances left-to-right on this rail (it tracks
     stop order, not real-world compass direction), but the 🚂 glyph faces
     left by default on most platforms -- mirrored so it actually faces the
     way it's moving instead of appearing to run backwards. */
  transform: translate(-50%, -50%) scaleX(-1);
  font-size: 20px; line-height: 1;
  transition: left .5s cubic-bezier(.4,.1,.2,1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

@media (max-width: 640px) {
  .rh-name { font-size: 16px; max-width: 46vw; }
  .rh-speed { display: none; }
}

/* ---------------- scenes ---------------- */

.ride-scenes { position: relative; }

.ride-scenes {
  /* Set by js/ride.js after measuring the fixed bottom HUD, so each scene's
     card lands above the bar instead of underneath it. Static fallback
     matches the HUD's approximate two-row desktop height. */
  --hud-h: 96px;
}
.ride-scene {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  /* The card is bottom-anchored; on stops with a long local_history it can
     grow taller than the scene's own min-height, and without a reserved
     top gutter it ends up flush against the scene's top edge with none of
     the photo showing above it. This guarantees breathing room regardless
     of how tall the card gets. */
  padding-top: 110px;
  padding-bottom: var(--hud-h);
  border-bottom: 1px solid rgba(14,33,54,.4);
}

.rs-bg {
  position: absolute; inset: -6% -6%;
  background-size: cover; background-position: center 45%;
  filter: sepia(.2) contrast(1.03);
  transition: opacity .8s ease;
}
.rs-bg.rs-bg-none {
  background:
    repeating-linear-gradient(-35deg, rgba(242,234,214,.05) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, var(--navy-deep), var(--navy) 60%, var(--navy-soft));
}
.ride-scene { opacity: .5; transition: opacity .7s ease; }
.ride-scene.in-focus { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ride-scene { opacity: 1; transition: none; }
  .rh-marker { transition: none; }
}

.rs-card {
  position: relative; z-index: 2;
  max-width: 560px; width: calc(100% - 48px);
  margin: 0 0 44px;
  padding: 26px 28px;
  color: var(--cream);
  /* A bounded, self-contained panel rather than a fade tied to the scene's
     own height -- readable at a consistent contrast over any photo,
     regardless of how busy or bright it is. */
  background: rgba(14,33,54,.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(242,234,214,.16);
  border-radius: 6px;
  box-shadow: 0 10px 32px rgba(0,0,0,.4);
}

/* Alternate the card left/right, scene to scene, rather than always
   centering it over the photo -- there's no per-photo subject metadata to
   dodge automatically, but alternating sides at least means it isn't
   parked in the same spot (usually the visual center) on every image. */
.ride-scene:nth-child(odd) { justify-content: flex-start; }
.ride-scene:nth-child(odd) .rs-card { margin-left: 6%; }
.ride-scene:nth-child(even) { justify-content: flex-end; }
.ride-scene:nth-child(even) .rs-card { margin-right: 6%; }

@media (max-width: 760px) {
  .ride-scene:nth-child(odd),
  .ride-scene:nth-child(even) { justify-content: center; }
  .ride-scene:nth-child(odd) .rs-card,
  .ride-scene:nth-child(even) .rs-card { margin-left: 0; margin-right: 0; }
}
.rs-badge {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 8px;
}
.rs-badge b { font-size: 13px; color: var(--gold); }

/* The tap target for the mobile sheet (see below) -- on desktop it's inert,
   unstyled beyond resetting <button> chrome, with .rs-details always shown
   so nothing about the desktop layout changes. */
.rs-head {
  all: unset;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; cursor: pointer;
}
.rs-head-text { display: flex; align-items: baseline; gap: 10px; min-width: 0; }

.rs-name {
  font-family: var(--serif); font-size: clamp(26px, 4vw, 40px); font-weight: 700;
  margin: 0 0 4px; text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.rs-head-mp {
  display: none;   /* shown only on mobile, in the collapsed head -- see below */
  font-family: var(--sans); font-size: 12.5px; color: var(--gold-soft);
  white-space: nowrap;
}
.rs-chevron { display: none; flex-shrink: 0; }

.rs-county { font-family: var(--sans); font-size: 13px; color: var(--cream-dim); margin-bottom: 14px; }

.rs-note {
  font-size: 16.5px; line-height: 1.6; color: var(--cream);
  margin-bottom: 10px;
}
.rs-local {
  font-size: 15px; line-height: 1.65; color: var(--cream-dim);
  padding-top: 10px; margin-top: 4px;
  border-top: 1px dotted rgba(242,234,214,.3);
}

.ride-scene.rs-feature .rs-name { font-size: clamp(20px, 2.6vw, 26px); }

.rs-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.rs-photos img {
  width: 90px; height: 90px; object-fit: cover; border-radius: 3px; cursor: pointer;
  border: 1px solid rgba(242,234,214,.35);
}
.rs-photos img:hover { opacity: .85; }
.rs-more {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .04em;
  color: var(--gold-soft); text-decoration: none; white-space: nowrap;
}
.rs-more:hover { text-decoration: underline; }

.rs-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rs-chip {
  font-family: var(--sans); font-size: 12px;
  background: rgba(242,234,214,.1); color: var(--cream);
  border: 1px solid rgba(242,234,214,.3); border-radius: 3px;
  padding: 4px 9px; cursor: pointer; text-decoration: none;
}
.rs-chip:hover { background: rgba(242,234,214,.2); }

/* Below this width the card collapses to an iOS-style bottom sheet: just
   the name and milepost behind a tap, with a grabber affordance and a
   chevron -- everything else (badge, county, railroad note, local history,
   photos, archive links) lives in .rs-details and stays hidden until
   tapped open. Desktop never collapses .rs-details at all. */
@media (max-width: 640px) {
  .rs-card {
    position: relative;
    padding: 22px 18px 16px;
    border-radius: 16px 16px 10px 10px;
  }
  .rs-card::before {
    content: '';
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 2px;
    background: rgba(242,234,214,.35);
  }
  .rs-head-text { flex-direction: column; align-items: flex-start; gap: 2px; }
  .rs-name { font-size: 19px; margin: 0; }
  .rs-head-mp { display: block; }
  .rs-chevron {
    display: inline-block;
    font-size: 13px; color: var(--gold-soft);
    transition: transform .25s ease;
  }
  .rs-card.rs-expanded .rs-chevron { transform: rotate(180deg); }
  .rs-details { display: none; margin-top: 14px; }
  .rs-card.rs-expanded .rs-details { display: block; }
}

@media (max-width: 560px) {
  .rs-card { width: calc(100% - 28px); margin-bottom: 28px; }
}