/* =============================================================
   Single blue strip — home, article detail, and the list page.
   Desktop (Figma 107:370): 63px band.
   Mobile (Figma 107:1259): scaled band under the header.
   The list page is the only strip that scrolls right to left.
   ============================================================= */

.bbi-promo-stripe {
  display: flex;
  align-items: center;
  width: 100%;
  height: 63px;
  background-color: var(--color-list-stripe-bg, #0600ff);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}

.bbi-promo-stripe--mobile {
  display: none;
}

.bbi-promo-stripe:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.bbi-promo-stripe__track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  flex: 0 0 auto;
  height: 100%;
  padding-inline-start: 10px;
}

.bbi-promo-stripe__set {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-inline-end: 18px;
  flex-shrink: 0;
}

.bbi-promo-stripe__unit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 33px;
  flex-shrink: 0;
}

.bbi-promo-stripe__svg {
  height: 33px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.bbi-promo-stripe__lockup {
  height: 100%;
  width: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
  flex-shrink: 0;
}

.bbi-promo-stripe__stack {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  height: 33px;
  flex-shrink: 0;
}

.bbi-promo-stripe__svg--hiphop {
  height: 10px;
  width: auto;
}

.bbi-promo-stripe__svg--list {
  height: 21px;
  width: auto;
}

.bbi-promo-stripe__num,
.bbi-promo-stripe__mid,
.bbi-promo-stripe__genre,
.bbi-promo-stripe__suffix {
  font-family: var(--font-display, "neue-haas-grotesk-display", sans-serif);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #fff;
}

.bbi-promo-stripe__num,
.bbi-promo-stripe__mid {
  font-size: 35px;
}

.bbi-promo-stripe__stack--text {
  justify-content: space-between;
}

.bbi-promo-stripe__genre {
  font-size: 11px;
  letter-spacing: -0.03em;
}

.bbi-promo-stripe__suffix {
  font-size: 21px;
}

/* Home: full-bleed window on the hero. The bar sits in it; it does not travel. */
.bbi-promo-stripe-reveal--on-hero {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  height: 63px;
  margin-left: -50vw;
  overflow: hidden;
  pointer-events: none;
}

.bbi-promo-stripe--on-hero {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* List page: same flat band, in document flow, scrolling right to left. */
.bbi-promo-stripe-reveal--list {
  position: relative;
  width: 100%;
  height: 63px;
  overflow: hidden;
  background-color: var(--color-list-stripe-bg, #0600ff);
}

.bbi-promo-stripe--list {
  height: 100%;
  cursor: default;
}

.bbi-promo-stripe--list .bbi-promo-stripe__track {
  padding-inline-start: 0;
  /* JS replaces this with a modulo loop. The keyframes are the no-JS fallback,
     and they restart with a visible snap, so the script turns them off. */
  animation: bbi-promo-stripe-rtl var(--list-marquee-duration, 64s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes bbi-promo-stripe-rtl {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Article desktop/tablet: pin the strip. Mobile uses the lead strip instead. */
.bbi-promo-stripe-reveal--desktop {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) - 1);
  height: 63px;
  overflow: hidden;
}

/* Home desktop/tablet: the strip sits on the hero until that edge reaches the viewport, then it pins. The header scrolls away. */
.bbi-promo-stripe-reveal--on-hero.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  z-index: calc(var(--z-sticky) - 1);
}

/* Slides down from the header, but fades while it moves so the edge stays soft. */
body.home.has-home-scroll-hero .bbi-promo-stripe--on-hero,
body.home.has-home-scroll-hero .bbi-promo-stripe--mobile {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.95s cubic-bezier(0.33, 0.86, 0.28, 1),
    opacity 0.7s cubic-bezier(0.33, 0.86, 0.28, 1);
}

html.bbi-home-hero-pending body.home.has-home-scroll-hero .bbi-promo-stripe--on-hero,
html.bbi-home-hero-pending body.home.has-home-scroll-hero .bbi-promo-stripe--mobile {
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
}

/* Article mobile: blue strip only, then the article. */
.bbi-article-mobile-lead {
  display: none;
}

/*
 * overflow-x: hidden on html/body makes the other axis a scroll container and
 * stops position: sticky. clip still cuts sideways overflow on home and articles.
 */
html:has(body.home),
html:has(body.single-post),
body.home,
body.single-post {
  overflow-x: clip;
}

@media (max-width: 767px) {
  .bbi-promo-stripe-reveal--desktop,
  .bbi-promo-stripe--desktop {
    display: none;
  }

  .bbi-promo-stripe-reveal--on-hero,
  .bbi-promo-stripe-reveal--list {
    height: var(--list-stripe-height, calc(100vw * 175 / 1728));
  }

  .bbi-promo-stripe--on-hero,
  .bbi-promo-stripe--list {
    height: 100%;
  }

  .bbi-promo-stripe-reveal--mobile {
    display: block;
    height: var(--list-stripe-height, calc(100vw * 175 / 1728));
    margin-top: 0;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: calc(var(--z-sticky) - 1);
    /* No fill here. The sliding bar carries the blue, so the background
       does not sit in place while only the vectors drop in. */
    background-color: transparent;
  }

  /* Article: the lead is only as tall as the strip, so stick the lead (its parent is the page). */
  .bbi-article-mobile-lead {
    position: sticky;
    top: 0;
    z-index: calc(var(--z-sticky) - 1);
    background-color: var(--color-list-stripe-bg, #0600ff);
  }

  .bbi-promo-stripe--mobile {
    display: flex;
    height: 100%;
    margin-top: 0;
  }

  .bbi-article-mobile-lead {
    display: block;
  }

  /* Article detail has no language ticker, so the strip sits flush under the header. */
  .bbi-article-mobile-lead .bbi-promo-stripe-reveal--mobile {
    margin-top: 0;
  }

  /* Match the list page stripe proportions on mobile. */
  .bbi-promo-stripe__set {
    gap: var(--list-stripe-unit-gap, calc(100vw * 49.41 / 1728));
    padding-inline-end: var(--list-stripe-unit-gap, calc(100vw * 49.41 / 1728));
  }

  .bbi-promo-stripe__unit {
    height: var(--list-stripe-unit-height, calc(100vw * 92.32 / 1728));
    gap: calc(var(--list-stripe-unit-height, calc(100vw * 92.32 / 1728)) * 22 / 92.32);
  }

  .bbi-promo-stripe__svg {
    height: 100%;
  }

  .bbi-promo-stripe__stack {
    height: 100%;
  }

  .bbi-promo-stripe__svg--hiphop {
    height: 31.4%;
  }

  .bbi-promo-stripe__svg--list {
    height: 63.8%;
  }

  .bbi-promo-stripe__num,
  .bbi-promo-stripe__mid {
    font-size: calc(var(--list-stripe-unit-height, calc(100vw * 92.32 / 1728)) * 1.05);
  }

  .bbi-promo-stripe__genre {
    font-size: calc(var(--list-stripe-unit-height, calc(100vw * 92.32 / 1728)) * 0.34);
  }

  .bbi-promo-stripe__suffix {
    font-size: calc(var(--list-stripe-unit-height, calc(100vw * 92.32 / 1728)) * 0.64);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home.has-home-scroll-hero .bbi-promo-stripe--on-hero,
  body.home.has-home-scroll-hero .bbi-promo-stripe--mobile,
  html.bbi-home-hero-pending body.home.has-home-scroll-hero .bbi-promo-stripe--on-hero,
  html.bbi-home-hero-pending body.home.has-home-scroll-hero .bbi-promo-stripe--mobile {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .bbi-promo-stripe--list .bbi-promo-stripe__track {
    animation: none;
  }
}