/* DVT Users & Challenges Addon – Next Challenge block
 *
 * Valores retirados do Figma "Agros Play Proposal", página "Flows v2",
 * node 620:6348 (card) dentro de 620:6346 ("Próximo desafio" da Homepage)
 * — ver memória figma-flows-v2-homepage. Mesma fonte de marca
 * (GoodDogNewW00-Regular) no badge e no título, só o tamanho muda.
 */

@font-face {
	font-family: 'GoodDogNewW00-Regular';
	src: url( '../fonts/GoodDogNewW00-Regular.ttf' ) format( 'truetype' );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.dvtuca-next-challenge {
	width: 100%;
}

.dvtuca-next-challenge__card {
	container-type: inline-size;
	position: relative;
	width: 100%;
	aspect-ratio: 1217 / 617;
}

.dvtuca-next-challenge__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 40px;
	background: #222627;
}

.dvtuca-next-challenge__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dvtuca-next-challenge__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient( to right, rgba( 0, 0, 0, 0.6 ), rgba( 0, 0, 0, 0 ) );
}

.dvtuca-next-challenge__blob {
	position: absolute;
	display: block;
	pointer-events: none;
}

/* Posições em % (não px) para acompanharem sempre o tamanho real do card
 * — em px fixos, o mesmo deslocamento fica desproporcionalmente grande
 * assim que o card é mais estreito (colunas Spectra, mobile), e a mancha
 * parece "flutuar" solta em vez de sobrepor o canto do card. */
.dvtuca-next-challenge__blob--left {
	top: 30%;
	left: -1.5%;
	width: 6%;
	height: auto;
}

.dvtuca-next-challenge__blob--right {
	bottom: 20%;
	right: -5%;
	width: 10%;
	height: auto;
	transform: scaleX(-1);
}

.dvtuca-next-challenge__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 25px;
	padding: 40px clamp( 24px, 8.6%, 105px ) 48px;
	box-sizing: border-box;
}

.dvtuca-next-challenge__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 2px 12px 2px 4px;
	border-radius: 40px;
	background: #000000;
}

.dvtuca-next-challenge__timer-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.dvtuca-next-challenge__content .dvtuca-next-challenge__badge span {
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	text-transform: uppercase;
	color: #ffffff !important; /* card é sempre uma foto escurecida por gradiente — texto tem de ficar sempre branco, nunca herdar cor de tema/Spectra à volta. */
	white-space: nowrap;
}

.dvtuca-next-challenge__content .dvtuca-next-challenge__title {
	margin: 0;
	width: 100%; /* align-items:flex-start no flex column deixa o <p> crescer até ao seu content-width e ignorar o wrap sem isto. */
	max-width: 754px;
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif;
	/* cqw (não vw!) — tem de ser relativo à largura real do card, não do
	 * viewport, senão fica enorme sempre que o bloco é usado numa coluna
	 * mais estreita que o ecrã (ex: Spectra a 2 colunas), estoura a caixa
	 * e o texto deixa de fazer wrap dentro do card. */
	font-size: clamp( 20px, 4.9cqw, 60px );
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	overflow-wrap: break-word;
	color: #ffffff !important; /* idem — ver comentário acima. */
}

@media ( max-width: 600px ) {
	.dvtuca-next-challenge__card {
		aspect-ratio: 3 / 4;
	}

	.dvtuca-next-challenge__content {
		padding: 24px 24px 32px;
		gap: 16px;
	}
}