/* CM Biblioteca 2.0 — estilos da galeria, busca, carrossel e página do livro.
   As cores vêm das variáveis emitidas pelo CSS dinâmico (aba Estilos). */
.cmb-biblioteca,
.cmb-single {
	--cmb-accent: #1e40af;
	--cmb-free: #15803d;
	--cmb-premium: #92400e;
	--cmb-btn-font: #fff;
	--cmb-title: #242424;
	--cmb-title-hover: #1e40af;
	--cmb-card-bg: #fff;
	--cmb-border: #e5e7eb;
	--cmb-price-reg: #13b651;
	--cmb-price-desc: #ff7162;
	--cmb-search-bg: #f9fafb;
	--cmb-star: #f59e0b;
	--cmb-muted: #6b7280;
	--cmb-radius: 10px;
}

/* ---------- Painel de busca ---------- */
.cmb-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: var(--cmb-search-bg);
	border: 1px solid var(--cmb-border);
	border-radius: var(--cmb-radius);
}
.cmb-search input[type="search"] { flex: 1 1 200px; min-width: 0; }
.cmb-search input[type="text"] { flex: 0 1 130px; }
.cmb-search select { max-width: 12rem; }
.cmb-search input,
.cmb-search select {
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--cmb-border);
	border-radius: 6px;
	background: #fff;
}
.cmb-clear { font-size: 0.85em; color: var(--cmb-muted); white-space: nowrap; }

/* ---------- Barra de ferramentas ---------- */
.cmb-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.cmb-total { color: var(--cmb-muted); font-size: 0.9rem; }
.cmb-toolbar-controls { display: flex; gap: 0.75rem; align-items: center; }
.cmb-sort-label { font-size: 0.85rem; color: var(--cmb-muted); }
.cmb-sort { padding: 0.3rem 0.5rem; border: 1px solid var(--cmb-border); border-radius: 6px; background: #fff; }
.cmb-view-toggle { display: inline-flex; border: 1px solid var(--cmb-border); border-radius: 6px; overflow: hidden; }
.cmb-view {
	padding: 0.3rem 0.6rem;
	background: #fff;
	border: 0;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	color: var(--cmb-muted);
}
.cmb-view.ativo { background: var(--cmb-accent); color: var(--cmb-btn-font); }

/* ---------- Grade ---------- */
.cmb-grid {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	grid-template-columns: repeat(var(--cmb-columns, 4), 1fr);
}
.cmb-cols-1 { --cmb-columns: 1; } .cmb-cols-2 { --cmb-columns: 2; }
.cmb-cols-3 { --cmb-columns: 3; } .cmb-cols-4 { --cmb-columns: 4; }
.cmb-cols-5 { --cmb-columns: 5; } .cmb-cols-6 { --cmb-columns: 6; }
.cmb-cols-7 { --cmb-columns: 7; } .cmb-cols-8 { --cmb-columns: 8; }

.cmb-card {
	display: flex;
	flex-direction: column;
	background: var(--cmb-card-bg);
	border: 1px solid var(--cmb-border);
	border-radius: var(--cmb-radius);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cmb-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); transform: translateY(-2px); }

.cmb-cover {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 2 / 3;
	background: #f3f4f6;
	overflow: hidden;
}
.cmb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.cmb-anim-zoom .cmb-cover:hover img { transform: scale(1.06); }
.cmb-anim-flip .cmb-cover:hover img { transform: scaleX(-1); }
.cmb-cover-placeholder { font-size: 3rem; opacity: 0.4; }

.cmb-card-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.85rem; flex: 1; }
.cmb-title { font-size: 1rem; line-height: 1.3; margin: 0; }
.cmb-title a { color: var(--cmb-title); text-decoration: none; }
.cmb-title a:hover { color: var(--cmb-title-hover); }
.cmb-author,
.cmb-cats,
.cmb-meta-line { margin: 0; font-size: 0.85rem; color: var(--cmb-muted); }
.cmb-author a, .cmb-cats a { color: inherit; }
.cmb-desc { font-size: 0.85rem; color: var(--cmb-muted); }
.cmb-cost { margin: 0; font-size: 0.9rem; }

/* Layout: grade clássica e só capas */
.cmb-card-classic { border: 0; background: transparent; box-shadow: none; }
.cmb-card-classic:hover { box-shadow: none; transform: none; }
.cmb-card-classic .cmb-actions { padding: 0.5rem 0 0; justify-content: center; }
.cmb-card-img { border: 0; background: transparent; }
.cmb-card-img:hover { transform: none; }
.cmb-layout-grid-only-img { gap: 0.5rem; }

/* Layout: lista */
.cmb-layout-list { grid-template-columns: 1fr; }
.cmb-card-list { flex-direction: row; }
.cmb-card-list .cmb-cover { flex: 0 0 160px; aspect-ratio: auto; min-height: 220px; }
.cmb-card-list .cmb-card-body { padding: 1rem 1.25rem; }

/* ---------- Selos, preço, estrelas ---------- */
.cmb-badge {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.cmb-badge-free { background: color-mix(in srgb, var(--cmb-free) 15%, white); color: var(--cmb-free); }
.cmb-badge-premium { background: color-mix(in srgb, var(--cmb-premium) 15%, white); color: var(--cmb-premium); }
.cmb-price ins { text-decoration: none; font-weight: 700; color: var(--cmb-price-desc); }
.cmb-price del { color: var(--cmb-muted); margin-right: 0.25rem; }
.cmb-price { color: var(--cmb-price-reg); }
.cmb-stars { color: var(--cmb-star); font-size: 0.95rem; letter-spacing: 0.05em; }
.cmb-stars small { color: var(--cmb-muted); }

/* ---------- Botões ---------- */
.cmb-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.5rem; }
.cmb-btn {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border-radius: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	line-height: 1.4;
}
/* A classe repetida eleva o peso da regra: temas costumam colorir "todo link
   dentro do conteúdo", o que pintaria o texto do botão com a cor do fundo. */
.cmb-btn-free.cmb-btn-free { background: var(--cmb-free); color: var(--cmb-btn-font); }
.cmb-btn-premium.cmb-btn-premium { background: var(--cmb-premium); color: var(--cmb-btn-font); }
.cmb-btn-search.cmb-btn-search { background: var(--cmb-accent); color: var(--cmb-btn-font); border: 0; }
.cmb-btn-details.cmb-btn-details { background: transparent; border-color: var(--cmb-border); color: inherit; }
.cmb-btn-store.cmb-btn-store { background: #374151; color: var(--cmb-btn-font); }
.cmb-btn-back.cmb-btn-back { background: var(--cmb-accent); color: var(--cmb-btn-font); }
.cmb-btn-ler.cmb-btn-ler { background: var(--cmb-accent); color: var(--cmb-btn-font); }
/* O peso do arquivo, discreto ao lado do rótulo — informação, não alarde. */
.cmb-peso { font-size: 0.78em; font-weight: 400; opacity: 0.75; }
.cmb-btn:hover { filter: brightness(1.12); text-decoration: none; color: var(--cmb-btn-font); }
.cmb-btn-details:hover { color: inherit; filter: none; border-color: var(--cmb-accent); }

/* ---------- Paginação ---------- */
.cmb-pagination { margin-top: 2rem; }
.cmb-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}
.cmb-pagination .page-numbers {
	display: inline-block;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--cmb-border);
	border-radius: 6px;
	text-decoration: none;
}
.cmb-pagination .page-numbers.current {
	background: var(--cmb-accent);
	color: var(--cmb-btn-font);
	border-color: var(--cmb-accent);
}

/* ---------- Carrossel de destaques ---------- */
.cmb-destaques-titulo { margin-bottom: 1rem; }
.cmb-carousel-wrap { display: flex; align-items: center; gap: 0.5rem; }
.cmb-carousel-track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	flex: 1;
}
.cmb-carousel-track::-webkit-scrollbar { display: none; }
.cmb-slide {
	flex: 0 0 calc((100% - (var(--cmb-slides, 4) - 1) * 1rem) / var(--cmb-slides, 4));
	scroll-snap-align: start;
	text-align: center;
}
.cmb-slide .cmb-cover { border-radius: var(--cmb-radius); }
.cmb-slide .cmb-title { margin-top: 0.5rem; font-size: 0.9rem; }
.cmb-carousel-arrow,
.cmb-carousel-arrow:hover,
.cmb-carousel-arrow:focus {
	flex: 0 0 auto;
	width: auto;
	height: auto;
	padding: 0.25rem 0.4rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	line-height: 1;
}
.cmb-carousel-arrow {
	font-size: 1.5rem;
	color: var(--cmb-accent);
	transition: color 0.15s ease, text-shadow 0.15s ease, transform 0.15s ease;
}
.cmb-carousel-arrow:hover,
.cmb-carousel-arrow:focus-visible {
	color: var(--cmb-premium);
	text-shadow: 0 2px 10px color-mix(in srgb, var(--cmb-accent) 45%, transparent);
	transform: scale(1.12);
}
.cmb-carousel-arrow:focus-visible {
	outline: 2px solid var(--cmb-accent);
	outline-offset: 3px;
}

/* ---------- Página do livro (v2 — ordem do celular no fluxo) ---------- */
.cmb-single { margin-top: 1.5rem; }

/* No celular, o herói é a primeira dobra: capa em nicho de pedra, linha de
   ficha, selo e as ações empilhadas com folga (modelo A aprovado). */
.cmb-hero {
	background: linear-gradient(180deg, #efe9dd, #e7dfd0);
	border-radius: 10px;
	text-align: center;
	padding: 1.9rem 1.4rem 1.6rem;
	margin-bottom: 1.9rem;
}
.cmb-hero-capa img {
	width: min(170px, 60%);
	height: auto;
	border-radius: 3px;
	box-shadow: 0 16px 34px -10px rgba(36, 33, 29, 0.55);
}
.cmb-hero-capa .cmb-cover-placeholder { font-size: 4rem; opacity: 0.35; }
.cmb-hero-meta { font-size: 0.92rem; font-style: italic; color: #8d8577; margin-top: 0.8rem; }
.cmb-hero-selo {
	font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase;
	color: var(--cmb-accent2, #BF892A); font-weight: 600; margin-top: 0.45rem;
}
.cmb-hero .cmb-cost { margin-top: 0.6rem; }
.cmb-hero .cmb-actions {
	display: grid;
	gap: 0.65rem;
	margin-top: 1.15rem;
	padding-top: 0;
}
.cmb-hero .cmb-btn { width: 100%; padding: 0.8rem 0.9rem; font-size: 1rem; }
.cmb-btn small { font-weight: 400; opacity: 0.85; font-size: 0.85em; }

.cmb-sobre { margin-bottom: 1.9rem; }
.cmb-ficha-bloco { margin-bottom: 1.9rem; }
.cmb-voltar { margin-top: 2.2rem; text-align: center; }
.cmb-voltar-link {
	font-style: italic; font-size: 0.95rem;
	color: var(--cmb-muted); text-decoration: none;
	border-bottom: 1px solid transparent;
}
.cmb-voltar-link:hover { color: var(--cmb-accent); border-bottom-color: currentColor; }

/* O traje escuro — o "palco solene" da prancha, vestido antes da primeira
   pintura para quem prefere escuro. Só o herói escurece. */
.cmb-livro-noite .cmb-hero {
	background: #0F264A;
}
.cmb-livro-noite .cmb-hero-capa img { box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55); }
.cmb-livro-noite .cmb-hero-meta { color: #b9c4d6; }
.cmb-livro-noite .cmb-hero-selo { color: #d9a94e; }
.cmb-livro-noite .cmb-hero .cmb-btn-ler { background: #BF892A; color: #241f14; }
.cmb-livro-noite .cmb-hero .cmb-btn-ler:hover { background: #d9a94e; }
.cmb-livro-noite .cmb-hero .cmb-btn-free {
	background: transparent; color: #F6F1E8;
	box-shadow: inset 0 0 0 1.5px rgba(246, 241, 232, 0.45);
}
.cmb-livro-noite .cmb-hero .cmb-btn-free:hover { background: rgba(246, 241, 232, 0.08); }
/* Sem leitura online, o Baixar segue primário — cheio, mesmo no escuro. */
.cmb-livro-noite .cmb-hero .cmb-btn-free:first-child { background: #BF892A; color: #241f14; box-shadow: none; }

/* No computador, o frontispício clássico se refaz por grid: descrição no
   alto, capa ao lado da ficha, ações abaixo — o herói vira transparente. */
@media (min-width: 769px) {
	.cmb-single {
		display: grid;
		grid-template-columns: minmax(180px, 260px) 1fr;
		gap: 0 2rem;
		grid-template-areas:
			"subtitulo subtitulo"
			"sobre sobre"
			"capa ficha"
			"acoes acoes"
			"resenhas resenhas"
			"relacionados relacionados"
			"voltar voltar";
	}
	.cmb-single-subtitle { grid-area: subtitulo; }
	.cmb-sobre { grid-area: sobre; }
	.cmb-hero { display: contents; }
	.cmb-hero-capa { grid-area: capa; }
	.cmb-hero-capa img {
		width: 100%; max-width: 260px;
		border-radius: 6px;
		box-shadow: 0 10px 30px -12px rgba(15, 38, 74, 0.55);
	}
	.cmb-hero-meta, .cmb-hero-selo { display: none; }
	.cmb-hero .cmb-cost { display: none; }
	.cmb-hero .cmb-actions {
		grid-area: acoes;
		display: flex; flex-wrap: wrap; gap: 0.5rem;
		margin: 1.4rem 0 0;
	}
	.cmb-hero .cmb-btn { width: auto; padding: 0.55rem 1.3rem; font-size: 0.95rem; }
	.cmb-ficha-bloco { grid-area: ficha; min-width: 0; margin-bottom: 0; }
	.cmb-ficha-bloco .cmb-single-h { margin-top: 0; }
	.cmb-ficha-bloco .cmb-details th { width: 9.5rem; }
	.cmb-h-celular { display: none; }
	.cmb-sobre > :nth-child(2) { margin-top: 0; }
	.cmb-resenhas { grid-area: resenhas; }
	.cmb-relacionados { grid-area: relacionados; }
	.cmb-voltar { grid-area: voltar; text-align: left; }
	/* No computador o traje escuro não se aplica: o palco é do celular. */
	.cmb-livro-noite .cmb-hero-capa img { box-shadow: 0 10px 30px -12px rgba(15, 38, 74, 0.55); }
}

/* Leitura online — o botão leva à página dedicada /livros/<slug>/ler/;
   o antigo leitor de PDF embutido saiu de cena (o PDF é só download). */
.cmb-btn-ler {
	background: var(--cmb-accent);
	color: var(--cmb-btn-font);
	font-family: inherit;
}
.cmb-single-subtitle { color: var(--cmb-muted); font-size: 1.05rem; margin-top: -0.5rem; }
.cmb-single-h { margin: 1.5rem 0 0.75rem; }
.cmb-details { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.cmb-details th,
.cmb-details td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--cmb-border); }
.cmb-details th { width: 12rem; color: var(--cmb-muted); font-weight: 600; }
.cmb-more-details { font-size: 0.9rem; }
.cmb-editorial { border-left: 3px solid var(--cmb-accent); padding-left: 1rem; color: var(--cmb-muted); }
.cmb-related .cmb-title { font-size: 0.85rem; }
.cmb-empty { text-align: center; padding: 2rem; color: var(--cmb-muted); }

/* Estrelas do formulário de avaliação */
.cmb-rating-field { margin-bottom: 1rem; }
.cmb-rate-star {
	background: none;
	border: 0;
	font-size: 1.6rem;
	cursor: pointer;
	color: var(--cmb-star);
	padding: 0 0.15rem;
	line-height: 1;
}

/* ---------- Responsivo ---------- */
@media (max-width: 768px) {
	.cmb-grid { grid-template-columns: repeat(var(--cmb-columns-tablet, 3), 1fr); }
	.cmb-cols-1 { --cmb-columns-tablet: 1; } .cmb-cols-2 { --cmb-columns-tablet: 2; }
	.cmb-slide { flex-basis: calc((100% - 1rem) / 2); }
}
@media (max-width: 480px) {
	.cmb-grid { grid-template-columns: repeat(var(--cmb-columns-mobile, 2), 1fr); gap: 0.75rem; }
	.cmb-cols-mobile-1 { --cmb-columns-mobile: 1; }
	.cmb-cols-mobile-2 { --cmb-columns-mobile: 2; }
	.cmb-layout-list { grid-template-columns: 1fr; }
	.cmb-card-list { flex-direction: column; }
	.cmb-card-list .cmb-cover { flex: none; aspect-ratio: 2 / 3; min-height: 0; }
	.cmb-search select { max-width: 100%; flex: 1 1 45%; }
	.cmb-toolbar { flex-direction: column; align-items: flex-start; }
	.cmb-slide { flex-basis: calc((100% - 1rem) / 2); }
}