/*
 * CSS do bloco Gutenberg spic/item-icone.
 *
 * Réplica de .career_why__item (css/career.css, usado em template-career.php),
 * mas como componente independente — não pertence a nenhum outro bloco,
 * pode ser usado solto em qualquer página.
 *
 * Registrado como estilo (handle "spic-bloco-item-icone") em
 * includes/blocks/blocks.php, referenciado pelo "style" do block.json —
 * diferente dos blocos dinâmicos (que enfileiram via wp_enqueue_style no
 * próprio render.php), este bloco não tem render.php (é estático: o HTML
 * final já vem pronto do save() salvo no post_content).
 */

.spic-item-icone {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 16px;
	line-height: 200%;
}

/* flexbox simples — dá pra inverter só com row-reverse, sem precisar
   reordenar o DOM (diferente do grid usado em imagem-texto-botao) */
.spic-item-icone.posicao-direita {
	flex-direction: row-reverse;
}

.spic-item-icone__icone {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.spic-item-icone__texto {
	display: inline-block;
}

/*
 * --- Cor do texto — controle "Cor do texto" no Inspector ---
 * Sem classe (`textColor` vazio, o padrão), o texto HERDA a cor de onde o
 * bloco está — não muda o comportamento de sempre. Sistema próprio (não o
 * seletor de cor nativo do Gutenberg): esse bloco é estático (sem
 * render.php), e o texto é um RichText simples sem controles nativos de
 * formatação de qualquer forma.
 */
.spic-item-icone__texto.texto-navy {
	color: var(--spic-navy);
}

.spic-item-icone__texto.texto-blue {
	color: var(--spic-blue);
}

.spic-item-icone__texto.texto-azul-claro {
	color: var(--spic-azul-claro);
}

.spic-item-icone__texto.texto-lime {
	color: var(--spic-lime);
}

.spic-item-icone__texto.texto-green {
	color: var(--spic-green);
}

.spic-item-icone__texto.texto-red {
	color: var(--spic-red);
}

.spic-item-icone__texto.texto-preto {
	color: var(--spic-preto);
}

.spic-item-icone__texto.texto-branco {
	color: #fff;
}