/* css/components/route-map.css — the trip so far, drawn over Google Maps.
   Placement follows the layout (see slideshow.css): a column beside the photo on desktop, a band below
   it on a phone held upright, a portrait card over its top-right corner on a phone held sideways. */

.route-map { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--color-map-bg); border-left: 1px solid #000; }

@media (orientation: portrait) and (max-width: 768px) {
  .route-map { border-left: 0; border-top: 1px solid #000; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .route-map {
    position: absolute;
    top: max(var(--edge), env(safe-area-inset-top));
    right: max(var(--edge), env(safe-area-inset-right));
    width: var(--map-width);
    height: var(--map-height);
    border: 1px solid rgba(233, 228, 216, .25);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  }
}

.route-map__canvas { position: absolute; inset: 0; }
.route-map__path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* light halo keeps the line visible on satellite imagery */
.route-map__path polyline { fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; opacity: .9; filter: drop-shadow(0 0 1.5px #fff); }
.route-map__path circle { fill: var(--color-ink); stroke: #fff; stroke-width: 2; }
.route-map__pin { position: absolute; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; background: var(--color-lamp); border: 4px solid var(--color-ink); box-shadow: 0 0 0 8px rgba(242, 184, 75, .35); }
.route-map__notice { position: absolute; inset: 0; display: grid; place-content: center; padding: 16px; text-align: center; background: var(--color-ink); color: var(--color-muted); font: 400 clamp(.85rem, 1.5vw, 1.3rem)/1.35 var(--font-display); }