/*=========================
	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;
}
@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 .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.
   Height + card measured off LIVE home mobile (2026-07-16): hero 760px total,
   photo visible for the top ~320px, white card (40px padding) pinned to the
   bottom. px, not rem — skelly shrinks the root font below 1200px. */
@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: 760px;
	}
	.block-cta-banner.align-right .container,
	.block-cta-banner.align-left .container,
	.block-cta-banner.align-center .container {
		padding-bottom: 30px;
	}
	/* Live card title = h1.u-h2 mobile: 26px/1em/700 (skelly's global ≤767 h2 rule
	   was blowing it up to 50px !important, ballooning the card over the photo) */
	.block-cta-banner .card .title {
		font-size: 26px !important;
		line-height: 1em !important;
		font-weight: 700 !important;
		letter-spacing: -1px !important;
		margin-bottom: 32px;
	}
	.block-cta-banner .card .copy,
	.block-cta-banner .card .copy p {
		font-size: 18px;
		line-height: 1.444;
	}
}

/* Mobile (< 768px): card padding 40px (live) */
@media only screen and (max-width: 767.98px) {
	.block-cta-banner .card {
		padding: 40px !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;
	}
}