/**
 * Atalhos da página inicial: acesso rápido e espaço do conhecimento.
 * Pedido com vbox_irb_use( 'atalhos' ).
 */

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

.atalhos__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-xl);
}

.atalhos__rapido,
.atalhos__conhecimento {
	display: grid;
	gap: var(--e-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Acesso rápido: só a imagem (500 × 200) ──────────────────────────────── */

.atalhos__rapido {
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.atalhos__rapido a {
	display: block;
	overflow: hidden;
	border-radius: var(--raio);
	box-shadow: var(--sombra);
}

.atalhos__rapido img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 2;
	object-fit: cover;
}

/* ── Espaço do conhecimento: imagem, título e descrição ──────────────────── */

.atalhos__conhecimento {
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.atalho {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: var(--e-4);
	align-items: center;
	height: 100%;
	padding: var(--e-3);
	border: 1px solid var(--c-linha);
	border-radius: var(--raio);
	background: #fff;
	color: var(--c-texto);
	text-decoration: none;
}

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

.atalho__imagem {
	display: block;
	width: 6rem;
	height: 6rem;
	border-radius: var(--raio);
	object-fit: cover;
}

.atalho__titulo {
	display: block;
	color: var(--c-titulo);
	font-family: var(--f-titulo);
	font-size: var(--t-lg);
}

.atalho:hover .atalho__titulo {
	color: var(--c-acao);
}

.atalho__descricao {
	display: block;
	color: var(--c-texto-suave);
	font-size: var(--t-sm);
}

@media (max-width: 30rem) {
	.atalhos__rapido {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.atalhos__conhecimento {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.atalhos__rapido a {
		transition: transform 0.15s ease;
	}

	.atalhos__rapido a:hover {
		transform: translateY(-2px);
	}
}