/*
 * Blog — listagem (home.php) e artigo individual (single.php).
 *
 * Herda o sistema visual da Home aprovada: container, tokens, Manrope/Inter,
 * radius, eyebrow (mark + label), escalas de espaçamento e revelação.
 * Nenhum token novo.
 *
 * Prefixos `.blogp-` (listagem) e `.article-` (artigo) para NÃO colidir com
 * `.blog-section*`, que pertence à seção de conteúdos da Home.
 *
 * Composição própria — a página NÃO repete a fórmula
 * eyebrow → headline → texto → imagem → bloco verde:
 *   Abertura curta (off-white, sem foto, sem bloco verde)
 *   → Capa editorial da publicação mais recente
 *   → Grid assimétrico das demais
 *   → Paginação nativa
 */

/* ============================================================
   Compartilhados
   ============================================================ */

.blogp-mark {
	flex: none;
	overflow: visible;
}

.blogp-mark path {
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linecap: round;
}

.blogp-meta-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
}

.blogp-label {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand-deep);
}

/* Metadados: categoria + data, separados por um ponto discreto. */
.blogp-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 var(--space-3);
	font-family: var(--font-body);
	font-size: var(--font-size-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.blogp-meta__cat {
	font-weight: 600;
	color: var(--color-brand-deep);
}

.blogp-meta__sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-accent);
	flex: none;
}

.blogp-arrow {
	display: inline-block;
	transition: transform var(--motion-micro) var(--motion-ease);
}

/* Moldura de imagem — usada na capa e nos itens da grade. O placeholder
   (quando não há imagem destacada) usa o mesmo gradiente já adotado no
   resto do projeto: nunca uma imagem quebrada. */
.blogp-thumb {
	position: relative;
	margin: 0;
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--color-verde-suave);
}

.blogp-thumb__img,
.blogp-thumb__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 900ms var(--motion-ease);
}

/*
 * Fallback para publicações sem imagem destacada.
 *
 * Antes: um retângulo em gradiente verde chapado, que lia como "a imagem
 * não carregou". Agora é uma superfície institucional deliberada — verde
 * profundo sólido com o marcador gráfico da ARPAN (o mesmo traço curvo de
 * "Fluxo que retorna" usado nos eyebrows do site) em laranja, discreto e
 * centralizado. Nenhuma fotografia foi inventada.
 */
.blogp-thumb__placeholder {
	background: var(--color-brand-deep);
	transition: none;
}

.blogp-thumb__placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Textura muito sutil: dá matéria à superfície sem virar padrão gráfico. */
	background-image: radial-gradient(rgba(245, 243, 237, 0.05) 1px, transparent 1px);
	background-size: 14px 14px;
}

.blogp-thumb__placeholder::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	width: clamp(38px, 22%, 72px);
	aspect-ratio: 26 / 12;
	background-color: var(--color-accent);
	opacity: 0.9;
	/* Mesmo traço curvo do sistema, como máscara — sem arquivo extra. */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M 1 9 C 8 9, 8 3, 15 3 C 19 3, 19 6, 25 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M 1 9 C 8 9, 8 3, 15 3 C 19 3, 19 6, 25 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ============================================================
   01 — ABERTURA
   ============================================================ */

.blogp-abertura {
	background: var(--color-bg);
	padding-block: clamp(40px, 6vw, 76px) clamp(40px, 5vw, 64px);
}

.blogp-abertura__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}

.blogp-abertura__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--color-text);
	font-size: clamp(2.25rem, 1.65rem + 2.4vw, 3.4rem);
	max-width: 16ch;
}

.blogp-abertura__support {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.7;
	color: var(--color-text);
	max-width: 52ch;
}

/* ============================================================
   02 — CAPA EDITORIAL (publicação mais recente)
   ============================================================ */

.blogp-destaque {
	background: var(--color-bg);
	/*
	 * BUG CORRIGIDO (mobile): o espaço entre a publicação em destaque e
	 * "Outras publicações" somava ~150px — padding-bottom desta seção +
	 * padding-top da lista + margem do rótulo, todos em escala de desktop.
	 * Numa viewport curta isso lia como um buraco. Os três valores agora
	 * partem de uma base mobile menor e crescem com `clamp()`.
	 */
	padding-block: 0 clamp(28px, 5vw, 88px);
}

.blogp-destaque__link {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	text-decoration: none;
	color: inherit;
}

@media (min-width: 900px) {
	/* Capa: imagem dominante à esquerda, conteúdo respirando à direita —
	   não é um card, é uma composição de duas peças. */
	.blogp-destaque__link {
		grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
		column-gap: clamp(40px, 5vw, 80px);
		align-items: center;
	}
}

.blogp-destaque__media {
	aspect-ratio: 16 / 10;
}

@media (min-width: 900px) {
	.blogp-destaque__media {
		aspect-ratio: 4 / 3;
	}
}

.blogp-destaque__conteudo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.blogp-destaque__titulo {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--color-text);
	font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
	transition: color var(--motion-micro) var(--motion-ease);
}

.blogp-destaque__resumo {
	margin: 0 0 var(--space-5);
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
	line-height: 1.7;
	color: var(--color-text);
	max-width: 46ch;
}

.blogp-destaque__acao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-brand-deep);
	padding-block: 2px;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-micro) var(--motion-ease);
}

.blogp-destaque__link:hover .blogp-destaque__titulo,
.blogp-destaque__link:focus-visible .blogp-destaque__titulo {
	color: var(--color-brand-deep);
}

.blogp-destaque__link:hover .blogp-destaque__acao,
.blogp-destaque__link:focus-visible .blogp-destaque__acao {
	border-bottom-color: var(--color-brand-deep);
}

.blogp-destaque__link:hover .blogp-arrow,
.blogp-destaque__link:focus-visible .blogp-arrow {
	transform: translateX(3px);
}

.blogp-destaque__link:hover .blogp-thumb__img,
.blogp-destaque__link:focus-visible .blogp-thumb__img {
	transform: scale(1.03);
}

/* ============================================================
   03 — DEMAIS CONTEÚDOS (grid assimétrico)
   ============================================================ */

.blogp-lista {
	background: var(--color-bg);
	padding-block: clamp(28px, 4.5vw, 72px) var(--section-space-mobile);
	border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
	.blogp-lista {
		padding-block: clamp(56px, 5vw, 80px) clamp(100px, 8.5vw, 136px);
	}
}

.blogp-lista__titulo {
	margin: 0 0 clamp(20px, 4vw, 48px);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.blogp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 700px) {
	.blogp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(32px, 4vw, 64px);
		row-gap: clamp(48px, 5vw, 72px);
	}

	/*
	 * Assimetria: o primeiro item ocupa a linha inteira com imagem
	 * panorâmica, quebrando a repetição de colunas iguais. Os demais
	 * seguem em duas colunas.
	 */
	.blogp-item--largo {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1100px) {
	.blogp-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.blogp-item--largo {
		grid-column: 1 / -1;
	}
}

.blogp-item__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.blogp-item__media {
	aspect-ratio: 4 / 3;
	margin-bottom: var(--space-4);
}

.blogp-item--largo .blogp-item__media {
	aspect-ratio: 16 / 9;
}

@media (min-width: 700px) {
	.blogp-item--largo .blogp-item__media {
		aspect-ratio: 21 / 9;
	}
}

.blogp-item__titulo {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--color-text);
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	transition: color var(--motion-micro) var(--motion-ease);
}

.blogp-item--largo .blogp-item__titulo {
	font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	max-width: 24ch;
}

.blogp-item__resumo {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-text-muted);
	max-width: 42ch;
}

.blogp-item__link:hover .blogp-item__titulo,
.blogp-item__link:focus-visible .blogp-item__titulo {
	color: var(--color-brand-deep);
}

.blogp-item__link:hover .blogp-thumb__img,
.blogp-item__link:focus-visible .blogp-thumb__img {
	transform: scale(1.03);
}

.blogp-vazio {
	margin: 0;
	padding-block: var(--space-8);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	color: var(--color-text-muted);
}

/* ============================================================
   Paginação (nativa do WordPress)
   ============================================================ */

.blogp-paginacao {
	margin-top: clamp(56px, 6vw, 88px);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.blogp-paginacao .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(12px, 1.6vw, 22px);
}

.blogp-paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: 6px 4px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition:
		color var(--motion-micro) var(--motion-ease),
		border-color var(--motion-micro) var(--motion-ease);
}

.blogp-paginacao .page-numbers:hover,
.blogp-paginacao .page-numbers:focus-visible {
	color: var(--color-brand-deep);
}

.blogp-paginacao .page-numbers.current {
	color: var(--color-brand-deep);
	font-weight: 700;
	font-family: var(--font-heading);
	border-bottom-color: var(--color-brand-deep);
}

.blogp-paginacao .page-numbers.dots {
	min-width: 0;
}

.blogp-paginacao .prev,
.blogp-paginacao .next {
	font-weight: 600;
	color: var(--color-brand-deep);
	min-width: 0;
}

/* ============================================================
   ARTIGO INDIVIDUAL
   ============================================================ */

.article__header {
	background: var(--color-bg);
	padding-block: clamp(32px, 4.5vw, 64px) clamp(28px, 3.5vw, 44px);
}

.article__header-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Cabeçalho respeita a mesma largura de leitura do corpo — o artigo é
	   uma coluna editorial, não um bloco de largura total. */
	max-width: 72ch;
}

.article__voltar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--space-6);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--motion-micro) var(--motion-ease);
}

.article__voltar:hover,
.article__voltar:focus-visible {
	color: var(--color-brand-deep);
}

.article__voltar-arrow {
	display: inline-block;
	transition: transform var(--motion-micro) var(--motion-ease);
}

.article__voltar:hover .article__voltar-arrow {
	transform: translateX(-3px);
}

.article__titulo {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--color-text);
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem);
	overflow-wrap: break-word;
}

.article__resumo {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
	line-height: 1.65;
	color: var(--color-text-muted);
	max-width: 60ch;
}

.article__capa {
	margin: 0 auto clamp(36px, 4.5vw, 64px);
}

.article__capa-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-card);
}

/* ---------- Corpo do artigo ----------
   Largura de leitura confortável: o texto NUNCA ocupa 100% da tela no
   desktop. Todos os elementos do editor do WordPress recebem estilo. */

.article__conteudo {
	max-width: 68ch;
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.78;
	color: var(--color-text);
	padding-bottom: clamp(48px, 5vw, 80px);
}

.article__conteudo > * {
	margin-block: 0 var(--space-5);
}

.article__conteudo > *:last-child {
	margin-bottom: 0;
}

.article__conteudo h2,
.article__conteudo h3,
.article__conteudo h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--color-text);
	margin-top: clamp(36px, 4vw, 56px);
	margin-bottom: var(--space-4);
}

.article__conteudo h2 {
	font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
}

.article__conteudo h3 {
	font-size: clamp(1.1875rem, 1.1rem + 0.55vw, 1.5rem);
}

.article__conteudo h4 {
	font-size: 1.125rem;
}

.article__conteudo a {
	color: var(--color-brand-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color var(--motion-micro) var(--motion-ease);
}

.article__conteudo a:hover,
.article__conteudo a:focus-visible {
	color: var(--color-brand);
}

.article__conteudo ul,
.article__conteudo ol {
	padding-left: 1.35em;
}

.article__conteudo li {
	margin-bottom: var(--space-2);
}

.article__conteudo li::marker {
	color: var(--color-accent);
}

.article__conteudo blockquote {
	margin-inline: 0;
	padding-left: var(--space-5);
	border-left: 2px solid var(--color-accent);
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: clamp(1.1875rem, 1.1rem + 0.6vw, 1.5rem);
	line-height: 1.45;
	color: var(--color-brand-deep);
}

.article__conteudo blockquote p:last-child {
	margin-bottom: 0;
}

.article__conteudo img,
.article__conteudo iframe,
.article__conteudo video {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

.article__conteudo figure {
	margin-inline: 0;
}

.article__conteudo figcaption {
	margin-top: var(--space-3);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.article__conteudo hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin-block: clamp(36px, 4vw, 56px);
}

.article__conteudo code {
	font-size: 0.9em;
	background: var(--color-verde-suave);
	padding: 2px 6px;
	border-radius: 4px;
}

.article__conteudo pre {
	background: var(--color-verde-suave);
	padding: var(--space-5);
	border-radius: var(--radius-card);
	overflow-x: auto;
}

.article__conteudo pre code {
	background: none;
	padding: 0;
}

.article__conteudo table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	display: block;
	overflow-x: auto;
}

.article__conteudo th,
.article__conteudo td {
	text-align: left;
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.article__conteudo th {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.article__paginas {
	margin-top: var(--space-6);
	font-size: 0.9375rem;
	color: var(--color-text-muted);
}

/* ---------- Rodapé do artigo ---------- */

.article__rodape {
	background: var(--color-bg);
	padding-bottom: var(--section-space-mobile);
}

@media (min-width: 1024px) {
	.article__rodape {
		padding-bottom: clamp(88px, 7vw, 120px);
	}
}

.article__rodape-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	padding-top: clamp(32px, 4vw, 56px);
	border-top: 1px solid var(--color-border);
}

.article__nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 768px) {
	.article__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(32px, 4vw, 64px);
	}

	.article__nav-link--next {
		text-align: right;
		/* Se só existir "próxima", ela permanece na coluna da direita. */
		grid-column: 2;
	}
}

.article__nav-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	color: inherit;
}

.article__nav-label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.article__nav-titulo {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	line-height: 1.3;
	color: var(--color-text);
	transition: color var(--motion-micro) var(--motion-ease);
}

.article__nav-link:hover .article__nav-titulo,
.article__nav-link:focus-visible .article__nav-titulo {
	color: var(--color-brand-deep);
}

.article__todos {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-brand-deep);
	text-decoration: none;
	padding-block: 2px;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-micro) var(--motion-ease);
}

.article__todos:hover,
.article__todos:focus-visible {
	border-bottom-color: var(--color-brand-deep);
}

.article__todos:hover .blogp-arrow,
.article__todos:focus-visible .blogp-arrow {
	transform: translateX(3px);
}

/* ============================================================
   Revelação — mesmo sistema da Home/páginas internas
   ============================================================ */

[data-arpan-reveal] .blogp-abertura__inner,
[data-arpan-reveal] .blogp-destaque__link,
[data-arpan-reveal] .blogp-lista__titulo,
[data-arpan-reveal] .blogp-grid {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--motion-reveal) var(--motion-ease),
		transform var(--motion-reveal) var(--motion-ease);
}

[data-arpan-reveal].is-visible .blogp-abertura__inner,
[data-arpan-reveal].is-visible .blogp-destaque__link,
[data-arpan-reveal].is-visible .blogp-lista__titulo,
[data-arpan-reveal].is-visible .blogp-grid {
	opacity: 1;
	transform: translateY(0);
}

[data-arpan-reveal].is-visible .blogp-grid {
	transition-delay: 120ms;
}

@media (prefers-reduced-motion: reduce) {
	[data-arpan-reveal] .blogp-abertura__inner,
	[data-arpan-reveal] .blogp-destaque__link,
	[data-arpan-reveal] .blogp-lista__titulo,
	[data-arpan-reveal] .blogp-grid {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.blogp-thumb__img,
	.blogp-arrow,
	.blogp-destaque__titulo,
	.blogp-item__titulo,
	.article__nav-titulo,
	.article__voltar,
	.article__voltar-arrow,
	.blogp-paginacao .page-numbers {
		transition: none;
	}
}

/* ============================================================
   Página 404 e páginas genéricas
   ------------------------------------------------------------
   Reaproveitam a abertura das Notícias e a coluna de leitura do artigo.
   Só o que essas duas telas precisam a mais está aqui.
   ============================================================ */

/* 404: altura mínima para o rodapé não subir numa página quase vazia. */
.blogp-abertura--erro {
	min-height: 52vh;
	padding-bottom: clamp(64px, 8vw, 120px);
}

.blogp-abertura__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin: var(--space-4) 0 0;
}

/* Página genérica: sem "voltar" nem metadados acima do título. */
.article--pagina .article__titulo {
	margin-bottom: 0;
}

.article--pagina .article__conteudo {
	padding-bottom: clamp(64px, 7vw, 112px);
}