/* =============================================================================
   AS LISTAS DO ACERVO, TODAS COM O MESMO DESENHO

   =============================================================================
   O QUE ISTO CONSERTA

   Jogadores, Goleiros, Técnicos, Estádios, Competições e Adversários são a
   mesma coisa: uma grade de cartões com foto, nome e uma linha de apoio. Só
   que cada uma foi escrita numa época diferente, com um prefixo de classe
   próprio — `ac-jog-`, `ac-gol-`, `ac-comp-`, `ac-est`, `ac-adv` — e a folha
   de estilo de cada uma foi digitada de novo, à mão, dentro do PHP.

   O resultado é o que se vê passando de uma página para a outra: em Jogadores
   o nome é preto e o cartão é baixo; em Goleiros o nome é vermelho e o cartão
   tem meio centímetro a mais; em Estádios a fonte é outra. Nada disso foi
   decidido — é o acúmulo de seis cópias que foram divergindo.

   -----------------------------------------------------------------------------
   POR QUE UMA FOLHA, E NÃO REESCREVER OS SEIS

   Cada lista tem o seu carregamento por AJAX, o seu endereço, a sua consulta.
   Reescrever os seis renderizadores para cuspir a mesma marcação seria mexer
   em seis caminhos que hoje funcionam — e o que está errado não é o que eles
   buscam, é como aquilo é pintado.

   Então esta folha traduz os seis prefixos para o MESMO desenho. Ela vem depois
   dos estilos que o PHP escreve na página, e por isso ganha deles.

   O desenho de referência é o da lista de Jogadores, que é a que ele usa mais.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   POR QUE TODO SELETOR COMEÇA COM `body`

   Os estilos que esta folha corrige são escritos DENTRO da página, num
   `<style>` no meio do corpo — e um `<style>` no corpo vem depois de qualquer
   folha do `<head>`. Com o mesmo peso, quem vem por último ganha, e esta folha
   perderia todas as disputas.

   `body` na frente vale um ponto a mais de especificidade. É o suficiente para
   ganhar sem precisar de `!important`, que ganharia de tudo — inclusive do que
   alguém escrever depois, de propósito.
   ----------------------------------------------------------------------------- */
/* ── A GRADE ──────────────────────────────────────────────────────────────
 *
 * Colunas de no mínimo 240px, quantas couberem. Num celular vira uma; num
 * monitor largo, quatro ou cinco — e o cartão nunca fica com 500px de largura
 * para um nome de oito letras.
 */

body .ac-jog-grid,
body .ac-gol-grid,
body .ac-comp-grid,
body .ac-est-grid,
body .ac-adv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	align-items: stretch;
}

/* ── O CARTÃO ─────────────────────────────────────────────────────────── */

body .ac-jog-card,
body .ac-gol-card,
body .ac-comp-card,
body .ac-est-card,
body .ac-adv-card {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--arqc-borda, #e5e8ee);
	border-radius: 14px;
	background: #fff;
	text-decoration: none;
}

body .ac-jog-card:hover,
body .ac-gol-card:hover,
body .ac-comp-card:hover,
body .ac-est-card:hover,
body .ac-adv-card:hover {
	border-color: var(--arqc-borda-forte, #d3d8e2);
}

/* ── O RETRATO ────────────────────────────────────────────────────────── */

body .ac-jog-thumb,
body .ac-gol-thumb,
body .ac-comp-thumb,
body .ac-est-thumb,
body .ac-adv-thumb {
	flex: 0 0 auto;
	width: 44px;
	min-width: 44px;
	height: 44px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--arqc-papel, #f6f7f9);
	display: flex;
	align-items: center;
	justify-content: center;
}

body .ac-jog-thumb img,
body .ac-gol-thumb img,
body .ac-comp-thumb img,
body .ac-est-thumb img,
body .ac-adv-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * A moldura vazia de quem não tem foto. Um degradê de quase nada: ela precisa
 * dizer "aqui caberia um retrato" sem competir com os que têm.
 */

body .ac-jog-ph,
body .ac-gol-ph,
body .ac-comp-ph,
body .ac-est-ph,
body .ac-adv-ph {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02));
}

/* ── O NOME ───────────────────────────────────────────────────────────── */

body .ac-jog-info,
body .ac-gol-meta,
body .ac-comp-meta,
body .ac-est-meta,
body .ac-adv-meta {
	min-width: 0;
	flex: 1 1 auto;
}

/*
 * O NOME EM TINTA NORMAL, e não no vermelho de link.
 *
 * Era vermelho em quatro das seis listas. Numa grade de trinta cartões, trinta
 * nomes vermelhos viram um bloco de cor onde nenhum se distingue — e o cartão
 * inteiro já diz que ali se clica. O vermelho volta no hover, que é quando a
 * pessoa está mirando um.
 *
 * O peso maior existe porque `.ac-wrap a` pinta todo link de vermelho.
 */

body .ac-jog-info a,
body .ac-gol-title,
body .ac-gol-title a,
body .ac-comp-title,
body .ac-comp-title a,
body .ac-est-title,
body .ac-est-title a,
body .ac-adv-title,
body .ac-adv-title a,
body .ac-wrap .ac-jog-info a,
body .ac-wrap .ac-gol-title a,
body .ac-wrap .ac-comp-title a,
body .ac-wrap .ac-est-title a,
body .ac-wrap .ac-adv-title a {
	display: block;
	font-size: var(--ac-corpo);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ac-texto);
	text-decoration: none;
}

body .ac-jog-card:hover .ac-jog-info a,
body .ac-gol-card:hover .ac-gol-title,
body .ac-gol-card:hover .ac-gol-title a,
body .ac-comp-card:hover .ac-comp-title,
body .ac-comp-card:hover .ac-comp-title a,
body .ac-est-card:hover .ac-est-title,
body .ac-est-card:hover .ac-est-title a,
body .ac-adv-card:hover .ac-adv-title,
body .ac-adv-card:hover .ac-adv-title a {
	color: var(--ac-marca);
}

/* ── A LINHA DE APOIO ─────────────────────────────────────────────────── */

body .ac-jog-sub,
body .ac-gol-sub,
body .ac-comp-sub,
body .ac-est-sub,
body .ac-adv-sub {
	margin-top: 1px;
	font-size: var(--ac-mini);
	line-height: 1.3;
	color: var(--ac-texto-fraco);
	opacity: 1;
}

/* ── A BARRA DAS LETRAS ───────────────────────────────────────────────── */

body .ac-az-filter,
body .ac-azbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 14px 0 18px;
}

body .ac-az-btn,
body .ac-azbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--arqc-borda-forte, #d3d8e2);
	border-radius: 999px;
	background: #fff;
	color: var(--ac-texto-fraco);
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	font-size: var(--ac-apoio);
	font-weight: 700;
	line-height: 1;
}

body .ac-az-btn:hover,
body .ac-azbtn:hover {
	border-color: var(--ac-marca);
	color: var(--ac-texto);
}

/*
 * O ESCOLHIDO É PREENCHIDO, e não só mais escuro.
 *
 * A marca de "ativo" era um contorno um pouco mais forte — numa fileira de
 * vinte e sete bolinhas iguais, ninguém acha qual está escolhida. Preenchido
 * no vermelho do clube, acha-se de longe.
 */

body .ac-az-btn.is-active,
body .ac-azbtn.is-active,
body .ac-az-btn.is-ativa,
body .ac-azbtn.is-ativa {
	background: var(--ac-marca);
	border-color: var(--ac-marca);
	color: var(--ac-texto-claro);
}

body .ac-jog-empty,
body .ac-gol-empty,
body .ac-comp-empty,
body .ac-est-empty,
body .ac-adv-empty {
	padding: 14px 0;
	font-size: var(--ac-apoio);
	color: var(--ac-texto-fraco);
	opacity: 1;
}

/* =============================================================================
   O FILTRO DE PAÍS E ESTADO

   Uma segunda fileira, abaixo das letras. As bandeiras vêm da fonte do
   sistema — não há imagem a baixar nem folha de ícones para uma coisa que são
   dois caracteres.
   ============================================================================= */

body .ac-locais {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}

/* A fileira dos estados vem colada na dos países: são a mesma pergunta. */
body .ac-locais--ufs {
	margin-top: -8px;
	padding-left: 2px;
}

body .ac-local {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--arqc-borda-forte, #d3d8e2);
	border-radius: 999px;
	background: #fff;
	color: var(--ac-texto-fraco);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--ac-apoio);
	font-weight: 700;
	line-height: 1;
}

body .ac-local:hover {
	border-color: var(--ac-marca);
	color: var(--ac-texto);
}

body .ac-local.is-active {
	background: var(--ac-marca);
	border-color: var(--ac-marca);
	color: var(--ac-texto-claro);
}

/* A bandeira um degrau acima do texto: em 14px ela vira um borrão colorido. */
body .ac-local__bandeira {
	font-size: var(--ac-destaque);
	line-height: 1;
}

/*
 * No celular fica só a bandeira: "Estados Unidos" ao lado de sete outras
 * legendas seria uma fileira de três linhas antes de chegar à lista. O nome
 * continua no `title` e no leitor de tela.
 */
@media (max-width: 620px) {
	body .ac-local__nome {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}

	body .ac-local {
		padding: 0 10px;
	}
}

/*
 * O RÓTULO DE POSIÇÃO NO ELENCO — o mesmo do Top 10.
 *
 * Ele vinha com o peso escrito no atributo `style` do próprio elemento, o que
 * o deixava fora de qualquer folha: mudá-lo exigia abrir o molde. Aqui ele
 * fica junto do resto e passa a combinar com `.ac-pessoa__posicao`, que diz a
 * mesma coisa duas seções abaixo.
 */
body .ac-grupo-pos {
	margin-bottom: 8px;
	font-size: var(--ac-mini);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ac-texto-fraco);
}
