/* 路线详情页（/trips/:tripId）——对应 src/pages/trip-detail-page.js */
.trip-detail-hero { position: relative; height: 205px; overflow: hidden; }
.trip-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.trip-detail-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,250,242,.95), rgba(255,250,242,.05)); }
.trip-detail-hero > div { position: absolute; z-index: 1; left: 18px; top: 50px; width: 63%; }
.trip-detail-hero h1 { margin: 5px 0; font: 800 26px/1.2 var(--font-serif); }
.trip-detail-hero p { color: var(--muted); font-size: 11px; }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-row span { padding: 4px 8px; border-radius: 9px; background: var(--orange-soft); color: var(--orange-dark); font-size: 9px; }
.route-map-card { position: relative; height: 155px; margin: 12px 14px; overflow: hidden; border-radius: 19px; }
.route-map-card > img { width: 100%; height: 100%; object-fit: cover; }
.route-map-card > i { position: absolute; left: 20%; top: 61%; width: 58%; height: 4px; border-radius: 4px; background: var(--orange); transform: rotate(-13deg); }
.route-map-card > b { position: absolute; width: 25px; height: 25px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: var(--orange); color: white; font-size: 10px; }
.route-map-card > b:nth-of-type(1) { left: 17%; top: 62%; }
.route-map-card > b:nth-of-type(2) { left: 45%; top: 48%; }
.route-map-card > b:nth-of-type(3) { left: 72%; top: 34%; }
.trip-metrics { margin: 0 14px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 17px; background: white; }
.trip-metrics span { padding: 12px 4px; display: grid; gap: 2px; text-align: center; }
.trip-metrics span + span { border-left: 1px solid var(--line); }
.trip-metrics b { color: var(--orange-dark); font-size: 17px; }
.trip-metrics small { color: var(--muted); font-size: 8px; }
.timeline-list { margin: 13px 14px; display: grid; gap: 8px; }
.timeline-list article { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: center; }
.timeline-list time { color: var(--muted); font-size: 11px; }
.timeline-list button { min-height: 72px; padding: 8px; display: grid; grid-template-columns: 1fr 88px; gap: 7px; align-items: center; border-radius: 15px; background: white; box-shadow: var(--shadow-soft); text-align: left; }
.timeline-list h3 { font-size: 13px; }
.timeline-list p { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.timeline-list img { width: 88px; height: 56px; border-radius: 10px; object-fit: cover; }
.trip-detail-actions { margin: 12px 14px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.report-link { width: calc(100% - 28px); margin: 9px 14px; height: 42px; border-radius: 21px; background: var(--jade-soft); color: var(--jade-dark); font-weight: 700; }

.route-map-label { position: absolute; z-index: 2; max-width: 96px; padding: 4px 7px; border-radius: 9px; background: white; box-shadow: var(--shadow-soft); font-size: 8px; transform: translate(12px, -2px); white-space: nowrap; }
.timeline-stop { display: grid !important; grid-template-columns: 46px 1fr !important; }
.timeline-marker { align-self: stretch; display: grid; grid-template-rows: auto 1fr; justify-items: center; }
.timeline-marker time { font-size: 10px; }
.timeline-marker span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: white; font-size: 11px; }
.timeline-stop em { padding: 3px 6px; border-radius: 8px; background: var(--orange-soft); color: var(--orange-dark); font-size: 8px; font-style: normal; }
.navigation-options { margin-top: 15px; display: grid; gap: 8px; }
.navigation-options button { min-height: 56px; padding: 10px 13px; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; border: 1px solid var(--line); border-radius: 15px; background: white; text-align: left; }
.navigation-options button span { font-size: 22px; }
.navigation-options button b { color: var(--muted); font-size: 10px; }
.demo-note { margin-top: 12px; color: var(--muted); font-size: 10px; line-height: 1.5; }