/*
 * CSS dos blocos Gutenberg spic/cards-destaque (grade) e
 * spic/cards-destaque-item (card individual, filho único permitido).
 *
 * Grade escalável: flex-wrap, cada card com flex-basis mínimo — adicionar
 * um 3º/4º card quebra linha automaticamente, sem precisar mexer em CSS.
 *
 * Carregado por wp_enqueue_style() em render.php do item (front-end) e
 * automaticamente no editor via includes/blocks/blocks.php (o handle é
 * compartilhado pelos dois blocos — "style"/"render" apontam pro mesmo
 * arquivo, sem duplicar CSS).
 */

.spic-cards-destaque {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.spic-cards-destaque__item {
	position: relative;
	display: block;
	flex: 1 1 360px;
	min-height: 320px;
	overflow: hidden;
	background-color: var(--spic-preto);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	text-decoration: none;
	transition: .5s;
}

.spic-cards-destaque__item:hover {
	transform: scale(1.03)
}

.spic-cards-destaque__imagem,
.spic-cards-destaque__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.spic-cards-destaque__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 65%);
}

.spic-cards-destaque__conteudo {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-3);
}

.spic-cards-destaque__link {
	color: #fff;
}

.spic-cards-destaque__titulo {
	font-family: Venn;
	margin: 0 0 var(--space-1);
	color: #fff;
}

.spic-cards-destaque__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--text-body);
}

.spic-cards-destaque__link::after {
	content: '\203A';
	transition: transform 0.2s ease;
}

a.spic-cards-destaque__item:hover .spic-cards-destaque__link::after {
	transform: translateX(4px);
}

/*
 * --- Cor do título/link (opcional, controle "Tipografia" no Inspector) ---
 * Sem escolher nada, os dois continuam brancos (regra base acima) — igual
 * sempre foi.
 */
.spic-cards-destaque__titulo.titulo-navy,
.spic-cards-destaque__link.texto-navy {
	color: var(--spic-navy);
}

.spic-cards-destaque__titulo.titulo-blue,
.spic-cards-destaque__link.texto-blue {
	color: var(--spic-blue);
}

.spic-cards-destaque__titulo.titulo-azul-claro,
.spic-cards-destaque__link.texto-azul-claro {
	color: var(--spic-azul-claro);
}

.spic-cards-destaque__titulo.titulo-lime,
.spic-cards-destaque__link.texto-lime {
	color: var(--spic-lime);
}

.spic-cards-destaque__titulo.titulo-green,
.spic-cards-destaque__link.texto-green {
	color: var(--spic-green);
}

.spic-cards-destaque__titulo.titulo-red,
.spic-cards-destaque__link.texto-red {
	color: var(--spic-red);
}

.spic-cards-destaque__titulo.titulo-preto,
.spic-cards-destaque__link.texto-preto {
	color: var(--spic-preto);
}

.spic-cards-destaque__titulo.titulo-branco,
.spic-cards-destaque__link.texto-branco {
	color: #fff;
}

@media screen and (max-width: 767px) {
	.spic-cards-destaque__item {
		flex-basis: 100%;
		min-height: 240px;
	}
}