/* ==========================================================================
   Bonus banner block (full width promo, homepage)
   Real source image is 1895/830. The top 18% is intentionally cropped
   off (client request), same technique as the hero. min-height keeps
   the banner from ever growing shorter than the centered text needs,
   so the image stays within the text block's bounds.
   ========================================================================== */

.bonus-banner {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--color-bg-dark);
	/* Same fix as .hero: override the generic `section { padding-block }`
	   rule so this full-bleed banner isn't padded like a content section. */
	padding-block: 0;
}

/* 1895 / (830 * 0.82) = 1895 / 680.6 — exactly an 18% top-crop.
   min-height is a flat floor measured against the actual rendered
   promo text (eyebrow + amount + desc + CTA) across 320-1024px —
   that copy only ever needs ~250-310px, so a flat 320px floor covers
   it everywhere with margin; past ~890px the 18%-crop aspect-ratio
   is already taller than that floor and takes over on its own. */
.bonus-banner__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1895 / 680.6;
	height: auto;
	min-height: 20rem;
	overflow: hidden;
}

.bonus-banner__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/* Persistent scrim, darkest at the vertical center where the now fully
   centered text sits, so it stays readable regardless of image content. */
.bonus-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 18, 18, 0.6) 0%, rgba(18, 18, 18, 0.78) 50%, rgba(18, 18, 18, 0.6) 100%);
}

.bonus-banner__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	text-align: center;
}

.bonus-banner__eyebrow {
	color: var(--color-white);
	font-weight: var(--fw-btn);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	margin-bottom: 0;
}

.bonus-banner__amount {
	font-family: var(--font-display);
	font-weight: var(--fw-heading);
	color: var(--color-heading-accent);
	font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
	margin-bottom: 0.25rem;
}

.bonus-banner__desc {
	color: var(--color-text-main);
	max-width: 28rem;
	margin-bottom: 1.25rem;
}