/* Categorias em Destaque — grid de imagem + título + "Ver produtos".
   Cores/tipografia/espaçamentos controláveis pelo widget Elementor via
   variáveis CSS (--lc-cat-*) e Typography group controls direto nos
   seletores de título/CTA; aqui só layout, comportamento e os valores
   padrão (usados quando o widget não sobrescreve nada). Mesmo breakpoint
   mobile do resto do plugin: 1024px.

   4 itens lado a lado no desktop, 2x2 no celular (grid-template-columns
   muda no media query abaixo) — sempre, não é configurável, é o
   comportamento pedido pro módulo. */

.loja-cipo-cat-highlights-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--lc-cat-gap, 4px);
	padding: 0 var(--lc-cat-padding-x, 20px) var(--lc-cat-padding-bottom, 20px);
}

.loja-cipo-cat-highlight-item {
	position: relative;
	display: block;
	height: var(--lc-cat-height, 420px);
	overflow: hidden;
	text-decoration: none;
	background-color: #eee;
}

/* Camada da imagem, separada do link/div — é ela que dá o zoom no hover
   (mesmo truque dos banners do Mega Menu, ver nav.css): fica numa camada
   própria pra escalar sozinha sem "estourar" o item nem empurrar o texto. */
.loja-cipo-cat-highlight-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.45s ease;
}

.loja-cipo-cat-highlight-item:hover .loja-cipo-cat-highlight-image {
	transform: scale(1.06);
}

.loja-cipo-cat-highlight-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
	pointer-events: none;
}

.loja-cipo-cat-highlight-caption {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.loja-cipo-cat-highlight-title {
	color: var(--lc-cat-title-color, #ffffff);
	font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

.loja-cipo-cat-highlight-cta {
	display: inline-block;
	color: var(--lc-cat-cta-color, #ffffff);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (max-width: 1024px) {
	.loja-cipo-cat-highlights-grid {
		/* 2x2, não 4 numa fileira só espremida — pedido explícito. */
		grid-template-columns: repeat(2, 1fr);
		gap: var(--lc-cat-gap-mobile, 4px);
		padding: 0 var(--lc-cat-padding-x-mobile, 12px) var(--lc-cat-padding-bottom-mobile, 12px);
	}

	.loja-cipo-cat-highlight-item {
		height: var(--lc-cat-height-mobile, 220px);
	}

	.loja-cipo-cat-highlight-caption {
		left: 14px;
		right: 14px;
		bottom: 14px;
	}
}