/* =========================================================================
   COMPONENTES — UI BASICA
   =========================================================================
   Pecas pequenas e repetidas que o site montava a mao em cada pagina:
   badge, label, metadata, section header e accordion.

   Cada uma existia em duas ou tres versoes ligeiramente diferentes dentro
   de home.css, cases.css, blog.css e expertises.css. Aqui viram uma so.

   Nenhuma delas declara tamanho de fonte proprio: todas leem os papeis
   de design/typography.css, entao mudam junto com o painel.
   ========================================================================= */

/* -------------------------------------------------------------------------
   BADGE — estado, categoria, selo curto.
   ---------------------------------------------------------------------- */

.moinho-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-3xs);

	padding-block: 0.35em;
	padding-inline: 0.75em;

	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-role-label-weight);
	line-height: var(--moinho-role-label-leading);
	letter-spacing: var(--moinho-role-label-tracking);
	text-transform: var(--moinho-role-label-transform);
	text-decoration: none;
	white-space: nowrap;

	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-pill);
	background-color: transparent;
	color: var(--moinho-surface-fg-muted);
}

.moinho-badge--brand {
	border-color: transparent;
	background-color: var(--moinho-color-primary-soft);
	color: var(--moinho-color-primary-readable);
}

.moinho-badge--acao {
	border-color: transparent;
	background-color: var(--moinho-color-secondary-soft);
	color: var(--moinho-color-secondary-readable);
}

.moinho-badge--solido {
	border-color: transparent;
	background-color: var(--moinho-color-primary);
	color: var(--moinho-color-text-on-brand);
}

/* Badge clicavel (filtro de arquivo, tag de case). */
a.moinho-badge {
	transition:
		border-color var(--moinho-duration-fast) var(--moinho-ease-default),
		background-color var(--moinho-duration-fast) var(--moinho-ease-default),
		color var(--moinho-duration-fast) var(--moinho-ease-default);
}

@media (hover: hover) {
	a.moinho-badge:hover {
		border-color: var(--moinho-color-primary-soft);
		background-color: var(--moinho-color-primary-soft);
		color: var(--moinho-color-primary-readable);
	}
}

a.moinho-badge[aria-current="true"],
a.moinho-badge[aria-pressed="true"] {
	border-color: transparent;
	background-color: var(--moinho-color-primary);
	color: var(--moinho-color-text-on-brand);
}

/* -------------------------------------------------------------------------
   LABEL — rotulo isolado, fora de formulario.
   ---------------------------------------------------------------------- */

.moinho-label {
	display: block;
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-role-label-weight);
	line-height: var(--moinho-role-label-leading);
	letter-spacing: var(--moinho-role-label-tracking);
	text-transform: var(--moinho-role-label-transform);
	color: var(--moinho-surface-fg-muted);
}

.moinho-label--brand {
	color: var(--moinho-color-primary-readable);
}

/* -------------------------------------------------------------------------
   METADATA — data, autor, tempo de leitura, setor.
   ----------------------------------------------------------------------
   Lista horizontal com separador que nao e lido por leitor de tela.
   ---------------------------------------------------------------------- */

.moinho-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--moinho-space-3xs) var(--moinho-space-xs);

	margin: 0;
	padding: 0;
	list-style: none;

	font-family: var(--moinho-role-body-family);
	font-size: var(--moinho-role-caption-size);
	line-height: var(--moinho-role-caption-leading);
	color: var(--moinho-surface-fg-muted);
}

.moinho-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
}

/* Separador decorativo entre itens. `content` vazio no primeiro evita
   ponto solto no inicio da linha quando a lista quebra. */
.moinho-meta__item + .moinho-meta__item::before {
	content: "";
	inline-size: 0.25rem;
	block-size: 0.25rem;
	border-radius: var(--moinho-radius-circle);
	background-color: currentColor;
	opacity: 0.5;
}

.moinho-meta .moinho-icon {
	inline-size: 1em;
	block-size: 1em;
	opacity: 0.7;
}

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

@media (hover: hover) {
	.moinho-meta a:hover {
		color: var(--moinho-color-primary-readable);
		text-decoration: underline;
	}
}

/* -------------------------------------------------------------------------
   SECTION HEADER — eyebrow + titulo + apoio.
   ----------------------------------------------------------------------
   A estrutura de layout vive em design/layout.css (.moinho-section__head).
   Aqui fica a versao COMPONENTE, com titulo e apoio ja no papel certo,
   para quem monta a secao sem escrever CSS.
   ---------------------------------------------------------------------- */

.moinho-section-header {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-xs);
	max-inline-size: var(--moinho-container-narrow);
	margin-block-end: var(--moinho-space-xl);
}

.moinho-section-header--center {
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.moinho-section-header--split {
	max-inline-size: none;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--moinho-space-md);
}

.moinho-section-header .moinho-section-header__titulo {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-role-h2-weight);
	line-height: var(--moinho-role-h2-leading);
	letter-spacing: var(--moinho-role-h2-tracking);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

.moinho-section-header__apoio {
	max-inline-size: var(--moinho-content-width);
	margin: 0;
	font-size: var(--moinho-role-body-lg-size);
	line-height: var(--moinho-role-body-lg-leading);
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   ACCORDION — FAQ e listas expansiveis.
   ----------------------------------------------------------------------
   Sobre <details>/<summary>: o conteudo continua acessivel e pesquisavel
   com JavaScript desligado, e o estado aberto/fechado ja e anunciado pelo
   navegador. Nao trocar por div + JS.
   ---------------------------------------------------------------------- */

.moinho-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-2xs);
}

.moinho-accordion__item {
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-md);
	background-color: var(--moinho-card-bg);
	overflow: hidden;
}

.moinho-accordion .moinho-accordion__titulo {
	/* Grid, e nao flex, porque o item pode ter capsula de icone a esquerda:
	   com tres colunas o texto ocupa o meio e o sinal fica sempre no fim. */
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--moinho-space-sm);

	padding: var(--moinho-space-sm) var(--moinho-space-md);

	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-role-h4-weight);
	line-height: var(--moinho-role-h4-leading);
	letter-spacing: var(--moinho-role-h4-tracking);
	color: var(--moinho-surface-fg);

	cursor: pointer;
	list-style: none;
	transition: color var(--moinho-duration-fast) var(--moinho-ease-default);
}

/* Remove o triangulo nativo em WebKit e em Firefox. */
.moinho-accordion__titulo::-webkit-details-marker { display: none; }
.moinho-accordion__titulo::marker { content: ""; }

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

/* O foco desenha em volta do item inteiro, nao so do texto. */
.moinho-accordion__titulo:focus-visible {
	outline: var(--moinho-border-width-strong) solid var(--moinho-color-focus);
	outline-offset: calc(var(--moinho-focus-ring-offset) * -1);
}


/* Capsula opcional a esquerda da pergunta. Sem ela, o item continua com duas
   colunas e nada muda. */
.moinho-accordion__marca {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-md);
	background-color: var(--moinho-color-glass);
	box-shadow: inset 0 1px 0 var(--moinho-color-glass-border);
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1.125rem;
	transition: border-color var(--moinho-duration-normal) var(--moinho-ease-out);
}

.moinho-accordion__item[open] .moinho-accordion__marca {
	border-color: var(--moinho-color-primary-readable);
}

.moinho-accordion__titulo > span:not([class]) {
	grid-column: 2;
}

/* Item sem capsula: o texto ocupa a coluna inicial. */
.moinho-accordion__titulo > span:first-child:not([class]) {
	grid-column: 1 / 3;
}

.moinho-accordion__icone {
	flex: none;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	display: grid;
	place-items: center;
	border-radius: var(--moinho-radius-circle);
	background-color: var(--moinho-color-primary-soft);
	color: var(--moinho-color-primary-readable);
	transition: transform var(--moinho-duration-normal) var(--moinho-ease-out);
}

.moinho-accordion__item[open] .moinho-accordion__icone {
	transform: rotate(45deg);
}

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

.moinho-accordion__corpo > :last-child {
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
   RESUMO — bloco de topicos para leitura rapida e para AIO.

   Cada item e uma frase inteira e verdadeira sozinha. E o formato que um
   sistema de resposta consegue citar sem precisar do paragrafo anterior,
   e tambem o que o leitor apressado le antes de decidir se continua.
   ---------------------------------------------------------------------- */

.moinho-resumo {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-2xs);
	max-inline-size: var(--moinho-copy-measure);
	padding: var(--moinho-space-md);
	border-inline-start: var(--moinho-border-width-strong) solid var(--moinho-color-primary);
	border-radius: 0 var(--moinho-radius-panel) var(--moinho-radius-panel) 0;
	background-color: var(--moinho-color-glass);
}

.moinho-resumo__rotulo {
	font-size: var(--moinho-role-label-size);
	line-height: var(--moinho-role-label-leading);
	letter-spacing: var(--moinho-role-label-tracking);
	text-transform: uppercase;
	color: var(--moinho-color-primary);
}

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

.moinho-resumo__lista li {
	position: relative;
	padding-inline-start: var(--moinho-space-sm);
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

.moinho-resumo__lista li::before {
	content: "";
	position: absolute;
	inset-block-start: .62em;
	inset-inline-start: 0;
	inline-size: .3125rem;
	block-size: .3125rem;
	border-radius: var(--moinho-radius-circle);
	background-color: var(--moinho-color-primary);
}