/* ===========================================================================
   /servidor/ -- fatos que dao para conferir.
   ---------------------------------------------------------------------------
   Pagina de LEITURA, como /perguntas/: coluna confortavel, nada piscando. O
   numero grande e para o olho achar a medida; a definicao vem logo embaixo e
   NAO e opcional -- numero sem definicao e o que esta pagina existe para evitar.

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

.c-srv__topo { padding-bottom: var(--e-4); }

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

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

.c-srv__h3 {
	margin-bottom: var(--e-1);
	color: var(--ouro-claro);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.c-srv__resposta {
	max-width: 62ch;
	margin-bottom: var(--e-3);
	color: var(--ink);
	font-size: 1.25rem;
	line-height: 1.4;
}

.c-srv__nota {
	max-width: 62ch;
	margin-top: var(--e-2);
	color: var(--ink-3);
	font-size: 0.875rem;
	line-height: 1.6;
}

.c-srv__link {
	color: var(--ouro);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- provas --- */

.c-srv__provas {
	display: grid;
	gap: var(--e-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.c-srv__prova p + p { margin-top: var(--e-1); }

.c-srv__numero {
	color: var(--ink-2);
	font-size: 1rem;
}

.c-srv__numero b {
	color: var(--ouro-claro);
	font-size: 2.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.c-srv__seu {
	margin-top: var(--e-2);
	padding-top: var(--e-2);
	border-top: 1px solid var(--linha);
}

.c-srv__seu b { color: var(--ouro-claro); }

/* --------------------------------------------------------------- numeros --- */

.c-srv__numeros {
	display: grid;
	gap: var(--e-3);
	/* auto-fit e nao 3 colunas fixas: sao cinco cartoes, e a grade se acomoda
	   sozinha de 1 coluna (celular) a 3 (desktop) sem precisar de breakpoint. */
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin-top: var(--e-3);
}

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

.c-srv__num dt {
	color: var(--ink);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* <dd> nasce com margin-inline-start de 40px no navegador. */
.c-srv__num dd { margin: 0; }

.c-srv__valor {
	margin-top: var(--e-1) !important;
	color: var(--ouro-claro);
	font-size: 2.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.c-srv__def {
	margin-top: var(--e-1) !important;
	color: var(--ink-3);
	font-size: 0.875rem;
	line-height: 1.55;
}

/* ----------------------------------------------------------------- listas --- */

.c-srv__links {
	display: grid;
	gap: var(--e-1);
	margin-top: var(--e-3);
}

.c-srv__lista {
	display: grid;
	gap: var(--e-1);
	max-width: 62ch;
	padding-left: 1.25rem;
	color: var(--ink-2);
	list-style: disc;
}

/* ------------------------------------------------------------ responsivo --- */

@media (max-width: 900px) {
	.c-srv__provas { grid-template-columns: 1fr; }
}