/*
 * Nova Home — v0.44.0 (Etapa E5; AR-020, VI-003 v1.1) e página-hub /ferramentas/ (E4; AR-021 §4).
 * Escopo: SOMENTE `.viainter-hm` (main dos templates `viainter-home` e `page-ferramentas`).
 * Consome os tokens de assets/css/viainter-tokens.css (dependência declarada);
 * nenhum valor de cor novo. Hierarquia por tipografia, espaço e composição;
 * cor só como reforço. Sem sombras. Trirong só existe em peso 400: títulos sem negrito.
 *
 * Escala de espaço: 8/16/24/32/48/72/112 (--vi-space-1…7). Larguras: leitura ~700 px,
 * ampla ~1100 px. Raios: cartões 12 px, imagens 8 px, botões 8 px.
 */

html:has(.viainter-hm) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.viainter-hm) { scroll-behavior: auto; } }

.viainter-hm-main { margin: 0; }
body.home .wp-site-blocks > * + * { margin-block-start: 0; }

.viainter-hm {
	background: var(--vi-surface-page, #F4F0E8);
	color: var(--vi-text, #24292C);
	font-family: var(--vi-font-body, DMSans, sans-serif);
	font-size: var(--vi-fs-reading, 1.125rem);
	line-height: var(--vi-lh-reading, 1.7);
	padding-bottom: var(--vi-space-6, 4.5rem);
}
.viainter-hm *, .viainter-hm *::before, .viainter-hm *::after { box-sizing: border-box; }

/* Larguras: leitura ~700px · ampla ~1100px */
.viainter-hm-leitura,
.viainter-hm-largo {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--vi-gutter-mobile, 1rem);
}
.viainter-hm-leitura { max-width: calc(var(--vi-width-reading, 700px) + 2 * var(--vi-gutter-mobile, 1rem)); }
.viainter-hm-largo   { max-width: calc(var(--vi-width-wide, 1100px) + 2 * var(--vi-gutter-mobile, 1rem)); }
@media (min-width: 640px) {
	.viainter-hm-leitura,
	.viainter-hm-largo { padding-inline: var(--vi-gutter, 1.5rem); }
	.viainter-hm-leitura { max-width: calc(var(--vi-width-reading, 700px) + 2 * var(--vi-gutter, 1.5rem)); }
	.viainter-hm-largo   { max-width: calc(var(--vi-width-wide, 1100px) + 2 * var(--vi-gutter, 1.5rem)); }
}

/* Tipografia editorial */
.viainter-hm h1,
.viainter-hm h2,
.viainter-hm h3 {
	font-family: var(--vi-font-editorial, Trirong, Georgia, serif);
	font-weight: 400;
	color: var(--vi-heading, #123B4A);
	text-align: left;
	letter-spacing: 0;
	text-transform: none;
}
.viainter-hm a {
	color: var(--vi-link, #123B4A);
	text-decoration-color: var(--vi-color-ouro, #D4A853);
	text-decoration-thickness: 2px;
	text-underline-offset: .2em;
}
.viainter-hm a:hover { text-decoration-thickness: 3px; }
.viainter-hm a:focus-visible {
	outline: 2px solid var(--vi-color-petroleo, #123B4A);
	outline-offset: 3px;
	border-radius: 2px;
}
.viainter-hm p { margin: 0 0 var(--vi-space-2, 1rem); }

/* ---- Abertura ---------------------------------------------------- */
.viainter-hm-abertura { padding-block: var(--vi-space-5, 3rem) var(--vi-space-4, 2rem); }
.viainter-hm-abertura-grade { display: grid; gap: var(--vi-space-4, 2rem); align-items: start; }
@media (min-width: 900px) {
	.viainter-hm-abertura { padding-block: var(--vi-space-5, 3rem); }
	.viainter-hm-abertura-grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--vi-space-5, 3rem); }
}
.viainter-hm .viainter-hm-titulo {
	font-size: var(--vi-fs-h1, clamp(2.5rem, 1.6rem + 3vw, 3.5rem));
	line-height: 1.12;
	margin: 0 0 var(--vi-space-3, 1.5rem) !important;
	text-wrap: balance;
}
.viainter-hm-abertura-imagem { margin: 0; }
.viainter-hm-abertura-img,
.viainter-hm-abertura-imagem img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--vi-radius-image, 8px);
}

/* Convite: a linha "você pode começar por onde fizer sentido" (AR-020 §3, seção 1) */
.viainter-hm .viainter-hm-convite {
	margin: 0 0 var(--vi-space-3, 1.5rem);
	font-family: var(--vi-font-editorial, Trirong, Georgia, serif);
	font-size: var(--vi-fs-h3, 1.375rem);
	line-height: 1.4;
	color: var(--vi-heading, #123B4A);
}

/* Entrada por Situações: elemento principal da abertura. Links em linha (cartão
   branco, borda fina) — não são botões; hover = sublinhado dourado, sem troca de fundo. */
.viainter-hm-portas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vi-space-1, .5rem); }
.viainter-hm a.viainter-hm-porta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vi-space-2, 1rem);
	padding: .75rem var(--vi-space-3, 1.5rem);
	background: var(--vi-surface-card, #FFFFFF);
	border: var(--vi-border-width, 1px) solid var(--vi-border, #E4DCCB);
	border-radius: var(--vi-radius-card, 12px);
	font-family: var(--vi-font-editorial, Trirong, Georgia, serif);
	font-size: 1.125rem;
	line-height: 1.4;
	text-decoration: none;
}
.viainter-hm a.viainter-hm-porta:hover > span:first-child { text-decoration: underline; text-decoration-color: var(--vi-color-ouro, #D4A853); text-decoration-thickness: 2px; }
.viainter-hm a.viainter-hm-porta:hover { border-color: var(--vi-color-ouro, #D4A853); }
.viainter-hm-porta-seta { color: var(--vi-color-ouro-texto, #8A6415); flex: none; }
.viainter-hm-portas .viainter-hm-vertodas { margin-top: var(--vi-space-2, 1rem) !important; }

/* Mapa e exploração: uma linha discreta de texto, sem botão (D1) */
.viainter-hm .viainter-hm-discreta {
	margin: var(--vi-space-2, 1rem) 0 0;
	padding-top: var(--vi-space-2, 1rem);
	border-top: var(--vi-border-width, 1px) solid var(--vi-border, #E4DCCB);
	font-size: var(--vi-fs-ui, 1rem);
	line-height: 1.6;
	color: var(--vi-color-cinza-texto, #566065);
}

/* Abertura simples (página /ferramentas/): só H1 + linha */
.viainter-hm-abertura--simples { padding-bottom: 0; }

/* ---- Seções ------------------------------------------------------ */
.viainter-hm-secao { padding-block: var(--vi-space-5, 3rem); scroll-margin-top: var(--vi-space-5, 3rem); }
@media (min-width: 768px) { .viainter-hm-secao { padding-block: var(--vi-space-6, 4.5rem); } }

.viainter-hm-cabeca { margin-bottom: var(--vi-space-4, 2rem); }
.viainter-hm-rotulo {
	margin: 0 0 var(--vi-space-1, .5rem) !important;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vi-color-ouro-texto, #8A6415);
}
.viainter-hm .viainter-hm-cabeca h2 {
	font-size: var(--vi-fs-h2, clamp(1.75rem, 1.4rem + 1.4vw, 2.125rem));
	line-height: 1.2;
	margin: 0 !important;
	text-wrap: balance;
}
.viainter-hm-cabeca h2::before {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	margin-bottom: var(--vi-space-2, 1rem);
	background: var(--vi-color-ouro, #D4A853);
}
.viainter-hm-apoio { margin: var(--vi-space-1, .5rem) 0 0 !important; color: var(--vi-color-cinza-texto, #566065); font-size: var(--vi-fs-reading, 1.125rem); }

/* Grades de cartões */
.viainter-hm-grade { display: grid; gap: var(--vi-space-3, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .viainter-hm-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .viainter-hm-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Cartão de conteúdo (Situação, Artigo, Coleção) */
.viainter-hm-cartao {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--vi-surface-card, #FFFFFF);
	border: var(--vi-border-width, 1px) solid var(--vi-border, #E4DCCB);
	border-radius: var(--vi-radius-card, 12px);
	overflow: hidden;
}
.viainter-hm-cartao-imagem { aspect-ratio: 22 / 9; background: var(--vi-surface-papel, #F4EFE6); overflow: hidden; }
.viainter-hm-cartao-imagem img { display: block; width: 100%; height: 100%; object-fit: cover; }
.viainter-hm-cartao-corpo { padding: var(--vi-space-3, 1.5rem); flex: 1; }
.viainter-hm .viainter-hm-cartao h3 {
	font-size: var(--vi-fs-h3, 1.375rem);
	line-height: 1.3;
	margin: 0 0 var(--vi-space-1, .5rem) !important;
}
.viainter-hm-cartao h3 a { text-decoration: none; }
.viainter-hm-cartao h3 a::after { content: ""; position: absolute; inset: 0; } /* cartão inteiro clicável */
.viainter-hm-cartao:hover h3 a { text-decoration: underline; text-decoration-color: var(--vi-color-ouro, #D4A853); text-decoration-thickness: 2px; }
.viainter-hm-cartao p:last-child { margin-bottom: 0; }
.viainter-hm-cartao-corpo p:not(.viainter-hm-selo) { font-size: var(--vi-fs-ui, 1rem); line-height: 1.6; color: var(--vi-text, #24292C); }

.viainter-hm-selo {
	display: inline-block;
	margin: 0 0 var(--vi-space-2, 1rem) !important;
	padding: .15em .8em;
	border-radius: var(--vi-radius-pill, 999px);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.6;
}
.viainter-hm-selo--situacao { background: var(--vi-surface-selo-situacao, #F7EFDC); color: var(--vi-color-ouro-texto, #8A6415); }
.viainter-hm-selo--artigo   { background: var(--vi-surface-selo-artigo, #E2ECE9); color: var(--vi-color-verde-profundo, #0E3E34); }
.viainter-hm-selo--colecao  { background: var(--vi-surface-selo-colecao, #E4EAEC); color: var(--vi-color-petroleo, #123B4A); }

.viainter-hm-vertodas { margin: var(--vi-space-4, 2rem) 0 0 !important; }
.viainter-hm-vertodas a,
.viainter-hm-links a { font-weight: 700; }
.viainter-hm-links { display: flex; flex-wrap: wrap; gap: var(--vi-space-1, .5rem) var(--vi-space-3, 1.5rem); margin: var(--vi-space-2, 1rem) 0 0 !important; }

/* Situação a que o Artigo pertence (AR-020 §3, seção 5) */
.viainter-hm .viainter-hm-cartao-situacao { margin-top: var(--vi-space-2, 1rem); font-size: .875rem; color: var(--vi-color-cinza-texto, #566065); }
.viainter-hm-cartao-situacao span { font-weight: 700; color: var(--vi-color-ouro-texto, #8A6415); }

/* ---- Situações por tema (seção 2) ------------------------------------- */
.viainter-hm-tema {
	background: var(--vi-surface-card, #FFFFFF);
	border: var(--vi-border-width, 1px) solid var(--vi-border, #E4DCCB);
	border-radius: var(--vi-radius-card, 12px);
	padding: var(--vi-space-3, 1.5rem);
}
.viainter-hm .viainter-hm-tema h3 { font-size: var(--vi-fs-h3, 1.375rem); line-height: 1.3; margin: 0 !important; }
.viainter-hm-tema .viainter-hm-nota { margin: 0 0 var(--vi-space-2, 1rem); font-size: .875rem; }
.viainter-hm-tema-lista { list-style: none; margin: 0; padding: 0; font-size: var(--vi-fs-ui, 1rem); line-height: 1.5; }
.viainter-hm-tema-lista li { padding: var(--vi-space-1, .5rem) 0; border-top: var(--vi-border-width, 1px) solid var(--vi-border, #E4DCCB); }
.viainter-hm-tema-lista a { text-decoration: none; }
.viainter-hm-tema-lista a:hover { text-decoration: underline; text-decoration-color: var(--vi-color-ouro, #D4A853); }

/* ---- Mapa: faixa branca + cartão na largura ampla, cantos de 12 px -------- */
.viainter-hm-secao--mapa { background: var(--vi-surface-card, #FFFFFF); }
.viainter-hm-secao--mapa .vmb-wrap { width: 100%; max-width: none; } /* a largura ampla já vem do contêiner .viainter-hm-largo */

/* ---- Como a ViaInter compreende ---------------------------------------- */
.viainter-hm-secao--compreende .viainter-hm-cabeca { margin-bottom: var(--vi-space-3, 1.5rem); }
.viainter-hm-texto p { margin: 0 0 var(--vi-space-2, 1rem); }

/* ---- Ferramentas e "quem está por trás": cartões de texto ----------------- */
.viainter-hm-ferramenta {
	background: var(--vi-surface-card, #FFFFFF);
	border: var(--vi-border-width, 1px) solid var(--vi-border, #E4DCCB);
	border-radius: var(--vi-radius-card, 12px);
	padding: var(--vi-space-3, 1.5rem);
}
.viainter-hm .viainter-hm-ferramenta h3 {
	font-size: var(--vi-fs-h3, 1.375rem);
	line-height: 1.3;
	margin: 0 0 var(--vi-space-2, 1rem) !important;
}
.viainter-hm-ferramenta p { font-size: var(--vi-fs-ui, 1rem); line-height: 1.6; }
.viainter-hm-nota { color: var(--vi-color-cinza-texto, #566065); }
.viainter-hm-lista { margin: 0 0 var(--vi-space-2, 1rem); padding-left: 1.25rem; font-size: var(--vi-fs-ui, 1rem); line-height: 1.6; }
.viainter-hm-lista li { margin-bottom: var(--vi-space-1, .5rem); }
.viainter-hm-psistar-imagem { margin: var(--vi-space-5, 3rem) 0 var(--vi-space-4, 2rem); }
.viainter-hm-psistar-img,
.viainter-hm-psistar-imagem img { display: block; width: 100%; height: auto; border-radius: var(--vi-radius-image, 8px); }
.viainter-hm-secao--ferramentas .viainter-hm-texto { padding-inline: 0; }