/**
 * Componente «portada» — una cubierta, entera, en una caja de medida fija.
 *
 * EL PROBLEMA QUE RESUELVE
 *
 * Hasta ahora toda cubierta se pintaba con `aspect-ratio: 2/3` y
 * `object-fit: cover`. Eso encaja perfecto solo si la imagen mide exactamente
 * 2:3; cualquier otra proporción se recorta. Y se recortaba de verdad: en la
 * tienda se leía «orrilla» donde debía poner «Zorrilla», y a varias cubiertas
 * les faltaba el nombre del autor.
 *
 * `object-fit: contain` enseña la imagen entera, pero deja franjas vacías
 * arriba y abajo (o a los lados) que parecen un error de maquetación.
 *
 * LA SOLUCIÓN
 *
 * La caja mantiene su proporción fija —la rejilla no baila— y la cubierta se
 * pinta entera dentro. El hueco que sobra NO se deja vacío: se rellena con una
 * copia de la propia cubierta, ampliada y desenfocada. El resultado se lee como
 * una decisión de diseño y no como un ajuste que falló, y además cada ficha
 * toma el color de su propia cubierta sin que nadie tenga que elegirlo.
 *
 * Es el mismo recurso que usan las fichas de película de casi cualquier
 * plataforma de vídeo, y funciona por lo mismo: el ojo reconoce el fondo como
 * fondo y no compite con la imagen de delante.
 *
 * CÓMO SE USA
 *
 * Lo pinta `Voedia_Portada::marco()` en PHP. En la tienda, donde el HTML lo
 * genera un bloque de WooCommerce que no controlamos, `portada.js` añade las
 * clases y la variable a posteriori.
 *
 * @package Voedia_Reader
 */

.voedia-portada {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	border-radius: 0.5rem;
	background: linear-gradient( 160deg, var( --vm-azul-tenue ), var( --vm-azul-claro ) );
	isolation: isolate;
	/* Convierte el marco en contenedor de consulta. Lo aprovecha la insignia
	   para decidir si le cabe el rótulo o va solo con el icono: la misma
	   cubierta mide 14 rem en el destacado y 5,5 rem en una fila, y una medida
	   fija no puede servir para las dos. */
	container-type: inline-size;
}

/* El fondo: la misma cubierta, ampliada y desenfocada.
 *
 * `inset: -12%` y la escala son necesarios: el desenfoque difumina también los
 * bordes de la imagen, y sin sacarla fuera de la caja se vería un halo claro
 * en el perímetro. */
.voedia-portada::before {
	content: '';
	position: absolute;
	inset: -12%;
	z-index: 0;
	background-image: var( --voedia-portada );
	background-size: cover;
	background-position: center;
	filter: blur( 18px ) saturate( 1.35 ) brightness( 0.92 );
	transform: scale( 1.06 );
}

/* Sin cubierta no hay nada que desenfocar; el degradado de la caja se queda
   solo, y el pseudoelemento sobraría. */
.voedia-portada:not( [style*='--voedia-portada'] )::before { display: none; }

/* La cubierta, entera y por delante.
 *
 * La sombra proyectada es lo que la despega del fondo desenfocado: sin ella,
 * cubierta y fondo se funden y la imagen pierde su borde. */
.voedia-portada img,
.voedia-portada .voedia-portada-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow( 0 0.15rem 0.6rem rgba( 0, 0, 0, 0.32 ) );
	transition: transform 0.35s cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

/* Un filo interior que cierra la caja. Va en un pseudoelemento y no en el
   `border` del marco para que no reste espacio a la imagen.
 *
 * SOLO EL FILO, sin sombra interior difusa. Había una de `2.5rem`, y una medida
 * fija dentro de una caja variable es una trampa: en el destacado, de 14 rem, se
 * leía como un viñeteado suave; en la fila de «Continúa donde lo dejaste», de
 * 5,5 rem, cubría la portada entera y la dejaba en un rectángulo oscuro sin
 * imagen aparente. El fondo desenfocado ya da toda la profundidad que hacía
 * falta. */
.voedia-portada::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.16 );
}

/* Al pasar por encima, la cubierta se acerca un poco. Solo la imagen: mover la
   caja entera descolocaría la rejilla. */
a:hover > .voedia-portada img,
button:hover > .voedia-portada img,
.voedia-portada--vivo:hover img { transform: scale( 1.04 ); }

@media ( prefers-reduced-motion: reduce ) {
	.voedia-portada img { transition: none; }
	a:hover > .voedia-portada img,
	button:hover > .voedia-portada img,
	.voedia-portada--vivo:hover img { transform: none; }
}

/* Cuando no hay imagen: el título, centrado, sobre el degradado de marca. Es
   preferible a un hueco gris, y mantiene la medida de la rejilla. */
.voedia-portada-sinimagen {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1rem;
	box-sizing: border-box;
	/* El respaldo cuando un libro no tiene cubierta: se escribe el título. Es
	   contenido editorial, así que va en la serif de la marca. El respaldo del
	   `var()` es el de siempre por si esta pieza se usara fuera de la portada. */
	font-family: var( --vm-serif, "Iowan Old Style", Palatino, Georgia, serif );
	font-size: 0.95rem;
	line-height: 1.35;
	text-align: center;
	text-wrap: balance;
	color: var( --vm-texto );
}

/* --- La insignia de formato -------------------------------------------- */

/* QUÉ RESUELVE: entrando en la tienda, la biblioteca o la portada no había forma
 * de saber si un título era un libro, un audiolibro o un documental hasta
 * abrirlo. Ahora lo dice la cubierta, con el mismo icono que usan las tarjetas
 * de la portada — la señal es idéntica en toda la plataforma.
 *
 * Va arriba a la DERECHA porque arriba a la izquierda ya viven «En tu
 * biblioteca» y «Lectura libre», y dos pastillas en la misma esquina se pisan. */
.voedia-insignia {
	position: absolute;
	z-index: 4;
	top: 0.45rem;
	right: 0.45rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	max-width: calc( 100% - 0.9rem );
	padding: 0.22rem 0.5rem 0.22rem 0.32rem;
	border-radius: 999px;
	background: rgba( 10, 22, 30, 0.72 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

.voedia-insignia-icono {
	display: block;
	width: 0.95rem;
	height: 0.95rem;
	flex: none;
}

.voedia-insignia-icono svg { width: 100%; height: 100%; display: block; }

/* En cubiertas estrechas no cabe el rótulo, y forzarlo lo partiría en dos
   líneas o taparía media portada. Se deja el icono, que es la señal. */
@container ( max-width: 8rem ) {
	.voedia-insignia { padding: 0.28rem; }
	.voedia-insignia-texto { display: none; }
}

/* Sin desenfoque el fondo translúcido no aísla del dibujo de la cubierta. */
@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {
	.voedia-insignia { background: rgba( 10, 22, 30, 0.92 ); }
}

/* --- Variantes de medida ---------------------------------------------- */

/* Fila horizontal («Continúa donde lo dejaste»): la cubierta manda menos y se
   deja mandar por el alto de la fila. */
.voedia-portada--fila { aspect-ratio: 2 / 3; width: 5.5rem; flex: 0 0 auto; }

/* El destacado de portada, donde la cubierta es la protagonista. */
.voedia-portada--grande { border-radius: 0.7rem; }

/* --- La tienda --------------------------------------------------------- */

/* WooCommerce pinta las imágenes de producto con sus propios bloques. No se
   sustituye su HTML —regla dura nº6, no reinventar lo que ya resuelve—: se le
   añade el marco por fuera desde `portada.js` y aquí se neutraliza el recorte
   que trae de serie. */
.wc-block-components-product-image .voedia-portada,
.woocommerce ul.products li.product .voedia-portada { margin-bottom: 0.75rem; }

.wc-block-components-product-image img,
.woocommerce ul.products li.product img {
	object-fit: contain !important;
	aspect-ratio: auto !important;
}

/* --- «Próximamente», donde estaba el botón de comprar ------------------- */

/* Va en esta hoja y no en `tienda.css` porque `tienda.css` solo se encola en la
   parrilla de la tienda, y este aviso sale en la FICHA de producto — que es
   otra pantalla. Esta hoja se encola en todas.
 *
   La misma señal que en la portada: el gris tenue de la etiqueta de la
   cubierta, borde discontinuo, sin color de llamada. Un título que aún no ha
   entrado no compite por la atención con uno que sí. */
.voedia-proximamente {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border: 1.5px dashed var( --vm-borde );
	border-radius: var( --vm-r );
	background: var( --vm-fondo );
}

.voedia-proximamente-estado {
	font-family: var( --vm-sans );
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --vm-texto-tenue );
}

.voedia-proximamente-texto {
	font-family: var( --vm-serif );
	color: var( --vm-texto );
	line-height: 1.5;
}