/**
 * El selector de formato de la tienda.
 *
 * QUÉ RESUELVE: el filtro por formato funcionaba desde el primer día —la tienda
 * responde a `?formato=audiobook`— pero no había forma de usarlo sin escribir la
 * dirección a mano. Las tarjetas de la portada llevaban ahí y, una vez dentro,
 * no se podía cambiar de formato ni volver a verlo todo.
 *
 * Va justo encima de la parrilla y lleva el mismo icono que la insignia de la
 * cubierta y las tarjetas de la portada: es la misma señal en toda la
 * plataforma.
 *
 * @package Voedia_Reader
 */

/* WooCommerce pone el recuento de resultados y el orden en una misma fila
   flexible sin envolver. El selector se inserta ahí dentro, así que sin esto se
   convertía en un tercer elemento de esa fila y los tres se apretaban.
 *
   Se le dice a ESA fila que envuelva, y al selector que ocupe una línea entera
   y vaya el primero. Es más contenido que reordenar la plantilla de bloques, y
   no se rompe si WooCommerce cambia el resto de la fila. */
.wp-block-group:has( > .voedia-formatos ) {
	flex-wrap: wrap !important;
}

.voedia-formatos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	/* `0 0 100%` y no `flex-basis: 100%`: con el encogimiento por defecto la
	   línea entera se comprimía para dejar sitio al recuento y al orden, y el
	   selector volvía a compartir fila con ellos. */
	flex: 0 0 100%;
	order: -1;
	margin: 0 0 1.25rem;
}

.voedia-formatos-pastilla {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.5rem;          /* objetivo táctil cómodo */
	padding: 0 0.85rem;
	border: 1px solid var( --vm-borde );
	border-radius: 999px;
	background: var( --vm-blanco );
	color: var( --vm-texto );
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.voedia-formatos-pastilla:hover {
	border-color: var( --vm-azul );
	color: var( --vm-azul-tinta );
	text-decoration: none;
}

/* El activo va en el azul profundo de marca, no solo con el borde marcado: en
   una fila de cuatro pastillas, un borde de un píxel no basta para saber dónde
   estás de un vistazo. */
.voedia-formatos-pastilla.es-activo {
	background: var( --vm-azul-tinta );
	border-color: var( --vm-azul-tinta );
	color: #fff;
}

.voedia-formatos-icono {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
}

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

/* El número de títulos. Dice de un vistazo si merece la pena entrar, y evita el
   escaparate vacío que sorprende después de pulsar. */
.voedia-formatos-cuenta {
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	background: rgba( 18, 36, 46, 0.08 );
	font-size: 0.7rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --vm-texto-tenue );
}

.voedia-formatos-pastilla.es-activo .voedia-formatos-cuenta {
	background: rgba( 255, 255, 255, 0.18 );
	color: #fff;
}

.voedia-formatos-pastilla:focus-visible {
	outline: 3px solid var( --vm-azul );
	outline-offset: 2px;
}

/* En pantalla estrecha las cuatro pastillas no caben en una línea y envolverlas
   deja una fila coja. Se convierten en una tira que se arrastra, que es lo que
   se espera de una fila de filtros en el móvil. */
@media ( max-width: 680px ) {
	.voedia-formatos {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		/* Que la primera y la última no queden pegadas al borde al arrastrar. */
		padding-bottom: 0.35rem;
		scroll-snap-type: x proximity;
	}

	.voedia-formatos::-webkit-scrollbar { display: none; }

	.voedia-formatos-pastilla {
		flex: none;
		scroll-snap-align: start;
	}
}