/* =============================================================================
   COLABORAÇÃO

   Duas coisas: o pé do artigo, com quem ajudou a escrevê-lo, e a página do
   ranking. As duas usam os mesmos tokens do resto do acervo — quem colabora
   aparece do mesmo jeito que um jogador aparece numa lista.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   O PÉ DO ARTIGO

   Separado do texto por uma linha e um respiro grande: o artigo acabou, e o
   que vem depois é sobre quem o fez. Sem essa separação o bloco parece mais
   um parágrafo, e os nomes viram parte da matéria.
   ----------------------------------------------------------------------------- */

.ac-creditos {
	margin: 40px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--arqc-borda, #e5e8ee);
	font-family: var(--ac-fonte);
}

.ac-creditos__titulo {
	margin: 0 0 14px;
	font-size: var(--ac-mini);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ac-texto-fraco);
}

/*
 * Em linha, e não empilhados: são poucos nomes, e lado a lado eles se leem
 * como uma ficha técnica — que é o que são.
 */
.ac-creditos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.ac-creditos__pessoa {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.ac-creditos__foto {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
}

.ac-creditos__foto img,
.ac-creditos__foto .ac-iniciais {
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	font-size: var(--ac-apoio);
}

.ac-creditos__nome {
	font-size: var(--ac-apoio);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ac-texto);
}

/* -----------------------------------------------------------------------------
   A PÁGINA DE COLABORADORES
   ----------------------------------------------------------------------------- */

/*
 * O número da posição antes da foto.
 *
 * Largura fixa e números tabulares para que a coluna de fotos não ande para
 * o lado quando a lista passa de 9 para 10.
 */
.ac-colab__posicao {
	flex: 0 0 auto;
	width: 26px;
	text-align: right;
	font-size: var(--ac-apoio);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ac-texto-fraco);
}

/*
 * O nome do colaborador não é link — não há página dele. A regra existe
 * porque a da lista de pessoas mira `a.ac-pessoa__nome`, e sem esta o nome
 * cairia no tamanho de texto comum ao lado de um retrato de 40px.
 */
.ac-colab-pagina .ac-pessoa__nome {
	display: block;
	font-size: var(--ac-corpo);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ac-texto);
}

/* "colaborou com 10 times, 25 jogadores, 18 jogos" */
.ac-colab__frase {
	display: block;
	margin-top: 1px;
	font-size: var(--ac-mini);
	line-height: 1.4;
	color: var(--ac-texto-fraco);
}

/*
 * O total à direita, com o rótulo embaixo — sozinho, um número solto no fim
 * da linha não diz do que é.
 */
.ac-colab-pagina .ac-pessoa__valor {
	font-size: var(--ac-destaque);
	color: var(--ac-marca);
}

@media (max-width: 480px) {
	.ac-colab__posicao {
		width: 20px;
	}

	.ac-creditos__lista {
		gap: 10px 16px;
	}
}

/*
 * A nota que abre a página de colaboradores. Largura de leitura: um parágrafo
 * de três linhas atravessando 1100px é o tipo de texto que se pula.
 */
.ac-colab-pagina__nota {
	max-width: 62ch;
	margin: 0 0 20px;
	font-size: var(--ac-corpo);
	line-height: 1.55;
	color: var(--ac-texto-fraco);
}