/* ---------------------------------------------------------------------------
   Ace Glove — Section: CTA banner

   One container. Full-bleed video (or image) background with an adjustable
   dark overlay; all content left-aligned on top of it. Reuses the shared
   .ags-title heading rule, .ags-btn button and .ags-pad-x/-y spacing tokens
   throughout rather than introducing new ones.
--------------------------------------------------------------------------- */

.ags-cta-banner {
	--ags-cta-banner-overlay-color: #131f28;
	--ags-cta-banner-overlay: 0.55;

	position: relative;
	width: 100%;
	min-height: 420px;
	overflow: hidden;
	background-color: var(--ags-secondary);
}

/* --- Background ------------------------------------------------------------ */

.ags-cta-banner__media {
	position: absolute;
	inset: 0;
}

.ags-cta-banner__video,
.ags-cta-banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.ags-cta-banner__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--ags-cta-banner-overlay-color);
	opacity: var(--ags-cta-banner-overlay);
	pointer-events: none;
}

/* --- Layout: one container, left-aligned ----------------------------------- */

.ags-cta-banner__inner {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	max-width: var(--ags-max);
	min-height: 420px;
	margin: 0 auto;
	padding: var(--ags-pad-y) var(--ags-pad-x);
	align-items: center;
}

.ags-cta-banner__content {
	max-width: 560px;
	text-align: left;
}

.ags-cta-banner .ags-cta-banner__heading {
	margin: 0 0 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ags-white);
}

.ags-cta-banner .ags-cta-banner__text {
	margin: 0 0 32px;
	font-size: var(--ags-text-size);
	font-weight: 400;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.75);
}

/* --- Split layout: compact band, copy left, button right -------------------- */

.ags-cta-banner--split,
.ags-cta-banner--split .ags-cta-banner__inner {
	min-height: 0;
}

.ags-cta-banner--split .ags-cta-banner__inner {
	justify-content: space-between;
	gap: 40px;
	padding-block: 76px;
}

.ags-cta-banner--split .ags-cta-banner__content {
	max-width: 640px;
}

.ags-cta-banner--split .ags-cta-banner__heading {
	margin-bottom: 14px;
}

.ags-cta-banner--split .ags-cta-banner__heading::after {
	display: none;
}

.ags-cta-banner--split .ags-cta-banner__text {
	margin-bottom: 0;
}

.ags-cta-banner--split .ags-cta-banner__action {
	flex: none;
}

/* Overlay fades from solid on the copy side to mostly clear on the photo side;
   "Overlay opacity" scales the whole thing (100 = as designed). */
.ags-cta-banner--split .ags-cta-banner__overlay {
	background: linear-gradient(
		90deg,
		var(--ags-cta-banner-overlay-color) 0%,
		var(--ags-cta-banner-overlay-color) 40%,
		color-mix(in srgb, var(--ags-cta-banner-overlay-color) 15%, transparent) 100%
	);
}

/* Stacked (phone), the copy sits over the whole photo, so the gradient turns top-to-bottom. */
@media (max-width: 767px) {
	.ags-cta-banner--split .ags-cta-banner__overlay {
		background: linear-gradient(
			180deg,
			var(--ags-cta-banner-overlay-color) 0%,
			var(--ags-cta-banner-overlay-color) 38%,
			color-mix(in srgb, var(--ags-cta-banner-overlay-color) 12%, transparent) 100%
		);
	}
}

/* --- Breakpoints ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.ags-cta-banner,
	.ags-cta-banner__inner {
		min-height: 380px;
	}

	.ags-cta-banner--split,
	.ags-cta-banner--split .ags-cta-banner__inner {
		min-height: 0;
	}

}

/* Tablet: a shallower band than desktop. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ags-cta-banner--split .ags-cta-banner__inner {
		padding-block: 52px;
	}
}

/* Phone only: copy over button, with an extra foot where the photo shows through.
   Tablet keeps the desktop side-by-side layout. */
@media (max-width: 767px) {
	.ags-cta-banner--split .ags-cta-banner__inner {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 28px;
		padding-block: 48px 170px;
	}
}

@media (max-width: 600px) {
	.ags-cta-banner,
	.ags-cta-banner__inner {
		min-height: 360px;
	}

	.ags-cta-banner__content {
		max-width: 100%;
	}


	.ags-cta-banner__btn {
		width: 100%;
		justify-content: center;
	}

	.ags-cta-banner--split,
	.ags-cta-banner--split .ags-cta-banner__inner {
		min-height: 0;
	}

	.ags-cta-banner--split .ags-cta-banner__action {
		width: 100%;
	}

	.ags-cta-banner--split .ags-cta-banner__inner {
		padding-block: 44px 150px;
	}
}

/* --- Scroll-in animation ---------------------------------------------------- */

.ags-cta-banner--animate.is-armed .ags-cta-banner__heading,
.ags-cta-banner--animate.is-armed .ags-cta-banner__text,
.ags-cta-banner--animate.is-armed .ags-cta-banner__btn {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ags-cta-banner--animate.is-armed .ags-cta-banner__heading,
	.ags-cta-banner--animate.is-armed .ags-cta-banner__text,
	.ags-cta-banner--animate.is-armed .ags-cta-banner__btn {
		opacity: 1;
	}
}