/* DVT Users & Challenges Addon – Challenge Hero block
 *
 * Valores retirados do Figma "Agros Play Proposal", página "Flows v2" — ver
 * memória figma-flows-v2-homepage. Duas composições: node 524:9957
 * ("Heading", dentro de "Homepage_com Login") e node 620:6508 ("Content",
 * dentro de "Homepage_sem Login", com o cartão .dvtuca-challenge-hero__card
 * mais abaixo neste ficheiro). Espera-se que este bloco seja colocado sobre
 * uma secção com fundo escuro/foto (o texto é sempre branco), tal como no
 * design — o fundo em si é conteúdo de página à volta do bloco, não faz
 * parte dele (mesma decisão já tomada em next-challenge-block.css).
 */

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

.dvtuca-challenge-hero {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	max-width: 613px;
}

.dvtuca-challenge-hero__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.dvtuca-challenge-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif;
	text-transform: uppercase;
	white-space: nowrap;
}

.dvtuca-challenge-hero__badge--label {
	padding: 2px 12px;
	border-radius: 8px;
	background: #380077;
	color: #ffffff;
	font-size: 20px;
	line-height: 32px;
	filter: drop-shadow( 0 0 6px rgba( 5, 165, 100, 0.4 ) );
}

.dvtuca-challenge-hero__badge--timer {
	padding: 2px 12px 2px 4px;
	border-radius: 40px;
	background: #eea617;
	color: #000000;
	font-size: 16px;
	line-height: 28px;
}

.dvtuca-challenge-hero__badge--timer .dvtuca-next-challenge__timer-icon {
	width: 24px;
	height: 24px;
}

/* .entry-content p do tema (mais específico, por ser "p" dentro de
 * ".entry-content", com uma variante ainda dentro de media query que pisa
 * mais propriedades a partir de certos breakpoints) força font-family,
 * font-size, font-weight, line-height e cor escura — este hero espera
 * sempre ficar sobre fundo escuro/foto, com a tipografia da marca. Mesma
 * decisão do color !important já usado em next-challenge-block.css,
 * alargada aqui às restantes propriedades que colidem. */
.dvtuca-challenge-hero__title {
	margin: 0;
	width: 100%;
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif !important;
	/* cqw (não vw) — relativo à largura real do bloco, não do viewport,
	 * senão o título estoura a caixa sempre que o bloco vive numa coluna
	 * mais estreita que o ecrã (ex: Spectra a 2 colunas). Mesma técnica de
	 * next-challenge-block.css. */
	font-size: clamp( 32px, 11cqw, 80px ) !important;
	font-weight: 400 !important;
	line-height: 1.125 !important;
	text-transform: uppercase;
	overflow-wrap: break-word;
	color: #ffffff !important;
}

/* "Meta Black" é a mesma fonte de marca já carregada globalmente pelo tema
 * (app.css, --font-brand) — é também a que o .entry-content p do tema já
 * usa por defeito, por isso font-family/size/weight/line-height já
 * coincidem com o Figma; só a cor (branco em vez de preto) precisa de
 * !important. */
.dvtuca-challenge-hero__description {
	margin: 0;
	max-width: 486px;
	font-family: 'Meta Black', ui-sans-serif, system-ui, sans-serif !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 32px !important;
	color: #ffffff !important;
}

/* Cartão do desafio sem sessão (node 620:6508) — mais pequeno e translúcido,
 * sobreposto à headline de marketing em vez de a substituir. */
.dvtuca-challenge-hero__card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 16px 12px 24px;
	border-radius: 24px;
	background: rgba( 0, 0, 0, 0.5 );
}

.dvtuca-challenge-hero__card-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 400px;
}

.dvtuca-challenge-hero__card-badges {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.dvtuca-challenge-hero__card-label {
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif;
	font-size: 20px;
	line-height: 32px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #eea617;
}

.dvtuca-challenge-hero__card-title {
	margin: 0;
	width: 100%;
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif !important;
	font-size: 27px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	text-transform: uppercase;
	overflow-wrap: break-word;
	color: #ffffff !important;
}

.dvtuca-challenge-hero__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 18px 26px;
	border: 2px solid transparent;
	border-radius: 40px;
	background: #008851;
	box-shadow: 0 10px 10px rgba( 0, 136, 81, 0.3 );
	font-family: 'GoodDogNewW00-Regular', 'Comic Sans MS', ui-rounded, sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 36px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 2px 0 rgba( 0, 0, 0, 0.15 );
	text-transform: uppercase;
	color: #ffffff;
	box-sizing: border-box;
}

.dvtuca-challenge-hero__button:hover,
.dvtuca-challenge-hero__button:focus {
	color: #ffffff;
	opacity: 0.9;
}

@media ( max-width: 600px ) {
	.dvtuca-challenge-hero {
		gap: 16px;
	}

	/* Em mobile o título ocupa sempre as três linhas todas e o 1.125 do
	 * desktop deixava-as coladas. O !important é preciso pela mesma razão da
	 * regra base: o .entry-content p do tema impõe line-height próprio (28px,
	 * e 32px acima de certo breakpoint). */
	.dvtuca-challenge-hero__title {
		line-height: 1.3 !important;
	}

	/* Sem sessão, o cartão é uma linha horizontal que nunca quebra: só o
	 * .dvtuca-challenge-hero__card-info pede 400px e, com o botão ao lado,
	 * empurrava o hero para lá dos 570px — num ecrã de 390px arrastava o
	 * título e a descrição para fora da secção, e o botão Participar ficava
	 * fora do ecrã. Em mobile fica só o botão, como já acontecia na
	 * composição com sessão iniciada. */
	.dvtuca-challenge-hero__card {
		padding: 0;
		gap: 0;
		background: none;
		/* O hero é uma coluna com align-items:flex-start, por isso os filhos
		 * encolhem até ao conteúdo — sem este 100% o cartão não tinha
		 * largura para dar ao botão lá dentro. */
		width: 100%;
	}

	.dvtuca-challenge-hero__card-info {
		display: none;
	}

	.dvtuca-challenge-hero__button {
		width: 100%;
		height: 52px;
		padding: 12px 22px;
		font-size: 20px;
	}
}