/* ===========================================================================
   /perguntas/ -- pergunta e resposta em texto corrido.
   ---------------------------------------------------------------------------
   Pagina de LEITURA, nao de venda: coluna estreita, pergunta em destaque,
   resposta em corpo confortavel. Nada de animacao de entrada aqui -- quem cai
   nesta pagina veio com uma pergunta e quer a resposta na primeira tela.

   Tokens e .faixa/.envelope/.olho/.titulo-secao vem do css/base.css.
   Breakpoints: SOMENTE os da escada declarada no base.css.
   =========================================================================== */

.c-perg__topo {
	/* Menos ar embaixo que o padrao do .faixa: o titulo e a introducao sao um
	   bloco so, e a lista tem de aparecer sem rolar. */
	padding-bottom: var(--e-4);
}

.c-perg__intro {
	max-width: 62ch;
	margin-top: var(--e-3);
	color: var(--ink-2);
	font-size: 1.0625rem;
}

.c-perg__h2 {
	margin-bottom: var(--e-3);
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

/* --------------------------------------------------------------- a lista --- */

.c-perg__lista {
	display: grid;
	gap: var(--e-3);
	/* Duas colunas no desktop. Com UMA coluna de 1200px a linha passa de
	   150 caracteres e o olho perde o inicio da linha seguinte. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-perg__par {
	padding: var(--e-3);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--surface);
}

.c-perg__q {
	margin: 0 0 var(--e-1);
	color: var(--ouro-claro);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	/* scroll-margin, e nao margin: cada pergunta tem id (#p1, #p2...) para
	   ser linkada de fora -- do Discord, de uma resposta de suporte ou de uma
	   citacao de assistente. Sem isto o cabecalho fixo cobre a pergunta
	   exatamente quando ela acabou de ser apontada. */
	scroll-margin-top: 80px;
}

.c-perg__a {
	/* <dd> nasce com margin-inline-start de 40px no navegador. */
	margin: 0;
	max-width: 62ch;
	color: var(--ink-2);
}

/* ----------------------------------------------------------- fechamento --- */

.c-perg__fimGrade {
	display: grid;
	gap: var(--e-5);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.c-perg__links {
	display: grid;
	gap: var(--e-1);
}

.c-perg__link {
	display: inline-block;
	padding: 2px 0;
	color: var(--ink-2);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.c-perg__link:hover,
.c-perg__link:focus-visible {
	color: var(--ouro-claro);
	border-bottom-color: var(--ouro-escuro);
}

/* ---------------------------------------------------------------- 900 --- */

@media (max-width: 900px) {
	.c-perg__lista,
	.c-perg__fimGrade {
		grid-template-columns: minmax(0, 1fr);
	}

	.c-perg__fimGrade { gap: var(--e-4); }
}