/*
 * Clientes (RF18–RF20).
 * Pattern: patterns/clientes.php
 */

/*
 * O design mantém 8 colunas em desktop; abaixo de 1280px reduzimos para 4 colunas
 * para preservar legibilidade (RNF04) em notebooks, tablet e mobile.
 */
.almar-clientes .almar-clientes__grade {
	grid-template-columns: repeat(8, minmax(0, 1fr));
	align-items: center;
}

@media (max-width: 1280px) {
	.almar-clientes .almar-clientes__grade {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.almar-clientes__grade .wp-block-image {
	margin: 0;
	width: 100%;
	transition: transform 0.35s ease;
}

/*
 * Altura fixa, não max-height: os logos vêm do tema, sem atributos width/height,
 * e sem altura reservada a linha colapsa a zero até a imagem carregar — o que
 * empurra a página inteira e faz o clique numa âncora parar no lugar errado.
 */
.almar-clientes__grade img {
	width: 100%;
	height: clamp(28px, 3vw, 40px);
	object-fit: contain;
	opacity: 0.75;
	filter: grayscale(1);
	transition: filter 0.4s ease, opacity 0.35s ease;
}

.almar-clientes__grade .wp-block-image:hover,
.almar-clientes__grade .wp-block-image:focus-within {
	transform: translateY(-4px) scale(1.06);
}

.almar-clientes__grade .wp-block-image:hover img,
.almar-clientes__grade .wp-block-image:focus-within img {
	opacity: 1;
	filter: grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
	.almar-clientes__grade .wp-block-image {
		transition: none;
	}

	.almar-clientes__grade img {
		transition: filter 0.2s ease, opacity 0.2s ease;
	}

	.almar-clientes__grade .wp-block-image:hover,
	.almar-clientes__grade .wp-block-image:focus-within {
		transform: none;
	}
}

@media (min-width: 2080px) {
	.almar-clientes {
		padding-block: 56px !important;
	}

	.almar-clientes > .wp-block-heading {
		margin-bottom: 24px !important;
	}

	.almar-clientes > .wp-block-separator {
		margin-bottom: 32px !important;
	}

	.almar-clientes__grade img {
		height: clamp(36px, 2.5vw, 48px);
	}
}