/* Layout específico do hub /leitura/ e das páginas de formato (§5.2,
   §5.3). Componentes reaproveitáveis ficam em assets/css/components/ —
   aqui é só o que é exclusivo destas duas telas: hero, seções do hub,
   espaçamento. */

.hub-skeelo,
.hub-produtos-leitura,
.generos-chips,
.hub-como-comprar,
.leitura-descricao,
.vitrine-destaques,
.leitura-beneficios,
.video-facade-secao {
	padding-block: 2rem;
}

.hub-skeelo {
	max-width: 70ch;
	margin-inline: auto;
	text-align: center;
}

/* Hero da página de formato — mobile-first, mesmo padrão do hero de
   pacote_tv/app: imagem em cima, conteúdo embaixo; lado a lado ≥900px */
.leitura-hero {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-block: 1.5rem;
}

@media (min-width: 900px) {
	.leitura-hero {
		flex-direction: row;
		align-items: center;
	}

	.leitura-hero__imagem,
	.leitura-hero__conteudo {
		flex: 1;
	}
}

.leitura-hero__imagem {
	border-radius: 1rem;
	overflow: hidden;
	background-color: var(--boek-creme);
}

.leitura-hero__imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.leitura-hero__tagline {
	font-size: var(--boek-text-h6);
	opacity: 0.85;
}

.leitura-descricao {
	max-width: 70ch;
}