/* ==========================================================================
   Gradient CTA block
   ========================================================================== */

.lc-block-gradient-cta {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--xx-large) !important;
	margin-block-end: var(--wp--preset--spacing--xx-large) !important;

	/* Create background that extends to viewport edge on desktop */
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: calc(-100vw + 100%);
		bottom: 0;
		background: linear-gradient(87deg, rgba(205, 230, 248, 0.70) 15.54%, rgba(197, 239, 205, 0.70) 115.73%);
		z-index: -1;
		border-top-left-radius: var(--wp--custom--border-radius--large);
		border-bottom-left-radius: var(--wp--custom--border-radius--large);

		@media (max-width: 768px) {
			right: calc(-1 * var(--wp--custom--site-padding));
			left: calc(-1 * var(--wp--custom--site-padding));
		}
	}

	.lc-block-gradient-cta__container {
		margin: 0 auto;
		padding: var(--wp--preset--spacing--small);
		display: flex;
		gap: var(--wp--preset--spacing--x-large);

		@media (max-width: 768px) {
			flex-direction: column;
			gap: var(--wp--preset--spacing--medium);
			margin-left: calc(-1 * var(--wp--custom--site-padding)) !important;
			margin-right: calc(-1 * var(--wp--custom--site-padding)) !important;
			padding: var(--wp--preset--spacing--small);
		}

		&>*:only-child {
			padding-left: var(--wp--preset--spacing--medium);

			@media (max-width: 768px) {
				padding-left: var(--wp--preset--spacing--small);
			}
		}
	}

	.lc-block-gradient-cta__content {
		z-index: 1;
		padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--large) var(--wp--preset--spacing--medium) 0;

		@media (max-width: 768px) {
			padding-top: 0;
		}
	}

	.lc-block-gradient-cta__title {
		margin: 0 0 var(--wp--preset--spacing--medium) 0;
		color: var(--wp--preset--color--neutral-10);

		@media (max-width: 768px) {
			margin-bottom: var(--wp--preset--spacing--small);
		}
	}

	.lc-block-gradient-cta__text {
		color: var(--wp--preset--color--neutral-10);

		p {
			margin: 0;
		}

		p+p {
			margin-top: var(--wp--preset--spacing--small);
		}
	}

	.lc-block-gradient-cta__button {
		margin-top: var(--wp--preset--spacing--medium);
	}

	.lc-block-gradient-cta__image {
		z-index: 1;
		align-self: flex-start;

		@media (max-width: 768px) {
			text-align: center;
		}
	}

	.lc-block-gradient-cta__img {
		max-width: 400px;
		aspect-ratio: 1/1;
		border-radius: var(--wp--custom--border-radius--small);
		object-fit: cover;

		@media (max-width: 768px) {
			max-width: 100%;
		}
	}
}