/**
 * Malu Pops — ingredientes de la ficha de producto (patrón ficha-ingredientes
 * y bloque malupops/ingredientes), según el concepto single-product-section2.
 *
 * Se carga con la clase .mp-ingredientes del patrón o con el bloque.
 *
 * - Sección a todo el ancho, bajo la ola de la tabla nutricional, con las
 *   manchas rosa y lima del cliente en las esquinas de abajo (su crema pasó a
 *   transparencia y su pie se funde con el fondo).
 * - Titular con el personaje lima del cliente y entradilla: los de
 *   ficha-secciones.css, como en la tabla nutricional.
 * - Una tarjeta blanca por sabor: icono redondo, nombre, la ilustración que
 *   asoma por arriba a la derecha, ingredientes y el aviso de alérgenos en el
 *   color del sabor. Dos por fila desde 56em; los avisos quedan a la misma
 *   altura aunque un sabor tenga más ingredientes.
 */

.mp-ingredientes {
	padding-block: var(--wp--preset--spacing--30) clamp(3.5rem, 1.5rem + 5vw, 6rem);
	background: url("../../img/ficha/ingredientes-fondo.webp") center bottom / max(100%, 60rem) auto no-repeat;

	/* Hueco para las ilustraciones que asoman por encima de las tarjetas. */
	& .mp-ingredientes__lista {
		margin-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 0;
	}
}

/* --- Bloque: una tarjeta por sabor --------------------------------------- */

.mp-ingredientes__lista {
	/* Botella de leche del aviso de alérgenos (Lucide «milk»), en máscara. */
	--mp-leche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2h8M9 2v2.789a4 4 0 0 1-.672 2.219l-.656.984A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.789a4 4 0 0 0-.672-2.219l-.656-.984A4 4 0 0 1 15 4.788V2'/%3E%3Cpath d='M7 15a6.47 6.47 0 0 1 5 0 6.47 6.47 0 0 0 5 0'/%3E%3C/svg%3E");

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(4rem, 3rem + 2vw, 4.5rem) clamp(1rem, 0.4rem + 1.6vw, 1.75rem);
	text-align: start;

	& > * {
		margin: 0;
	}
}

@media (width >= 56em) {
	.mp-ingredientes__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Cada sabor: el color del aviso y de su botella, y el ancho de su
 * ilustración (el «sizes» de render.php lo sigue), cuánto asoma por arriba (en
 * proporción a su ancho) y su distancia al borde derecho, como en el
 * concepto. Un sabor sin color propio va en lavanda y sin ilustración.
 */
.mp-ingrediente {
	--mp-sabor-aviso: #eeedfd;
	--mp-sabor-botella: var(--wp--preset--color--morado);
	--mp-ilustracion: 0px;
	--mp-ilustracion-asoma: 0;
	--mp-ilustracion-borde: 1.5rem;

	&.mp-sabor--vainilla {
		--mp-sabor-aviso: #e5eafe;
		--mp-ilustracion: clamp(8.5rem, 5rem + 8vw, 15rem);
		--mp-ilustracion-asoma: 0.06;
		--mp-ilustracion-borde: clamp(0.5rem, 0.2rem + 1.2vw, 1.75rem);
	}

	&.mp-sabor--chocolate {
		--mp-sabor-aviso: #f7eae5;
		--mp-sabor-botella: var(--wp--preset--color--contrast);
		--mp-ilustracion: clamp(7rem, 4rem + 9.5vw, 13rem);
		--mp-ilustracion-asoma: 0.36;
		--mp-ilustracion-borde: 0.25rem;
	}
}

.mp-ingredientes__lista .mp-ingrediente {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	gap: clamp(1rem, 0.8rem + 0.6vw, 1.4rem);
	margin: 0;
	padding: clamp(1.25rem, 0.8rem + 1.3vw, 2rem);
	border-radius: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
	background-color: var(--wp--preset--color--blanco);
	box-shadow: 0 1.5rem 3rem -1.75rem rgb(28 11 69 / 0.24), 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);

	& > * {
		margin: 0;
	}
}

/* Icono y nombre; a la derecha, el hueco de la ilustración. */
.mp-ingredientes__lista .mp-ingrediente__cabecera {
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 0.5rem + 1vw, 1.5rem);
	min-block-size: clamp(3.75rem, 2.9rem + 2.4vw, 5.5rem);
	padding-inline-end: calc(var(--mp-ilustracion) * 0.85);
}

.mp-ingredientes__lista .mp-ingrediente__icono {
	flex: none;
	inline-size: clamp(3.75rem, 2.9rem + 2.4vw, 5.5rem);
	block-size: auto;
	aspect-ratio: 1;
}

.mp-ingredientes__lista .mp-ingrediente__titulo {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--coolvetica);
	font-size: clamp(1.875rem, 1.35rem + 1.6vw, 2.75rem);
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

/* La ilustración asoma por encima de la tarjeta, arriba a la derecha. */
.mp-ingredientes__lista .mp-ingrediente__ilustracion {
	position: absolute;
	inset-block-start: calc(var(--mp-ilustracion) * var(--mp-ilustracion-asoma) * -1);
	inset-inline-end: var(--mp-ilustracion-borde);
	inline-size: var(--mp-ilustracion);
	block-size: auto;
	pointer-events: none;
}

.mp-ingredientes__lista .mp-ingrediente__texto {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, var(--wp--preset--color--blanco));
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}

.mp-ingredientes__lista .mp-ingrediente__aviso {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(0.85rem, 0.6rem + 0.8vw, 1.35rem);
	padding: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem) clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
	border-radius: 1.25rem;
	background-color: var(--mp-sabor-aviso);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.45;

	&::before {
		content: "";
		inline-size: clamp(2rem, 1.7rem + 0.9vw, 2.6rem);
		aspect-ratio: 1;
		background-color: var(--mp-sabor-botella);
		-webkit-mask: var(--mp-leche) center / contain no-repeat;
		mask: var(--mp-leche) center / contain no-repeat;
	}
}

@media (width < 24em) {
	.mp-ingredientes__lista .mp-ingrediente__cabecera { padding-inline-end: 0; }
	.mp-ingredientes__lista .mp-ingrediente__ilustracion { display: none; }
}

@media (forced-colors: active) {
	.mp-ingredientes__lista .mp-ingrediente {
		border: 1px solid CanvasText;
	}

	.mp-ingredientes__lista .mp-ingrediente__aviso::before {
		background-color: CanvasText;
	}
}