/* =====================================================================
   BrightValley Link — routes.css
   Transit/route component system: route cards, station lists, difficulty
   meters, elevation, lane-density, network map UI, journey cards.
   ===================================================================== */

/* ---------- route card (ticket / line style) ---------- */
.route { position:relative; display:flex; flex-direction:column; background: var(--white); border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.route:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--steel); }
.route__bar { height:6px; background: var(--g-motion); }
.route__bar--steel { background: var(--g-speed); } .route__bar--yellow { background: linear-gradient(100deg,var(--yellow),var(--red)); }
.route__media { position:relative; aspect-ratio:16/10; overflow:hidden; }
.route__media img, .route__media svg { width:100%; height:100%; object-fit:cover; transition: transform 700ms var(--ease); }
.route:hover .route__media img { transform: scale(1.06); }
.route__code { position:absolute; top:12px; left:12px; background: var(--asphalt); color:#fff; font-family: var(--ff-display); font-weight:700; font-size:.74rem; letter-spacing:.06em; padding:.35em .7em; border-radius: var(--r-sm); }
.route__body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.route__body h3 { font-size:1.28rem; }
.route__stats { display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:auto; padding-top:.8rem; border-top:1px dashed var(--line-strong); }
.route__stat { display:flex; flex-direction:column; }
.route__stat b { font-family: var(--ff-display); font-size:1.05rem; color: var(--ink); }
.route__stat span { font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); }

/* ---------- station list (journey points) ---------- */
.stations { position:relative; padding-left:30px; }
.stations::before { content:""; position:absolute; left:8px; top:8px; bottom:8px; width:3px; background: var(--g-motion); border-radius:2px; }
.stations li { position:relative; padding:.5rem 0 1.4rem; }
.stations li::before { content:""; position:absolute; left:-30px; top:.6rem; width:18px; height:18px; border-radius:50%; background: var(--white); border:4px solid var(--red); }
.stations li:last-child::before { border-color: var(--steel); }
.stations b { font-family: var(--ff-display); }
.stations small { color: var(--muted); font-size:.84rem; }

/* ---------- difficulty meter (segmented) ---------- */
.diff { display:inline-flex; gap:3px; align-items:center; }
.diff i { width:18px; height:8px; border-radius:2px; background: var(--concrete); }
.diff[data-level="1"] i:nth-child(-n+1), .diff[data-level="2"] i:nth-child(-n+2), .diff[data-level="3"] i:nth-child(-n+3), .diff[data-level="4"] i:nth-child(-n+4), .diff[data-level="5"] i:nth-child(-n+5) { background: var(--g-motion); }
.diff-label { font-family: var(--ff-display); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- elevation profile (static svg holder) ---------- */
.elev { background: var(--white); border:1px solid var(--line); border-radius: var(--r-md); padding:18px; }
.elev svg { width:100%; height:auto; display:block; }
.elev__legend { display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:.8rem; font-family: var(--ff-display); font-size:.76rem; color: var(--muted); }
.elev__legend span { display:inline-flex; align-items:center; gap:.4em; }
.elev__legend i { width:12px; height:4px; border-radius:2px; }

/* ---------- lane-density bars (city UI mock) ---------- */
.density { display:grid; gap:.9rem; }
.density__row { display:grid; grid-template-columns: 120px 1fr auto; gap:1rem; align-items:center; }
.density__bar { height:12px; background: var(--concrete); border-radius: var(--r-pill); overflow:hidden; }
.density__fill { height:100%; border-radius: var(--r-pill); background: var(--g-speed); width:0; transition: width 1s var(--ease); }
.density__row b { font-family: var(--ff-display); }
.density__val { font-family: var(--ff-display); font-weight:700; color: var(--steel-deep); }
@media (max-width:520px){ .density__row { grid-template-columns: 90px 1fr; } .density__val { grid-column:2; } }

/* ---------- network map UI (mock movement map) ---------- */
.netmap { position:relative; background: var(--g-night); border-radius: var(--r-lg); overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.netmap svg { width:100%; height:auto; display:block; }
.netmap__dot { fill: var(--yellow); filter: drop-shadow(0 0 6px rgba(247,181,0,.8)); }
.netmap__station { cursor:pointer; }
.netmap__pulse { animation: bv-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin:center; }
@keyframes bv-pulse { 0%{ opacity:.9; r:5; } 70%{ opacity:0; r:16; } 100%{ opacity:0; r:16; } }
.netmap__panel { position:absolute; left:18px; bottom:18px; right:18px; background: rgba(22,24,29,.82); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding:16px 18px; color: var(--paper); max-width:360px; }
.netmap__panel .code { color: var(--yellow); font-size:.78rem; }
.netmap__legend { position:absolute; top:16px; right:16px; display:flex; flex-direction:column; gap:.4rem; font-family: var(--ff-display); font-size:.72rem; color: rgba(243,245,248,.8); }
.netmap__legend span { display:inline-flex; align-items:center; gap:.45em; }
.netmap__legend i { width:14px; height:4px; border-radius:2px; }

/* ---------- journey card (rail trails) ---------- */
.journey { display:grid; grid-template-columns: 0.9fr 1.1fr; background: var(--white); border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; }
.journey__media { position:relative; min-height:240px; overflow:hidden; }
.journey__media img, .journey__media svg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.journey__body { padding: clamp(20px,3vw,34px); display:flex; flex-direction:column; gap:.7rem; }
.journey--rev .journey__media { order:2; }
@media (max-width:720px){ .journey, .journey--rev { grid-template-columns:1fr; } .journey--rev .journey__media{ order:0; } }

/* ---------- route filter chips ---------- */
.routefilter { display:flex; flex-wrap:wrap; gap:.5rem; }
.routefilter button { font-family: var(--ff-display); font-weight:600; font-size:.82rem; padding:.5em 1.1em; border-radius: var(--r-pill); border:1.5px solid var(--line-strong); background: var(--white); color: var(--ink); transition: all var(--t-fast); display:inline-flex; align-items:center; gap:.45em; }
.routefilter button .swatch { width:10px; height:10px; border-radius:50%; }
.routefilter button[aria-pressed="true"] { background: var(--asphalt); color:#fff; border-color: var(--asphalt); }
.routefilter button:hover { border-color: var(--red); }
.filter-empty { display:none; padding:2rem 0; color: var(--muted); font-family: var(--ff-display); }

/* ---------- tag / badge ---------- */
.badge { display:inline-flex; align-items:center; gap:.4em; font-family: var(--ff-display); font-weight:600; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; padding:.36em .8em; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); border:1px solid var(--line); }
.badge--red { background: rgba(255,59,48,.12); color: var(--red); border-color: transparent; }
.badge--yellow { background: rgba(247,181,0,.18); color: var(--yellow-deep); border-color: transparent; }
.badge--steel { background: rgba(92,156,224,.16); color: var(--steel-deep); border-color: transparent; }
.badge--ghost { background: rgba(255,255,255,.14); color:#fff; border-color: rgba(255,255,255,.3); }
.badges { display:flex; flex-wrap:wrap; gap:.5rem; }