/* KEK route maps (route-map.js) */

/* ---------- map boxes ---------- */
.kek-map{ position:relative; background:#D2E2E8; min-height:420px; border-radius:18px; overflow:hidden; }
.route-map-block .map.kek-map{ min-height:460px; }
.rm-canvas.kek-map{ min-height:min(640px,72vh); border-radius:22px; }
.kek-map .maplibregl-canvas{ outline:none; }
.kek-map .maplibregl-ctrl-group{ border-radius:12px; box-shadow:0 8px 24px -12px rgba(15,27,51,.35); }
.kek-map .maplibregl-ctrl-attrib{ font-size:10px; background:rgba(255,255,255,.7); }
.kek-map .maplibregl-cooperative-gesture-screen{ font-family:var(--sans); font-size:15px; background:rgba(15,27,51,.55); }

/* ---------- markers ---------- */
.km-label{
  font-family:var(--sans); font-size:12px; font-weight:700; color:var(--navy-darker,#0F1B33);
  background:rgba(255,255,255,.94); border-radius:999px; padding:4px 10px; white-space:nowrap;
  box-shadow:0 6px 16px -10px rgba(15,27,51,.45); letter-spacing:.01em;
  transition:opacity .4s ease, transform .4s ease, background .4s ease;
}
.km-stop{ display:flex; align-items:center; gap:7px; pointer-events:none; }
.km-dot{
  width:12px; height:12px; border-radius:50%; background:#fff; flex:0 0 auto;
  border:2.5px solid var(--navy-deep,#1A2C54); box-shadow:0 0 0 3px rgba(255,255,255,.7);
  transition:background .4s ease, transform .4s ease, border-color .4s ease;
}
.km-stop.is-ahead .km-dot{ border-color:rgba(26,44,84,.4); }
.km-stop.is-ahead .km-label{ opacity:.6; }
.km-stop.is-here .km-dot{ background:var(--gold,#C9A663); border-color:var(--navy-deep,#1A2C54); transform:scale(1.25); }
.km-stop.is-here .km-label{ background:var(--navy-deep,#1A2C54); color:#fff; }

.km-home{ display:flex; align-items:center; gap:8px; pointer-events:none; }
.km-home-ic{
  width:30px; height:30px; border-radius:50%; background:#fff; color:var(--gold,#C9A663);
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--gold,#C9A663), 0 8px 18px -10px rgba(15,27,51,.6);
}
.km-home-ic svg{ width:16px; height:16px; }
.km-home .km-label{ font-family:var(--display); font-size:13px; }

.km-boat{
  width:38px; height:38px; border-radius:50%; background:#fff; color:var(--navy-deep,#1A2C54);
  display:grid; place-items:center; box-shadow:0 0 0 2px var(--navy-deep,#1A2C54), 0 12px 24px -10px rgba(15,27,51,.6);
}
.km-boat svg{ width:19px; height:19px; animation:km-bob 3.2s ease-in-out infinite; }
@keyframes km-bob{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-1.5px) rotate(3deg); } }
@media (prefers-reduced-motion:reduce){ .km-boat svg{ animation:none; } }

/* ---------- routes overview: legend follows the map ---------- */
.rm-list a.is-active{ background:var(--cream,#F6F1E6); }
.rm-list a.is-active .rm-name{ color:var(--navy-darker,#0F1B33); }

/* ---------- day by day: sticky chart beside the days ---------- */
/* overflow:hidden on the section would stop the chart from sticking; clip keeps the rounded corners */
.section:has(.rj){ overflow:clip !important; }
.rj{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(24px,3.4vw,56px); align-items:start; }
.rj-map{ align-self:stretch; position:relative; }
.rj-sticky{
  position:sticky; top:100px; height:calc(100vh - 124px); min-height:460px;
  border-radius:24px; overflow:hidden; background:#D2E2E8;
  box-shadow:0 30px 70px -45px rgba(15,27,51,.55), inset 0 0 0 1px rgba(15,27,51,.06);
}
.rj-canvas{ position:absolute !important; inset:0; width:100%; height:100%; }
.rj-hud{
  position:absolute; left:16px; top:16px; max-width:calc(100% - 90px); z-index:2;
  display:flex; flex-direction:column; gap:2px; pointer-events:none;
  background:rgba(255,255,255,.95); border-radius:14px; padding:10px 16px;
  box-shadow:0 14px 30px -18px rgba(15,27,51,.5);
}
.rj-hud-day{ font-family:var(--sans); font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold,#C9A663); }
.rj-hud-t{ font-family:var(--display); font-size:16px; font-weight:700; color:var(--navy-darker,#0F1B33); line-height:1.25; }

/* the days: one per screen, so the boat has time to sail */
.route-timeline.rj-on{ gap:0 !important; }
.route-timeline.rj-on::before{ display:none; }
.route-timeline.rj-on > li{
  grid-template-columns:1fr !important; gap:14px !important;
  min-height:88vh; padding:0 0 9vh; align-content:start;
}
.route-timeline.rj-on > li:last-child{ min-height:72vh; padding-bottom:0; }
.route-timeline.rj-on .day-num{
  position:sticky !important; top:100px; z-index:2;
  width:auto !important; height:auto !important; border-radius:999px !important;
  flex-direction:row; align-items:baseline; gap:8px; padding:8px 16px !important; justify-self:start;
  box-shadow:0 10px 24px -14px rgba(15,27,51,.6);
}
.route-timeline.rj-on .day-num .dn-n{ font-size:20px; }
.route-timeline.rj-on .day-card{
  position:sticky; top:156px; grid-template-columns:1fr !important;
  opacity:.42; transform:scale(.985); transform-origin:top center;
  transition:opacity .5s ease, transform .5s ease, box-shadow .5s ease;
}
.route-timeline.rj-on .day-card::before{ display:none; }
.route-timeline.rj-on > li.is-active .day-card{ opacity:1; transform:none; box-shadow:0 30px 60px -40px rgba(15,27,51,.5); }
.route-timeline.rj-on > li.is-past .day-card{ opacity:.3; }
.route-timeline.rj-on > li:hover .day-card{ transform:none; }
.route-timeline.rj-on .day-photo{ min-height:210px !important; aspect-ratio:16/8; }

@media (max-width:900px){
  .rj{ display:flex; flex-direction:column; gap:18px; }
  .rj-map{ order:-1; position:sticky; top:64px; z-index:3; height:40vh; min-height:260px; align-self:stretch; }
  .rj-sticky{ position:relative; top:0; height:100%; min-height:0; border-radius:18px; }
  .rj-hud{ left:10px; top:10px; padding:7px 12px; border-radius:12px; }
  .rj-hud-t{ font-size:14px; }
  .route-timeline.rj-on > li{ min-height:70vh; padding-bottom:6vh; }
  .route-timeline.rj-on .day-num{ position:relative !important; top:auto; }
  .route-timeline.rj-on .day-card{ position:relative; top:auto; }
  .route-timeline.rj-on .day-photo{ min-height:170px !important; }
}
@media (prefers-reduced-motion:reduce){
  .route-timeline.rj-on .day-card{ transition:none; transform:none; }
}