/*=========================
	CTA BANNER BLOCK
=========================*/

.block-cta-banner .banner-inner {
	background-image: var(--banner-bg-desktop);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	min-height: 700px;
	display: flex;
	align-items: stretch;
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}

.block-cta-banner .container {
	display: flex;
	width: 100%;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}
.block-cta-banner.align-left .container {
	justify-content: flex-start;
}
.block-cta-banner.align-center .container {
	justify-content: center;
}

/* Align right → 2-column grid, card occupies the second column.
   Desktop (1200+): card pinned to top of the banner.
   Tablet (992-1199): card vertically centered (override below). */
.block-cta-banner.align-right .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	min-height: 100%;
	gap: 1.6rem;
}
.block-cta-banner.align-right .card {
	grid-column: 2;
	align-self: start;
	width: 610px;
	max-width: 100%;
	justify-self: end;
}
.block-cta-banner .buttons .c-btn {
	padding: 0.6em 1.8em;
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
	.block-cta-banner.align-right .container {
		align-items: center;
	}
	.block-cta-banner.align-right .card {
		align-self: center;
		width: 110%;
		max-width: none;
	}
}

.block-cta-banner .card {
	padding: 70px;
	border: 0;
	border-radius: 0;
}

.block-cta-banner .card .top-title,
.block-cta-banner .card .title,
.block-cta-banner .card .copy {
	margin-bottom: 3.2rem;
}

.block-cta-banner .card .copy > *:last-child {
	margin-bottom: 0;
}

.block-cta-banner .buttons {
	display: flex;
	gap: 2.5rem;
	flex-wrap: nowrap;
}
/* Mobile + tablet (up to lg): tighter gap between buttons */
@media only screen and (max-width: 1199.98px) {
	.block-cta-banner .buttons {
		gap: 1rem;
	}
}
/* Tablet (992-1199px): stack buttons vertically — one per row */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
	.block-cta-banner .buttons {
		flex-direction: column;
		align-items: flex-start;
	}
	.block-cta-banner .card .title {
		font-size: calc(2.6rem + 4.16667vw - 20px) !important;
	}
}
@media only screen and (max-width: 991.98px) {
	.block-cta-banner .buttons {
		flex-wrap: wrap;
	}
}

/* Small tablet + mobile (up to 991px): image fills the top of the banner, card sits
   at the bottom and spans the container — overrides the align-right desktop grid.
   The mobile-only background image swap happens below 768px. */
@media only screen and (max-width: 991.98px) {
	.block-cta-banner .banner-inner {
		min-height: 600px;
		padding: 0;
		display: flex;
		align-items: flex-end;
	}
	.block-cta-banner.align-right .container,
	.block-cta-banner.align-left .container,
	.block-cta-banner.align-center .container {
		display: block;
		padding-left: var(--container-px);
		padding-right: var(--container-px);
		padding-bottom: var(--space-6);
		grid-template-columns: 1fr;
	}
	.block-cta-banner.align-right .card,
	.block-cta-banner.align-left .card,
	.block-cta-banner.align-center .card {
		grid-column: 1;
		max-width: 100%;
		width: 100%;
		padding: var(--space-5);
	}
}

/* Mobile (< 768px): swap to the dedicated mobile background image and use a 70rem block height */
@media only screen and (max-width: 767.98px) {
	.block-cta-banner .banner-inner {
		background-image: var(--banner-bg-mobile, var(--banner-bg-desktop));
		min-height: 80rem;
	}
}

/* Mobile (< 768px): card padding 4rem */
@media only screen and (max-width: 767.98px) {
	.block-cta-banner .card {
		padding: 4rem !important;
	}
	/* Override the global mobile block 4rem top/bottom — cta-banner extends
	   edge-to-edge on mobile so it stays flush. */
	section.block-cta-banner {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}