/**
 * Páginas de texto: o que o texto das páginas institucionais usa além do
 * texto corrido de main.css (.texto). Pedido com vbox_irb_use( 'pagina' ).
 */

/* ── Imagem do texto ─────────────────────────────────────────────────────── */

.texto .imagem {
	margin-inline: 0;
	text-align: center;
}

.texto p > .botao {
	margin-block: var(--e-2);
}

/* Chamada principal da página: um botão sozinho, centralizado. */
.texto .chamada {
	margin-block: var(--e-6);
	text-align: center;
}

.texto .chamada .botao {
	padding: var(--e-3) var(--e-6);
	font-size: var(--t-base);
}

/* Logomarcas lado a lado (apoiadores, parceiros). */
.texto .logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	justify-items: center;
	align-items: center;
	gap: var(--e-5) var(--e-6);
	margin: var(--e-6) 0 0;
	padding: var(--e-5);
	border: 1px solid var(--c-linha);
	border-radius: var(--raio);
	background: var(--c-fundo-suave);
	list-style: none;
}

.texto .logos img {
	display: block;
	width: auto;
	max-width: min(100%, 11rem);
	height: auto;
	max-height: 5.5rem;
	border-radius: 0;
}

.texto blockquote cite {
	color: var(--c-texto-suave);
	font-size: var(--t-sm);
	font-style: normal;
}

.texto blockquote cite::before {
	content: "\2014\0020"; /* travessão e espaço, em código */
}

/* ── Sanfona: <details class="sanfona"> ──────────────────────────────────── */

.sanfona {
	border: 1px solid var(--c-linha);
	border-radius: var(--raio);
	background: var(--c-fundo);
}

.texto .sanfona + .sanfona {
	margin-top: var(--e-2);
}

.sanfona > summary {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-3) var(--e-4);
	border-radius: var(--raio);
	background: var(--c-fundo-suave);
	color: var(--c-titulo);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.sanfona > summary::-webkit-details-marker {
	display: none;
}

/* Seta desenhada com bordas: aponta para a direita fechada e para baixo aberta. */
.sanfona > summary::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--c-acao);
	border-bottom: 2px solid var(--c-acao);
	transform: rotate(-45deg);
	transition: transform 0.15s;
}

.sanfona[open] > summary::before {
	transform: rotate(45deg);
}

.sanfona[open] > summary {
	border-radius: var(--raio) var(--raio) 0 0;
	border-bottom: 1px solid var(--c-linha);
}

.sanfona > :not(summary) {
	margin-inline: var(--e-4);
}

.sanfona > summary + * {
	margin-top: var(--e-4);
}

.sanfona > :last-child:not(summary) {
	margin-bottom: var(--e-4);
}

@media (prefers-reduced-motion: reduce) {
	.sanfona > summary::before {
		transition: none;
	}
}

/* ── Lista de documentos: <ul class="documentos"> ────────────────────────── */

.texto .documentos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--e-4);
	margin-block: var(--e-6);
	padding: 0;
	list-style: none;
}

.documentos a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--e-3);
	height: 100%;
	min-height: 7rem;
	padding: var(--e-4);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
	color: var(--c-titulo);
	font-size: var(--t-sm);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

/* Folha de documento desenhada em CSS, sem imagem. */
.documentos a::before {
	content: "";
	width: 1.75rem;
	height: 2.25rem;
	border-radius: 0.2rem;
	background: linear-gradient(225deg, #fff 0.45rem, var(--c-acao) 0.45rem);
}

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

/* ── Pessoas dentro do texto ([irb_diretores]) ───────────────────────────── */

.texto .pessoas {
	margin-block: var(--e-5);
	padding: 0;
}