/* Cards — produto/preço/canal (§7.4 itens 2-5). Mobile-first. */

.card-pacote {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 0.5rem;
	padding: 1.25rem;
	border-radius: 1rem;
	background-color: var(--boek-white);
	box-shadow: 0 1px 3px rgba(15, 14, 26, 0.1);
	transition: box-shadow var(--boek-transition), transform var(--boek-transition);
	position: relative;
}

/* Botão de CTA sempre no rodapé, alinhado entre cards vizinhos, mesmo
   quando a descrição de um deles tem mais linhas que a do outro (achado
   real do usuário, depois do Prompt 8.5.2 — "efeito escada"). O grid já
   estica cada card pra mesma altura da fileira (comportamento padrão
   do CSS Grid, reforçado explicitamente em .hub-pacotes__grid); esse
   margin-top:auto empurra só o botão pro fim do espaço que sobrou. */
.card-pacote__link {
	margin-top: auto;
}

/* O botão "Assinar via WhatsApp" (template-parts/whatsapp-cta.php) é um
   componente reutilizado em vários contextos (§7.4 item 3) — sua classe
   base (.boek-whatsapp-cta) é `align-items: flex-start` por padrão.
   Dentro do card, isso deixava o botão colado na esquerda enquanto
   ".card-pacote__link" ("Ver detalhes") já ocupa a largura toda por
   herdar o `align-items: stretch` (padrão) do card flex-column — sem
   override aqui, o link some (Sprint 33). `stretch` em vez de `center`
   pra bater exatamente com a largura do botão "Ver detalhes" logo acima. */
.card-pacote__whatsapp {
	align-items: stretch;
}

.card-pacote:hover {
	box-shadow: 0 8px 24px rgba(15, 14, 26, 0.12);
	transform: translateY(-2px);
}

.card-pacote__selo {
	position: absolute;
	top: 1rem;
	right: 1rem;
}

.card-pacote__imagem {
	width: 100%;
	border-radius: 0.75rem;
	overflow: hidden;
	background-color: var(--boek-creme);
}

.card-pacote__imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-pacote__nome a {
	color: var(--boek-petroleo);
	text-decoration: none;
}

.card-pacote__nome a:hover {
	text-decoration: underline;
}

.card-pacote__qtd {
	color: var(--boek-turquesa-a11y);
	font-weight: 600;
	margin: 0;
}

.card-pacote__preco {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
}

.card-pacote__preco-valor {
	font-family: var(--boek-font-heading);
	font-size: var(--boek-text-h4);
	font-weight: 700;
	color: var(--boek-ink);
	white-space: nowrap; /* sem isso, "R$" quebra pra linha separada do valor em
	                        certas larguras de desktop (Sprint 24, pendência) —
	                        o espaço entre "R$" e o número é um ponto de quebra
	                        normal de texto, e o card fica estreito o bastante
	                        pra forçar a quebra ali antes de qualquer outra. */
}

.card-pacote__preco-condicao {
	font-size: var(--boek-text-small);
	opacity: 0.75;
}

.hub-pacotes__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 1.25rem;
}

@media (min-width: 600px) {
	.hub-pacotes__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.hub-pacotes__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Card de canal — logo + nome (§7.4 item 4) */
.card-canal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	padding: 0.75rem;
	min-width: 0;
}

.card-canal__logo {
	position: relative;
	width: 100%;
	max-width: 80px;
	border-radius: 0.5rem;
	overflow: hidden;
	background-color: var(--boek-creme);
}

/* Sem logo real ainda (§14.6) — nome do canal sobreposto no placeholder
   padrão (silhueta neutra), nunca uma imagem quebrada nem um quadrado vazio. */
.card-canal__logo-nome {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	text-align: center;
	font-size: 0.6rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--boek-petroleo);
	background: linear-gradient(180deg, rgba(247, 247, 251, 0.15), rgba(247, 247, 251, 0.85) 55%);
	overflow-wrap: anywhere;
}

.card-canal__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.card-canal__nome {
	font-size: var(--boek-text-small);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.hub-esportes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

@media (min-width: 600px) {
	.hub-esportes__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Card de app — §5.6, cada card já converte (logo + nome + categoria +
   preço + CTA de WhatsApp direto, sem precisar entrar na página do app) */
.card-app {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 0.4rem;
	padding: 1.25rem;
	border-radius: 1rem;
	background-color: var(--boek-white);
	box-shadow: 0 1px 3px rgba(15, 14, 26, 0.1);
	transition: box-shadow var(--boek-transition), transform var(--boek-transition);
}

.card-app:hover {
	box-shadow: 0 8px 24px rgba(15, 14, 26, 0.12);
	transform: translateY(-2px);
}

.card-app__logo-link {
	align-self: flex-start;
}

.card-app__logo {
	position: relative;
	width: 72px;
	border-radius: 0.75rem;
	overflow: hidden;
	background-color: var(--boek-creme);
}

.card-app__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Sem logo real ainda (§14.6) — nome do app sobreposto no placeholder
   padrão, nunca uma imagem quebrada nem um quadrado vazio. */
.card-app__logo-nome {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	text-align: center;
	font-size: 0.6rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--boek-petroleo);
	background: linear-gradient(180deg, rgba(247, 247, 251, 0.15), rgba(247, 247, 251, 0.85) 55%);
	overflow-wrap: anywhere;
}

.card-app__nome a {
	color: var(--boek-petroleo);
	text-decoration: none;
}

.card-app__nome a:hover {
	text-decoration: underline;
}

.card-app__categoria {
	margin: 0;
	font-size: var(--boek-text-small);
	color: var(--boek-turquesa-a11y);
	font-weight: 600;
}

.card-app__descricao {
	margin: 0;
	font-size: var(--boek-text-small);
}

.card-app__preco {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0;
}

.card-app__preco-valor {
	font-family: var(--boek-font-heading);
	font-size: var(--boek-text-h5);
	font-weight: 700;
	color: var(--boek-ink);
}

.card-app__preco-condicao {
	font-size: var(--boek-text-small);
	opacity: 0.75;
}

/* margin-top:auto (não um valor fixo) — empurra o CTA pro rodapé do
   card independente de quantas linhas a descrição acima tiver (mesmo
   princípio de .card-pacote__link, ver comentário lá). */
/* Mesmo motivo do .card-pacote__whatsapp acima — sem isso, o botão fica
   colado na esquerda em vez de ocupar a largura do card (Sprint 33). */
.card-app__whatsapp {
	margin-top: auto;
	align-items: stretch;
}

.app-relacionados__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 1rem;
}

@media (min-width: 600px) {
	.app-relacionados__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.app-relacionados__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Card de formato de leitura — grid do hub /leitura/ (§5.2) */
.card-produto-leitura {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	gap: 0.5rem;
	padding: 1.25rem;
	border-radius: 1rem;
	background-color: var(--boek-white);
	box-shadow: 0 1px 3px rgba(15, 14, 26, 0.1);
	transition: box-shadow var(--boek-transition), transform var(--boek-transition);
}

.card-produto-leitura:hover {
	box-shadow: 0 8px 24px rgba(15, 14, 26, 0.12);
	transform: translateY(-2px);
}

/* Tamanho FIXO e igual nos 4 cards (Ebooks/Audiobooks/Minibooks/Comeeks) —
   sem isso, cada ícone renderiza no tamanho que o arquivo de origem tiver
   (um logo quadrado grande, um recorte de ilustração maior, etc.), em vez
   de todos ficarem consistentes entre si (Sprint 33). object-fit:contain
   nunca corta o ícone, só encaixa dentro da caixa. */
.card-produto-leitura__icone {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 0.75rem;
	overflow: hidden;
	background-color: var(--boek-creme);
}

@media (min-width: 900px) {
	.card-produto-leitura__icone {
		width: 72px;
		height: 72px;
	}
}

.card-produto-leitura__icone img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.card-produto-leitura__nome a {
	color: var(--boek-petroleo);
	text-decoration: none;
}

.card-produto-leitura__nome a:hover {
	text-decoration: underline;
}

.card-produto-leitura__tagline {
	font-weight: 600;
	margin: 0;
}

.card-produto-leitura__descricao {
	margin: 0;
	font-size: var(--boek-text-small);
}

.card-produto-leitura__link {
	margin-top: auto;
}

.hub-produtos-leitura__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 1.25rem;
}

@media (min-width: 600px) {
	.hub-produtos-leitura__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.hub-produtos-leitura__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Vitrine de destaques (capas) — §5.3 */
.vitrine-destaques__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	list-style: none;
	padding: 0;
}

@media (min-width: 600px) {
	.vitrine-destaques__lista {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 900px) {
	.vitrine-destaques__lista {
		grid-template-columns: repeat(6, 1fr);
	}
}

.card-destaque__capa {
	border-radius: 0.5rem;
	overflow: hidden;
	background-color: var(--boek-creme);
	margin-bottom: 0.4rem;
}

.card-destaque__capa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-destaque__titulo {
	font-weight: 600;
	margin: 0;
	font-size: var(--boek-text-small);
}

.card-destaque__autor,
.card-destaque__genero {
	margin: 0;
	font-size: var(--boek-text-small);
	opacity: 0.7;
}

/* Passo a passo "como comprar na Skeelo" — §5.2 */
.hub-como-comprar__passos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	counter-reset: none;
}

@media (min-width: 900px) {
	.hub-como-comprar__passos {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Proporção 4:5 (800×1000px recomendado) + object-fit:contain — o
   arquivo esperado (dados/imagens/leitura/skeelo-como-comprar.svg, ver
   manifesto_imagens_gerais.csv) é uma ilustração única, não um
   screenshot recortável; "cover" cortava o placeholder genérico de forma
   estranha (Sprint 33). Reserva o espaço certo mesmo sem o arquivo final
   ainda — não quebra layout quando ele entrar. */
.passo-comprar__print {
	max-width: 200px;
	border-radius: 0.75rem;
	overflow: hidden;
	background-color: var(--boek-creme);
	margin-bottom: 0.75rem;
}

.passo-comprar__print img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.passo-comprar__titulo {
	font-size: var(--boek-text-h6);
	margin: 0 0 0.25rem;
}

.passo-comprar__texto {
	margin: 0;
	font-size: var(--boek-text-small);
}

/* Card de benefício */
.pacote-beneficios__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 600px) {
	.pacote-beneficios__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.pacote-beneficios__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card-beneficio {
	padding: 1rem;
	border-radius: 0.75rem;
	background-color: var(--boek-creme);
}

.card-beneficio__icone {
	width: 48px;
	margin-bottom: 0.5rem;
}

.card-beneficio__icone img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.card-beneficio__titulo {
	font-size: var(--boek-text-h6);
	margin: 0 0 0.25rem;
}

.card-beneficio__texto {
	margin: 0;
	font-size: var(--boek-text-small);
}