/* ==========================================================================
   Bonus banner block — full-width, uncropped promo image.
   ========================================================================== */

.bonus-banner {
  position: relative;
  border-radius: var(--radius-card-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Guarantees room for the centered overlay content even when the wide
     banner image's natural (uncropped) height would otherwise be too short
     on narrow viewports. The image itself is never cropped. */
  min-height: clamp(18rem, 62vw, 24rem);
}

.bonus-banner__media {
  position: relative;
  width: 100%;
  line-height: 0;
}

.bonus-banner__image {
  display: block;
  width: 100%;
  height: auto; /* uncropped */
}

.bonus-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 30, 33, 0.55) 0%, rgba(13, 30, 33, 0.45) 40%, rgba(13, 30, 33, 0.75) 100%);
}

.bonus-banner__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: clamp(1.25rem, 4vw, 3rem);
}

.bonus-banner__eyebrow {
  margin: 0;
  color: var(--color-white);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.375rem);
  font-weight: var(--font-weight-semibold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.bonus-banner__amount {
  margin: 0;
  color: var(--color-heading-accent);
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.15;
  max-width: 26rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

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

@media (max-width: 30em) {
  .bonus-banner__content {
    justify-content: center;
    padding: 1.25rem;
  }
}

/* ---- Mobile: the image is purely a background — crop it to fill the box,
   whatever that means for the artwork. Desktop keeps the full, uncropped
   image (see .bonus-banner__image above); this override only applies below 768px. ---- */
@media (max-width: 47.9375em) {
  .bonus-banner__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .bonus-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}