/**
 * CTA Banner Block Styles
 * Non-compiled - edit directly
 */

.block--cta-banner {
	position: relative;
	overflow: hidden;
	/* margin-top:80px;
	margin-bottom:60px; */
}
.block--cta-banner .col-12 {
	padding-left:0;
	padding-right:0;
}
.block--cta-banner .container {
	padding:0;
}
.cta-banner-inner {
	padding:80px;
	border-radius: 5px;
	overflow: hidden;
}
/* ── Standard centered banner ───────────────────────────────────────────── */

.block--cta-banner .cta-banner-content {
	max-width: 900px;
	margin: 0 auto;
}

.block--cta-banner .cta-heading {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
}

.block--cta-banner .cta-heading sup {
	font-size: 0.4em;
	font-weight: 400;
	vertical-align: super;
	line-height: 0;
}

.block--cta-banner .cta-text {
	font-size: 1.125rem;
	line-height: 1.6;
}

.block--cta-banner .cta-text p:last-child {
	margin-bottom: 0;
}

/* Buttons row */
.block--cta-banner .cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* Background color classes */
.block--cta-banner.has-gray-100-background {
	background-color: #f6f6f6;
}

.block--cta-banner.has-indigo-background {
	background-color: #002855;
}

.block--cta-banner.has-red-background {
	background-color: #a50034;
}

.block--cta-banner.has-teal-background {
	background-color: #00a499;
}

.block--cta-banner.has-white-background {
	background-color: #ffffff;
}

/* Text theme classes */
.block--cta-banner.text-theme-light {
	color: #ffffff;
}

.block--cta-banner.text-theme-light .cta-heading {
	color: #ffffff;
}

.block--cta-banner.text-theme-dark {
	color: #212529;
}

.block--cta-banner.text-theme-dark .cta-heading {
	color: #002855;
}

/* Responsive adjustments */
@media (min-width: 768px) {
	.block--cta-banner .cta-heading {
		font-size: 2.5rem;
	}
}

@media (min-width: 992px) {
	.block--cta-banner .cta-heading {
		font-size: 3rem;
	}
}

/* ── Hero layout (has-bg-image) ─────────────────────────────────────────── */

.block--cta-banner.has-bg-image {
	padding: 0;
}

.block--cta-banner.has-bg-image .cta-banner-inner {
	position: relative;
	background-size: cover;
	background-position: center 20%;
	min-height: 500px;
	display: flex;
	align-items: center;
}

.block--cta-banner.has-bg-image .cta-banner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(28, 10, 72, 0.90) 0%,
		rgba(28, 10, 72, 0.72) 38%,
		rgba(28, 10, 72, 0.28) 62%,
		transparent 85%
	);
	pointer-events: none;
}

.block--cta-banner.has-bg-image .cta-banner-content {
	position: relative;
	z-index: 1;
	max-width: 500px;
	margin: 0;
	text-align: left;
	padding: 3.5rem 0;
}

.block--cta-banner.has-bg-image .cta-heading {
	color: #ffffff;
	font-size: clamp(2rem, 3.5vw, 3rem);
	margin-bottom: 1.25rem;
}

.block--cta-banner.has-bg-image .cta-text {
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.0625rem;
	line-height: 1.65;
	margin-bottom: 0;
}

.block--cta-banner.has-bg-image .cta-buttons {
	margin-top: 2rem;
}

/* Outline-light button used in hero layout */
.block--cta-banner .btn-outline-light {
	border: 2px solid #ffffff;
	color: #ffffff;
	background: transparent;
	/* padding: 0.5rem 1.5rem; */
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	display: inline-block;
	transition: background 0.2s ease, color 0.2s ease;
}

.block--cta-banner .btn-outline-light:hover,
.block--cta-banner .btn-outline-light:focus {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
}

/* Mobile: shift image right so subject's face stays visible */
@media (max-width: 767px) {
	/* .block--cta-banner{
		margin-top:40px;
		margin-bottom:40px;
	} */
	.block--cta-banner.has-bg-image .cta-banner-inner {
		min-height: 420px;
		background-position: 72% center;
		padding:20px;
		margin:1rem;
		margin-bottom:0;

	}

	.block--cta-banner.has-bg-image .cta-banner-overlay {
		background: linear-gradient(
			to bottom,
			rgba(28, 10, 72, 0.85) 0%,
			rgba(28, 10, 72, 0.65) 60%,
			rgba(28, 10, 72, 0.35) 100%
		);
	}

	.block--cta-banner.has-bg-image .cta-banner-content {
		max-width: 100%;
	}
}
