/**
 * Página inicial: seções de últimas notícias, artigos e publicações e as
 * entidades representativas. Pedido com vbox_irb_use( 'inicio' ), junto de
 * 'arquivo' (os cartões).
 */

.inicio {
	padding-block: var(--e-7);
}

.inicio__titulo {
	margin: 0 0 var(--e-5);
	padding-bottom: var(--e-2);
	border-bottom: 2px solid var(--irb-vermelho);
	color: var(--irb-vermelho-escuro);
	font-size: var(--t-xl);
}

.inicio__todos {
	margin: var(--e-6) 0 0;
	text-align: center;
}

/* Os cartões das listas usam h2; aqui eles ficam sob o título da seção. */
.inicio .card__titulo {
	font-size: var(--t-base);
}

/* ── Notícias: faixa vermelha com os cartões em branco ───────────────────── */

.inicio--faixa {
	margin-top: var(--e-7);
	background: linear-gradient(180deg, var(--irb-vermelho-escuro), var(--irb-vermelho));
}

.inicio--faixa .inicio__titulo {
	border-bottom-color: rgb(255 255 255 / 45%);
	color: #fff;
}

.inicio--faixa .card {
	height: 100%;
	padding: var(--e-3);
	border-radius: var(--raio);
	background: #fff;
	box-shadow: var(--sombra);
}

.inicio--faixa .botao {
	background: #fff;
	color: var(--irb-vermelho-escuro);
}

.inicio--faixa .botao:hover {
	background: var(--irb-cinza-claro);
	color: var(--irb-vermelho-escuro);
}

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

.inicio--faixa .card :focus-visible {
	box-shadow: var(--foco);
}

/* ── Artigos: duas colunas de cartões de texto ───────────────────────────── */

.inicio__artigos {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
}

/* ── Eventos deste mês: os cartões da agenda (components/agenda.css), em colunas ── */

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

@media (max-width: 48rem) {
	.inicio__eventos {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Entidades representativas: logos com link ─────────────────────────────
   Logomarcas quadradas e compridas ocupam a mesma área: front-page.php põe em
   --proporcao a raiz de largura/altura, e a largura é o lado-base vezes ela. */

.inicio__entidades {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--e-5);
}

.inicio__entidades a {
	display: block;
	padding: var(--e-2);
	border-radius: var(--raio);
}

.inicio__entidades img {
	width: calc(5rem * var(--proporcao, 1));
	max-width: 100%;
	height: auto;
}