/* webinar-band block — slim scrolling cadence ribbon + static register link.
 * @layer web so it sorts above the SDS layers. The ribbon is decoration: it is
 * aria-hidden, pauses on hover, and disappears entirely under
 * prefers-reduced-motion in favour of the static phrase. */
@layer web {
  .wband {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
  }

  .wband__ribbon {
    width: 100%;
    overflow: hidden;
  }
  .wband__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: wband-scroll 45s linear infinite;
  }
  .wband__ribbon:hover .wband__track { animation-play-state: paused; }
  .wband__half {
    display: flex;
    align-items: center;
    flex: none;
  }
  .wband__item {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-extrabold);
    font-size: clamp(1.05rem, 2.1vw, 1.5rem);
    letter-spacing: var(--sph-tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sph-text);
    padding-inline: 1.4rem;
  }
  /* The separator square — the Data·Value·Impact mark between repeats. */
  .wband__sep {
    width: 10px;
    height: 10px;
    flex: none;
    background: var(--sph-primary);
  }
  @keyframes wband-scroll {
    to { transform: translateX(-50%); }
  }

  /* Screen-reader / reduced-motion copy of the phrase. */
  .wband__static {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The CTA is an SDS accent button (was a quiet underlined link) — it is the
     band's call to action, so it looks like one. */
  .wband__cta { margin: 0; }

  @media (prefers-reduced-motion: reduce) {
    .wband__ribbon { display: none; }
    .wband__static {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
      font-family: var(--sph-font-display);
      font-weight: var(--sph-weight-extrabold);
      font-size: clamp(1.05rem, 2.1vw, 1.5rem);
      letter-spacing: var(--sph-tracking-wide);
      text-transform: uppercase;
      color: var(--sph-text);
      text-align: center;
      text-wrap: balance;
    }
  }
}