/* ============================================================================
   CORRIDOR MAP: a route explorer (template-parts/corridor-map.php, assets/js/corridor-map.js), on the
   home page and in the map section of an inner page (inc/inner.php ts_flex_map()), always on a
   dark band.
   ============================================================================ */

/*
   Route list beside the map on desktop (pills above it below 981 px), the selected route's panel
   under it. Lines by mode: ferry solid, rail or road dashed, the Caspian crossing dotted; the
   selected route on top in red. A line is drawn by its mask's line growing (.cm-mline, pathLength
   1). The stop names sit on a soft halo in the sea colour, so land borders under them never cut
   the contrast. Without JavaScript (no .is-live) the whole corridor shows, the ferry in red, and
   every route's panel is listed under the map. */
.cm{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"routes" "map" "legend" "panels";gap:20px}
.cm-routes{grid-area:routes;display:flex;flex-direction:column;gap:8px}
.cm-frame{grid-area:map}
.cm-legend{grid-area:legend}
.cm-panels{grid-area:panels}
.cm:not(.is-live) .cm-routes{display:none}
.cm-route{position:relative;display:flex;align-items:center;min-height:52px;padding:12px 18px;border:1px solid var(--rule-on-dark);border-radius:var(--r-md);background:rgba(255,255,255,.03);color:var(--text-on-dark);font:inherit;font-size:16px;font-weight:700;line-height:1.3;text-align:left;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.cm-route:hover{border-color:rgba(255,255,255,.4);color:var(--white)}
.cm-route[aria-selected="true"]{background:rgba(var(--red-rgb),.16);border-color:var(--red);color:var(--white)}
.cm-route[aria-selected="true"]::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:4px;border-radius:0 3px 3px 0;background:var(--red)}

.cm-frame{position:relative;aspect-ratio:1000/465;overflow:hidden;background:var(--map-sea);border:1px solid var(--rule-on-dark);border-radius:var(--r-lg)}
.cm-svg{display:block;width:100%;height:100%}
.cm-sea{fill:var(--map-sea)}
.cm-land{fill:var(--map-land);stroke:var(--map-border);stroke-width:.7;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#cm-glow stop{stop-color:var(--red)}
.cm-glow{transition:opacity .6s ease}
.cm.has-route .cm-glow{opacity:.6}
.cm-l{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cm-l--land{stroke:rgba(255,255,255,.82);stroke-width:2;stroke-dasharray:6 7}
.cm-l--ferry{stroke:rgba(255,255,255,.9);stroke-width:3.5}
.cm-l--sea{stroke:rgba(255,255,255,.82);stroke-width:3;stroke-dasharray:.1 7}
.cm:not(.is-live) .cm-base .cm-l--ferry{stroke:var(--red);stroke-width:5}
.cm-base{transition:opacity .4s ease}
.cm.has-route .cm-base{opacity:.38}
.cm-ov{display:none}
.cm-ov.is-on{display:inline}
.cm-ov .cm-l{stroke:var(--red)}
.cm-ov .cm-l--ferry{stroke-width:5}
.cm-ov .cm-l--land,.cm-ov .cm-l--sea{stroke-width:3}
.cm-mline{fill:none;stroke:#fff;stroke-width:46;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:0}
.cm.is-live .cm-mline{stroke-dashoffset:1}
.cm.is-live .cm-mline.is-drawn{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.45,0,.2,1)}
.cm.is-live #cm-m-base .cm-mline.is-drawn{transition-duration:2.6s;transition-timing-function:cubic-bezier(.4,0,.3,1)}
.cm.is-live .cm-mline.is-snap{transition:none}
.cm-ship{transition:opacity .4s ease}
.cm-ship-hull{fill:var(--white)}
.cm-ship-deck{fill:var(--white);opacity:.8}
.cm.is-pre .cm-ship{opacity:0}

.cm-marks{position:absolute;inset:0;pointer-events:none}
.cm-mark{position:absolute;z-index:1;width:44px;height:44px;margin:-22px 0 0 -22px;transition:opacity .3s ease;-webkit-tap-highlight-color:transparent}
.cm.is-live .cm-mark{pointer-events:auto;cursor:pointer}
.cm-mark.is-out{visibility:hidden}
.cm-mark.is-dim{opacity:.62}
.cm-dot{position:absolute;left:15px;top:15px;width:14px;height:14px;border:2px solid var(--white);border-radius:50%;background:var(--map-sea);transition:box-shadow .2s ease}
.cm-mark.is-on .cm-dot,.cm:not(.is-live) .cm-mark[data-stop="varna"] .cm-dot,.cm:not(.is-live) .cm-mark[data-stop="batumi"] .cm-dot{left:14px;top:14px;width:16px;height:16px;border-width:3px;background:var(--red)}
.cm-mark.is-active .cm-dot{box-shadow:0 0 0 6px rgba(var(--red-rgb),.38),0 0 0 13px rgba(var(--red-rgb),.16)}
.cm-name{position:absolute;left:50%;transform:translateX(-50%);padding:3px 10px;background:radial-gradient(closest-side,color-mix(in srgb,var(--map-sea) 88%,transparent) 0,color-mix(in srgb,var(--map-sea) 88%,transparent) 62%,transparent 100%);white-space:nowrap;font-family:var(--ts-font-body);font-size:15px;font-weight:700;line-height:1.2;color:var(--white);text-shadow:0 0 1px var(--map-sea),0 0 2px var(--map-sea),0 0 2px var(--map-sea),0 0 3px var(--map-sea),0 0 4px var(--map-sea),0 0 6px var(--map-sea),0 0 10px var(--map-sea)}
.cm-mark--top .cm-name{bottom:calc(50% + 6px)}
.cm-mark--bottom .cm-name{top:calc(50% + 6px)}

.cm-legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;padding:0;list-style:none;font-size:14px;line-height:1.3;color:var(--text-on-dark)}
.cm-legend li{display:flex;align-items:center;gap:10px}
.cm-key{flex:none;width:40px;height:10px;overflow:visible}
.cm-key .cm-l--ferry{stroke:var(--red);stroke-width:4}
.cm-key .cm-l--land,.cm-key .cm-l--sea{stroke:var(--muted-on-dark)}

.cm-panels{display:grid;gap:20px}
.cm-panel[hidden]{display:none}
.cm-panel{padding:24px 26px 26px;background:rgba(255,255,255,.03);border:1px solid var(--rule-on-dark);border-radius:var(--r-lg)}
.cm-panel-title{margin:0;font-family:var(--ts-font-display);font-size:20px;font-weight:800;line-height:1.25;color:var(--white)}
.cm-stops{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 32px;margin:14px 0 0;padding:0;list-style:none}
.cm-stop-name{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--white);font:inherit;font-size:17px;font-weight:700;line-height:1.25;text-align:left}
.cm-stop-name::before{content:"";flex:none;width:12px;height:12px;border:2px solid var(--white);border-radius:50%;background:var(--red)}
button.cm-stop-name{cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-decoration-thickness:1px;text-underline-offset:5px}
button.cm-stop-name:hover{text-decoration-color:var(--white)}
button.cm-stop-name[aria-pressed="true"]{text-decoration-color:var(--red);text-decoration-thickness:2px}
.cm-stop-line{margin:0 0 0 22px;font-size:var(--fs-small);line-height:1.5;color:var(--text-on-dark)}
.cm-stop-line + .cm-stop-line{margin-top:8px}
.cm-enquiry{margin-top:20px}
@media (min-width:981px){
  .cm.is-live{grid-template-columns:minmax(250px,300px) minmax(0,1fr);grid-template-areas:"routes map" "legend map" "panels panels";column-gap:40px;row-gap:22px;align-items:start}
  .cm.is-live .cm-legend{flex-direction:column;align-self:end;gap:12px}
  .cm:not(.is-live) .cm-panels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .cm-routes{flex-direction:row;flex-wrap:wrap}
  .cm-route{min-height:44px;padding:9px 16px;border-radius:var(--pill);font-size:15px}
  .cm-route[aria-selected="true"]::before{display:none}
}
@media (max-width:767px){
  /* the map is small: its markers only show where the stops are; the panel's buttons work them */
  .cm.is-live .cm-mark{pointer-events:none}
  .cm-name{font-size:13px;padding:2px 8px}
  .cm-panel{padding:20px 18px 22px}
  .cm-enquiry{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .cm.is-live .cm-mline.is-drawn,.cm-base,.cm-ship,.cm-mark,.cm-dot,.cm-route{transition:none}
}