/*
 * Páginas «Obras similares» y «Composiciones similares».
 *
 * 1. Etiquetas de afinidad ([sils_afinidad]) sobre la foto de la tarjeta: aquí solo la
 *    columna. Cada etiqueta lleva `sils-etiqueta-foto`, definida en el tema
 *    (bricks-child/assets/sils-bricks.css) y compartida con «Novedad» y «Composición».
 * 2. Botones de colección ([sils_colecciones_similares]): uno por colección, con su logo.
 *    Botón de línea con radio de 4 px y 4,4 rem de alto, como los de la web; el de la
 *    colección que se ve, relleno de gris claro, como un filtro elegido en la barra de los
 *    archivos.
 */

/* 1. Etiquetas de afinidad ------------------------------------------------------- */
.sils-afinidades {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sils-esp-2xs);
	pointer-events: none;
}

/* 2. Botones de colección ----------------------------------------------------------- */
.sils-cols {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sils-esp-xs);
}

/* El dato, como «Tonalidad y color» y los demás de la cabecera (tipo-nuevo-mini-titulo). */
.sils-cols__dato {
	font-family: var(--sils-fuente-thoren), sans-serif;
	font-size: var(--sils-txt-3xs);
	font-weight: 300;
	line-height: 1.2rem;
	letter-spacing: 0.16rem;
	text-transform: uppercase;
	color: var(--sils-secundario);
}

.sils-cols__botones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sils-esp-2xs);
}

.sils-cols__boton {
	--escala: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 15.6rem;
	height: 4.4rem;
	padding: 0 var(--sils-esp-s);
	border: 1px solid var(--sils-linea);
	border-radius: var(--sils-radio, 0.4rem);
	background: var(--sils-blanco);
	color: var(--sils-principal);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sils-cols__boton:hover,
.sils-cols__boton:focus-visible {
	border-color: var(--sils-principal);
}

.sils-cols__boton.es-actual {
	border-color: var(--sils-fondo-imagenes);
	background: var(--sils-fondo-imagenes);
}

.sils-cols__boton.es-actual:hover,
.sils-cols__boton.es-actual:focus-visible {
	border-color: var(--sils-principal);
}

/* Alto de cada logo calculado por su forma (en el atajo), para que pesen lo mismo. */
.sils-cols__boton img {
	display: block;
	width: auto;
	max-width: 100%;
	height: calc(var(--alto, 2rem) * var(--escala));
	object-fit: contain;
}

/* Sin logo: el nombre, con la letra de los botones de la web. */
.sils-cols__nombre {
	font-family: var(--sils-fuente-thoren), sans-serif;
	font-size: var(--sils-txt-boton);
	font-weight: 500;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
}

/* En el móvil, los tres botones en una fila, a partes iguales y con los logos algo menores. */
@media (max-width: 767px) {
	.sils-cols,
	.sils-cols__botones {
		width: 100%;
	}

	.sils-cols__boton {
		--escala: 0.8;
		flex: 1 1 0;
		min-width: 0;
		padding: 0 var(--sils-esp-2xs);
	}
}