/* Sailing-page itinerary map (views/single2.mustache, #itinerary;
   js/components/itinerary-map.js). A full-width route map (the header map's
   compositor, land on the page background, no water) that sticks to the top of the viewport while the timeline and
   the port photos scroll beneath it, releasing where the section ends.

   The dock is the sticky element: it carries the page background, so rows
   scrolling under the map never show through its rounded corners or the
   strip above it. */

/* position: sticky needs a scrolling ancestor that actually scrolls. The
   body's Tailwind overflow-x-hidden (with html clipping, the body's overflow
   no longer propagates to the viewport) makes <body> a scroll container that
   never scrolls, so nothing on the page could stick. clip prevents the same
   horizontal spill without creating a scroll container (html already does
   this, see css/cruisesheet.css). Browsers without overflow: clip keep
   hidden and simply scroll the map with the page. */
html body.overflow-x-hidden { overflow-x: clip; }

.cs-itin-intro { margin-bottom: 24px; }
/* timeline column sizes to its own content (the rail trims to it) and keeps
   clear air between the times and the photos */
.cs-itin-col { align-self: start; }
@media (min-width: 1024px) { .cs-itin-section > .grid { column-gap: 48px; } }

.cs-itin-dock {
  /* full bleed: out of the page container to both viewport edges, flush
     with the top of the viewport while stuck */
  position: sticky; top: 0; z-index: 30;
  width: 100vw; margin: 0 calc(50% - 50vw) 22px; padding: 0 0 12px;
  background: #f9fafb;   /* the page's bg-gray-50 */
}
body.lux .cs-itin-dock { background: var(--lx-ink, #0b1220); }

.cs-itin-map {
  position: relative; height: clamp(220px, 36vh, 380px);
  overflow: hidden; isolation: isolate;
}
/* Map credits folded into an (i) toggle in the bottom-right corner. */
.cs-itin-map-credit {
  position: absolute; z-index: 4; right: 10px; bottom: 10px;
  display: flex; flex-direction: row-reverse; align-items: center; gap: 6px;
  color: #fff; font: 600 11px/1.2 Inter, system-ui, sans-serif; white-space: nowrap;
}
.cs-itin-map-credit summary {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 999px; background: rgba(10, 19, 34, .55); cursor: pointer; list-style: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cs-itin-map-credit summary::-webkit-details-marker { display: none; }
.cs-itin-map-credit summary:focus-visible { outline: 2px solid #FED470; outline-offset: 2px; }
.cs-itin-map-credit summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cs-itin-map-credit span { padding: 5px 10px; border-radius: 999px; background: rgba(10, 19, 34, .7); }
.cs-itin-map-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* no route to draw: the section reads as before, without an empty band */
.cs-itin-dock.cs-itin-map--off { display: none; }

@media (max-width: 639px) {
  .cs-itin-dock { margin-bottom: 16px; padding-bottom: 10px; }
  .cs-itin-map { height: 210px; }
  .cs-itin-map-credit { right: 8px; bottom: 8px; font-size: 10px; }
}

/* Under the map the timeline is unboxed: rows sit straight on the page,
   and the first row's own padding is pulled back so the first date and
   port line up with the top of the photo rail beside it. */
.cs-itin-col .cs-itin { margin: -12px 0 20px; padding: 0; background: none; border: 0; border-radius: 0; }
.cs-itin-col .cs-itin-row { padding: 0; }
@media (min-width: 768px) {
  .cs-itin-col .cs-itin { margin-top: -16px; }
  .cs-itin-col .cs-itin-date { width: 104px; }
}

/* The day the map is showing (hover, keyboard focus or the scroll position):
   its timeline dot turns gold like the map's highlighted port. */
.cs-itin-row.is-map-active .cs-itin-dot {
  background: #FED470; border-color: #131943; box-shadow: 0 0 0 4px rgba(254, 212, 112, .4);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.cs-itin-row.is-map-active .cs-itin-port,
.cs-itin-row.is-map-active .cs-itin-port .cs-itin-portlink { color: #006279; }
.cs-itin-row.is-map-active.cs-itin-sea .cs-itin-port { color: #475569; }