/* ==========================================================================
   SECAO "QUANTHAS E IDEAL PARA VOCE QUE:"
   Titulo em degrade a esquerda e quatro itens numerados sobre a ilustracao
   de ovais da marca.
   ========================================================================== */

.secao-ideal {
	/* ------------------------------------------------------------------
	   Calibragem da ilustracao
	   As ovais tem larguras desiguais (crescem para a direita, como no
	   logotipo), enquanto os itens ficam em colunas iguais — nao existe
	   encaixe matematico exato. Estes tres valores servem para alinhar
	   no olho, direto no DevTools:

	   --ilustracao-largura  -> tamanho em relacao ao bloco de itens
	   --ilustracao-desloca-x-> negativo move para a esquerda
	   --ilustracao-desloca-y-> negativo move para cima
	   ------------------------------------------------------------------ */
	--ilustracao-largura: 112%;
	--ilustracao-desloca-x: 0px;
	--ilustracao-desloca-y: 0px;

	/* Degrades da marca */
	--degrade-titulo: linear-gradient(160deg, var(--cor-verde) 0%, var(--cor-teal) 100%);
	--degrade-numero: linear-gradient(180deg, var(--cor-lima) 0%, var(--cor-verde) 100%);

	/* Mesma cor do fundo da ilustracao: assim as bordas do arquivo somem
	   e as ovais aparecem apenas como relevo. */
	background-color: var(--cor-superficie);
	/* Respiro entre a ilustracao e as bordas da secao */
	padding-block: clamp(3rem, 6vw, 5.5rem);
	overflow: hidden;
}

.secao-ideal__container {
	width: 100%;
	max-width: var(--largura-maxima);
	margin-inline: auto;
	padding-inline: var(--respiro-secao);
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

/* --------------------------------------------------------------------------
   Titulo em degrade
   -------------------------------------------------------------------------- */

.secao-ideal__titulo {
	font-size: var(--titulo-secao);
	font-weight: var(--peso-bold);
	line-height: var(--titulo-secao-altura);
	letter-spacing: var(--titulo-secao-tracking);

	/* O degrade e pintado no fundo e recortado pela forma das letras */
	background-image: var(--degrade-titulo);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* --------------------------------------------------------------------------
   Ilustracao de fundo
   -------------------------------------------------------------------------- */

/* Ilustracao e itens ocupam a MESMA celula do grid, um sobre o outro.
   Diferente de position: absolute, aqui o painel assume a altura da
   ilustracao — entao a secao cresce junto e o padding-block garante que
   as ovais nunca encostem nas bordas de cima e de baixo. */
.secao-ideal__painel {
	display: grid;
	grid-template-areas: "pilha";
	align-items: center;
	justify-items: center;
}

.secao-ideal__ilustracao,
.secao-ideal__itens {
	grid-area: pilha;
}

/* A ilustracao sangra ate a borda direita da tela: ela e alinhada a direita
   da celula e deslocada pelo mesmo valor do recuo da secao, anulando-o. O
   overflow: hidden da secao apara o que passa da viewport. */
.secao-ideal__ilustracao {
	z-index: 0;
	justify-self: end;
	width: var(--ilustracao-largura);
	max-width: none;
	height: auto;
	transform: translate(calc(var(--respiro-secao) + var(--ilustracao-desloca-x)),
			var(--ilustracao-desloca-y));
	/* O arquivo foi tratado para conter apenas o contorno: o miolo e
	   transparente, entao o interior das ovais mostra o proprio fundo da
	   secao — acompanha --cor-superficie sem nenhum ajuste. */
	pointer-events: none;
	user-select: none;
}

/* --------------------------------------------------------------------------
   Itens numerados
   -------------------------------------------------------------------------- */

.secao-ideal__itens {
	z-index: 1;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2.25rem);
	align-items: start;
}

.secao-ideal__item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.secao-ideal__numero {
	font-family: var(--fonte-numeros);
	font-size: clamp(1.75rem, 2.2vw + 0.5rem, 2.5rem);
	font-weight: var(--peso-medio);
	line-height: 1;
	font-variant-numeric: tabular-nums;

	background-image: var(--degrade-numero);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.secao-ideal__texto {
	color: var(--cor-texto);
	font-size: clamp(0.75rem, 0.3vw + 0.6875rem, 0.875rem);
	line-height: 1.55;
	max-width: 12rem;
}

/* --------------------------------------------------------------------------
   Fallback de contraste
   No modo de alto contraste do Windows o degrade e descartado e o texto
   ficaria invisivel, ja que a cor e transparente.
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {

	.secao-ideal__titulo,
	.secao-ideal__numero {
		background-image: none;
		color: CanvasText;
	}
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.secao-ideal__titulo {
		color: var(--cor-teal);
	}

	.secao-ideal__numero {
		color: var(--cor-verde);
	}
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1024px) {
	.secao-ideal__container {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 5vw, 3rem);
	}

	.secao-ideal {
		--ilustracao-largura: 130%;
	}
}

/* --------------------------------------------------------------------------
   Celular

   Os itens descem em zigue-zague: um a esquerda, o proximo a direita, com
   os pares subindo para o numero encaixar na altura da ultima linha do
   texto ao lado. O titulo fica alinhado a direita.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
	.secao-ideal__container {
		gap: clamp(2rem, 8vw, 3rem);
	}

	.secao-ideal__titulo {
		max-width: 100%;
		text-align: right;
	}

	/* O zigue-zague ocupa duas posicoes; limitar a largura do bloco e
	   centraliza-lo evita que o conjunto fique encostado na esquerda. */
	.secao-ideal__itens {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.5rem, 5vw, 2.25rem);
		width: 100%;
		max-width: 17rem;
		margin-inline: auto;
	}

	/* Blocos estreitos: o texto quebra em quatro linhas curtas em vez de
	   atravessar a tela. */
	.secao-ideal__item {
		max-width: 7.5rem;
		gap: 0.875rem;
	}

	.secao-ideal__numero {
		font-size: 3.25rem;
	}

	/* Os pares vao para a direita e sobem, encaixando entre as linhas do
	   item anterior. */
	.secao-ideal__item:nth-child(even) {
		margin-left: auto;
		margin-top: -5.25rem;
	}

	.secao-ideal__texto {
		max-width: 94%;
		font-size: 0.8125rem;
		line-height: 1.4;
	}

	/* A ilustracao acompanha os itens em desktop; empilhados, ela perde
	   essa relacao e passa a ser so textura de fundo. */
	.secao-ideal__ilustracao {
		opacity: 0.45;
	}
}