/* =========================================================================
   PAGES — BLOG
   =========================================================================
   Listagem e artigo. O artigo tem duas colunas no desktop: texto a esquerda,
   sumario fixo a direita. Em telas menores o sumario vai para cima do texto.

   Titulos com DUAS classes por causa do kit global do Elementor.
   ========================================================================= */

.moinho-blog,
.moinho-artigo {
	position: relative;
}

.moinho-blog :is(h1, h2, h3),
.moinho-artigo :is(h1, h2, h3) {
	font-family: var(--moinho-font-display);
	line-height: var(--moinho-leading-heading);
	letter-spacing: var(--moinho-tracking-tight);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

.moinho-blog :is(p, li, dd),
.moinho-artigo :is(p, li, dd) {
	hyphens: none;
	-webkit-hyphens: none;
}

@media (min-width: 48rem) {
	:is(.moinho-blog, .moinho-artigo) :is(
		.moinho-blog-abertura__texto,
		.moinho-artigo__resumo,
		.moinho-prosa p,
		.moinho-accordion__corpo p,
		.moinho-artigo-assinatura__texto
	) {
		text-align: var(--moinho-copy-align);
		text-wrap: pretty;
	}
}

/* -------------------------------------------------------------------------
   Listagem
   ---------------------------------------------------------------------- */

.moinho-blog-abertura {
	margin-block-end: var(--moinho-space-lg);
}

.moinho-blog-abertura__corpo {
	display: grid;
	gap: var(--moinho-space-sm);
	max-inline-size: 62rem;
}

.moinho-blog-abertura .moinho-blog-abertura__titulo {
	max-inline-size: 20ch;
	margin: 0;
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-role-h1-weight);
	line-height: var(--moinho-role-h1-leading);
	letter-spacing: var(--moinho-role-h1-tracking);
}

.moinho-blog-abertura__texto {
	max-inline-size: var(--moinho-content-width);
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg-muted);
}

.moinho-blog-abertura__contagem {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin: 0;
	font-size: var(--moinho-role-small-size);
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1.125rem;
}

.moinho-blog-filtro ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-2xs);
	margin: 0 0 var(--moinho-space-lg);
	padding-block-end: var(--moinho-space-md);
	padding-inline: 0;
	list-style: none;
	border-block-end: var(--moinho-border-width) solid var(--moinho-surface-border);
}

a.moinho-blog-filtro__item {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	padding-block: var(--moinho-space-2xs);
	padding-inline: var(--moinho-space-sm);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-pill);
	background: var(--moinho-color-glass);
	font-size: var(--moinho-role-small-size);
	text-decoration: none;
	color: var(--moinho-surface-fg);
	transition: border-color var(--moinho-duration-normal) var(--moinho-ease-out);
}

a.moinho-blog-filtro__item span {
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-label-size);
	color: var(--moinho-surface-fg-muted);
}

@media (hover: hover) {
	a.moinho-blog-filtro__item:hover {
		border-color: var(--moinho-color-border-strong);
	}
}

a.moinho-blog-filtro__item.is-ativo {
	border-color: transparent;
	background: var(--moinho-liquid-primary);
	color: var(--moinho-color-text-on-brand);
	box-shadow: var(--moinho-liquid-shadow);
}

a.moinho-blog-filtro__item.is-ativo span {
	color: inherit;
	opacity: 0.72;
}

.moinho-blog-grade {
	display: grid;
	gap: var(--moinho-space-lg) var(--moinho-space-md);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
	.moinho-blog-grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tres colunas so a partir de 1024px. Com auto-fill, 1280px gerava tres
   colunas de 19rem e o titulo de 89 caracteres virava seis linhas. */
@media (min-width: 64rem) {
	.moinho-blog-grade {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.moinho-blog-grade > .moinho-card {
	min-block-size: 100%;
}

/* -------------------------------------------------------------------------
   Artigo
   ---------------------------------------------------------------------- */

.moinho-artigo .moinho-artigo__titulo {
	/* Titulo de artigo e H1 de verdade: usava o papel H2 e empatava com os
	   H2 das secoes do texto, achatando a hierarquia da pagina. */
	max-inline-size: 24ch;
	margin: 0 0 var(--moinho-space-sm);
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-role-h1-weight);
	line-height: var(--moinho-role-h1-leading);
	letter-spacing: var(--moinho-role-h1-tracking);
}

.moinho-artigo__resumo {
	margin: 0 0 var(--moinho-space-md);
	font-size: var(--moinho-role-body-lg-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg-muted);
}

.moinho-artigo__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-md);
	margin: 0;
	padding-block-start: var(--moinho-space-sm);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
}

.moinho-artigo__meta dt {
	font-size: var(--moinho-role-label-size);
	letter-spacing: var(--moinho-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--moinho-surface-fg-muted);
}

.moinho-artigo__meta dd {
	margin: var(--moinho-space-3xs) 0 0;
	font-size: var(--moinho-role-small-size);
	color: var(--moinho-surface-fg);
}

.moinho-artigo__capa {
	margin: 0;
	border-radius: var(--moinho-radius-xl);
}

.moinho-artigo__capa-container {
	margin-block-start: var(--moinho-space-lg);
}

.moinho-artigo__cabecalho--com-capa {
	padding-block-end: 0;
}

.moinho-artigo__corpo {
	display: grid;
	gap: var(--moinho-space-xl);
	align-items: start;
}

/* Duas colunas so a partir de 1280px: em 1024px a coluna de leitura caia
   para 40rem e o sumario ficava com 17rem apertados ao lado. */
@media (min-width: 80rem) {
	.moinho-artigo__corpo {
		grid-template-columns: minmax(0, 1fr) 18rem;
	}

	.moinho-artigo__lateral {
		position: sticky;
		inset-block-start: var(--moinho-space-lg);
		order: 2;
	}
}

.moinho-artigo__coluna {
	inline-size: 100%;
	max-inline-size: 46rem;
}

.moinho-artigo__corpo--sem-sumario .moinho-artigo__coluna {
	max-inline-size: var(--moinho-container-narrow);
	margin-inline: auto;
}

.moinho-artigo__corpo--sem-sumario {
	grid-template-columns: minmax(0, 1fr);
}

/* Resumo em tópicos: o bloco que assistente de IA cita inteiro. */
.moinho-artigo-resumo {
	margin-block-end: var(--moinho-space-lg);
	padding: var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-inline-start: var(--moinho-border-width-strong) solid var(--moinho-color-primary-readable);
	border-radius: var(--moinho-radius-lg);
	background: var(--moinho-color-glass);
	backdrop-filter: blur(var(--moinho-glass-blur));
	-webkit-backdrop-filter: blur(var(--moinho-glass-blur));
}

.moinho-artigo-resumo__rotulo {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin: 0 0 var(--moinho-space-xs);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1.125rem;
}

.moinho-artigo-resumo__lista {
	display: grid;
	gap: var(--moinho-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.moinho-artigo-resumo__lista li {
	display: grid;
	gap: var(--moinho-space-2xs);
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg);
}

.moinho-artigo-resumo__lista .moinho-icon {
	margin-block-start: 0.2em;
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1rem;
}

/* Sumário */
.moinho-artigo-sumario {
	padding: var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-lg);
}

.moinho-artigo-sumario__rotulo {
	margin: 0 0 var(--moinho-space-xs);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--moinho-surface-fg-muted);
}

.moinho-artigo-sumario ol {
	display: grid;
	gap: var(--moinho-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sumario;
}

.moinho-artigo-sumario li {
	counter-increment: sumario;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-normal);
}

.moinho-artigo-sumario li::before {
	content: counter(sumario, decimal-leading-zero) " ";
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-label-size);
	color: var(--moinho-color-primary-readable);
}

.moinho-artigo-sumario a {
	color: var(--moinho-surface-fg-muted);
	text-decoration: none;
}

@media (hover: hover) {
	.moinho-artigo-sumario a:hover {
		color: var(--moinho-color-primary-readable);
	}
}

/* Perguntas do artigo */
.moinho-artigo-faq {
	margin-block-start: var(--moinho-space-xl);
}

.moinho-artigo-faq .moinho-artigo-faq__titulo {
	margin: 0 0 var(--moinho-space-md);
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-semibold);
}

/* O acordeao do artigo tambem e o componente de UI. */
/* Assinatura */
.moinho-artigo-assinatura {
	display: grid;
	gap: var(--moinho-space-sm);
	align-items: center;
	grid-template-columns: auto minmax(0, 1fr);
	margin-block-start: var(--moinho-space-xl);
	padding: var(--moinho-space-lg);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
	background: var(--moinho-card-bg);
}

@media (min-width: 64rem) {
	.moinho-artigo-assinatura {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
}

.moinho-artigo-assinatura__marca {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	padding: 0.7rem;
	border-radius: var(--moinho-radius-circle);
	background: var(--moinho-liquid-primary);
	color: var(--moinho-color-text-on-brand);
}

.moinho-artigo-assinatura__nome {
	margin: 0 0 var(--moinho-space-3xs);
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
	color: var(--moinho-surface-fg);
}

.moinho-artigo-assinatura__texto {
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg-muted);
}