/* -------------------------------------------------------------------------- */
/* Page CTA                                                                   */
/* -------------------------------------------------------------------------- */

.thula-page-cta {
	--thula-page-cta-bg: #09183c;
	--thula-page-cta-blue-deep: #0d1f4a;
	--thula-page-cta-blue: #0e234f;

	--thula-page-cta-inline-space:
		clamp(
			var(--wp--preset--spacing--40),
			4.5vw,
			var(--wp--preset--spacing--60)
		);

	position: relative;
	margin-block: 0;
	overflow-x: clip;
	background-color: var(--thula-page-cta-bg);
}


/**
 * The normal site container controls the CTA width and viewport gutter.
 */
.thula-page-cta > .is-style-site-container {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}


/* -------------------------------------------------------------------------- */
/* CTA Visual Panel                                                           */
/* -------------------------------------------------------------------------- */

.thula-page-cta__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	width: 100%;
	min-width: 0;

	border: 0;
	border-radius: 1rem;

	background-color: var(--thula-page-cta-bg);
}


/* -------------------------------------------------------------------------- */
/* CTA Landscape                                                              */
/* -------------------------------------------------------------------------- */

.thula-page-cta__image {
	position: absolute;
	z-index: 0;
	inset: 0;

	width: 100%;
	height: 100%;
	margin: 0;

	overflow: hidden;

	border: 0;
	border-radius: inherit;

	pointer-events: none;

	-webkit-mask-image: none;
	mask-image: none;
}


.thula-page-cta__image img {
	display: block;

	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;

	border: 0;
	border-radius: inherit;

	object-fit: cover;
	object-position: 60% center;
}


/**
 * Shallow lower fade keeps the image from ending too abruptly.
 */
.thula-page-cta__image::after {
	content: "";
	position: absolute;
	z-index: 1;

	right: 0;
	bottom: 0;
	left: 0;

	height: 14%;

	pointer-events: none;

	background: linear-gradient(
		to bottom,
		rgba(9, 24, 60, 0) 0%,
		rgba(9, 24, 60, 0.04) 38%,
		rgba(9, 24, 60, 0.11) 62%,
		rgba(9, 24, 60, 0.26) 82%,
		rgba(9, 24, 60, 0.42) 100%
	);
}


/* -------------------------------------------------------------------------- */
/* Decorative Image Treatment                                                 */
/* -------------------------------------------------------------------------- */

/**
 * Main navy field protecting the text, plus subtle image tinting.
 */
.thula-page-cta__panel::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;

	pointer-events: none;

	background:
		radial-gradient(
			ellipse 100% 160% at -16% 50%,
			rgba(9, 24, 60, 1) 0%,
			rgba(9, 24, 60, 1) 38%,
			rgba(13, 31, 74, 0.98) 48%,
			rgba(14, 35, 79, 0.91) 58%,
			rgba(14, 35, 79, 0.72) 69%,
			rgba(14, 35, 79, 0.46) 80%,
			rgba(14, 35, 79, 0.20) 90%,
			rgba(14, 35, 79, 0) 100%
		),
		linear-gradient(
			to left,
			rgba(9, 24, 60, 0.22) 0%,
			rgba(9, 24, 60, 0.08) 7%,
			rgba(9, 24, 60, 0) 17%
		),
		linear-gradient(
			90deg,
			rgba(13, 31, 74, 0.08) 0%,
			rgba(14, 35, 79, 0.10) 55%,
			rgba(14, 33, 77, 0.06) 100%
		);
}


/**
 * Secondary ellipse adds subtle depth behind the CTA copy.
 */
.thula-page-cta__panel::after {
	content: "";
	position: absolute;
	z-index: 1;

	top: -42%;
	left: -18%;

	width: 62%;
	aspect-ratio: 1 / 1;

	border-radius: 50%;

	pointer-events: none;

	background: radial-gradient(
		circle at 62% 50%,
		rgba(14, 35, 79, 0.08) 0%,
		rgba(14, 35, 79, 0.14) 48%,
		rgba(14, 35, 79, 0.20) 72%,
		rgba(14, 35, 79, 0) 100%
	);
}


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

.thula-page-cta__content {
	position: relative;
	z-index: 2;

	box-sizing: border-box;

	width: 100%;
	max-width: 46rem;
	min-width: 0;

	margin-block-start: 0;
	margin-inline-end: auto;

	padding-top:
		clamp(
			var(--wp--preset--spacing--60),
			6.5vw,
			var(--wp--preset--spacing--70)
		);

	padding-right: var(--thula-page-cta-inline-space);

	padding-bottom:
		clamp(
			var(--wp--preset--spacing--60),
			6.5vw,
			var(--wp--preset--spacing--70)
		);

	padding-left: var(--thula-page-cta-inline-space);
}


.thula-page-cta__content .thula-section-lead__content {
	max-width: 100%;
}


.thula-page-cta__content .thula-section-lead__text {
	max-width: 36rem;
}


.thula-page-cta__content .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}


/* -------------------------------------------------------------------------- */
/* CTA Button                                                                 */
/* -------------------------------------------------------------------------- */

.thula-page-cta
	.wp-block-button.is-style-fill-teal
	.wp-block-button__link {
	color: var(--wp--preset--color--white);
}


/* -------------------------------------------------------------------------- */
/* Decorative CTA Border                                                      */
/* -------------------------------------------------------------------------- */

/**
 * Single gradient border around the visual panel.
 *
 * The line is strongest on the left and progressively fades to transparent
 * towards the right. The mask removes the centre of the gradient, leaving
 * only the 1px rounded border visible.
 */
.thula-page-cta__frame {
	position: absolute;
	z-index: 3;
	inset: 0;

	box-sizing: border-box;

	padding: 1px;
	margin: 0;

	border-radius: inherit;

	pointer-events: none;

	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.18) 0%,
		rgba(255, 255, 255, 0.17) 25%,
		rgba(255, 255, 255, 0.13) 48%,
		rgba(255, 255, 255, 0.07) 70%,
		rgba(255, 255, 255, 0.02) 88%,
		rgba(255, 255, 255, 0) 100%
	);

	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);

	-webkit-mask-composite: xor;

	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);

	mask-composite: exclude;
}


/* -------------------------------------------------------------------------- */
/* Medium Screens                                                             */
/* -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

	.thula-page-cta__image img {
		object-position: 64% center;
	}


	.thula-page-cta__panel::before {
		background:
			radial-gradient(
				ellipse 108% 155% at -22% 50%,
				rgba(9, 24, 60, 1) 0%,
				rgba(9, 24, 60, 1) 38%,
				rgba(13, 31, 74, 0.98) 49%,
				rgba(14, 35, 79, 0.90) 59%,
				rgba(14, 35, 79, 0.70) 70%,
				rgba(14, 35, 79, 0.44) 81%,
				rgba(14, 35, 79, 0.18) 91%,
				rgba(14, 35, 79, 0) 100%
			),
			linear-gradient(
				to left,
				rgba(9, 24, 60, 0.20) 0%,
				rgba(9, 24, 60, 0.07) 8%,
				rgba(9, 24, 60, 0) 18%
			),
			linear-gradient(
				90deg,
				rgba(13, 31, 74, 0.10) 0%,
				rgba(14, 35, 79, 0.11) 58%,
				rgba(14, 33, 77, 0.06) 100%
			);
	}


	.thula-page-cta__panel::after {
		top: -35%;
		left: -22%;
		width: 68%;
	}


	.thula-page-cta__content {
		max-width: 40rem;
	}
}


/* -------------------------------------------------------------------------- */
/* Tablet                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 781px) {

	.thula-page-cta {
		--thula-page-cta-inline-space:
			var(--wp--preset--spacing--40);
	}


	.thula-page-cta > .is-style-site-container {
		padding-top: var(--wp--preset--spacing--30);
		padding-bottom: 0;
	}


	.thula-page-cta__panel {
		border-radius: 0.875rem;
	}


	.thula-page-cta__image {
		border-radius: inherit;
	}


	.thula-page-cta__image img {
		object-position: 68% center;
	}


	.thula-page-cta__panel::before {
		background:
			radial-gradient(
				ellipse 125% 148% at -30% 50%,
				rgba(9, 24, 60, 1) 0%,
				rgba(9, 24, 60, 1) 38%,
				rgba(13, 31, 74, 0.98) 49%,
				rgba(14, 35, 79, 0.90) 60%,
				rgba(14, 35, 79, 0.70) 72%,
				rgba(14, 35, 79, 0.42) 83%,
				rgba(14, 35, 79, 0.17) 93%,
				rgba(14, 35, 79, 0) 100%
			),
			linear-gradient(
				to left,
				rgba(9, 24, 60, 0.18) 0%,
				rgba(9, 24, 60, 0.06) 8%,
				rgba(9, 24, 60, 0) 18%
			),
			linear-gradient(
				90deg,
				rgba(13, 31, 74, 0.12) 0%,
				rgba(14, 35, 79, 0.12) 62%,
				rgba(14, 33, 77, 0.06) 100%
			);
	}


	.thula-page-cta__panel::after {
		top: -28%;
		left: -30%;
		width: 82%;
		opacity: 0.8;
	}


	.thula-page-cta__image::after {
		height: 13%;
	}


	.thula-page-cta__content {
		max-width: 36rem;

		padding-top: var(--wp--preset--spacing--50);
		padding-right: var(--thula-page-cta-inline-space);
		padding-bottom: var(--wp--preset--spacing--60);
		padding-left: var(--thula-page-cta-inline-space);
	}
}


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

@media (max-width: 480px) {

	.thula-page-cta {
		--thula-page-cta-inline-space:
			var(--wp--preset--spacing--30);
	}


	.thula-page-cta > .is-style-site-container {
		padding-top: 0;
		padding-bottom: 0;
	}


	/**
	 * The CTA becomes full bleed on Mobile.
	 */
	.thula-page-cta__panel {
		width: 100vw;
		max-width: none;

		margin-inline: calc(50% - 50vw);

		border-radius: 0;
	}


	.thula-page-cta__image,
	.thula-page-cta__image img {
		border-radius: 0;
	}


	.thula-page-cta__image img {
		object-position: 72% center;
	}


	.thula-page-cta__panel::before {
		background:
			radial-gradient(
				ellipse 155% 138% at -48% 50%,
				rgba(9, 24, 60, 1) 0%,
				rgba(9, 24, 60, 1) 39%,
				rgba(13, 31, 74, 0.98) 50%,
				rgba(14, 35, 79, 0.88) 61%,
				rgba(14, 35, 79, 0.66) 72%,
				rgba(14, 35, 79, 0.40) 82%,
				rgba(14, 35, 79, 0.16) 92%,
				rgba(14, 35, 79, 0) 100%
			),
			linear-gradient(
				to left,
				rgba(9, 24, 60, 0.14) 0%,
				rgba(9, 24, 60, 0.05) 8%,
				rgba(9, 24, 60, 0) 18%
			),
			linear-gradient(
				90deg,
				rgba(13, 31, 74, 0.12) 0%,
				rgba(14, 35, 79, 0.11) 65%,
				rgba(14, 33, 77, 0.04) 100%
			);
	}


	/**
	 * The secondary ellipse is unnecessary on the narrow layout.
	 */
	.thula-page-cta__panel::after {
		content: none;
	}


	.thula-page-cta__image::after {
		height: 12%;

		background: linear-gradient(
			to bottom,
			rgba(9, 24, 60, 0) 0%,
			rgba(9, 24, 60, 0.05) 42%,
			rgba(9, 24, 60, 0.16) 70%,
			rgba(9, 24, 60, 0.36) 100%
		);
	}


	.thula-page-cta__content {
		max-width: 100%;

		padding-top: var(--wp--preset--spacing--40);
		padding-right: var(--thula-page-cta-inline-space);
		padding-bottom: var(--wp--preset--spacing--50);
		padding-left: var(--thula-page-cta-inline-space);
	}


	.thula-page-cta__content .wp-block-buttons {
		margin-block-start: var(--wp--preset--spacing--30);
	}


	.thula-page-cta
		.wp-block-button.is-style-fill-teal
		.wp-block-button__link {
		padding-block: 0.85rem;
	}


	/**
	 * The panel is square and full bleed on Mobile, so the decorative rounded
	 * gradient border is removed.
	 */
	.thula-page-cta__frame {
		display: none;
	}
}