/* =============================================================
   Acesso rápido
   Faixa de atalhos com ícone, logo abaixo do banner.

   São sete itens, e sete é primo: em qualquer número de colunas
   que não seja sete sobra alguém na última linha. Uma grade
   fluida (auto-fit) cai em seis colunas mais um órfão na largura
   mais comum. Por isso as colunas são declaradas: sete quando
   cabem, quatro no meio (4+3, sem sobra solitária) e duas no
   telefone, onde o último ocupa a linha inteira.
   ============================================================= */

.acessos__titulo {
	margin-block-end: var(--e-6);
}

.acessos__lista {
	display: grid;
	gap: var(--e-4);
	grid-template-columns: repeat(2, 1fr);
}

.acessos__lista > li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

@media (min-width: 48em) {
	.acessos__lista {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Com quatro colunas são 4+3: ninguém fica sozinho e o último
	   volta a ocupar uma célula só. */
	.acessos__lista > li:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

@media (min-width: 68em) {
	.acessos__lista {
		grid-template-columns: repeat(7, 1fr);
		gap: var(--e-3);
	}
}

.acesso {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-3);
	height: 100%;
	padding: var(--e-5) var(--e-3);
	background: var(--c-fundo);
	border: 1px solid var(--c-borda);
	border-radius: var(--raio);
	text-align: center;
	text-decoration: none;
	transition:
		border-color var(--transicao),
		box-shadow var(--transicao),
		transform var(--transicao);
}

.acesso:hover,
.acesso:focus-visible {
	border-color: var(--c-acao-media);
	box-shadow: var(--sombra);
	transform: translateY(-2px);
}

/* O disco atrás do ícone dá a cada card o mesmo peso visual: os
   sete desenhos têm proporções diferentes, e sem ele os mais
   largos pareceriam maiores que os mais altos. */
.acesso__icone {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--c-acao-suave);
	color: var(--c-acao);
	transition: background-color var(--transicao), color var(--transicao);
}

.acesso:hover .acesso__icone,
.acesso:focus-visible .acesso__icone {
	background: var(--c-acao);
	color: var(--c-texto-inverso);
}

/* A altura é a mesma para todos; a largura sai da proporção do
   desenho, que varia de quadrado a 640x512. */
.acesso__icone .icone {
	width: auto;
	height: 1.5rem;
}

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

.acesso:hover .acesso__rotulo {
	color: var(--c-acao);
}

@media (prefers-reduced-motion: reduce) {
	.acesso:hover,
	.acesso:focus-visible {
		transform: none;
	}
}