/**
 * Itinerary List Component Styles
 *
 * Composable card-stack timeline. Each stop is a slim card with an optional
 * flush thumbnail, compact title, text-only duration/price, and a short blurb.
 * Downward arrows connect stops. Squarespace theme-aware via section-color
 * fallbacks.
 *
 * ─── Customization ────────────────────────────────────────────────────
 * The component exposes CSS custom properties so consumers can theme it
 * without overriding selectors. Each property is unset by default and falls
 * back to a Squarespace section color theme variable, so the component
 * automatically respects the active section theme.
 *
 * Tokens are scoped to itinerary-list (not shared with shuttle-tracker) so the
 * two components can be themed independently, while sharing the same defaults
 * for visual coherence.
 *
 * Colors
 *   --itinerary-stop-bg              Stop card background
 *   --itinerary-stop-bg-hover        Stop card background (link card hover)
 *   --itinerary-stop-border          Stop card border
 *   --itinerary-stop-border-hover    Stop card border (link card hover only)
 *   --itinerary-stop-name            Stop name color
 *   --itinerary-meta-text            Stop metadata color
 *   --itinerary-cost-text            Cost emphasis color (defaults to meta text)
 *   --itinerary-arrow-color          Between-card arrow color
 *
 * Sizes
 *   --itinerary-stop-name-size       Stop name font size
 *   --itinerary-meta-size            Stop metadata font size
 *   --itinerary-content-padding      Stop text padding
 *   --itinerary-thumbnail-size       Thumbnail width and height
 */

[data-ewp-component="itinerary-list"] {
  display: block;
  padding: 0;
  background: transparent;
  color: var(--itinerary-meta-text, var(--paragraphMediumColor));
}

[data-ewp-component="itinerary-list"] .ewp-itinerary-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* ── Stops container ─────────────────────────────────────────────────── */

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stops {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* ── Stop card ───────────────────────────────────────────────────────── */

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop {
  display: grid;
  grid-template-columns: var(--itinerary-thumbnail-size, 4.25rem) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: var(--itinerary-card-min-height, 102px);
  padding: 0;
  background: var(
    --itinerary-stop-bg,
    var(--shape-block-background-color, rgba(255, 255, 255, 0.9))
  );
  border: 1px solid var(--itinerary-stop-border, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Link variant: the whole card is the affordance. */
[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link {
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

/* Kill underline on the link card and any descendants in every state.
   Squarespace section styles aggressively underline anchors and their text
   (often with high specificity or !important), so opt out emphatically with
   !important across every interactive pseudo-class. */
[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link,
[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link:link,
[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link:visited,
[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link:hover,
[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link:active,
[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link:focus,
[data-ewp-component="itinerary-list"]
  .ewp-itinerary-list__stop--link:focus-visible,
[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link *,
[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link:hover *,
[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link:focus * {
  text-decoration: none !important;
}

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link:hover,
[data-ewp-component="itinerary-list"]
  .ewp-itinerary-list__stop--link:focus-visible {
  background: var(
    --itinerary-stop-bg-hover,
    var(--shape-block-background-color, rgba(255, 255, 255, 1))
  );
  border-color: var(--itinerary-stop-border-hover, rgba(79, 99, 67, 0.35));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  outline: none;
  transform: translateY(-1px);
}

/* ── Thumbnail ───────────────────────────────────────────────────────── */

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-thumb-wrap {
  align-self: stretch;
  width: var(--itinerary-thumbnail-size, 4.25rem);
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--no-thumb {
  grid-template-columns: minmax(0, 1fr);
}

/* ── Content ─────────────────────────────────────────────────────────── */

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.14rem;
  min-width: 0;
  padding: var(--itinerary-content-padding, 0.72rem 0.76rem);
}

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--itinerary-stop-name-lines, 1);
  overflow: hidden;
  margin: 0;
  font-size: var(--itinerary-stop-name-size, 0.95rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(
    --itinerary-stop-name,
    var(--headingSmallColor, var(--paragraphMediumColor))
  );
  letter-spacing: 0;
  min-width: 0;
}

/* ── Meta row ────────────────────────────────────────────────────────── */

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-meta {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: 0.35rem;
  row-gap: 0.05rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--itinerary-meta-size, 0.85rem);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--itinerary-meta-text, var(--paragraphSmallColor));
}

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-duration {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-cost {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(
    --itinerary-cost-text,
    var(--itinerary-meta-text, var(--paragraphSmallColor))
  );
}

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-meta-separator {
  flex: 0 0 auto;
  opacity: 0.75;
}

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-blurb {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--itinerary-blurb-lines, 2);
  overflow: hidden;
  margin: 0;
  font-size: var(--itinerary-blurb-size, 0.82rem);
  line-height: 1.3;
  color: var(--itinerary-blurb-text, var(--paragraphSmallColor));
}

/* ── Between-card arrow connector ────────────────────────────────────── */
/* Give the arrow its own thumbnail-width lane so it centers with the image. */

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--itinerary-thumbnail-size, 4.25rem);
  margin: 0.25rem 0;
  color: var(--itinerary-arrow-color, currentColor);
  opacity: 0.55;
  flex-shrink: 0;
}

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__arrow-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-ewp-component="itinerary-list"] .ewp-itinerary-list__arrow-inner svg {
  width: var(--itinerary-arrow-width, 0.7rem);
  height: var(--itinerary-arrow-height, 1rem);
  display: block;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  [data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop {
    --itinerary-thumbnail-size: 3.9rem;
  }

  [data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-content {
    padding: var(--itinerary-content-padding, 0.62rem 0.65rem);
  }

  [data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-name {
    font-size: 0.92rem;
  }

  [data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-meta {
    font-size: 0.8rem;
  }

  [data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop-blurb {
    font-size: 0.78rem;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link {
    transition: none;
  }

  [data-ewp-component="itinerary-list"] .ewp-itinerary-list__stop--link:hover,
  [data-ewp-component="itinerary-list"]
    .ewp-itinerary-list__stop--link:focus-visible {
    transform: none;
  }
}