/* =============================================================================
   O RETROSPECTO — o bloco de estatísticas que aparece em todo o acervo.

   QUATRO QUADRADOS, UMA BARRA E UM FILTRO

   Em cima, os quatro números que não têm proporção para mostrar: jogos, gols
   pró, gols contra e saldo.

   Embaixo, a barra — vitórias, empates e derrotas SÃO ela, com o número e a
   porcentagem escritos dentro do pedaço. Foi o que tirou os três quadrados
   coloridos de cima: era o mesmo dado dito duas vezes na mesma tela.

   E no fim, o aproveitamento.

   O que havia antes era a tabelinha "J V E D GP GC" espremida num canto, a
   barra colorida repetindo os mesmos três números e a legenda da barra
   repetindo pela terceira vez — três blocos dizendo a mesma coisa, e nenhum
   deles se lendo bem.

   As medidas saem da escala do tema e as cores, das tintas de resultado.
   Nada de hexadecimal solto aqui dentro.
   ============================================================================= */

.ac-retro {
	margin: 12px 0 2px;
}

.ac-retro__titulo {
	margin: 0 0 12px;
	font-size: var(--ac-titulo3);
	color: var(--ac-texto);
}

/* ── O FILTRO ─────────────────────────────────────────────────────────────
 *
 * Todos / Em casa / Fora. Ele nasce escondido no HTML e é o JavaScript que o
 * mostra: sem script, ninguém vê três botões que não fazem nada — vê o
 * retrospecto completo, que é o que interessa.
 */

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

/*
 * `display:flex` acima ganha do `[hidden]` que o navegador aplica sozinho — e
 * sem esta linha o filtro apareceria mesmo sem JavaScript, com três botões
 * que não fazem nada. Vale para o painel escondido pelo mesmo motivo.
 */
.ac-retro__filtro[hidden],
.ac-retro__painel[hidden] {
	display: none;
}

.ac-filtro {
	appearance: none;
	padding: 6px 14px;
	border: 1px solid var(--arqc-borda-forte, #d3d8e2);
	border-radius: 999px;
	background: transparent;
	color: var(--ac-texto-fraco);
	font-family: inherit;
	font-size: var(--ac-apoio);
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

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

.ac-filtro.is-ativo {
	background: var(--ac-marca);
	border-color: var(--ac-marca);
	color: var(--ac-texto-claro);
}

.ac-retro__vazio {
	margin: 0;
	padding: 14px 0;
	font-size: var(--ac-apoio);
	color: var(--ac-texto-fraco);
}

/* ── OS QUADRADOS ─────────────────────────────────────────────────────────
 *
 * QUATRO COLUNAS, em qualquer tela: jogos, gols pró, gols contra e saldo, um
 * ao lado do outro. O `aspect-ratio` mantém o quadrado quadrado, e o
 * `max-width` da grade impede que numa tela larga ele vire um painel de
 * quatro janelas de 200px de altura.
 */

.ac-retro__quadros {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	max-width: 520px;
	margin: 0 0 16px;
}

/*
 * A FILEIRA AVULSA (a ficha de um jogador: jogos, gols, assistências,
 * cartões, troféus). Aqui os rótulos são o nome por extenso, então o mínimo
 * é maior: "Cartões amarelos" em duas linhas precisa de uns 120px para não
 * quebrar no meio de uma palavra.
 */
.ac-retro__quadros--auto {
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	max-width: 760px;
}

.ac-retro__quadros--auto .ac-quadro__rotulo {
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--ac-apoio);
	font-weight: 600;
}

/*
 * AQUI O QUADRADO DEIXA DE SER QUADRADO, e de propósito: com o nome por
 * extenso e dois por fileira no celular, cada um ficaria com 170px de lado e
 * três quartos disso seria espaço vazio. A altura passa a ser a do conteúdo,
 * com um mínimo para que todos fiquem iguais.
 */
.ac-retro__quadros--auto .ac-quadro {
	aspect-ratio: auto;
	min-height: 96px;
	padding: 12px 8px;
}

.ac-quadro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	aspect-ratio: 1;
	min-width: 0;
	padding: 6px 4px;
	text-align: center;
	border: 1px solid var(--arqc-borda, #e5e8ee);
	border-radius: 12px;
	background: var(--arqc-papel, #f6f7f9);
}

.ac-quadro__valor {
	/*
	 * Um degrau abaixo do que era: num quadrado de 120px, o 23px empurrava o
	 * rótulo contra a borda e o número parecia grande demais para o dado que
	 * é — quatro números iguais lado a lado, e não um placar.
	 */
	font-size: var(--ac-destaque);
	font-weight: 800;
	line-height: 1.05;
	color: var(--ac-texto);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

/*
 * O rótulo é BLOCO, e o ponto colorido entra como texto dentro dele.
 *
 * Como fileira de flex, o ponto ficava fora do texto e centrado na vertical:
 * com "Cartões vermelhos" quebrando em duas linhas, ele boiava sozinho à
 * esquerda, no meio das duas. Assim ele anda colado na primeira palavra, e o
 * resto quebra por baixo.
 */
.ac-quadro__rotulo {
	display: block;
	font-size: var(--ac-mini);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ac-texto-fraco);
}

/*
 * A COR ENTRA COMO MARCA, E NÃO COMO TINTA DO TEXTO.
 *
 * O ponto colorido antes do rótulo é o que liga o quadrado ao seu pedaço da
 * barra — e é ele que faz a barra dispensar legenda. Escrever "VITÓRIAS" em
 * verde seria pior: texto pequeno colorido perde contraste, e a cor deixaria
 * de ser um símbolo para virar decoração.
 */
.ac-quadro--v .ac-quadro__rotulo::before,
.ac-quadro--e .ac-quadro__rotulo::before,
.ac-quadro--d .ac-quadro__rotulo::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 5px;
	border-radius: 3px;
	vertical-align: 1px;
}

.ac-quadro--v .ac-quadro__rotulo::before {
	background: var(--ac-vitoria);
}

.ac-quadro--e .ac-quadro__rotulo::before {
	background: var(--ac-empate-fundo);
}

.ac-quadro--d .ac-quadro__rotulo::before {
	background: var(--ac-derrota);
}

/* ── A LINHA DE BAIXO ─────────────────────────────────────────────────────
 *
 * A barra ocupa o que sobra; o aproveitamento fica no fim dela — quem lê a
 * barra da esquerda para a direita termina no número que ela resume.
 */

.ac-retro__linha {
	display: flex;
	align-items: center;
	gap: 16px;
	/* A mesma largura da grade: a barra termina onde a fileira termina. */
	max-width: 520px;
}

.ac-retro__grafico {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * O respiro de 2px entre os pedaços é o que os separa — e não um contorno.
 * Contorno é tinta que não é dado; o respiro é o próprio fundo da página
 * aparecendo, e por isso funciona com qualquer combinação de cores.
 */
.ac-barra__trilho {
	display: flex;
	gap: 2px;
	height: 22px;
}

.ac-barra__parte {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2px;
	border-radius: 4px;
	overflow: hidden;
	/*
	 * Cada pedaço é um contêiner de consulta: as regras abaixo perguntam a
	 * LARGURA DELE, e não a da tela. É a única medida que serve — o mesmo
	 * bloco vai para uma coluna larga e para um celular, e um pedaço de 18%
	 * tem tamanhos completamente diferentes nos dois.
	 */
	container-type: inline-size;
}

.ac-barra__rotulo {
	display: none;
	align-items: baseline;
	gap: 4px;
	padding: 0 4px;
	color: var(--ac-texto-claro);
	font-size: var(--ac-mini);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ac-barra__parte--e .ac-barra__rotulo {
	color: var(--ac-empate-tinta);
}

.ac-barra__pct {
	display: none;
	font-weight: 700;
	opacity: .85;
}

/*
 * A PARTIR DE 30px cabe o número; a partir de 78px, também a porcentagem
 * entre parênteses — os dois parênteses custam largura, e por isso o degrau
 * subiu de 66 para 78. Abaixo disso o pedaço fica limpo: o tamanho dele já
 * diz a proporção, e número cortado ao meio é pior do que número nenhum.
 */
@container (min-width: 30px) {
	.ac-barra__rotulo {
		display: inline-flex;
	}
}

@container (min-width: 78px) {
	.ac-barra__pct {
		display: inline;
	}
}

.ac-barra__parte--v {
	background: var(--ac-vitoria);
}

.ac-barra__parte--e {
	background: var(--ac-empate-fundo);
}

.ac-barra__parte--d {
	background: var(--ac-derrota);
}

/* ── O APROVEITAMENTO, embaixo da barra ───────────────────────────────── */

.ac-retro__aprov {
	margin: 10px 0 0;
	max-width: 520px;
	font-size: var(--ac-apoio);
	color: var(--ac-texto-fraco);
}

.ac-retro__aprov b {
	color: var(--ac-texto);
	font-size: var(--ac-corpo);
	font-variant-numeric: tabular-nums;
}

/* O ranking, na linha de baixo do quadrado. */
.ac-quadro__selo {
	display: block;
	line-height: 1;
}

.ac-quadro__selo .ac-rank-badge {
	margin-left: 0;
}

/*
 * O SELO DE RANKING — o "#38" embaixo do número, na ficha de um jogador.
 *
 * Ele morava dentro do bloco de estatísticas de cada ficha; com o bloco
 * unificado, passou a morar aqui, uma vez só para as três fichas (jogador,
 * goleiro e técnico).
 */
.ac-rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 4px;
	padding: 1px 7px;
	border: 1px solid var(--arqc-borda-forte, #d3d8e2);
	border-radius: 999px;
	background: #fff;
	font-size: var(--ac-mini);
	font-weight: 700;
	line-height: 1.4;
	color: var(--ac-texto-fraco);
	white-space: nowrap;
}

/* O selo de ranking (as medalhas do técnico) anda junto do número. */
.ac-retro__selo {
	font-size: var(--ac-mini);
	font-weight: 700;
	color: var(--ac-texto-fraco);
	margin-left: 3px;
}

/* ── OS DESTAQUES ─────────────────────────────────────────────────────────
 *
 * Maior vitória, pior derrota, sequências: um deles é um link, e por isso não
 * cabe num quadrado de número. Ficam numa faixa embaixo, com o valor em cima
 * e o rótulo embaixo, como nos quadrados.
 */

.ac-retro__ladrilhos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2px 16px;
	margin: 16px 0 0;
	padding: 0;
	max-width: 760px;
	border-top: 1px solid var(--arqc-borda, #e5e8ee);
}

.ac-retro__ladrilho {
	display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
	/*
	 * `column-reverse` conta de baixo para cima, e o ladrilho é esticado pela
	 * grade até a altura do mais alto: sem isto, um rótulo de duas linhas
	 * empurrava o SEU valor para cima e a fileira saía em degrau. `flex-end`
	 * aqui é o topo.
	 */
	justify-content: flex-end;
	padding: 10px 0 0;
	min-width: 0;
}

.ac-retro__ladrilho dt {
	margin: 2px 0 0;
	font-size: var(--ac-mini);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.25;
	color: var(--ac-texto-fraco);
}

.ac-retro__ladrilho dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: break-word;
	font-size: var(--ac-apoio);
	font-weight: 600;
	line-height: 1.35;
	color: var(--ac-texto);
	font-variant-numeric: tabular-nums;
}

/* ── O RÓTULO CURTO ───────────────────────────────────────────────────────
 *
 * Na tela larga, o nome inteiro. No celular, a abreviação da tabela de
 * campeonato — J, V, E, D, GP, GC, SG, % —, porque num quadrado de 70px de
 * lado "APROVEITAMENTO" quebraria no meio de uma palavra, e palavra cortada
 * ao meio é pior do que a abreviação que todo mundo já lê em tabela de
 * classificação. O nome inteiro continua no `title` de cada um.
 */

.ac-quadro__curto {
	display: none;
}

@media (max-width: 620px) {
	.ac-retro__quadros {
		gap: 6px;
	}

	/*
	 * TRÊS por fileira no celular: os seis números da ficha cabem em duas
	 * fileiras, e a página não precisa rolar para mostrar todos.
	 *
	 * Cada quadrado fica com uns 100px. "Cartões vermelhos" quebra em duas
	 * linhas ali dentro, e é por isso que a altura é a do conteúdo — com
	 * `aspect-ratio` fixo, a linha maior estouraria a moldura.
	 */
	.ac-retro__quadros--auto {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ac-retro__quadros--auto .ac-quadro {
		padding: 10px 4px;
	}

	.ac-retro__quadros--auto .ac-quadro__rotulo {
		line-height: 1.25;
	}

	.ac-quadro {
		border-radius: 10px;
		padding: 4px 2px;
	}

	.ac-quadro__longo {
		display: none;
	}

	.ac-quadro__curto {
		display: inline;
		letter-spacing: 0.06em;
	}

	/*
	 * Na fileira avulsa o nome vai por extenso ATÉ NO CELULAR: ela tem dois
	 * quadrados por fileira, e "CA" não diz nada a quem não lê tabela de
	 * campeonato. (Sem esta volta, o rótulo sumiria: lá não há abreviação
	 * para entrar no lugar.)
	 */
	.ac-retro__quadros--auto .ac-quadro__longo {
		display: inline;
	}

	.ac-retro__quadros--auto .ac-quadro__curto {
		display: none;
	}

}

@media (max-width: 380px) {
	.ac-retro__linha {
		gap: 10px;
	}
}

/* =============================================================================
   O CARTÃO DE UM JOGO NUMA LISTA

   O mesmo em toda lista do acervo — a do jogador, a do goleiro, a do técnico.
   Antes cada ficha montava o seu, e as três saíam parecidas mas nunca iguais:
   uma com a data no título, outra sem; uma com os selos em emoji, outra com
   um "V" solto.

   A leitura é: RESULTADO, data, placar, onde foi — e, à direita, o que a
   pessoa fez no jogo.
   ============================================================================= */

.ac-lista-jogos {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ac-cartao-jogo {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--arqc-borda, #e5e8ee);
	border-radius: 12px;
	background: #fff;
}

.ac-cartao-jogo:hover {
	border-color: var(--arqc-borda-forte, #d3d8e2);
	background: var(--arqc-papel, #f6f7f9);
}

/*
 * A MARCA DO RESULTADO. Numa lista de dez jogos é o que se procura antes de
 * ler o placar — e a letra vai junto da cor, porque quem troca verde por
 * vermelho (a troca mais comum) precisa de outra pista.
 */
.ac-cartao-jogo__res {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	color: var(--ac-texto-claro);
	font-size: var(--ac-apoio);
	font-weight: 800;
	line-height: 1;
}

.ac-cartao-jogo__res--v {
	background: var(--ac-vitoria);
}

.ac-cartao-jogo__res--e {
	background: var(--ac-empate-fundo);
	color: var(--ac-empate-tinta);
}

.ac-cartao-jogo__res--d {
	background: var(--ac-derrota);
}

/*
 * `flex: 1 1 0` e não `auto`: com base automática, o cartão perguntava ao
 * texto quanta largura ele queria, e "Santa Cruz 0x1 Náutico" pedia mais do
 * que sobrava — no celular a linha inteira descia para baixo da marca do
 * resultado. Com base zero, ele ocupa o que sobrou e quebra o texto dentro.
 */
.ac-cartao-jogo__corpo {
	flex: 1 1 0;
	min-width: 0;
}

.ac-cartao-jogo__data {
	display: block;
	font-size: var(--ac-mini);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ac-texto-fraco);
	font-variant-numeric: tabular-nums;
}

.ac-cartao-jogo__placar {
	display: block;
	margin-top: 1px;
	font-size: var(--ac-corpo);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ac-texto);
}

.ac-cartao-jogo__placar a {
	color: var(--ac-texto);
}

/*
 * O CARTÃO INTEIRO É CLICÁVEL: o link do placar se estica por cima dele. O
 * link da competição fica acima desse, e por isso continua clicável — sem
 * isto, seria um link dentro de outro, que o HTML não permite.
 */
.ac-cartao-jogo__placar a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.ac-cartao-jogo__sub {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	margin-top: 3px;
	font-size: var(--ac-apoio);
	color: var(--ac-texto-fraco);
}

.ac-cartao-jogo__meta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.ac-cartao-jogo__meta a {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--ac-texto-fraco);
}

.ac-cartao-jogo__meta a:hover {
	color: var(--ac-marca);
}

.ac-icone {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: -2px;
}

/* ── OS SELOS: o que a pessoa fez no jogo ─────────────────────────────── */

.ac-cartao-jogo__selos {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ac-selo-jogo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border: 1px solid var(--arqc-borda, #e5e8ee);
	border-radius: 999px;
	background: #fff;
	font-size: var(--ac-apoio);
	font-weight: 700;
	line-height: 1;
	color: var(--ac-texto);
	font-variant-numeric: tabular-nums;
}

.ac-selo-jogo--e {
	color: var(--ac-empate);
	border-color: var(--ac-empate-fundo);
}

.ac-selo-jogo--d {
	color: var(--ac-derrota);
	border-color: var(--ac-derrota);
}

.ac-selo-jogo--marca {
	color: var(--ac-marca);
	border-color: var(--ac-marca);
}

/*
 * O SELO FICA À DIREITA, INCLUSIVE NO CELULAR.
 *
 * Ele descia para uma linha própria abaixo do placar, e havia razão: com
 * cinco selos possíveis — gols, assistências, os dois cartões e o troféu —,
 * a fileira espremia "Santa Cruz 0x1 Náutico" em três linhas de duas
 * palavras. Agora é UM selo, de uns quarenta pixels; ele cabe na ponta
 * direita, e o cartão volta a ter duas alturas de linha em vez de três.
 *
 * `align-self: center` porque o cartão alinha pelo centro: sem isto o selo
 * subiria junto com a data quando o placar quebrasse em duas linhas.
 */
.ac-cartao-jogo__selos {
	align-self: center;
	margin-left: auto;
}

/* =============================================================================
   UMA PESSOA NUMA LISTA — os dez artilheiros, os dez com mais jogos

   Era uma coluna de nomes vermelhos: dez linhas iguais, e o único jeito de
   saber quem era cada um era clicar. Com o retrato ao lado, a lista vira
   gente; quem não tem foto entra pelas iniciais.
   ============================================================================= */

.ac-lista-pessoas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ac-pessoa {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--arqc-borda, #e5e8ee);
}

.ac-pessoa:last-child {
	border-bottom: 0;
}

.ac-pessoa__foto {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

.ac-pessoa__foto img {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
}

.ac-pessoa__foto .ac-iniciais {
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	border-radius: 10px;
	font-size: var(--ac-mini);
}

.ac-pessoa__corpo {
	flex: 1 1 0;
	min-width: 0;
}

/*
 * O nome em tinta normal, e não no vermelho de link: dez nomes vermelhos
 * empilhados viram um bloco de cor, e o retrato ao lado já diz que ali há
 * uma pessoa em que se pode clicar.
 */
/* Peso maior de propósito: `.ac-wrap a` pinta todo link de vermelho. */
.ac-pessoa a.ac-pessoa__nome {
	display: block;
	font-size: var(--ac-corpo);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ac-texto);
}

.ac-pessoa a.ac-pessoa__nome:hover {
	color: var(--ac-marca);
}

/*
 * A posição no tom de apoio: ela ajuda a entender a lista — "o artilheiro é
 * um zagueiro?" — sem competir com o nome.
 */
.ac-pessoa__posicao {
	display: block;
	margin-top: 1px;
	font-size: var(--ac-mini);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ac-texto-fraco);
}

.ac-pessoa__valor {
	flex: 0 0 auto;
	font-size: var(--ac-apoio);
	font-weight: 700;
	color: var(--ac-texto);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* =============================================================================
   NO COMPUTADOR, OS QUADROS OCUPAM A LARGURA E NÃO QUEBRAM

   `auto-fit` com mínimo de 120px resolve o celular, mas no computador ele
   enche a primeira fileira e joga o resto para baixo: a ficha do goleiro tem
   sete quadros, seis entravam e o sétimo — Troféus Kuki — descia sozinho,
   como se fosse outra coisa. E os 760px de teto deixavam meia tela vazia à
   direita.

   `grid-auto-flow: column` põe todos numa fileira só, seja qual for o número
   deles, e `minmax(0, 1fr)` divide a largura em partes iguais. O `minmax`
   com zero é o que permite o quadro encolher abaixo do conteúdo em vez de
   estourar a linha.
   ============================================================================= */

@media (min-width: 900px) {
	.ac-retro__quadros--auto {
		max-width: none;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}

/* =============================================================================
   A FICHA NO COMPUTADOR: retrato à esquerda, nome e dados à direita

   O nome ficava numa faixa por cima da foto, e ao lado dela sobrava só a
   data de nascimento e a naturalidade — meia tela em branco embaixo de um
   título solto. Com o nome ao lado do retrato, a ficha vira um bloco só.

   No celular nada muda: a grade tem uma coluna e a ordem é a natural do
   HTML — nome, foto, dados.
   ============================================================================= */

.ac-ficha--grade {
	display: grid;
	gap: 0 20px;
}

@media (min-width: 760px) {
	.ac-ficha--grade {
		/*
		 * 220px, e não os 300 de antes: com o nome ao lado dela, a foto
		 * deixou de ser a única coisa na esquerda e passou a dividir a linha.
		 * Em 300 ela empurrava o nome para o meio da tela e sobrava um vão
		 * de meia página à direita dos dados.
		 *
		 * E 220 exatamente porque é o tamanho em que o molde PEDE o retrato ao
		 * WordPress. Acima disso o navegador estica uma imagem que não tem
		 * esses pixels, e a foto sai levemente borrada — o tipo de coisa que
		 * ninguém sabe nomear mas todo mundo vê.
		 */
		grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
		/*
		 * A primeira fileira tem a altura do NOME; a segunda fica com o resto.
		 * Sem isto as duas se dividiam ao meio e os dados começavam no meio da
		 * foto, com um palmo de branco entre eles e o nome.
		 */
		grid-template-rows: auto 1fr;
		align-items: start;
	}

	/*
	 * O retrato ocupa as duas fileiras da coluna da esquerda: o nome fica na
	 * primeira da direita, os dados na segunda, e nenhum dos dois passa por
	 * baixo dele.
	 */
	.ac-ficha--grade .ac-ficha__foto {
		grid-column: 1;
		grid-row: 1 / span 2;
		float: none;
		width: 100%;
		margin: 0;
	}

	.ac-ficha--grade .ac-ficha__nome,
	.ac-ficha--grade .ac-ficha__dados,
	.ac-ficha--grade .ac-ficha__lista {
		grid-column: 2;
	}

	.ac-ficha--grade .ac-ficha__nome {
		margin: 0 0 10px;
	}
}