/* ==========================================================================
   AAS CTA Band - simple centered call-to-action banner: badge + heading
   + short description + two buttons. Four background variants.
   ========================================================================== */

.aas-cta-band {
	--aas-accent: var(--e-global-color-accent, #FE212A);
	--aas-dark: var(--e-global-color-primary, #0D0D0D);
	--aas-text: var(--e-global-color-text, #666666);
	--aas-white: var(--e-global-color-white, #FFFFFF);
	--aas-light: var(--e-global-color-secondary, #F5F5F5);
	--aas-font-heading: var(--e-global-typography-primary-font-family, "Space Grotesk", sans-serif);
	--aas-font-text: var(--e-global-typography-text-font-family, "DM Sans", sans-serif);

	padding: 70px 20px;
	text-align: center;
}

.aas-cta-bg-white  { background: var(--aas-white); }
.aas-cta-bg-grey   { background: var(--aas-light); }
.aas-cta-bg-dark   { background: var(--aas-dark); }
.aas-cta-bg-accent { background: var(--aas-accent); }

/* A background image (with its baked-in dark overlay) always wins over
   the flat color variant above, and always keeps text white/readable,
   whichever variant was selected. */
.aas-cta-has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.aas-cta-has-image .aas-cta-heading.aas-heading,
.aas-cta-has-image .aas-cta-description,
.aas-cta-has-image .aas-cta-badge .aas-badge-text {
	color: var(--aas-white);
}
.aas-cta-has-image .aas-cta-btn-outline {
	color: var(--aas-white);
	border-color: rgba(255,255,255,0.4);
}
.aas-cta-has-image .aas-cta-btn-outline:hover {
	background: var(--aas-white);
	color: var(--aas-dark);
	border-color: var(--aas-white);
}

.aas-cta-inner {
	max-width: 760px;
	margin: 0 auto;
}

.aas-cta-badge {
	display: inline-flex;
	justify-content: center;
}
.aas-cta-badge .aas-badge-dash {
	display: inline-block;
	width: 30px;
	height: 3px;
	background: var(--aas-accent);
	margin-right: 10px;
}

.aas-cta-heading.aas-heading {
	font-family: var(--aas-font-heading);
	color: var(--aas-dark);
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.2;
	margin: 14px 0 16px;
}
.aas-cta-accent {
	color: var(--aas-accent);
}

.aas-cta-description {
	font-family: var(--aas-font-text);
	color: var(--aas-text);
	line-height: 1.7;
	margin: 0 0 30px;
}

.aas-cta-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
}

.aas-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--aas-font-heading);
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	border-radius: 5px;
}
.aas-cta-btn-primary {
	background: var(--aas-accent);
	color: var(--aas-dark);
	border: 1px solid var(--aas-accent);
	padding: 5px 5px 5px 22px;
}
.aas-cta-btn-primary .aas-btn-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 4px;
	background: var(--aas-dark);
	color: var(--aas-white);
	flex-shrink: 0;
}
.aas-cta-btn-primary:hover {
	background: var(--aas-white);
	color: var(--aas-dark);
	border-color: var(--aas-dark);
}

.aas-cta-btn-outline {
	padding: 14px 26px;
	border: 1px solid rgba(13,13,13,0.2);
	color: var(--aas-dark);
	background: transparent;
}
.aas-cta-btn-outline:hover {
	background: var(--aas-dark);
	color: var(--aas-white);
	border-color: var(--aas-dark);
}

/* ---- Dark background: flip text/outline colors to stay readable ------- */
.aas-cta-bg-dark .aas-cta-heading.aas-heading,
.aas-cta-bg-dark .aas-cta-description,
.aas-cta-bg-dark .aas-cta-badge .aas-badge-text {
	color: var(--aas-white);
}
.aas-cta-bg-dark .aas-cta-btn-outline {
	color: var(--aas-white);
	border-color: rgba(255,255,255,0.3);
}
.aas-cta-bg-dark .aas-cta-btn-outline:hover {
	background: var(--aas-white);
	color: var(--aas-dark);
	border-color: var(--aas-white);
}

/* ---- Accent (red) background: everything flips to white/dark ---------- */
.aas-cta-bg-accent .aas-cta-heading.aas-heading,
.aas-cta-bg-accent .aas-cta-description,
.aas-cta-bg-accent .aas-cta-badge .aas-badge-text {
	color: var(--aas-white);
}
.aas-cta-bg-accent .aas-cta-badge .aas-badge-dash {
	background: var(--aas-white);
}
.aas-cta-bg-accent .aas-cta-accent {
	color: var(--aas-dark);
}
.aas-cta-bg-accent .aas-cta-btn-primary {
	background: var(--aas-dark);
	border-color: var(--aas-dark);
	color: var(--aas-white);
}
.aas-cta-bg-accent .aas-cta-btn-primary .aas-btn-icon-box {
	background: var(--aas-white);
	color: var(--aas-dark);
}
.aas-cta-bg-accent .aas-cta-btn-primary:hover {
	background: var(--aas-white);
	color: var(--aas-dark);
	border-color: var(--aas-white);
}
.aas-cta-bg-accent .aas-cta-btn-outline {
	color: var(--aas-white);
	border-color: rgba(255,255,255,0.5);
}
.aas-cta-bg-accent .aas-cta-btn-outline:hover {
	background: var(--aas-white);
	color: var(--aas-accent);
	border-color: var(--aas-white);
}

@media (max-width: 500px) {
	.aas-cta-band {
		padding: 50px 16px;
	}
	.aas-cta-buttons {
		flex-direction: column;
		width: 100%;
	}
	.aas-cta-btn {
		width: 100%;
		justify-content: center;
	}
}