/**
 * Homepage CTA
 *
 * Dark closing invitation before the Accreditations & Assurance section.
 */
.thula-home-cta {
	border: 0;
}


.thula-home-cta {
	position: relative;
	overflow: hidden;

	margin: 0;
	padding-block: clamp(4rem, 6vw, 5.25rem);

	background:
		linear-gradient(
			240deg,
			#0c2452 0%,
			#0a204a 58%,
			#09183c 100%
		);

	background-repeat:
		no-repeat,
		no-repeat;

	background-position:
		center bottom,
		center;

	background-size:
		100% auto,
		100% 100%;

	color: var(--wp--preset--color--white);
}


/* -------------------------------------------------------------------------- */
/* Content                                                                    */
/* -------------------------------------------------------------------------- */

.thula-home-cta__inner {
	position: relative;
	z-index: 1;

	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;
	max-width: 52rem;

	margin-right: auto;
	margin-left: auto;

	text-align: center;
}


/**
 * Keep the existing site eyebrow centred.
 */
.thula-home-cta__inner > .is-style-eyebrow-teal {
	margin-right: auto;
	margin-left: auto;
}


.thula-home-cta__heading {
	max-width: 41rem;
	margin: var(--wp--preset--spacing--20) auto 0;

	color: var(--wp--preset--color--white);

	/* Match Product Page Section Lead headings. */
	font-size: clamp(
		1.75rem,
		calc(1vw + 1.4rem),
		1.875rem
	);

	font-weight: 300;
	line-height: 1.12;

	text-align: center;
	text-wrap: pretty;
}


.thula-home-cta__text {
	max-width: 40rem;

	margin:
		var(--wp--preset--spacing--10)
		auto
		0;

	color: rgba(255, 255, 255, 0.94);

	font-size: clamp(1rem, 0.3vw + 0.92rem, 1.1rem);
	line-height: 1.55;

	text-align: center;
}


.thula-home-cta__actions {
	justify-content: center;

	width: 100%;

	margin-top: var(--wp--preset--spacing--40);
	margin-right: auto;
	margin-left: auto;

	gap: var(--wp--preset--spacing--20);
}

/*
 * Tablet
 *
 * Don't reduce the 1920px artwork all the way to the viewport width.
 * Keeping a minimum artwork width means the curves remain substantial
 * while still getting smaller than their desktop presentation.
 */
@media (max-width: 782px) {
	.thula-home-cta {
		background-size:
			52rem auto,
			100% 100%;

		background-position:
			center bottom,
			center;
	}
}


/*
 * Mobile
 *
 * The artwork scales down further, but not to 100% of a narrow phone
 * viewport. The navy CSS background continues behind the whole section.
 */
@media (max-width: 480px) {
	.thula-home-cta {
		background-size:
			42rem auto,
			100% 100%;

		background-position:
			center bottom,
			center;
	}
}

/* -------------------------------------------------------------------------- */
/* Mobile                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 480px) {

	.thula-home-cta__inner {
		padding-inline: var(--wp--preset--spacing--20);
	}


	@media (max-width: 480px) {
	.thula-home-cta__heading {
		line-height: 1.12;
	}}


	.thula-home-cta__actions {
		flex-direction: column;
		align-items: center;

		width: 100%;
	}


	.thula-home-cta__actions .wp-block-button {
		width: auto;
	}


	.thula-home-cta__actions .wp-block-button__link {
		min-width: 11rem;

		text-align: center;
	}
}