/* DVT Challenges – Bloco "DVT-cta-shape"
 *
 * Irmão simples do dvt-cta-image-block.css: a mesma máscara orgânica
 * (mask-1.svg/mask-2.svg, vivem em ../images/ tal como no cta-image), mas
 * sem imagem — a máscara aplica-se diretamente a este contentor com
 * background-color, e o texto (etiqueta + corpo) vive dentro da própria
 * forma, centrado nos dois eixos. Não há caption sobreposta nem ícone.
 *
 * A largura vem sempre inline (style="width:…"), calculada em PHP a partir
 * do campo "Altura máxima" + rácio fixo da máscara escolhida — mesma
 * técnica do cta-image.
 */

.dvt-cta-shape {
	position: relative;
	display: block;
	width: 320px;
	max-width: 100%;
}

/* flex+centrado aqui em vez de position:absolute no texto: ao contrário do
 * cta-image (uma única caption perto do fundo), aqui o texto pode ser
 * curto ou longo e deve ficar sempre centrado na forma, não preso a um
 * canto. */
.dvt-cta-shape__shape {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-decoration: none;
}

.dvt-cta-shape__shape--mask-1 {
	aspect-ratio: 470 / 486;
	-webkit-mask-image: url(../images/mask-1.svg);
	mask-image: url(../images/mask-1.svg);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.dvt-cta-shape__shape--mask-2 {
	aspect-ratio: 486 / 470;
	-webkit-mask-image: url(../images/mask-2.svg);
	mask-image: url(../images/mask-2.svg);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* 70% e não 100%: a máscara é orgânica, não um retângulo — texto a
 * ocupar a largura toda tocaria nos pontos mais estreitos da forma. */
.dvt-cta-shape__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 70%;
	text-align: center;
}

.dvt-cta-shape__eyebrow {
	font-family: 'GoodDogNewW00-Regular', sans-serif;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 1.4;
}

.dvt-cta-shape__body {
	margin: 0;
	font-family: 'GoodDogNewW00-Regular', sans-serif;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 1.4;
}