/* CTA Skeelo — §5.3, §8.3. Link externo (não WhatsApp): mesmo botão
   primário do site, mas com o microtexto de transparência do redirect. */

.boek-cta-skeelo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
}

.boek-cta-skeelo__microtexto {
	font-size: var(--boek-text-small);
	color: var(--boek-ink);
	opacity: 0.75;
	margin: 0;
}

/* Chips de gênero — §5.2, §5.3 */
.generos-chips__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
}

/* Só texto — o campo boek_generos.icone continua existindo no repeater
   (não apagado), só parou de ser renderizado aqui (Sprint 33.6). Nenhum
   gênero tem ícone cadastrado de verdade (campo vazio em todos) —
   boek_repeater() resolve campo de imagem vazio pro placeholder genérico
   do site (inc/helpers/repeater.php), então o chip sempre mostrava o
   MESMO ícone-placeholder antes do nome em todo gênero, sem nenhum
   distinguir um do outro. Sem `gap`/regra de <img> — não tem mais um
   segundo elemento dentro do chip pra espaçar. */
.chip-genero {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background-color: var(--boek-creme);
	font-size: var(--boek-text-small);
	font-weight: 600;
}

/* Facade de vídeo lazy — §4.1 */
.video-facade {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: none;
	border-radius: 1rem;
	background-color: var(--boek-petroleo);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.video-facade__play {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: var(--boek-white);
	position: relative;
}

.video-facade__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--boek-petroleo);
}