/*
 * RUSH look for the public module. Loaded after assets/public/homepage.css, on the homepage only.
 *
 * Every colour is a theme role token (--t-*), so the module follows the site's light and dark themes with no rule of its
 * own. "Ink acts, gold marks": controls are ink or ghost pills, gold appears only as a mark.
 *
 * The <head> script sets data-rush-bo-slot only when this browser has measured the module before. Padding, not margin: a
 * margin would collapse with the marquee's top margin and the page would jump by that much when the slot takes over.
 */

html[data-rush-bo-slot] .rush-shot {
  padding-block-end: var(--rush-bo-slot);
}

.rush-bo-slot {
  position: relative;
  height: 0;
  overflow: hidden;
  background: var(--t-bg);
}

.rush-bo-slot.is-empty {
  visibility: hidden;
}

.rush-bo-slot.is-moving {
  transition: height 360ms var(--ease-out-cine, ease-out);
}

.npc-bo-home {
  --npc-bo-ink: var(--t-fg);
  --npc-bo-paper: transparent;
  --npc-bo-muted: var(--t-fg-2);
  --npc-bo-control-hover: var(--t-elev-2);
  --npc-bo-focus: var(--t-focus);
  /* The hero bar's ladder: an ink band on light, a gold band on dark. */
  --npc-bo-ticker-bg: var(--t-fg);
  --npc-bo-ticker-ink: var(--t-bg);
  --npc-bo-ticker-focus: var(--t-gold);
  --rush-bo-mark: var(--t-gold);

  margin: 0;
  padding-block: clamp(20px, 2.4vw, 32px) clamp(4px, 0.8vw, 12px);
  color: var(--t-fg);
  font-family: "Work Sans", "Work Sans Fallback", "Helvetica Neue", sans-serif;
}

.npc-bo-home[hidden] {
  display: none;
}

/* Where PHP prints it, under the footer. Only placement in the page reveals it, so a failed script shows nothing. */
body > .npc-bo-home {
  display: none !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .npc-bo-home {
    --npc-bo-ticker-bg: var(--t-gold);
    --npc-bo-ticker-ink: var(--t-on-gold);
    --npc-bo-ticker-focus: var(--t-on-gold);
    --rush-bo-mark: var(--t-on-gold);
  }
}

:root[data-theme="dark"] .npc-bo-home {
  --npc-bo-ticker-bg: var(--t-gold);
  --npc-bo-ticker-ink: var(--t-on-gold);
  --npc-bo-ticker-focus: var(--t-on-gold);
  --rush-bo-mark: var(--t-on-gold);
}

/* Carousel: on the site's container, so its edges line up with the hero copy and the sections below. */

.npc-bo-home .npc-bo-banner {
  width: min(100% - 32px, var(--rush-max-width, 1220px));
  margin: 0 auto clamp(14px, 1.6vw, 20px);
}

.npc-bo-home .npc-bo-banner__link {
  border-radius: var(--rush-radius, 8px);
  overflow: hidden;
}

.npc-bo-home .npc-bo-banner__link:focus-visible {
  outline-offset: 2px;
}

/* Ratios match the required artwork, so a slide takes its height before the image paints. */
.npc-bo-home .npc-bo-banner__image {
  aspect-ratio: 2400 / 800;
  object-fit: cover;
}

.npc-bo-home .npc-bo-banner__controls {
  gap: 8px;
  margin-top: 12px;
}

.npc-bo-home .npc-bo-banner__counter {
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--t-fg-2);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.npc-bo-home .npc-bo-banner__counter::before {
  content: "";
  width: 8px;
  height: 14px;
  background: var(--t-gold);
  transform: skewX(-30deg);
}

.npc-bo-home .npc-bo-btn {
  padding: 0 18px;
  border: 1px solid var(--t-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--t-fg);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 240ms var(--ease-out-cine, ease-out);
}

.npc-bo-home .npc-bo-btn:hover {
  border-color: var(--t-gold);
  background: transparent;
}

/* Ticker: a full-width band, quieter than the site's marquee directly below it. */

.npc-bo-home .npc-bo-ticker {
  gap: 12px;
  padding: 6px max(16px, calc((100% - var(--rush-max-width, 1220px)) / 2));
  border-radius: 0;
}

.npc-bo-home .npc-bo-ticker .npc-bo-btn {
  order: 2;
  min-height: 44px;
  padding: 0 14px;
  border-color: var(--npc-bo-ticker-ink);
  font-size: 11px;
}

.npc-bo-home .npc-bo-ticker .npc-bo-btn:hover {
  background: transparent;
  border-color: var(--npc-bo-ticker-focus);
}

.npc-bo-home .npc-bo-ticker__item {
  display: inline-flex;
  align-items: center;
  padding-right: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.npc-bo-home .npc-bo-ticker__item::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.9em;
  margin: 0 1.4em;
  background: var(--rush-bo-mark);
  transform: skewX(-30deg);
}

@media (max-width: 767px) {
  .npc-bo-home .npc-bo-banner {
    width: min(100% - 24px, var(--rush-max-width, 1220px));
  }

  .npc-bo-home .npc-bo-banner__image {
    aspect-ratio: 800 / 360;
  }

  .npc-bo-home .npc-bo-banner__counter {
    min-width: 0;
  }

  .npc-bo-home .npc-bo-btn {
    padding: 0 12px;
    font-size: 11px;
  }

  .npc-bo-home .npc-bo-ticker {
    padding-inline: 12px;
  }

  .npc-bo-home .npc-bo-ticker__item {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rush-bo-slot.is-moving {
    transition: none;
  }

  .npc-bo-home .npc-bo-ticker__item {
    padding-right: 0;
    white-space: normal;
  }

  .npc-bo-home .npc-bo-ticker__item::after {
    margin: 0 0.8em;
  }
}