/**
 * Páginas Diretoria, Equipe Técnica e Organograma.
 * Pedido com vbox_irb_use( 'arquivo', 'item', 'diretoria' ).
 */

.diretoria__grupo + .diretoria__grupo {
	margin-top: var(--e-7);
}

.diretoria__titulo,
.organograma__titulo {
	margin: 0 0 var(--e-4);
	padding-bottom: var(--e-2);
	border-bottom: 2px solid var(--irb-vermelho);
	color: var(--irb-vermelho-escuro);
	font-size: var(--t-lg);
}

/* ── Diretoria: presidente em destaque e os demais em duas colunas ───────── */

.diretoria__presidente {
	margin-bottom: var(--e-5);
	padding: var(--e-5) var(--e-6);
	border-radius: var(--raio);
	background: linear-gradient(120deg, var(--irb-vermelho-escuro), var(--irb-vermelho));
	box-shadow: var(--sombra);
	color: #fff;
}

.diretoria__presidente .pessoa {
	gap: var(--e-5);
}

.diretoria__presidente .pessoa__foto {
	width: 7.5rem;
	height: 7.5rem;
	border: 3px solid #fff;
}

.diretoria__presidente .pessoa__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.diretoria__presidente .pessoa__nome {
	color: #fff;
	font-family: var(--f-titulo);
	font-size: var(--t-xl);
	line-height: 1.15;
}

.diretoria__presidente .pessoa__nome:focus-visible {
	box-shadow: 0 0 0 3px var(--irb-vermelho-escuro), 0 0 0 6px #fff;
}

/* O cargo vem antes do nome, como rótulo. */
.diretoria__presidente .pessoa__apoio--cargo {
	order: -1;
	margin-bottom: var(--e-1);
	color: #fff;
	font-size: var(--t-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

.diretoria__presidente .pessoa__apoio--sigla {
	margin-top: var(--e-2);
	background: rgb(255 255 255 / 18%);
	color: #fff;
}

.diretoria__lista {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diretoria__lista .pessoa {
	height: 100%;
	padding: var(--e-4);
	border: 1px solid var(--c-linha);
	border-left: 4px solid var(--irb-vermelho);
	border-radius: var(--raio);
	background: #fff;
	gap: var(--e-4);
}

.diretoria__lista .pessoa__foto {
	width: 4.75rem;
	height: 4.75rem;
}

.diretoria__lista .pessoa__nome {
	font-size: var(--t-base);
	line-height: 1.25;
}

.diretoria__lista .pessoa__apoio--cargo {
	margin-top: var(--e-1);
	color: var(--c-texto);
}

/* A sigla do tribunal vira uma etiqueta. */
.diretoria__presidente .pessoa__apoio--sigla,
.diretoria__lista .pessoa__apoio--sigla {
	display: inline-block;
	padding: 0.05rem var(--e-2);
	border-radius: 999px;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.diretoria__lista .pessoa__apoio--sigla {
	margin-top: var(--e-1);
	background: var(--c-fundo-suave);
	color: var(--c-texto-suave);
}

@media (max-width: 44rem) {
	.diretoria__lista {
		grid-template-columns: 1fr;
	}

	.diretoria__presidente {
		padding: var(--e-5) var(--e-4);
	}

	.diretoria__presidente .pessoa {
		gap: var(--e-4);
	}

	.diretoria__presidente .pessoa__foto {
		width: 5.5rem;
		height: 5.5rem;
	}
}

/* ── Equipe técnica ──────────────────────────────────────────────────────── */

.equipe {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: var(--e-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.equipe li {
	padding: var(--e-4);
	border: 1px solid var(--c-linha);
	border-left: 4px solid var(--irb-vermelho);
	border-radius: var(--raio);
	background: #fff;
}

.equipe strong,
.equipe span {
	display: block;
}

.equipe span {
	color: var(--c-texto-suave);
	font-size: var(--t-sm);
}

/* A primeira pessoa da equipe encabeça; as demais ficam abaixo, ligadas por um traço. */
.equipe-hierarquia {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.equipe__chefe {
	min-width: min(100%, 22rem);
	padding: var(--e-4) var(--e-6);
	border-radius: var(--raio);
	background: linear-gradient(120deg, var(--irb-vermelho-escuro), var(--irb-vermelho));
	box-shadow: var(--sombra);
	color: #fff;
	font-size: var(--t-lg);
	line-height: 1.3;
	text-align: center;
}

.equipe__chefe span,
.equipe__chefe strong {
	display: block;
}

.equipe__chefe span {
	font-size: var(--t-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.equipe__subordinados {
	position: relative;
	width: 100%;
	margin-top: 1.75rem;
	padding: var(--e-4);
	border: 1px solid var(--c-linha);
	border-radius: var(--raio);
	background: var(--c-fundo-suave);
}

.equipe__subordinados::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	height: 1.75rem;
	border-left: 2px solid #bdbcbf;
}

/* ── Organograma ─────────────────────────────────────────────────────────── */

.organograma__topo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--e-4);
}

/* O botão depende de JavaScript. */
html:not(.js) .organograma__imprimir {
	display: none;
}

/* Em níveis, de cima para baixo: presidente, diretoria, vice-presidências com os seus
   diretores. Os traços são desenhados com ::before e ::after. */
.organograma {
	--org-traco: 2px solid #bdbcbf;
	--org-vao: 1.75rem;
	--org-x: 50%;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.organograma > * {
	position: relative;
	width: 100%;
}

.organograma span,
.organograma strong {
	display: block;
}

.organograma span {
	color: var(--c-texto-suave);
	font-size: var(--t-sm);
}

.organograma__no {
	padding: var(--e-3) var(--e-4);
	border: 1px solid var(--c-linha);
	border-radius: var(--raio);
	background: #fff;
	text-align: center;
	line-height: 1.3;
}

.organograma > .organograma__no--presidente {
	width: auto;
	min-width: min(100%, 22rem);
	padding: var(--e-4) var(--e-6);
	border: 0;
	background: linear-gradient(120deg, var(--irb-vermelho-escuro), var(--irb-vermelho));
	box-shadow: var(--sombra);
	color: #fff;
	font-size: var(--t-lg);
}

.organograma__no--presidente span {
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* Traço que desce do nível de cima. */
.organograma .organograma__apoio,
.organograma .organograma__ramos {
	margin-top: var(--org-vao);
}

.organograma__apoio::before,
.organograma__ramos::before {
	content: "";
	position: absolute;
	left: var(--org-x);
	bottom: 100%;
	height: var(--org-vao);
	border-left: var(--org-traco);
}

.organograma .organograma__apoio {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--e-3);
	padding: var(--e-4);
	border: 1px solid var(--c-linha);
	border-radius: var(--raio);
	background: var(--c-fundo-suave);
	list-style: none;
}

.organograma__apoio .organograma__no {
	flex: 1 1 14rem;
	max-width: 22rem;
}

/* Vice-presidências: uma coluna por área, ligadas por um traço horizontal. */
.organograma__ramos {
	display: grid;
	grid-template-columns: repeat(var(--ramos, 5), minmax(0, 1fr));
	gap: var(--e-4);
	padding-top: var(--org-vao);
}

/* As duas linhas (vice-presidente e diretores) são compartilhadas entre as colunas, para as
   caixas ficarem da mesma altura. */
.organograma__ramo {
	position: relative;
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 0;
	break-inside: avoid;
}

.organograma__ramo::before {
	content: "";
	position: absolute;
	top: calc(var(--org-vao) * -1);
	left: calc(var(--e-4) / -2);
	right: calc(var(--e-4) / -2);
	border-top: var(--org-traco);
}

.organograma__ramo:first-child::before {
	left: 50%;
}

.organograma__ramo:last-child::before {
	right: 50%;
}

.organograma__ramo::after {
	content: "";
	position: absolute;
	top: calc(var(--org-vao) * -1);
	left: 50%;
	height: var(--org-vao);
	border-left: var(--org-traco);
}

.organograma__no--chefe {
	border-top: 4px solid var(--irb-vermelho);
}

.organograma__area {
	margin: 0 0 var(--e-2);
	color: var(--irb-vermelho-escuro);
	font-size: var(--t-base);
	line-height: 1.2;
	text-wrap: balance;
}

.organograma .organograma__subordinados {
	position: relative;
	display: grid;
	gap: var(--e-3);
	margin: var(--e-4) 0 0;
	padding: var(--e-4);
	border: 1px solid var(--c-linha);
	border-radius: var(--raio);
	background: var(--c-fundo-suave);
	font-size: var(--t-sm);
	line-height: 1.3;
	list-style: none;
}

.organograma__subordinados::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	height: var(--e-4);
	border-left: var(--org-traco);
}

.organograma__subordinados span {
	font-size: var(--t-xs);
}

/* Órgãos fora da linha da presidência e comitês: blocos, sem traço. */
.organograma__orgaos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--e-5);
	align-items: start;
	margin-top: var(--e-7);
}

.organograma__grupo {
	padding: var(--e-5);
	border: 1px solid var(--c-linha);
	border-radius: var(--raio);
	background: #fff;
	break-inside: avoid;
}

.organograma__grupo--largo {
	margin-top: var(--e-5);
}

.organograma__grupo ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--e-3) var(--e-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.organograma__grupo--largo ul {
	grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
}

/* Nome do comitê: leva à página dele, sem sublinhado; só a cor muda ao passar o mouse. */
.organograma__grupo a {
	color: var(--irb-vermelho);
	text-decoration: none;
}

.organograma__grupo a:hover {
	color: var(--irb-vermelho-escuro);
	text-decoration: none;
}

/* Tela estreita: os traços correm pela esquerda e as áreas ficam uma embaixo da outra. */
@media (max-width: 64rem) {
	.organograma {
		--org-x: 1.25rem;

		align-items: stretch;
	}

	.organograma__ramos {
		grid-template-columns: 1fr;
		gap: var(--e-5);
		padding-top: 0;
		padding-left: 2.5rem;
	}

	.organograma__ramo {
		display: block;
	}

	.organograma__ramo::before,
	.organograma__ramo:first-child::before,
	.organograma__ramo:last-child::before {
		top: 2rem;
		left: -1.25rem;
		right: auto;
		width: 1.25rem;
	}

	.organograma__ramo::after {
		top: calc(var(--e-5) * -1);
		bottom: 0;
		left: -1.25rem;
		height: auto;
	}

	.organograma__ramo:first-child::after {
		top: 0;
	}

	.organograma__ramo:last-child::after {
		bottom: auto;
		height: calc(var(--e-5) + 2rem);
	}

	.organograma__ramo:only-child::after {
		height: 2rem;
	}
}

@media (max-width: 30rem) {
	.organograma__grupo ul,
	.organograma__grupo--largo ul,
	.equipe {
		grid-template-columns: 1fr;
	}
}

@media print {
	.organograma__imprimir,
	.trilha {
		display: none;
	}

	.organograma {
		--org-vao: 1rem;

		font-size: 9pt;
	}

	.organograma span,
	.organograma__subordinados {
		font-size: 8pt;
	}

	.organograma__no,
	.organograma__subordinados,
	.organograma__grupo {
		padding: 0.4rem;
	}

	.organograma__no--presidente {
		box-shadow: none;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.organograma__ramos {
		gap: 0.5rem;
	}

	.organograma__orgaos,
	.organograma__grupo--largo {
		margin-top: 1rem;
	}
}