/* ==========================================================================
   SECAO DE DUVIDAS FREQUENTES
   Titulo em degrade a esquerda e a lista de perguntas em acordeao.
   ========================================================================== */

.secao-duvidas {
	/* Cor da pergunta aberta ou sob o cursor. O vermelho do layout era
	   marcacao de revisao; a interacao usa o verde da marca. */
	--duvida-cor-ativa: var(--cor-verde);
	/* Altura da faixa da divisoria — o arquivo tem 3px */
	--duvida-linha-altura: 3px;
	--degrade-duvidas: linear-gradient(120deg, var(--cor-teal) 0%, var(--cor-verde) 55%, var(--cor-lima) 100%);
	--duvida-duracao: 320ms;

	background-color: var(--cor-fundo);
	padding-block: clamp(5rem, 10.5vw, 9.5rem);
}

.secao-duvidas__container {
	width: 100%;
	max-width: var(--largura-maxima);
	margin-inline: auto;
	padding-inline: var(--respiro-secao);
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
	/* O titulo acompanha o centro do acordeao */
	align-items: center;
	gap: clamp(2rem, 6vw, 5rem);
}

/* --------------------------------------------------------------------------
   Titulo
   -------------------------------------------------------------------------- */

.secao-duvidas__titulo {
	font-size: var(--titulo-secao);
	font-weight: var(--peso-bold);
	line-height: var(--titulo-secao-altura);
	letter-spacing: var(--titulo-secao-tracking);
	max-width: 12ch;

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

/* --------------------------------------------------------------------------
   Lista
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Divisorias — arte do layout, com os pontos nas extremidades
   -------------------------------------------------------------------------- */

.secao-duvidas__lista {
	--linha-pontilhada: url("../img/linha-secao-duvidas.svg") no-repeat center / 100% var(--duvida-linha-altura);

	position: relative;
	/* Largura nativa da arte da divisoria: assim o texto acompanha a linha,
	   em vez de a linha ter que se esticar ate o texto. */
	width: 100%;
	max-width: 731px;
}

/* Linha que fecha o topo da lista */
.secao-duvidas__lista::before {
	content: "";
	position: absolute;
	inset: calc(var(--duvida-linha-altura) / -2) 0 auto 0;
	height: var(--duvida-linha-altura);
	background: var(--linha-pontilhada);
	pointer-events: none;
}

.duvida {
	position: relative;
}

/* Linha abaixo de cada pergunta */
.duvida::after {
	content: "";
	position: absolute;
	inset: auto 0 calc(var(--duvida-linha-altura) / -2) 0;
	height: var(--duvida-linha-altura);
	background: var(--linha-pontilhada);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Pergunta
   -------------------------------------------------------------------------- */

.duvida__pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: clamp(0.875rem, 1.6vw, 1.125rem);
	cursor: pointer;
	list-style: none;
	color: var(--cor-texto);
	font-size: clamp(0.8125rem, 0.3vw + 0.75rem, 0.9375rem);
	line-height: 1.4;
	transition: color var(--transicao-rapida);
}

/* Remove o marcador padrao do <summary> nos dois motores */
.duvida__pergunta::-webkit-details-marker {
	display: none;
}

.duvida__pergunta::marker {
	content: "";
}

.duvida__pergunta:hover,
.duvida[open] > .duvida__pergunta {
	color: var(--duvida-cor-ativa);
}

.duvida__pergunta:focus-visible {
	outline: 2px solid var(--cor-foco);
	outline-offset: 2px;
}

.duvida__seta {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--cor-cinza);
	transition:
		transform var(--duvida-duracao) ease,
		color var(--transicao-rapida);
}

.duvida[open] .duvida__seta {
	transform: rotate(180deg);
	color: var(--duvida-cor-ativa);
}

/* --------------------------------------------------------------------------
   Resposta

   A altura e animada por grid-template-rows de 0fr para 1fr. E o unico jeito
   de fazer uma transicao suave sem saber a altura do conteudo de antemao —
   height: auto nao e animavel.
   -------------------------------------------------------------------------- */

.duvida__caixa {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--duvida-duracao) ease;
}

.duvida[open] .duvida__caixa {
	grid-template-rows: 1fr;
}

/* Enquanto o JS anima o fechamento, o atributo open ainda esta presente */
.duvida.esta-fechando .duvida__caixa {
	grid-template-rows: 0fr;
}

.duvida__resposta {
	overflow: hidden;
	color: var(--cor-texto-suave);
	font-size: clamp(0.75rem, 0.3vw + 0.6875rem, 0.875rem);
	line-height: 1.65;
}

.duvida__resposta > p {
	margin: 0;
	padding-bottom: clamp(0.875rem, 1.6vw, 1.25rem);
}

.duvida__resposta > p + p {
	padding-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Fallbacks
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
	.secao-duvidas__titulo {
		background-image: none;
		color: CanvasText;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.duvida__caixa,
	.duvida__seta {
		transition: none;
	}
}

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

@media (max-width: 860px) {
	.secao-duvidas__container {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.75rem, 4vw, 2.5rem);
	}

	.secao-duvidas__titulo {
		max-width: 100%;
	}
}