/**
 * Malu Pops — «Dos sabores» (patrón beneficios-sabores) y el bloque «Datos
 * de un sabor».
 *
 * Solo se carga en las páginas que pintan un bloque con la clase .mp-sabores
 * o el bloque malupops/datos-sabor. El titular es el grande de la ficha
 * (ficha-secciones.css).
 *
 * - Una tarjeta por sabor con el color de su tabla nutricional en la ficha:
 *   vainilla en lavanda y chocolate en melocotón. Dentro, la caja del
 *   cliente (791 × 1101, las dos con la misma proporción) a la izquierda y,
 *   a su lado, el nombre en Coolvetica, la frase y los datos. En el móvil,
 *   la caja encima.
 * - Las dos tarjetas en fila desde 80em; por debajo, una por fila.
 * - Los datos, en fichas blancas con su icono de color (Lucide y, la sal,
 *   Tabler; máscaras CSS con el trazo original): dos por fila y, si la
 *   tarjeta es ancha, tres (consulta de contenedor sobre el texto de la
 *   tarjeta). A la vista, el valor y debajo su nombre, como en el concepto;
 *   en el HTML es una lista de definiciones (nombre y valor).
 */

.mp-sabores {
	padding-block: var(--wp--preset--spacing--70) 0;

	& .mp-sabores__lista {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
		margin-block: clamp(2rem, 1.25rem + 2.4vw, 3.5rem) 0;
	}
}

/* --- Tarjeta de cada sabor --------------------------------------------------- */

.mp-sabores .mp-sabor-tarjeta {
	--mp-tarjeta-fondo: #efedfd;
	--mp-tarjeta-nombre: var(--wp--preset--color--morado);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
	margin: 0;
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	border-radius: 2rem;
	background-color: var(--mp-tarjeta-fondo);
	text-align: start;

	& > * {
		margin: 0;
	}
}

.mp-sabores .mp-sabor-tarjeta--vainilla {
	--mp-tarjeta-fondo: #eceffe;
}

.mp-sabores .mp-sabor-tarjeta--chocolate {
	--mp-tarjeta-fondo: #f9efe8;
	--mp-tarjeta-nombre: #6a3b2b;
}

/* La caja. Su «sizes» está en inc/Imagen.php: mantenerlos a la par. */
.mp-sabores .mp-sabor-tarjeta__caja {
	inline-size: min(100%, 11rem);
	line-height: 0;

	& img {
		display: block;
		inline-size: 100%;
		block-size: auto;
	}
}

.mp-sabores .mp-sabor-tarjeta__texto {
	container-type: inline-size;
	align-self: center;
	inline-size: 100%;

	& > * {
		margin: 0;
	}
}

.mp-sabores .mp-sabor-tarjeta__nombre {
	color: var(--mp-tarjeta-nombre);
	font-size: clamp(2rem, 1.5rem + 1.5vw, 2.875rem);
	line-height: 1;
}

.mp-sabores .mp-sabor-tarjeta__frase {
	margin-block-start: 0.35em;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, var(--wp--preset--color--blanco));
	font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem);
	line-height: 1.4;
}

.mp-sabores .mp-sabor-tarjeta__texto > .mp-datos-sabor {
	margin-block-start: clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
}

@media (width >= 30em) {
	.mp-sabores .mp-sabor-tarjeta {
		grid-template-columns: auto minmax(0, 1fr);
		justify-items: stretch;
		align-items: center;
	}

	.mp-sabores .mp-sabor-tarjeta__caja {
		inline-size: clamp(8.5rem, 4rem + 14vw, 14rem);
	}
}

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

	.mp-sabores .mp-sabor-tarjeta__caja {
		inline-size: clamp(11rem, 3rem + 10vw, 14rem);
	}
}

/* --- Datos de un sabor (bloque malupops/datos-sabor) ------------------------- */

.mp-datos-sabor {
	--mp-icono-energia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0a5 5 0 0 1 1-3a1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/%3E%3C/svg%3E");
	--mp-icono-proteina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17.596 12.768a2 2 0 1 0 2.829-2.829l-1.768-1.767a2 2 0 0 0 2.828-2.829l-2.828-2.828a2 2 0 0 0-2.829 2.828l-1.767-1.768a2 2 0 1 0-2.829 2.829zM2.5 21.5l1.4-1.4M20.1 3.9l1.4-1.4M5.343 21.485a2 2 0 1 0 2.829-2.828l1.767 1.768a2 2 0 1 0 2.829-2.829l-6.364-6.364a2 2 0 1 0-2.829 2.829l1.768 1.767a2 2 0 0 0-2.828 2.829zM9.6 14.4l4.8-4.8'/%3E%3C/svg%3E");
	--mp-icono-carbohidratos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2 22L16 8M3.47 12.53L5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94m4-4L9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94m4-4L13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4'/%3E%3Cpath d='M11.47 17.47L13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0m4-4L17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0m4-4L21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0'/%3E%3C/g%3E%3C/svg%3E");
	--mp-icono-azucares: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16'/%3E%3C/svg%3E");
	--mp-icono-azucares-anadidos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7l8.7 5l8.7-5M12 22V12'/%3E%3C/g%3E%3C/svg%3E");
	--mp-icono-sodio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 13v.01M10 16v.01m4-.01v.01M7.5 8h9l-.281-2.248A2 2 0 0 0 14.234 4H9.766A2 2 0 0 0 7.78 5.752z'/%3E%3Cpath d='m7.5 8l-1.612 9.671A2 2 0 0 0 7.861 20h8.278a2 2 0 0 0 1.973-2.329L16.5 8'/%3E%3C/g%3E%3C/svg%3E");

	& .mp-datos-sabor__lista {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 0.6rem;
		margin: 0;
	}

	/* Icono a la izquierda; a su lado, el valor y debajo su nombre. */
	& .mp-datos-sabor__dato {
		--mp-dato-icono: var(--mp-icono-energia);
		--mp-dato-color: #ea5200;

		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"icono valor"
			"icono nombre";
		align-items: center;
		column-gap: 0.75rem;
		padding: 0.7rem 0.9rem;
		border-radius: 1rem;
		background-color: var(--wp--preset--color--blanco);
		box-shadow: 0 0.5rem 1.25rem -1rem rgb(28 11 69 / 0.35);

		&::before {
			content: "";
			grid-area: icono;
			inline-size: 1.625rem;
			block-size: 1.625rem;
			background-color: var(--mp-dato-color);
			-webkit-mask: var(--mp-dato-icono) center / contain no-repeat;
			mask: var(--mp-dato-icono) center / contain no-repeat;
		}
	}

	& .mp-datos-sabor__valor {
		grid-area: valor;
		align-self: end;
		margin: 0;
		color: var(--wp--preset--color--contrast);
		font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
		font-weight: 500;
		line-height: 1.2;
		white-space: nowrap;
	}

	& .mp-datos-sabor__nombre {
		grid-area: nombre;
		align-self: start;
		color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, var(--wp--preset--color--blanco));
		font-size: var(--wp--preset--font-size--x-small);
		line-height: 1.3;
	}

	& .mp-datos-sabor__dato--proteina {
		--mp-dato-icono: var(--mp-icono-proteina);
		--mp-dato-color: var(--wp--preset--color--morado);
	}

	& .mp-datos-sabor__dato--carbohidratos {
		--mp-dato-icono: var(--mp-icono-carbohidratos);
		--mp-dato-color: #d97a00;
	}

	& .mp-datos-sabor__dato--azucares {
		--mp-dato-icono: var(--mp-icono-azucares);
		--mp-dato-color: #e0304e;
	}

	& .mp-datos-sabor__dato--azucares-anadidos {
		--mp-dato-icono: var(--mp-icono-azucares-anadidos);
		--mp-dato-color: #8b44e8;
	}

	& .mp-datos-sabor__dato--sodio {
		--mp-dato-icono: var(--mp-icono-sodio);
		--mp-dato-color: #3f5bd9;
	}
}

/* Dos por fila en cuanto caben; tres si la tarjeta es ancha (una sola por fila, entre 48em y 80em). */
@container (width >= 17rem) {
	.mp-datos-sabor .mp-datos-sabor__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (width >= 34rem) {
	.mp-datos-sabor .mp-datos-sabor__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (forced-colors: active) {
	.mp-datos-sabor .mp-datos-sabor__dato {
		border: 1px solid CanvasText;

		&::before {
			background-color: CanvasText;
		}
	}
}