/* Peças reaproveitadas por TODOS os hubs de produto (/tv/, /apps/,
   /leitura/, /planos/) — breadcrumbs (§8.8) e o hero/CTA final padrão.
   Carregado globalmente (não condicional a nenhuma linha de produto),
   porque os 4 hubs usam essas mesmas classes.
 */

section.container {
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

/* Breadcrumbs (§8.8) */
.breadcrumbs {
	padding-block: 1rem;
}

.breadcrumbs__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--boek-text-small);
}

.breadcrumbs__item:not(:last-child)::after {
	content: "/";
	margin-left: 0.4rem;
	opacity: 0.5;
}

.breadcrumbs__item a {
	color: var(--boek-turquesa-a11y);
	text-decoration: none;
}

/* Hero curto padrão de hub — flex column + gap: título, subtítulo e CTA
   opcional formam uma coluna com espaço parelho entre si, em vez de zero
   espaço entre o H1 e o subtítulo (o reset global zera toda margem). */
.hub-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
	background: linear-gradient(180deg, var(--boek-creme), var(--boek-white));
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.hub-hero__subtitulo {
	max-width: 60ch;
	font-size: var(--boek-text-h6);
}

.hub-hero .boek-whatsapp-cta,
.hub-hero .boek-cta-skeelo {
	align-items: center;
	margin-top: 0.5rem;
}

.hub-pacotes__link-todos {
	text-align: center;
}

.hub-cta-final {
	text-align: center;
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

/* `text-align:center` acima só centraliza texto normal (o H2) — o botão
   de WhatsApp/Skeelo é um filho flex-column próprio
   (.boek-whatsapp-cta/.boek-cta-skeelo, `align-items:flex-start` por
   padrão), que ignora text-align. Sem isso, botão e microtexto ficavam
   alinhados à esquerda em /leitura/ (Skeelo), /tv/, /apps/ e /planos/
   (WhatsApp) — mesmo componente, mesmo bug nos 4 hubs (Sprint 33). */
.hub-cta-final .boek-whatsapp-cta,
.hub-cta-final .boek-cta-skeelo {
	align-items: center;
}

/* Estado vazio (§7.4 item 18) — usado em qualquer grid/lista que pode
   não ter resultado: explorador de canais, catálogo de apps, FAQ, busca
   global. Corrigido nesta sprint: antes só existia em
   explorador-canais.css (carregado só em /tv/), mas já era usado em
   /apps/ e agora em /faq/ e /busca/ também — por isso mora aqui. */
.estado-vazio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

/* Toast de feedback (§7.4 item 16) — usado no formulário de contato e
   no "copiar link" dos posts do blog. */
.toast {
	display: inline-block;
	padding: 0.6rem 1rem;
	border-radius: 0.5rem;
	font-size: var(--boek-text-small);
	font-weight: 600;
}

.toast--sucesso {
	background-color: rgba(0, 128, 96, 0.12);
	color: #006840;
}

.toast--erro {
	background-color: rgba(250, 80, 53, 0.16); /* --boek-coral (#fa5035) decomposto em
	                                               rgb() pra dar pra usar alpha — não dá
	                                               pra referenciar a custom property
	                                               direto num rgba(), então este valor
	                                               precisa ficar em sincronia manual com
	                                               --boek-coral em tokens.css (Sprint 33). */
	color: var(--boek-ink);
}