/*
 * supporting.css — só carregado quando o conteúdo atual é uma Supporting (ma_content_type=supporting).
 * Depende de pillar.css (tokens, .ma-callout, .ma-pillar-section__heading, .ma-pillar-numbered,
 * .ma-pillar-plain-list, os componentes globais de quick-facts/comparison/faq/trail/related/cta)
 * — aqui só o que é realmente novo da Supporting: hero compacto, TOC em barra horizontal,
 * fórmula, exemplo de fluxo, chips, contexto com a Pillar-mãe, próximo passo e o autor (avatar
 * menor). Nada disto redesenha a Pillar.
 */

.ma-supporting__container {
	max-width: var(--container-reading);
}

/* ---------- Hero compacto ---------- */
.ma-supporting-hero {
	padding-block: clamp(32px, 5vw, 44px) var(--space-5);
}

.ma-supporting-hero__title {
	font-family: var(--font-editorial);
	font-weight: var(--weight-semibold);
	font-size: clamp(28px, 4vw, 36px);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin: 10px 0 14px;
	color: var(--text-primary);
}

.ma-supporting-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

/* ---------- "Em uma frase" ---------- */
.ma-supporting-quick-answer {
	margin-bottom: var(--space-6);
}

/* ---------- TOC em lista (sempre visível, sem JS) ---------- */
.ma-supporting-toc {
	padding: 12px 0;
	margin-bottom: var(--space-7);
	border-top: var(--rule-weight) solid var(--border-default);
	border-bottom: var(--rule-weight) solid var(--border-default);
}

.ma-supporting-toc__label {
	font-size: 11px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-tertiary);
	display: block;
	margin-bottom: var(--space-2);
}

.ma-supporting-toc__list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding-left: 1.25em;
}

.ma-supporting-toc__link {
	font-size: 12.5px;
	color: var(--text-primary);
	text-decoration: none;
}

.ma-supporting-toc__link:hover {
	color: var(--accent-primary);
	text-decoration: underline;
}

/* ---------- Conteúdo ---------- */
.ma-supporting-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	padding-bottom: var(--space-8);
}

/* ---------- "Em uma frase" / "Entenda X" quando vêm de blocos (Sprint 11A) ---------- */
.ma-supporting-lead-blocks {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
}

/*
 * ---------- Conteúdo Gutenberg direto (Sprint 11A) ----------
 * post_content real vira filhos diretos deste container (core/heading, core/paragraph,
 * core/list, core/table, blocos Método Ágil) em vez das <section> da fixture — por isso o
 * espaçamento não pode vir só do `gap` do flex (misturaria a mesma distância entre QUALQUER par
 * de elementos, inclusive título + corpo logo abaixo dele). Em vez disso: ritmo uniforme entre
 * irmãos, e um respiro maior antes de cada heading de nível 2 (equivalente ao `--space-7` que a
 * fixture usa entre seções) — zerado no heading que segue outro heading diretamente (não deveria
 * acontecer, mas não deixa um buraco se acontecer) e no primeiro filho.
 */
.ma-supporting-content--gutenberg {
	display: block;
	gap: 0;
}

.ma-supporting-content--gutenberg > * + * {
	margin-top: var(--space-5);
}

.ma-supporting-content--gutenberg > .wp-block-heading {
	margin-top: var(--space-7);
	margin-bottom: var(--space-4);
	font-size: var(--text-heading-1);
	font-weight: var(--weight-bold);
	color: var(--text-primary);
}

.ma-supporting-content--gutenberg > .wp-block-heading:first-child {
	margin-top: 0;
}

.ma-supporting-content--gutenberg > .wp-block-heading + * {
	margin-top: 0;
}

/* ---------- Fórmula/cálculo ---------- */
.ma-supporting-formula__box {
	border: var(--rule-weight) solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	text-align: center;
	position: relative;
}

.ma-supporting-formula__label {
	position: absolute;
	top: 0;
	left: 24px;
	transform: translateY(-50%);
	background: var(--surface-page);
	padding: 0 8px;
	font-size: 10.5px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--accent-primary);
}

.ma-supporting-formula__expression {
	font-family: var(--font-editorial);
	font-size: 18px;
	color: var(--text-primary);
}

.ma-supporting-formula__stats {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	margin-top: var(--space-4);
	flex-wrap: wrap;
}

.ma-supporting-formula__stat {
	border: var(--rule-weight) solid var(--border-default);
	border-radius: var(--radius-md);
	padding: 10px 16px;
	text-align: center;
}

.ma-supporting-formula__stat.is-highlight {
	border-color: var(--accent-primary);
}

.ma-supporting-formula__stat-label {
	font-size: 10.5px;
	color: var(--text-tertiary);
}

.ma-supporting-formula__stat.is-highlight .ma-supporting-formula__stat-label {
	color: var(--accent-primary);
}

.ma-supporting-formula__stat-value {
	font-size: 14px;
	font-weight: var(--weight-bold);
	margin-top: 4px;
	color: var(--text-primary);
}

/* ---------- Exemplo de fluxo ---------- */
.ma-supporting-flow__steps {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	margin-bottom: var(--space-3);
}

.ma-supporting-flow__step {
	font-size: 11px;
	font-weight: var(--weight-semibold);
	border: var(--rule-weight) solid var(--border-default);
	background: var(--surface-sunken);
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
}

.ma-supporting-flow__timeline {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: var(--space-3);
}

.ma-supporting-flow__timeline-item {
	font-size: 12.5px;
	color: var(--text-secondary);
}

.ma-supporting-flow__highlights {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ma-supporting-flow__highlight {
	font-size: 11px;
	font-weight: var(--weight-bold);
	border: var(--rule-weight) solid var(--border-default);
	color: var(--text-secondary);
	padding: 5px 10px;
	border-radius: var(--radius-sm);
}

.ma-supporting-flow__highlight.is-accent {
	border-color: var(--accent-primary);
	color: var(--accent-primary);
}

/* ---------- Chips (indicadores / termos de análise) ---------- */
.ma-supporting-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ma-supporting-chips__item {
	font-size: 12px;
	border: var(--rule-weight) solid var(--border-default);
	border-radius: var(--radius-sm);
	padding: 6px 10px;
	color: var(--text-secondary);
}

/* ---------- Fontes e referências ---------- */
.ma-supporting-sources {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: var(--space-2);
}

.ma-supporting-sources__item {
	font-size: 11.5px;
	color: var(--text-tertiary);
}

/* ---------- "Este conceito faz parte de" ---------- */
.ma-supporting-pillar-context {
	background: var(--surface-sunken);
	padding-block: var(--space-6);
	border-top: var(--rule-weight) solid var(--border-default);
}

.ma-supporting-pillar-context__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	flex-wrap: wrap;
}

.ma-supporting-pillar-context__title {
	font-family: var(--font-editorial);
	font-size: 18px;
	margin: 4px 0;
	color: var(--text-primary);
}

.ma-supporting-pillar-context__desc {
	font-size: 12.5px;
	color: var(--text-secondary);
	margin: 0;
	max-width: 440px;
}

/* ---------- Próximo passo ---------- */
.ma-supporting-next-step {
	border: var(--rule-weight) solid var(--accent-primary);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-bottom: var(--space-7);
}

.ma-supporting-next-step__title {
	font-size: 15px;
	font-weight: var(--weight-bold);
	margin: 4px 0;
	color: var(--text-primary);
}

.ma-supporting-next-step__desc {
	font-size: 12.5px;
	color: var(--text-secondary);
	margin: 0;
	max-width: 420px;
}

/* ---------- Autor (avatar menor que a Pillar) ---------- */
.ma-supporting-author {
	display: flex;
	gap: var(--space-5);
	align-items: center;
	flex-wrap: wrap;
}

.ma-supporting-author__avatar {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: var(--surface-sunken);
	flex: none;
	overflow: hidden;
}

.ma-supporting-author__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ma-supporting-author__body {
	flex: 1;
	min-width: 220px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ma-supporting-author__name {
	font-family: var(--font-editorial);
	font-size: 17px;
	color: var(--text-primary);
}

.ma-supporting-author__bio {
	font-size: 13px;
	color: var(--text-secondary);
	margin: 0;
}

.ma-supporting-author__actions {
	display: flex;
	gap: 10px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.ma-supporting-author__external {
	font-size: 12.5px;
	color: var(--text-tertiary);
	text-decoration: none;
}

.ma-supporting-author__external:hover {
	color: var(--accent-primary);
}

/* <= 480px: mesmo respiro vertical já validado na Pillar (04B) — empilha explicitamente. */
@media (max-width: 480px) {
	.ma-supporting-author {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}

	.ma-supporting-author__body {
		min-width: 0;
		gap: var(--space-2);
	}

	.ma-supporting-author__actions {
		margin-top: var(--space-3);
		width: 100%;
	}
}

/* <= 640px: fórmula/exemplo de fluxo não espremem — stats e badges quebram linha (já são
   flex-wrap), só reforçando o padding para não parecer apertado. */
@media (max-width: 640px) {
	.ma-supporting-formula__box {
		padding: var(--space-4);
	}
}