/*
 * Kairum — Faixa de parceiros/locadoras (widget kairum-partners).
 * Usa os tokens globais de kairum-tokens.css (prefixo --kairum-*) e as
 * variáveis por instância definidas pelos controles de Estilo do widget
 * no editor (prefixo --kp-*, injetadas pelo Elementor no wrapper via
 * {{WRAPPER}} e herdadas por cascata pelos elementos internos).
 */

/*
 * IMPORTANTE: as variáveis --kp-* NÃO são redeclaradas aqui com um valor
 * fixo. Se fizéssemos ".kairum-partners { --kp-logo-h: 32px; }", essa
 * declaração venceria sempre a variável que o Elementor injeta no
 * wrapper externo (.elementor-widget-kairum-partners), porque uma
 * redeclaração no próprio elemento tem prioridade sobre uma herdada de
 * um ancestral — e os controles de Estilo do editor parariam de
 * funcionar. Os valores-padrão abaixo usam apenas o segundo argumento
 * de var(), que só é usado quando a variável não foi definida em
 * nenhum ancestral (ex.: widget renderizado fora do Elementor).
 */

.kairum-partners {
	padding-block: clamp(48px, 6vw, 80px);
	text-align: center;
}

.kairum-partners__wrap {
	max-width: var(--kairum-maxw);
	margin: 0 auto;
	padding-inline: var(--kairum-pad);
}

.kairum-partners__label {
	font-family: var(--kairum-font-display);
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--kairum-gray-2);
	margin: 0;
}

.kairum-partners__row {
	margin-top: clamp(28px, 3vw, 42px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--kp-justify, center);
	gap: var(--kp-gap, 48px);
}

/*
 * Trava de tamanho com !important: uma faixa de logos de parceiros é um
 * componente onde o arquivo de imagem enviado pelo cliente (às vezes um
 * PNG em resolução original, de centenas de pixels de largura) nunca
 * pode ditar o tamanho final. Sem !important aqui, qualquer regra mais
 * específica vinda do tema ativo ou de CSS legado de outro plugin
 * (ex.: ".content img { max-width: 100%; height: auto; }") ganha da
 * cascata e a imagem volta a aparecer no tamanho nativo do arquivo —
 * foi exatamente esse o sintoma reportado (logos enormes, cada um em
 * sua própria linha).
 */
.kairum-partners__logo {
	height: var(--kp-logo-h, 32px) !important;
	width: auto !important;
	max-width: var(--kp-logo-maxw, 160px) !important;
	max-height: var(--kp-logo-h, 32px) !important;
	object-fit: contain !important;
	flex: 0 0 auto;
	opacity: var(--kp-opacity, 0.6);
	transition: opacity 0.4s var(--kairum-ease), filter 0.4s var(--kairum-ease), transform 0.4s var(--kairum-ease);
}

.kairum-partners__logo:hover {
	opacity: var(--kp-opacity-hover, 1);
	transform: translateY(-2px);
}

.kairum-partners__logo--sm {
	height: calc(var(--kp-logo-h, 32px) * var(--kp-logo-h-sm-ratio, 0.72)) !important;
	max-height: calc(var(--kp-logo-h, 32px) * var(--kp-logo-h-sm-ratio, 0.72)) !important;
}

.kairum-partners__logo--lg {
	height: calc(var(--kp-logo-h, 32px) * var(--kp-logo-h-lg-ratio, 1.5)) !important;
	max-height: calc(var(--kp-logo-h, 32px) * var(--kp-logo-h-lg-ratio, 1.5)) !important;
}

/*
 * Tratamento visual do logo — controlado pelo select "Tratamento do
 * logo" na aba Estilo. A classe kairum-partners--treatment-* é aplicada
 * diretamente na <section> pelo render() do widget (não via prefix_class
 * do Elementor, que cairia no wrapper externo em vez deste elemento).
 */
.kairum-partners--treatment-mono-light .kairum-partners__logo {
	filter: brightness(0) invert(1);
}

.kairum-partners--treatment-mono-dark .kairum-partners__logo {
	filter: brightness(0) invert(0);
}

.kairum-partners--treatment-original .kairum-partners__logo {
	filter: none;
}