/*
 * Tarjeta de inspiración (componente de Bricks 7ffe42): propuesta «velo», EN PRUEBA.
 *
 * Hasta ahora, al pasar el ratón, una franja gris claro crecía de 0 a 5,6 rem sobre el pie
 * de la foto. Aquí, en su lugar, un velo oscuro en degradado desde abajo con el título y
 * guardar en blanco: entra con un fundido, sin ampliar ni mover nada (13-oct-2026: ningún
 * hover de tarjeta amplía ni mueve). En pantallas táctiles (sin ratón) el velo está
 * siempre, porque no hay «encima» y si no, no se podía guardar desde la tarjeta.
 *
 * Solo actúa con la clase `sils-tarjeta-velo` en el <body> (bricks-child/inc/catalogo.php).
 * Para ver la tarjeta de antes: `?sils_tarjeta=0` en la dirección. Si se aprueba, esto
 * pasa al CSS del componente y se borran este archivo y el interruptor.
 */

body.sils-tarjeta-velo .inspo-card .titulo-inspiracion,
body.sils-tarjeta-velo .inspo-card:hover .titulo-inspiracion {
	flex-wrap: nowrap;
	align-items: flex-end;
	height: auto;
	padding: 8rem var(--sils-esp-s) var(--sils-esp-s);
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--sils-principal) 72%, transparent),
		color-mix(in srgb, var(--sils-principal) 40%, transparent) 45%,
		transparent
	);
	transform: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}

body.sils-tarjeta-velo .inspo-card:hover .titulo-inspiracion,
body.sils-tarjeta-velo .inspo-card:focus-within .titulo-inspiracion {
	opacity: 1;
}

/* El velo deja pasar el clic a la foto (enlace a la composición); el título y guardar, no. */
body.sils-tarjeta-velo .inspo-card .titulo-inspiracion > * {
	pointer-events: auto;
}

/* El título ocupa lo que sobra y guardar se queda a su derecha, abajo. */
body.sils-tarjeta-velo .inspo-card .titulo-inspiracion > p {
	flex: 1 1 auto;
	min-width: 0;
}

body.sils-tarjeta-velo .inspo-card .titulo-inspiracion p,
body.sils-tarjeta-velo .inspo-card .titulo-inspiracion p a {
	margin: 0;
	color: var(--sils-blanco);
	text-shadow: 0 1px 2px color-mix(in srgb, var(--sils-principal) 35%, transparent);
}

/* Guardar: el marcador en blanco; guardado, relleno en blanco. */
body.sils-tarjeta-velo .inspo-card .titulo-inspiracion .sils-listas-marcador,
body.sils-tarjeta-velo .inspo-card .titulo-inspiracion .sils-listas-marcador:hover,
body.sils-tarjeta-velo .inspo-card .titulo-inspiracion .sils-listas-marcador.es-guardada::before {
	color: var(--sils-blanco);
}

body.sils-tarjeta-velo .inspo-card .titulo-inspiracion .sils-listas-marcador {
	opacity: .85;
	transition: opacity .15s ease;
}

body.sils-tarjeta-velo .inspo-card .titulo-inspiracion .sils-listas-marcador:hover,
body.sils-tarjeta-velo .inspo-card .titulo-inspiracion .sils-listas-marcador.es-guardada {
	opacity: 1;
}

/* Táctil: el velo siempre visible. */
@media (hover: none) {
	body.sils-tarjeta-velo .inspo-card .titulo-inspiracion {
		opacity: 1;
	}
}

/* Móvil en horizontal: dos columnas estrechas, velo más bajo. En vertical va a una columna
 * (ajuste del mosaico de la plantilla 196494) y lleva el velo normal. */
@media (hover: none) and (min-width: 479px) and (max-width: 767px) {
	body.sils-tarjeta-velo .inspo-card .titulo-inspiracion,
	body.sils-tarjeta-velo .inspo-card:hover .titulo-inspiracion {
		padding: 5.6rem var(--sils-esp-xs) var(--sils-esp-xs);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.sils-tarjeta-velo .inspo-card .titulo-inspiracion {
		transition: none;
	}
}