/* ==========================================================================
   FAIXA DE LOGOS DE CLIENTES — Fase 2
   ==========================================================================

   Antes era uma imagem só, achatada, com logos de tamanhos visuais
   diferentes e alguns cortados na borda. Agora cada logo tem a própria
   caixa, e a largura de cada um vem calculada por área de tinta.

   GRADE, E NÃO LINHA QUE QUEBRA

   Com flex-wrap as linhas ficavam desiguais e a última sobrava com um logo
   sozinho, porque cada logo tem largura diferente. Numa grade de colunas
   iguais isso não acontece: as colunas se alinham, a última linha fica
   parcial mas centrada, e a largura óptica de cada logo continua valendo
   dentro da célula.

   Os arquivos são brancos sobre transparente, então a faixa depende de
   fundo escuro. É o caso: ela vive sobre o navy da home.

   SEM GUTTER PRÓPRIO

   A faixa tinha padding-inline no tablet e no celular. Como ela mora dentro
   de uma seção do Elementor, que já dá o gutter, os dois somavam: medido em
   390, as logos começavam em x32 enquanto o resto da página começava em
   x16; em 994, em x40 contra x20. Quem dá o recuo lateral é a seção, uma
   vez só.
   ========================================================================== */

.bfd-logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	justify-items: center;
	align-items: center;
	column-gap: var( --bf-space-sm );
	row-gap: var( --bf-space-sm );
}

.bfd-logo {
	display: flex;
	align-items: center;
	justify-content: center;

	/* A altura da célula dá a linha comum a todos. 64px em vez de 56px
	   porque os logos altos (Funai, Marista, TSX, Verdemar) batiam no teto
	   e acabavam menores do que o cálculo pedia. */
	height: 64px;
	width: 100%;
}

.bfd-logo img {
	display: block;
	width: var( --bfd-logo-largura, 120px );
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;

	/* Uniformiza o peso do conjunto sem apagar nenhum logo: sem isso, os de
	   traço mais fino somem ao lado dos mais cheios. */
	opacity: 0.88;
	transition: opacity 160ms ease;
}

.bfd-logo img:hover {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.bfd-logo img {
		transition: none;
	}
}

/* De 768 a 1024 a faixa já não precisa de recuo próprio. Ela precisou por um
   tempo: o container que a abriga estava com padding zero no tablet e a grade
   ia de borda a borda, medido a 753, 885 e 994px com o primeiro logo em x=0.
   Depois o gutter de 20px do Kit voltou para as seções de primeiro nível, e
   o recuo daqui passou a somar com o de lá. Só o número de colunas muda. */
@media ( max-width: 1024px ) {
	.bfd-logos {
		grid-template-columns: repeat( auto-fill, minmax( 122px, 1fr ) );
		row-gap: var( --bf-space-sm );
	}

	.bfd-logo {
		height: 52px;
	}
}

/* Celular: 48 logos em 3 colunas dariam 16 linhas e quase 1000 px de
   rolagem. Quatro colunas menores cortam isso quase pela metade. É o
   preço de ter nome de cliente como texto em vez de uma imagem só, e
   ele cai onde dá.

   Só que quatro colunas sem folga deixavam a faixa sem respiro nenhum.
   Medido a 390px: a grade começava em x=0 e terminava em x=390, encostada
   nas duas bordas da tela, enquanto toda outra seção do site respeita 16px
   de margem. Cada logo ocupava os 92px inteiros da célula, então a única
   separação entre dois logos vizinhos eram 8px, e acima e abaixo da faixa
   sobravam 31px e 37px.

   As três medidas entram aqui: a margem lateral que o resto do site usa, um
   vão maior entre colunas, e o mesmo espaço entre linhas que o tablet e o
   desktop já usam. A célula cai de 92px para 80px, e é troca boa: logo com
   ar em volta lê melhor que logo maior colado no vizinho. */
@media ( max-width: 767px ) {
	.bfd-logos {
		grid-template-columns: repeat( 3, 1fr );
		column-gap: var( --bf-space-sm );
		row-gap: var( --bf-space-sm );
		margin-block: var( --bf-space-md );
	}

	.bfd-logo {
		height: 40px;
	}

	/* Quatro colunas davam celula de 80px com o logo ocupando os 80px
	   inteiros: a unica separacao entre dois vizinhos era o vao da grade, e a
	   faixa lia como um bloco continuo. Com tres colunas a celula vai para
	   106px, e o teto de 88% deixa ar dentro da propria celula, entao a
	   distancia real entre dois logos passa de 12px para cerca de 32px. */
	.bfd-logo img {
		max-width: 88%;
	}
}