/**
 * Ficha de solução
 *
 * Carregado só nesta página. O acento vem da classe de linha no body, então
 * aqui nada é escrito em cor literal — a Frog fica verde e a Ema azul sem
 * uma linha de CSS por produto.
 */

/* ---------------------------------------------------------------------
 * Topo
 * ------------------------------------------------------------------ */

.solucao__topo {
	display: grid;
	gap: var(--e-7);
	align-items: center;
	padding-bottom: var(--bloco-y);
	border-bottom: var(--borda-fina) solid var(--linha-divisoria);
}

@media (min-width: 880px) {
	.solucao__topo {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
		gap: var(--e-9);
	}
}

.solucao__titulo {
	font-size: var(--t-3xl);
}

.solucao__chamada {
	margin-top: var(--e-5);
	max-width: 46ch;
	font-size: var(--t-md);
	line-height: var(--altura-texto);
	color: var(--texto-2);
}

.solucao__comercial {
	margin-top: var(--e-3);
	font-size: var(--t-sm);
	color: var(--texto-3);
}

.solucao__topo .etiquetas {
	margin-top: var(--e-6);
}

.solucao__imagem {
	background: var(--fundo-2);
	border-radius: var(--raio-3);
	padding: var(--e-6);
}

.solucao__imagem img {
	margin-inline: auto;
}

/* ---------------------------------------------------------------------
 * Índice
 *
 * Só aparece quando a solução tem mais de três blocos. Em solução curta,
 * um índice de duas linhas faz a página parecer vazia.
 * ------------------------------------------------------------------ */

.solucao__indice {
	position: sticky;
	top: var(--altura-cabecalho);
	z-index: var(--z-sticky);
	margin-top: 0;
	padding-block: var(--e-3);
	background: color-mix(in srgb, var(--fundo) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: var(--borda-fina) solid var(--linha-divisoria);
}

.solucao__indice ul {
	display: flex;
	gap: var(--e-5);
	margin: 0;
	overflow-x: auto;
	scrollbar-width: none;
	font-size: var(--t-sm);
	font-weight: var(--peso-medio);
}

.solucao__indice ul::-webkit-scrollbar {
	display: none;
}

.solucao__indice a {
	padding-block: var(--e-1);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: var(--borda-media) solid transparent;
	color: var(--texto-2);
}

.solucao__indice a:hover,
.solucao__indice a.esta-ativo {
	border-bottom-color: var(--acento);
	color: var(--acento-texto);
}

/* ---------------------------------------------------------------------
 * Blocos
 *
 * A peça base está em componentes.css, porque case e páginas de listagem
 * também a usam. Aqui ficam só os ajustes de ritmo da ficha.
 *
 * O espaço entre blocos é generoso de propósito: é o que faz uma ficha de
 * quatro blocos parecer resolvida, e não cortada.
 * ------------------------------------------------------------------ */

.solucao__corpo .bloco:last-of-type {
	border-bottom: 0;
}

/* Ficha com poucos blocos: ritmo mais apertado, para não sobrar página. */
.blocos-4 .bloco,
.blocos-5 .bloco {
	padding-block: var(--bloco-y);
}

/* ---------------------------------------------------------------------
 * Diferenciais
 * ------------------------------------------------------------------ */

.diferenciais {
	display: grid;
	gap: var(--e-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.diferencial {
	padding-top: var(--e-4);
	border-top: var(--borda-media) solid var(--acento);
}

.diferencial__titulo {
	font-size: var(--t-md);
}

.diferencial__texto {
	margin-top: var(--e-3);
	font-size: var(--t-sm);
	color: var(--texto-2);
}

/* ---------------------------------------------------------------------
 * Normas
 * ------------------------------------------------------------------ */

.normas {
	display: grid;
	gap: var(--e-3);
}

.norma {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--e-2) var(--e-4);
	padding: var(--e-4);
	background: var(--fundo-2);
	border-radius: var(--raio-2);
}

.norma__codigo {
	font-family: var(--fonte-dado);
	font-size: var(--t-sm);
	font-weight: var(--peso-forte);
	color: var(--texto);
	white-space: nowrap;
}

.norma__texto {
	font-size: var(--t-sm);
	color: var(--texto-2);
}

/* ---------------------------------------------------------------------
 * Autoria
 * ------------------------------------------------------------------ */

.autoria {
	display: grid;
	gap: var(--e-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	margin: 0;
}

.autoria__item dt {
	font-size: var(--t-xs);
	font-weight: var(--peso-forte);
	letter-spacing: var(--espaco-letra-rotulo);
	text-transform: uppercase;
	color: var(--texto-3);
}

.autoria__item dd {
	margin: var(--e-2) 0 0;
	font-size: var(--t-md);
	color: var(--texto);
}

.premios {
	display: grid;
	gap: var(--e-2);
	font-size: var(--t-sm);
	color: var(--texto-2);
}

/* ---------------------------------------------------------------------
 * Biblioteca
 * ------------------------------------------------------------------ */

.biblioteca__folder {
	margin-top: var(--e-6);
}

/* ---------------------------------------------------------------------
 * Relacionadas
 * ------------------------------------------------------------------ */

.relacionadas {
	padding-top: var(--secao-y);
	border-top: var(--borda-fina) solid var(--linha-divisoria);
}

/* ---------------------------------------------------------------------
 * Case
 * ------------------------------------------------------------------ */

.case__topo {
	max-width: 68ch;
	margin-bottom: var(--bloco-y);
}

.case__titulo {
	margin-bottom: var(--e-5);
	font-size: var(--t-2xl);
}

.case__dados {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-6);
	margin: 0 0 var(--e-5);
}

.case__dado dt {
	font-size: var(--t-xs);
	font-weight: var(--peso-forte);
	letter-spacing: var(--espaco-letra-rotulo);
	text-transform: uppercase;
	color: var(--texto-3);
}

.case__dado dd {
	margin: var(--e-1) 0 0;
	font-size: var(--t-base);
}

.bloco--narrativa {
	padding-block: var(--bloco-y);
}

.case__imagem {
	margin-bottom: var(--bloco-y);
}

.case__imagem img {
	width: 100%;
	border-radius: var(--raio-3);
}

.case__solucoes {
	margin-top: var(--secao-y);
	padding-top: var(--bloco-y);
	border-top: var(--borda-fina) solid var(--linha-divisoria);
}