/* =============================================================
   Pessoa
   Card de membro da gestão e de representante — a mesma
   marcação nos dois casos, já que os dados são os mesmos.
   ============================================================= */

.pessoa {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--c-fundo);
	border: 1px solid var(--c-borda);
	border-radius: var(--raio);
}

/* A moldura decide o tamanho, não a foto.

   A imagem é posicionada de forma absoluta de propósito: com height:100% ela
   media contra um pai de altura automática, o cálculo caía para "auto" e a
   foto empurrava a moldura para a sua própria altura — retratos de 222x288 e
   de 222x275 ficavam com molduras diferentes lado a lado. Fora do fluxo, a
   altura passa a vir só do aspect-ratio e o recorte é sempre o mesmo.

   O corte é levemente acima do centro: em retrato o rosto costuma estar no
   terço superior, e cortar pelo meio decepa a testa. */
.pessoa__foto {
	position: relative;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	background: var(--c-fundo-sunk);
}

.pessoa__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* Sem foto: iniciais em vez de um retângulo vazio. */
.pessoa__iniciais {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--c-apoio-suave);
	color: var(--c-apoio);
	font-size: var(--t-2xl);
	font-weight: var(--peso-forte);
	letter-spacing: 0.05em;
}

.pessoa__corpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--e-2);
	padding: var(--e-4) var(--e-5) var(--e-5);
}

.pessoa__funcao {
	align-self: flex-start;
	padding: var(--e-1) var(--e-3);
	border-radius: 999px;
	background: var(--c-acao-suave);
	color: var(--c-acao-escura);
	font-size: var(--t-xs);
	font-weight: var(--peso-medio);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pessoa__nome {
	font-size: var(--t-md);
	font-weight: var(--peso-forte);
	color: var(--c-texto-forte);
	line-height: 1.3;
}

.pessoa__cargo {
	font-size: var(--t-sm);
	color: var(--c-texto-medio);
}

.pessoa__orgao {
	margin-block-start: auto;
	padding-block-start: var(--e-3);
	border-block-start: 1px solid var(--c-borda);
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
	color: var(--c-texto-forte);
}

.pessoa__orgao small {
	display: block;
	font-weight: var(--peso-normal);
	color: var(--c-texto-suave);
}

/* O presidente ocupa a linha inteira e se destaca do restante. */
.pessoa--destaque {
	border-color: var(--c-acao-media);
	box-shadow: var(--sombra-sm);
}

@media (min-width: 48em) {
	.pessoa--destaque {
		flex-direction: row;
		grid-column: 1 / -1;
	}

	.pessoa--destaque .pessoa__foto {
		flex: 0 0 15rem;
		aspect-ratio: auto;
	}

	.pessoa--destaque .pessoa__corpo {
		justify-content: center;
		gap: var(--e-3);
		padding: var(--e-6);
	}

	.pessoa--destaque .pessoa__nome {
		font-size: var(--t-xl);
	}

	.pessoa--destaque .pessoa__orgao {
		margin-block-start: 0;
	}
}

/* Grade de pessoas: cards um pouco mais estreitos que o padrão. */
.grade--pessoas {
	--grade-min: 14rem;
}

/* Gestão (Presidente e Membros) ------------------------------ */
.gestao {
	display: flex;
	flex-direction: column;
	gap: var(--e-5);
}

.gestao__presidente {
	display: flex;
	flex-direction: column;
	gap: var(--e-5);
}

.gestao__membros {
	display: grid;
	gap: var(--e-5);
	grid-template-columns: 1fr;
}

@media (min-width: 48em) {
	.gestao__membros {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Membros com layout semelhante ao presidente: horizontal com foto lateral */
	.gestao__membros .pessoa,
	.pessoa--membro {
		flex-direction: row;
	}

	.gestao__membros .pessoa__foto,
	.pessoa--membro .pessoa__foto {
		flex: 0 0 clamp(8rem, 28%, 10rem);
		aspect-ratio: auto;
	}

	.gestao__membros .pessoa__corpo,
	.pessoa--membro .pessoa__corpo {
		justify-content: center;
		gap: var(--e-2);
		padding: var(--e-4);
	}

	.gestao__membros .pessoa__nome,
	.pessoa--membro .pessoa__nome {
		font-size: var(--t-md);
	}

	.gestao__membros .pessoa__orgao,
	.pessoa--membro .pessoa__orgao {
		margin-block-start: 0;
	}
}

@media (min-width: 64em) {
	.gestao__membros .pessoa__foto,
	.pessoa--membro .pessoa__foto {
		flex: 0 0 10.5rem;
	}

	.gestao__membros .pessoa__corpo,
	.pessoa--membro .pessoa__corpo {
		padding: var(--e-4) var(--e-5);
		gap: var(--e-3);
	}
}

/* Seletor de biênio ------------------------------------------- */
.bienios {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	margin-block-end: var(--e-6);
}

.bienios__item a,
.bienios__item span {
	display: block;
	padding: var(--e-2) var(--e-4);
	border: 1px solid var(--c-borda);
	border-radius: 999px;
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
	color: var(--c-texto-medio);
	text-decoration: none;
	transition: border-color var(--transicao), color var(--transicao);
}

.bienios__item a:hover {
	border-color: var(--c-acao);
	color: var(--c-acao);
}

.bienios__item [aria-current="true"] {
	background: var(--c-acao);
	border-color: var(--c-acao);
	color: var(--c-texto-inverso);
}