/* =========================================================================
   MOINHO — DESIGN SYSTEM / LAYOUT
   =========================================================================
   Container, secao e grid. Estas tres primitivas resolvem a maior parte da
   estrutura do site. Antes de escrever um layout novo, verifique se uma
   combinacao delas ja resolve.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Container
   ---------------------------------------------------------------------- */

.moinho-container {
	inline-size: min(
		calc(100% - (var(--moinho-container-padding) * 2)),
		var(--moinho-container-width)
	);
	margin-inline: auto;
	container-type: inline-size;
	container-name: moinho-container;
}

.moinho-container--narrow {
	--moinho-container-width: var(--moinho-container-narrow);
}

.moinho-container--full {
	inline-size: 100%;
	padding-inline: var(--moinho-container-padding);
}

/* -------------------------------------------------------------------------
   Secao
   ---------------------------------------------------------------------- */

.moinho-section {
	position: relative;
	padding-block: var(--moinho-section-space);
	background-color: var(--moinho-surface-bg);
	color: var(--moinho-surface-fg);
}

.moinho-section--tight {
	padding-block: var(--moinho-section-space-tight);
}

.moinho-section--flush-top { padding-block-start: 0; }
.moinho-section--flush-bottom { padding-block-end: 0; }

/* Cabecalho de secao: eyebrow + titulo + apoio. Padrao repetido em
   Expertises, Diferenciais, Equipe, Depoimentos, Blog e Cases. */
.moinho-section__head {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-heading-gap);
	max-inline-size: var(--moinho-container-narrow);
	margin-block-end: var(--moinho-space-xl);
}

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

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

/* O tamanho do titulo de secao vive em design/typography.css, junto da
   guarda contra o kit do Elementor. Aqui ficaria sem forca para vencer
   `.elementor-kit-NN h2`. */

.moinho-section__lead {
	font-size: var(--moinho-role-body-lg-size);
	line-height: var(--moinho-role-body-lg-leading);
	color: var(--moinho-surface-fg-muted);
	max-inline-size: var(--moinho-copy-measure);
	text-align: var(--moinho-copy-align);
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   Grid
   ---------------------------------------------------------------------- */

.moinho-grid {
	display: grid;
	gap: var(--moinho-grid-gap);
	/* Sem media query: as colunas se ajustam sozinhas ate o minimo legivel. */
	grid-template-columns: repeat(
		auto-fit,
		minmax(min(var(--moinho-grid-min), 100%), 1fr)
	);
}

/* Numero fixo de colunas quando a composicao exige controle.
   Uso: <div class="moinho-grid moinho-grid--fixed" style="--moinho-cols:3"> */
.moinho-grid--fixed {
	grid-template-columns: repeat(var(--moinho-cols, 3), minmax(0, 1fr));
}

@media (max-width: 63.9375rem) {
	.moinho-grid--fixed {
		grid-template-columns: repeat(min(var(--moinho-cols, 3), 2), minmax(0, 1fr));
	}
}

@media (max-width: 47.9375rem) {
	.moinho-grid--fixed {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Duas colunas assimetricas — texto + midia. */
.moinho-split {
	display: grid;
	gap: var(--moinho-space-xl) var(--moinho-grid-gap);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}

.moinho-split--media-first > :first-child { order: 2; }
.moinho-split--media-first > :last-child { order: 1; }

@media (max-width: 47.9375rem) {
	.moinho-split--media-first > :first-child,
	.moinho-split--media-first > :last-child { order: 0; }
}

/* -------------------------------------------------------------------------
   Pilhas e clusters — espacamento sem margens avulsas.
   ---------------------------------------------------------------------- */

.moinho-stack {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-stack-gap, var(--moinho-space-sm));
}

.moinho-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--moinho-cluster-gap, var(--moinho-space-xs));
}

/* -------------------------------------------------------------------------
   Midia com proporcao fixa — elimina layout shift em cards e cases.
   ---------------------------------------------------------------------- */

.moinho-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--moinho-radius-md);
	background-color: var(--moinho-color-surface);
	aspect-ratio: var(--moinho-media-ratio, 4 / 3);
}

.moinho-media > img,
.moinho-media > video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.moinho-media--square { --moinho-media-ratio: 1; }
.moinho-media--portrait { --moinho-media-ratio: 3 / 4; }
.moinho-media--retrato { --moinho-media-ratio: 4 / 5; }
.moinho-media--wide { --moinho-media-ratio: 16 / 9; }
.moinho-media--panorama { --moinho-media-ratio: 2 / 1; }
.moinho-media--faixa { --moinho-media-ratio: 21 / 9; }

/* -------------------------------------------------------------------------
   Foto do acervo — object-position vem do PHP, por foto.

   A mesma fotografia entra em proporcoes diferentes conforme a secao. Sem um
   ponto de interesse declarado, o recorte central corta rosto na grade de
   equipe e o letreiro na faixa da fachada. O valor chega inline como
   --moinho-foto-foco (ver core/midia.php); o fallback aqui e o centro.
   ---------------------------------------------------------------------- */

.moinho-foto {
	object-position: var(--moinho-foto-foco, 50% 50%);
}

/* Fora de um quadro com proporcao, a foto ainda precisa ser fluida. */
img.moinho-foto {
	max-inline-size: 100%;
	block-size: auto;
}

.moinho-media > img.moinho-foto {
	block-size: 100%;
}

/* -------------------------------------------------------------------------
   Bleed — quebra o container para fundo de largura total.
   ---------------------------------------------------------------------- */

.moinho-bleed {
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* Fachada dia/noite: o quadro e a imagem compartilham a proporcao 4:5. */
.moinho-media:has(> picture.moinho-fachada-tema) {
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	block-size: auto;
	min-block-size: 0;
	align-self: start;
}
.moinho-media > picture.moinho-fachada-tema {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}
.moinho-media > .moinho-fachada-tema > img.moinho-foto {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}