/* Background CTA section.
 *
 * Modes:
 *   Standard: <img> behind text + dark gradient overlay.
 *   Parallax: image becomes a fixed-attachment background on the section
 *     so it stays put while you scroll. Mobile falls back to scrolling
 *     normally because background-attachment: fixed is buggy on iOS.
 *   Overlays: dark variants for white text; "white-wash" for the faded
 *     light-overlay look (pair with black text); "red-wash" for branded
 *     accent panels.
 */

.rally-background-cta {
	position: relative;
	display: grid;
	color: var(--rally-white);
	overflow: hidden;
	isolation: isolate;
}

.rally-background-cta--text-black { color: var(--rally-black); }

.rally-background-cta--height-compact { min-height: 240px; }
.rally-background-cta--height-normal  { min-height: 360px; }
.rally-background-cta--height-tall    { min-height: 520px; }

/* ----- Image (standard mode) ----- */

.rally-background-cta__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* ----- Parallax mode -----
 * The <img> is removed in PHP and the photo becomes a fixed-attachment
 * background on the section itself. That gives the classic "image stays
 * put while you scroll past" parallax effect. */

@media (min-width: 1024px) {
	.rally-background-cta--parallax {
		background-attachment: fixed;
	}
}

/* ----- Overlay -----
 * Two axes: COLOR (dark / white-wash / red-wash) × STRENGTH (light/medium/heavy).
 * Strength changes opacity; color picks the underlying tint. */

.rally-background-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Dark overlay — for white text on top of imagery. */
.rally-background-cta--overlay-dark.rally-background-cta--strength-light  .rally-background-cta__overlay { background: linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.40)); }
.rally-background-cta--overlay-dark.rally-background-cta--strength-medium .rally-background-cta__overlay { background: linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0.65)); }
.rally-background-cta--overlay-dark.rally-background-cta--strength-heavy  .rally-background-cta__overlay { background: linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.85)); }

/* White Wash — for black text, faded-image look. */
.rally-background-cta--overlay-white-wash.rally-background-cta--strength-light  .rally-background-cta__overlay { background: rgba(255, 255, 255, 0.65); }
.rally-background-cta--overlay-white-wash.rally-background-cta--strength-medium .rally-background-cta__overlay { background: rgba(255, 255, 255, 0.85); }
.rally-background-cta--overlay-white-wash.rally-background-cta--strength-heavy  .rally-background-cta__overlay { background: rgba(255, 255, 255, 0.94); }

/* Red Wash — Rally red branded overlay. */
.rally-background-cta--overlay-red-wash.rally-background-cta--strength-light  .rally-background-cta__overlay { background: linear-gradient(180deg, rgba(209, 0, 0, 0.55), rgba(159, 0, 0, 0.7)); }
.rally-background-cta--overlay-red-wash.rally-background-cta--strength-medium .rally-background-cta__overlay { background: linear-gradient(180deg, rgba(209, 0, 0, 0.75), rgba(159, 0, 0, 0.88)); }
.rally-background-cta--overlay-red-wash.rally-background-cta--strength-heavy  .rally-background-cta__overlay { background: linear-gradient(180deg, rgba(209, 0, 0, 0.92), rgba(159, 0, 0, 0.97)); }

/* ----- Inner content ----- */

.rally-background-cta__inner {
	display: flex;
	flex-direction: column;
	gap: var(--rally-space-3);
	justify-self: center;
	align-self: center;
	padding-block: var(--rally-section-padding-y);
	width: 100%;
	max-width: 720px;
}

.rally-background-cta--align-left   .rally-background-cta__inner { text-align: left; align-items: flex-start; justify-self: start; padding-inline: var(--rally-gutter); }
.rally-background-cta--align-center .rally-background-cta__inner { text-align: center; align-items: center; }
.rally-background-cta--align-right  .rally-background-cta__inner { text-align: right; align-items: flex-end; justify-self: end; padding-inline: var(--rally-gutter); }

.rally-background-cta__eyebrow {
	font-family: var(--rally-font-body);
	font-size: var(--rally-text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--rally-red);
	margin: 0;
}

.rally-background-cta__headline {
	font-size: var(--rally-text-4xl);
	color: inherit;
	margin: 0;
}

.rally-background-cta__subhead {
	font-size: var(--rally-text-xl);
	font-weight: 500;
	color: inherit;
	opacity: 0.95;
	margin: 0;
	max-width: 60ch;
}

.rally-background-cta__body {
	font-size: var(--rally-text-lg);
	font-weight: 500;
	line-height: 1.65;
	color: inherit;
	margin: 0;
	max-width: 62ch;
}
.rally-background-cta__body p { margin-block: 0 var(--rally-space-3); }
.rally-background-cta__body p:last-child { margin-bottom: 0; }
.rally-background-cta__body a {
	color: inherit;
	text-decoration: underline;
	font-weight: 700;
}

/* When the white-wash overlay is in play, give the dark text a touch of
 * extra weight for the busiest backgrounds. */
.rally-background-cta--overlay-white-wash .rally-background-cta__body,
.rally-background-cta--overlay-white-wash .rally-background-cta__subhead {
	font-weight: 600;
}

.rally-background-cta__button {
	margin-top: var(--rally-space-3);
}