/**
 * Esqueleto com brilho, usado enquanto a lista e a ficha carregam.
 *
 * Base e brilho saem da paleta do núcleo (A12 Paletas), como o resto: em
 * verde-menta o esqueleto é esverdeado, em vermelho fica avermelhado, sem
 * precisar de manutenção aqui.
 */

.a12-red-skeleton {
	--a12-red-skel-base: var( --a12-fundo-minimo, var( --e-global-color-a12superficiesutil, #eef1f0 ) );
	--a12-red-skel-brilho: var( --a12-fundo-suave, var( --e-global-color-a12superficie, #ffffff ) );

	position: relative;
	background-color: var( --a12-red-skel-base );
	background-image: linear-gradient(
		90deg,
		var( --a12-red-skel-base ) 0%,
		var( --a12-red-skel-brilho ) 45%,
		var( --a12-red-skel-base ) 90%
	);
	background-repeat: no-repeat;
	background-size: 220% 100%;
	border-radius: 8px;
	animation: a12-red-brilho 1.4s ease-in-out infinite;
}

@keyframes a12-red-brilho {
	from {
		background-position: 140% 0;
	}

	to {
		background-position: -40% 0;
	}
}

/* Quem pediu menos movimento vê o bloco parado, sem o brilho correndo. */
@media ( prefers-reduced-motion: reduce ) {
	.a12-red-skeleton {
		background-image: none;
		animation: none;
	}
}

/* Linhas de texto fingido. */
.a12-red-skeleton--linha {
	height: 0.85em;
	border-radius: 999px;
}

.a12-red-skeleton--titulo {
	height: 1.3em;
	border-radius: 999px;
}

/* Cartão do grid: mesma caixa do cartão real, para a grade não saltar. */
.a12-red-skel-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.a12-red-skel-card__foto {
	flex: 1 1 auto;
	min-height: 140px;
	border-radius: 8px;
}

.a12-red-skel-card__linhas {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.a12-red-skel-card__linhas .a12-red-skeleton:nth-child( 2 ) {
	width: 70%;
}

.a12-red-skel-card__linhas .a12-red-skeleton:nth-child( 3 ) {
	width: 45%;
}