/**
 * Shuttle Tracker Component Styles
 *
 * Straightened route-map visualization.
 * Thick white track spine with stop icons centered on it,
 * large directional arrows between stops (the shuttleRouteArrowIcon SVG).
 *
 * ─── 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.
 *
 * Colors
 *   --shuttle-text                  Main paragraph text color
 *   --shuttle-title                 Title color
 *   --shuttle-title-icon-color      Title (bus) icon color
 *   --shuttle-blurb-text            Header explanatory blurb text color
 *   --shuttle-count-text            Legacy fallback for header blurb text color
 *   --shuttle-meta-text             Stop metadata sentence text color
 *   --shuttle-stop-name             Stop name color
 *   --shuttle-stop-time             Metadata time color
 *   --shuttle-no-service            "No service" text color
 *   --shuttle-loop-return-text      Loop return label color
 *   --shuttle-empty-text            Empty state text color
 *   --shuttle-footer-text           Footer text color
 *   --shuttle-divider               Footer divider color
 *   --shuttle-arriving              "Arriving" state color (live tag, active card border)
 *   --shuttle-delayed               "Delayed" state color
 *   --shuttle-error                 Error state color
 *   --shuttle-track-color           Between-card arrow color
 *   --shuttle-stop-bg               Stop card background (default)
 *   --shuttle-stop-active-bg        Stop card background (next-stop highlight)
 *   --shuttle-stop-icon-border      Stop icon border color
 *   --shuttle-icon-item-bg          Multi-icon stack circle background (transparent by default; set to a solid color to add a "halo" between overlapping icons)
 *   --shuttle-button-bg             Footer button background
 *   --shuttle-button-bg-hover       Footer button background (hover)
 *   --shuttle-button-border         Footer button border
 *   --shuttle-button-border-hover   Footer button border (hover)
 *   --shuttle-button-text           Footer button text
 *   --shuttle-skeleton-bg           Loading skeleton background
 *   --shuttle-stub-bg               Stub badge background
 *   --shuttle-stub-border           Stub badge border
 *   --shuttle-stub-text             Stub badge text
 *
 * Sizes
 *   --shuttle-gap                   Gap between top-level sections
 *   --shuttle-title-size            Title font size
 *   --shuttle-title-icon-size       Title icon dimensions
 *   --shuttle-blurb-size            Header explanatory blurb font size
 *   --shuttle-count-size            Legacy fallback for header blurb font size
 *   --shuttle-live-tag-size         Live tag font size
 *   --shuttle-live-dot-size         Live dot dimensions
 *   --shuttle-stop-icon-size        Stop icon dimensions (desktop)
 *   --shuttle-stop-icon-size-mobile Stop icon dimensions (mobile, ≤480px)
 *   --shuttle-stop-multi-icon-size  Multi (stacked) icon dimensions
 *   --shuttle-arrow-height          Between-card arrow height
 *   --shuttle-arrow-width           Between-card arrow width
 *   --shuttle-stop-name-size        Stop name font size
 *   --shuttle-metadata-size         Stop metadata font size
 *   --shuttle-no-service-size       "No service" label font size
 *   --shuttle-loop-return-size      Loop return label font size
 *   --shuttle-empty-size            Empty state font size
 *   --shuttle-footer-size           Footer text/button font size
 */

[data-ewp-component="shuttle-tracker"] {
  display: flex;
  flex-direction: column;
  gap: var(--shuttle-gap, 1rem);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: inherit;
  color: var(--shuttle-text, var(--paragraphMediumColor));

  --shuttle-title-size: var(--h2-font-size, inherit);

  /* ── Header ──────────────────────────────────────────────────────── */

  .ewp-shuttle__header {
    padding-bottom: 0.5rem;
  }

  .ewp-shuttle__title {
    margin: 0;
    color: var(--shuttle-title, var(--headingMediumColor));
    font-size: calc((var(--heading-2-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .ewp-shuttle__title-icon {
    width: var(--shuttle-title-icon-size, 2.5rem);
    height: var(--shuttle-title-icon-size, 2.5rem);
    opacity: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shuttle-title-icon-color, var(--headingMediumColor, black));
  }

  .ewp-shuttle__title-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .ewp-shuttle__blurb {
    margin-top: 0.25rem;
    font-size: var(--shuttle-blurb-size, var(--shuttle-count-size, 0.85rem));
    line-height: 1.4;
    color: var(
      --shuttle-blurb-text,
      var(--shuttle-count-text, var(--paragraphSmallColor))
    );
  }

  .ewp-shuttle__live-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--shuttle-live-tag-size, 0.7rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--shuttle-arriving, var(--green));
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 0.15rem;
  }

  .ewp-shuttle__live-dot {
    width: var(--shuttle-live-dot-size, 0.55rem);
    height: var(--shuttle-live-dot-size, 0.55rem);
    background: var(--shuttle-arriving, var(--green));
    border-radius: 50%;
    flex-shrink: 0;
    animation: ewp-shuttle-live-pulse 2s ease-in-out infinite;
  }

  /* ── Route container (stack of stop cards) ───────────────────────── */

  .ewp-shuttle__route {
    --stop-icon-size: var(--shuttle-stop-icon-size, 2.3rem);
    --stop-multi-icon-size: var(--shuttle-stop-multi-icon-size, var(--stop-icon-size));
    --arrow-height: var(--shuttle-arrow-height, 1.4rem);

    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* ── Stop card ───────────────────────────────────────────────────── */
  /* Icon stacks above name+metadata at all sizes. */

  .ewp-shuttle__stop {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background: var(
      --shuttle-stop-bg,
      var(--shape-block-background-color, rgba(0, 0, 0, 0.04))
    );
    border-radius: 8px;
  }

  .ewp-shuttle__stop--active {
    background: var(--shuttle-stop-active-bg, rgba(76, 175, 80, 0.12));
    box-shadow: inset 0 0 0 1.5px var(--shuttle-arriving, rgba(76, 175, 80, 0.55));
  }

  .ewp-shuttle__stop-icon-col {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
  }

  /* ── Single stop icon ────────────────────────────────────────────── */

  .ewp-shuttle__icon {
    box-sizing: border-box;
    width: var(--stop-icon-size);
    height: var(--stop-icon-size);
    border: var(--shuttle-stop-icon-border, var(--headingMediumColor));
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ewp-shuttle__icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ── Multi-icon group (overlapping, like stacked avatars) ────────── */

  .ewp-shuttle__icon-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }

  .ewp-shuttle__icon-item {
    box-sizing: border-box;
    width: var(--stop-multi-icon-size);
    height: var(--stop-multi-icon-size);
    padding: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--shuttle-icon-item-bg, transparent);
  }

  .ewp-shuttle__icon-item + .ewp-shuttle__icon-item {
    margin-left: -0.45rem;
  }

  .ewp-shuttle__icon-item svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ── Info column (name + metadata) ─────────────────────────────────── */

  .ewp-shuttle__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    min-width: 0;
  }

  .ewp-shuttle__name-row {
    line-height: 1.3;
    min-width: 0;
  }

  .ewp-shuttle__stop-name {
    font-size: var(--shuttle-stop-name-size, 1.4rem);
    font-weight: 600;
    color: var(
      --shuttle-stop-name,
      var(--headingMediumColor, var(--paragraphMediumColor))
    );
  }

  .ewp-shuttle__badge {
    width: 100%;
    flex-shrink: 0;
  }

  .ewp-shuttle__metadata {
    font-size: var(--shuttle-metadata-size, 1rem);
    line-height: 1.35;
    color: var(--shuttle-meta-text, var(--paragraphSmallColor));
  }

  .ewp-shuttle__metadata-time {
    font-weight: 600;
    color: var(
      --shuttle-stop-time,
      var(--headingMediumColor, var(--paragraphMediumColor))
    );
  }

  .ewp-shuttle__metadata-time.ewp-shuttle__prediction--arriving {
    color: var(--shuttle-arriving, var(--green));
    animation: ewp-shuttle-pulse 1.5s ease-in-out infinite;
  }

  .ewp-shuttle__metadata-time.ewp-shuttle__prediction--delayed {
    color: var(--shuttle-delayed, var(--yellow));
  }

  .ewp-shuttle__no-service {
    font-size: var(--shuttle-no-service-size, 1rem);
    color: var(--shuttle-no-service, var(--paragraphSmallColor));
    font-style: italic;
  }

  /* ── Connector between cards (downward arrow in icon column) ─────── */
  /* Aligned with the icon column on the left so the cards read as
     stops on a route, not a generic stack. */

  .ewp-shuttle__arrow {
    display: flex;
    flex-shrink: 0;
    margin: 0.25rem 0;
    padding-left: 1rem; /* matches the card's left padding */
    color: var(--shuttle-track-color, currentColor);
    opacity: 0.55;
  }

  .ewp-shuttle__arrow-inner {
    width: var(--stop-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ewp-shuttle__arrow-inner svg {
    width: var(--shuttle-arrow-width, 0.85rem);
    height: var(--arrow-height);
    display: block;
  }

  /* ── Loop return (sits below the last card as plain text) ────────── */

  .ewp-shuttle__loop-return {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0.6rem;
    padding-left: 1rem;
    color: var(--shuttle-loop-return-text, var(--paragraphSmallColor));
    opacity: 0.9;
  }

  .ewp-shuttle__loop-return-text {
    font-size: var(--shuttle-loop-return-size, 0.75rem);
    font-style: italic;
  }

  /* ── Prediction modifiers (used on .ewp-shuttle__metadata-time) ─────── */

  .ewp-shuttle__prediction-delayed-icon {
    font-size: 0.75rem;
    margin-left: 0.15rem;
  }

  /* ── Empty state ─────────────────────────────────────────────────── */

  .ewp-shuttle__empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--shuttle-empty-text, var(--paragraphSmallColor));
    font-size: var(--shuttle-empty-size, 0.9rem);
  }

  /* ── Footer ──────────────────────────────────────────────────────── */

  .ewp-shuttle__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid
      var(--shuttle-divider, var(--section-divider-stroke-color));
    font-size: var(--shuttle-footer-size, 0.75rem);
    color: var(--shuttle-footer-text, var(--paragraphSmallColor));
  }

  .ewp-shuttle__button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--shuttle-button-bg, transparent);
    border: 1px solid
      var(--shuttle-button-border, var(--section-divider-stroke-color));
    border-radius: 4px;
    color: var(--shuttle-button-text, var(--paragraphMediumColor));
    font-size: var(--shuttle-footer-size, 0.75rem);
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease;
  }

  .ewp-shuttle__button:hover {
    background: var(--shuttle-button-bg-hover, hsla(var(--accent-hsl), 0.08));
    border-color: var(
      --shuttle-button-border-hover,
      hsla(var(--accent-hsl), 0.5)
    );
  }

  /* ── Loading state ───────────────────────────────────────────────── */

  &.ewp-shuttle--loading {
    .ewp-shuttle__routes {
      opacity: 0.5;
    }
  }

  .ewp-shuttle__skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .ewp-shuttle__skeleton-card {
    height: 4.5rem;
    background: var(
      --shuttle-skeleton-bg,
      var(--shape-block-background-color, var(--siteBackgroundColor))
    );
    border-radius: 4px;
    animation: ewp-shuttle-skeleton 1.5s ease-in-out infinite;
  }

  /* ── Error state ─────────────────────────────────────────────────── */

  &.ewp-shuttle--error {
    .ewp-shuttle__error {
      text-align: center;
      padding: 2rem 1rem;
      color: var(--shuttle-error, var(--red));
      font-size: 0.9rem;
    }
  }

  /* ── Stub indicator (dev) ────────────────────────────────────────── */

  .ewp-shuttle__stub-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--shuttle-stub-bg, rgba(243, 199, 62, 0.2));
    border: 1px solid var(--shuttle-stub-border, rgba(243, 199, 62, 0.5));
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--shuttle-stub-text, var(--yellow));
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ── Responsive ──────────────────────────────────────────────────── */

  @media (max-width: 480px) {
    padding: 0;

    .ewp-shuttle__route {
      --stop-icon-size: var(--shuttle-stop-icon-size-mobile, 1.9rem);
    }

    .ewp-shuttle__stop {
      gap: 0.45rem;
      padding: 0.75rem 0.85rem;
    }

    .ewp-shuttle__arrow {
      padding-left: 0.85rem;
    }

    .ewp-shuttle__loop-return {
      padding-left: 0.85rem;
    }

    .ewp-shuttle__stop-name {
      font-size: 0.98rem;
    }

    .ewp-shuttle__metadata {
      font-size: 0.75rem;
    }

    .ewp-shuttle__footer {
      flex-direction: column;
      gap: 0.75rem;
      align-items: stretch;
      text-align: center;
    }

    .ewp-shuttle__button {
      justify-content: center;
    }
  }

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

  @media (prefers-reduced-motion: reduce) {
    animation: none !important;

    .ewp-shuttle__metadata-time.ewp-shuttle__prediction--arriving,
    .ewp-shuttle__live-dot,
    .ewp-shuttle__skeleton-card {
      animation: none !important;
    }
  }
}

/* ── Animations ──────────────────────────────────────────────────────── */

@keyframes ewp-shuttle-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes ewp-shuttle-live-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@keyframes ewp-shuttle-skeleton {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.3;
  }
}