/* ==========================================================================
   Bonus banner block
   ========================================================================== */

.bonus-banner {
  position: relative;
  /* contain, not cover: show the source image at its original proportions,
     sized to the text block's own width (this section already sits inside
     .container, same as the page's text content), with no side cropping. */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  /* The banner image is ~2000x503 (≈3.976:1). Without a matching min-height,
     a box that's proportionally wider than the image (e.g. when the CTA
     text stack is short) would fit the image by height instead of width,
     leaving empty gaps on the left/right. 100 / 3.976 ≈ 25.15vw, kept close
     to the container's own max content width (90rem minus its padding). */
  min-height: clamp(90px, 25.2vw, 345px);
}

.bonus-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(38, 0, 47, 0.9) 10%, rgba(59, 0, 71, 0.55) 100%);
}

.bonus-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

.bonus-banner__eyebrow {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.bonus-banner__amount {
  color: var(--color-heading-gold);
  font-weight: var(--font-weight-heavy);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  max-width: 40rem;
  margin-bottom: 0;
}

.bonus-banner__cta {
  margin-top: 0.5rem;
}

/* Mobile: fill the whole block edge-to-edge, cropping is fine here — the
   "no cropping" rule only matters on desktop. */
@media (max-width: 47.9375em) {
  .bonus-banner {
    background-size: cover;
  }
}