/**
 * Estilos da tela de Biblioteca (Sprint 11, ajustado no Sprint 12). Usa só
 * os tokens já definidos em tokens.css — nenhuma cor/fonte nova hardcoded
 * aqui, mesmo padrão de auth.css/conta.css.
 *
 * Sprint 12: os estilos do produto em si (`.ritual-biblioteca__produto*`,
 * placeholder do Sprint 11) saíram daqui — a tela de produto real virou
 * módulo próprio (`produto.js`) com seu próprio arquivo de estilos
 * (`produto.css`, `.ritual-produto*`). Este arquivo ficou só com o que é da
 * Biblioteca de verdade: o aviso/erro/carregando e a lista de cards.
 *
 * Nota de estrutura (mesma lógica do card de "meus produtos" do Sprint 10,
 * ver EXEC/handoffs/SPRINT-10.md, seção "Atenção"): a capa de cada card
 * (`.ritual-biblioteca__card-capa`) já é um bloco isolado do corpo, com
 * altura própria, pensado para receber a ilustração de paisagem noturna da
 * referência visual do M10 sem precisar remontar o card — hoje só mostra cor
 * sólida (--produto-cor-primaria) ou a imagem padrão do produto via
 * `background-image` inline, quando existir.
 */

.ritual-biblioteca {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: var(--spacing-xl) var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
}

.ritual-biblioteca__titulo {
	font-family: var(--font-display);
	font-size: var(--font-size-title);
	color: var(--color-text-primary);
	margin: 0;
	text-align: center;
}

.ritual-biblioteca__aviso {
	font-family: var(--font-body);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	text-align: center;
	margin: 0;
}

.ritual-biblioteca__aviso--erro {
	color: #E88686;
}

/* Lista navegável — 2+ produtos */

.ritual-biblioteca__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.ritual-biblioteca__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: var(--color-bg-surface);
	box-shadow: var(--shadow-card);
	text-decoration: none;
	transition: var(--transition-fast);
}

.ritual-biblioteca__card:hover,
.ritual-biblioteca__card:focus {
	box-shadow: var(--shadow-glow-gold);
}

.ritual-biblioteca__card-capa {
	height: 96px;
	background-color: var(--produto-cor-primaria);
}

.ritual-biblioteca__card-corpo {
	padding: var(--spacing-md);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.ritual-biblioteca__card-titulo {
	font-family: var(--font-display);
	font-size: var(--font-size-body);
	color: var(--color-text-primary);
	margin: 0;
}

.ritual-biblioteca__card-rotulo {
	font-family: var(--font-body);
	font-size: var(--font-size-micro);
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
}