/*
 * Tarjeta de categoría: bodegón de productos sobre una "mesa" de color y el nombre debajo.
 *
 *   Contenedor tarjeta               → category-card category-card--<color>
 *     Contenedor bodegón             → category-card__scene category-card__scene--<1|2|3>
 *       Imágenes de productos        → category-card__product   (1 a 3, en orden de izquierda a derecha)
 *     Título H3                      → category-card__title
 *
 * El modificador del bodegón indica cuántos productos lleva; con 2 o 3, el del medio va adelante.
 * Colores: --red (Alimentos), --brown (Confites), --green (Panetones), --wine (Mascotas).
 */

.category-card {
	--card-accent: var(--color-brand-red);
	--card-tint: #FFF1EB;
	--row-gap: 0px;

	display: block;
}

.category-card--red   { --card-accent: #D7261E; --card-tint: #FFF1EB; }
.category-card--brown { --card-accent: #6B3A1F; --card-tint: #F8EFE8; }
.category-card--green { --card-accent: #0E6B3A; --card-tint: #E9F6EE; }
.category-card--wine  { --card-accent: #A52C35; --card-tint: #FFF0EF; }

.category-card__scene {
	--product-w: 50%;

	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 24px;
	background: var(--card-tint);
	isolation: isolate; /* la mezcla de los productos queda dentro del bodegón */
}

/* La mesa: franja de color en el tercio inferior. */
.category-card__scene::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 0;
	height: 30%;
	background: color-mix(in srgb, var(--card-accent) 22%, var(--card-tint));
	border-top: 2px solid color-mix(in srgb, var(--card-accent) 38%, var(--card-tint));
}

.category-card__product {
	position: absolute !important; /* Elementor posiciona sus widgets en relativo */
	bottom: 10%;
	left: 25%;
	z-index: 1;
	width: var(--product-w) !important; /* pisa el ancho que Elementor fija a los widgets */
	/* La mezcla va en el widget y no en el <img>: el widget, al tener z-index, crea su propio
	   contexto de apilamiento y el <img> ya no se mezclaría con el fondo de la tarjeta. */
	mix-blend-mode: multiply;
}
.category-card__product img { width: 100%; height: auto; }

/* Posición de cada producto según cuántos hay. */
.category-card__scene--2 { --product-w: 52%; }
.category-card__scene--2 > :nth-child(1) { left: 0; }
.category-card__scene--2 > :nth-child(2) { left: 48%; z-index: 2; }

.category-card__scene--3 { --product-w: 46%; }
.category-card__scene--3 > :nth-child(1) { left: 0; }
.category-card__scene--3 > :nth-child(2) { left: 27%; z-index: 2; }
.category-card__scene--3 > :nth-child(3) { left: 54%; }

.category-card__title { margin-top: 16px; }
.category-card__title .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -.02em;
	line-height: 1.1;
	color: var(--color-ink);
}

@media (min-width: 521px) {
	.category-card__scene { aspect-ratio: 1 / .95; }
}