/* =========================================================================
   MOINHO — DESIGN SYSTEM / CONTEUDO EDITORIAL
   =========================================================================
   Prosa (saida do editor), cabecalho de artigo, paginacao e filtros.
   Carregado apenas nas paginas que exibem conteudo longo ou listagem.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Trilha de navegacao — compartilhada por toda pagina editorial
   ---------------------------------------------------------------------- */

nav.moinho-trilha-nav ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin: 0 0 var(--moinho-space-md);
	padding: 0;
	list-style: none;
	font-size: var(--moinho-role-label-size);
	line-height: var(--moinho-role-label-leading);
	color: var(--moinho-surface-fg-muted);
}

nav.moinho-trilha-nav li {
	margin: 0;
}

nav.moinho-trilha-nav li + li::before {
	content: "/";
	margin-inline-end: var(--moinho-space-2xs);
	color: var(--moinho-color-border-strong);
}

nav.moinho-trilha-nav a {
	color: inherit;
	text-decoration: none;
}

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

nav.moinho-trilha-nav [aria-current="page"] {
	color: var(--moinho-surface-fg);
}

/* -------------------------------------------------------------------------
   Prosa — conteudo vindo do editor
   ---------------------------------------------------------------------- */

.moinho-prosa {
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg);
}

.moinho-prosa > * + * {
	margin-block-start: var(--moinho-space-sm);
}

/* Titulos internos recebem mais respiro acima do que abaixo:
   o espaco pertence ao bloco que comeca, nao ao que termina. */
.moinho-prosa > h2,
.moinho-prosa > h3,
.moinho-prosa > h4 {
	margin-block-start: var(--moinho-space-lg);
	margin-block-end: var(--moinho-space-2xs);
}

.moinho-prosa > h2 { font-size: var(--moinho-role-h3-size); }
.moinho-prosa > h3 { font-size: var(--moinho-role-h4-size); }

.moinho-prosa p {
	max-inline-size: none;
}

.moinho-prosa a {
	color: var(--moinho-color-secondary-ink);
	text-decoration: underline;
}

.moinho-prosa img,
.moinho-prosa figure {
	border-radius: var(--moinho-radius-md);
	overflow: hidden;
}

.moinho-prosa figure {
	margin-inline: 0;
}

/* Imagens editoriais ocupam a coluna inteira. A altura continua natural para
   preservar arte, texto e enquadramento definidos na imagem original. */
.moinho-prosa .wp-block-image,
.moinho-prosa .wp-block-image img {
	inline-size: 100%;
}

.moinho-prosa figcaption {
	padding-block-start: var(--moinho-space-2xs);
	font-size: var(--moinho-role-small-size);
	color: var(--moinho-surface-fg-muted);
}

/* Alinhamentos do editor. */
.moinho-prosa .alignwide {
	inline-size: min(100vw, calc(var(--moinho-container-width) - var(--moinho-space-lg)));
	margin-inline: calc(50% - min(50vw, (var(--moinho-container-width) - var(--moinho-space-lg)) / 2));
}

.moinho-prosa .alignfull {
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	border-radius: 0;
}

/* Tabelas: rolam dentro do proprio container em vez de estourar a pagina. */
.moinho-prosa table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--moinho-role-small-size);
	display: block;
	overflow-x: auto;
}

.moinho-prosa th,
.moinho-prosa td {
	padding: var(--moinho-space-2xs) var(--moinho-space-xs);
	border-block-end: var(--moinho-border-width) solid var(--moinho-surface-border);
	text-align: start;
}

.moinho-prosa th {
	font-weight: var(--moinho-weight-semibold);
	white-space: nowrap;
}

.moinho-prosa pre {
	padding: var(--moinho-space-sm);
	background-color: var(--moinho-color-surface);
	border-radius: var(--moinho-radius-md);
	overflow-x: auto;
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-small-size);
}

.moinho-prosa code {
	font-family: var(--moinho-font-mono);
	font-size: 0.9em;
}

.moinho-prosa__paginas {
	display: flex;
	gap: var(--moinho-space-2xs);
	margin-block-start: var(--moinho-space-lg);
	font-size: var(--moinho-role-small-size);
}

/* -------------------------------------------------------------------------
   Cabecalho de artigo
   ---------------------------------------------------------------------- */

.moinho-artigo__titulo {
	font-size: var(--moinho-role-h2-size);
	margin-block-end: var(--moinho-space-sm);
}

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

.moinho-artigo__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-sm);
	margin-block: var(--moinho-space-md) 0;
	padding-block-start: var(--moinho-space-sm);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
	font-size: var(--moinho-role-label-size);
	color: var(--moinho-surface-fg-muted);
}

.moinho-artigo__meta > div {
	display: flex;
	gap: 0.35em;
}

.moinho-artigo__meta dt {
	font-weight: var(--moinho-weight-semibold);
}

.moinho-artigo__meta dt::after {
	content: ":";
}

.moinho-artigo__meta dd {
	margin: 0;
}

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

/* -------------------------------------------------------------------------
   Paginacao
   ---------------------------------------------------------------------- */

.moinho-pagination {
	margin-block-start: var(--moinho-space-xl);
}

.moinho-pagination__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--moinho-space-3xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.moinho-pagination__lista li {
	margin: 0;
}

.moinho-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding-inline: var(--moinho-space-2xs);

	font-size: var(--moinho-role-small-size);
	font-weight: var(--moinho-weight-medium);
	color: var(--moinho-surface-fg);
	text-decoration: none;

	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-sm);

	transition:
		background-color var(--moinho-duration-fast) var(--moinho-ease-default),
		border-color var(--moinho-duration-fast) var(--moinho-ease-default),
		color var(--moinho-duration-fast) var(--moinho-ease-default);
}

.moinho-pagination .page-numbers:hover {
	border-color: var(--moinho-color-primary);
	color: var(--moinho-color-primary);
}

.moinho-pagination .page-numbers.current {
	background-color: var(--moinho-color-primary);
	border-color: var(--moinho-color-primary);
	color: var(--moinho-color-text-on-brand);
}

.moinho-pagination .page-numbers.dots {
	border-color: transparent;
}

/* -------------------------------------------------------------------------
   Filtro por taxonomia
   ---------------------------------------------------------------------- */

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

.moinho-filtro__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-2xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.moinho-filtro__lista li {
	margin: 0;
}

.moinho-filtro__item {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.5rem;
	padding-inline: var(--moinho-space-sm);

	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--moinho-surface-fg-muted);

	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-pill);

	transition:
		background-color var(--moinho-duration-fast) var(--moinho-ease-default),
		border-color var(--moinho-duration-fast) var(--moinho-ease-default),
		color var(--moinho-duration-fast) var(--moinho-ease-default);
}

.moinho-filtro__item:hover {
	border-color: var(--moinho-color-primary);
	color: var(--moinho-color-primary);
}

.moinho-filtro__item.is-ativo {
	background-color: var(--moinho-color-primary);
	border-color: var(--moinho-color-primary);
	color: var(--moinho-color-text-on-brand);
}

/* -------------------------------------------------------------------------
   Estado vazio
   ---------------------------------------------------------------------- */

.moinho-vazio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--moinho-space-sm);
	max-inline-size: var(--moinho-content-width);
	padding: var(--moinho-space-lg);
	background-color: var(--moinho-color-surface);
	border-radius: var(--moinho-radius-lg);
}

/* -------------------------------------------------------------------------
   Busca
   ---------------------------------------------------------------------- */

.moinho-busca {
	display: flex;
	gap: var(--moinho-space-2xs);
	max-inline-size: 32rem;
}

.moinho-busca__campo {
	flex: 1;
	min-inline-size: 0;
	padding: var(--moinho-space-2xs) var(--moinho-space-sm);

	font-size: var(--moinho-role-body-size);
	color: var(--moinho-surface-fg);
	background-color: var(--moinho-color-background);

	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-pill);
	min-block-size: 2.75rem;
}

.moinho-busca__campo:focus-visible {
	border-color: var(--moinho-color-focus);
	outline-offset: 0;
}