/*
 * Bloco CTA.
 *
 * Layout dividido: painel de texto à esquerda sobre fundo bege da marca,
 * imagem em sangria à direita, com uma transição suave e irregular entre
 * os dois lados (efeito de "rasgo") feita com um mask-image em SVG.
 */

.te-cta {
	--te-cta-panel-bg: var( --e-global-color-40b2187, #f6f3f0 );
	--te-cta-title-color: var( --e-global-color-primary, #5b4f3f );
	--te-cta-body-color: #7a7164;
	--te-cta-button-bg: var( --e-global-color-primary, #5b4f3f );
	--te-cta-button-bg-hover: #423829;
	--te-cta-button-color: #fff;

	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.te-cta__panel {
	background: var( --te-cta-panel-bg );
	display: flex;
	align-items: center;
	order: 1;
}

.te-cta__panel-inner {
	padding: 48px 24px;
	max-width: 480px;
}

.te-cta__title {
	margin: 0 0 16px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --te-cta-title-color );
}

.te-cta__description {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.6;
	color: var( --te-cta-body-color );
}

.te-cta__button {
	display: inline-block;
	background: var( --te-cta-button-bg );
	color: var( --te-cta-button-color );
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 18px 32px;
	transition: background-color 0.2s ease;
}

.te-cta__button:hover,
.te-cta__button:focus-visible {
	background: var( --te-cta-button-bg-hover );
	color: var( --te-cta-button-color );
}

.te-cta__media {
	position: relative;
	order: 2;
	min-height: 260px;
}

.te-cta__img,
.te-cta__media-inner {
	display: block;
	width: 100%;
	height: 100%;
}

.te-cta__img {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Transição irregular entre o painel bege e a foto, só faz sentido lado a lado. */
.te-cta__seam {
	display: none;
}

@media ( min-width: 782px ) {
	.te-cta {
		flex-direction: row;
		align-items: stretch;
	}

	.te-cta__panel {
		order: 0;
		flex: 0 0 42%;
		max-width: 42%;
	}

	.te-cta__panel-inner {
		padding: 32px;
	}

	.te-cta__title {
		font-size: 34px;
	}

	.te-cta__media {
		flex: 1;
		min-height: 480px;
	}

	.te-cta__seam {
		display: block;
		position: absolute;
		inset: 0 auto 0 0;
		width: min( 14vw, 170px );
		background: linear-gradient(
			90deg,
			var( --te-cta-panel-bg ) 0%,
			var( --te-cta-panel-bg ) 40%,
			transparent 100%
		);
		-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 800' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H70 L95,45 L60,95 L100,150 L65,205 L110,260 L70,320 L100,380 L60,430 L90,480 L55,530 L105,585 L65,640 L95,700 L60,750 L80,800 H0 Z' fill='white'/%3E%3C/svg%3E" );
		mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 800' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H70 L95,45 L60,95 L100,150 L65,205 L110,260 L70,320 L100,380 L60,430 L90,480 L55,530 L105,585 L65,640 L95,700 L60,750 L80,800 H0 Z' fill='white'/%3E%3C/svg%3E" );
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		mask-mode: alpha;
		pointer-events: none;
	}
}

@media ( min-width: 1200px ) {
	.te-cta__panel-inner {
		padding-left: 32px;
	}

	.te-cta__title {
		font-size: 40px;
	}
}

/* Suporte ao alinhamento "full"/"wide" do editor: a imagem some sangria, o texto mantém respiro. */
.te-cta.alignfull .te-cta__panel-inner,
.te-cta.alignwide .te-cta__panel-inner {
	padding-left: max( 64px, env( safe-area-inset-left ) );
}