/* =========================================================================
   COMPONENTE — GALERIA
   =========================================================================
   Quatro composicoes fotograficas. O recorte e a proporcao sao do
   `.moinho-media`; o ponto de interesse vem do acervo. Aqui fica so a
   arrumacao das pecas no espaco.

   A grade e de 12 colunas para que os formatos (8+4, 7+5, 6+6) fechem exatos.
   Cada figura declara quantas colunas ocupa via --moinho-galeria-cols, que o
   PHP escreve inline a partir do formato pedido.
   ========================================================================= */

.moinho-galeria {
	display: grid;
	gap: var(--moinho-grid-gap);
}

/* -------------------------------------------------------------------------
   Figura
   ---------------------------------------------------------------------- */

.moinho-galeria__item {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-2xs);
	min-inline-size: 0;
}

.moinho-galeria__item .moinho-media {
	border-radius: var(--moinho-radius-panel);
	box-shadow: var(--moinho-shadow-md);
}

/* O zoom acontece na imagem, nunca no quadro: escalar o quadro moveria o
   layout inteiro e brigaria com o scroll. */
.moinho-galeria__item .moinho-media img {
	transition: transform var(--moinho-duration-slow) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-galeria__item:hover .moinho-media img {
		transform: scale(1.04);
	}
}

.moinho-galeria__legenda {
	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);
	padding-inline-start: var(--moinho-space-3xs);
}

/* -------------------------------------------------------------------------
   Mosaico — grade assimetrica de 12 colunas.
   ---------------------------------------------------------------------- */

.moinho-galeria--mosaico,
.moinho-galeria--dupla {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
}

.moinho-galeria--mosaico > .moinho-galeria__item,
.moinho-galeria--dupla > .moinho-galeria__item {
	grid-column: span var(--moinho-galeria-cols, 6);
}

/* Tablet: os formatos de 4 e 5 colunas ficariam estreitos demais para
   caber uma foto legivel; a grade cai para dois blocos de 6. */
@media (max-width: 63.9375rem) {
	.moinho-galeria--mosaico > .moinho-galeria__item,
	.moinho-galeria--dupla > .moinho-galeria__item {
		grid-column: span 6;
	}

	.moinho-galeria--mosaico > .moinho-galeria__item--plena {
		grid-column: span 12;
	}
}

/* Telefone: uma coluna, sempre. Composicao assimetrica em 375px vira
   sobreposicao ilegivel e scroll horizontal. */
@media (max-width: 47.9375rem) {
	.moinho-galeria--mosaico > .moinho-galeria__item,
	.moinho-galeria--dupla > .moinho-galeria__item {
		grid-column: span 12;
	}
}

/* -------------------------------------------------------------------------
   Bento — grade encaixada, sem sobra.

   A diferenca para o mosaico esta em uma linha: aqui a foto NAO tem
   proporcao propria, ela preenche a celula. E isso que elimina o buraco
   embaixo da foto mais baixa de uma fileira mista. A altura vem da unidade
   de linha; a largura, das colunas que a pagina declarou.
   ---------------------------------------------------------------------- */

.moinho-galeria--bento {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: clamp(8rem, 12vw, 11.5rem);
}

.moinho-galeria--bento > .moinho-galeria__item {
	grid-column: var(--moinho-galeria-col, auto) / span var(--moinho-galeria-cols, 6);
	grid-row: span var(--moinho-galeria-linhas, 1);

	position: relative;
	block-size: 100%;
	gap: 0;
	overflow: hidden;
	border-radius: var(--moinho-radius-panel);
	box-shadow: var(--moinho-shadow-md);
}

.moinho-galeria--bento .moinho-media {
	--moinho-media-ratio: auto;
	block-size: 100%;
	border-radius: 0;
	box-shadow: none;
}

/* Selo: a legenda vira uma faixa no rodape da peca. Some no repouso para a
   grade continuar sendo fotografia, e aparece no hover para quem quiser
   saber que sala e aquela. */
.moinho-galeria__selo {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: var(--moinho-space-lg) var(--moinho-space-sm) var(--moinho-space-xs);

	font-family: var(--moinho-role-body-family);
	font-size: var(--moinho-role-caption-size);
	line-height: var(--moinho-role-caption-leading);
	color: var(--moinho-branco);
	background: linear-gradient(to top, rgb(9 6 16 / 0.78), rgb(9 6 16 / 0));

	opacity: 0;
	transform: translateY(0.5rem);
	transition:
		opacity var(--moinho-duration-normal) var(--moinho-ease-out),
		transform var(--moinho-duration-normal) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-galeria__item--bento:hover .moinho-galeria__selo,
	.moinho-galeria__item--bento:focus-within .moinho-galeria__selo {
		opacity: 1;
		transform: none;
	}
}

/* Sem hover nao existe como revelar: a legenda fica. */
@media (hover: none) {
	.moinho-galeria__selo {
		opacity: 1;
		transform: none;
	}
}

/* Tablet: a grade de 12 colunas com celulas de altura fixa vira ilegivel.
   Duas colunas, altura pela proporcao, e a peca volta a ser cartao. */
@media (max-width: 63.9375rem) {
	.moinho-galeria--bento {
		grid-auto-rows: auto;
	}

	.moinho-galeria--bento > .moinho-galeria__item {
		grid-column: span 6;
		grid-row: auto;
		block-size: auto;
	}

	.moinho-galeria--bento .moinho-media {
		--moinho-media-ratio: 4 / 3;
	}
}

@media (max-width: 47.9375rem) {
	.moinho-galeria--bento > .moinho-galeria__item {
		grid-column: span 12;
	}
}

/* -------------------------------------------------------------------------
   Dupla — a segunda foto desce e avanca sobre a primeira.

   O deslocamento e vertical (margin-block-start negativo) e nao horizontal:
   assim a sobreposicao existe sem risco de estourar o container. Some no
   tablet, onde as duas ja ocupam meia largura cada.
   ---------------------------------------------------------------------- */

.moinho-galeria--dupla > .moinho-galeria__item--coluna {
	margin-block-start: var(--moinho-space-2xl);
	z-index: var(--moinho-z-raised);
}

.moinho-galeria--dupla > .moinho-galeria__item--coluna .moinho-media {
	box-shadow: var(--moinho-shadow-float);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
}

@media (max-width: 63.9375rem) {
	.moinho-galeria--dupla > .moinho-galeria__item--coluna {
		margin-block-start: 0;
	}
}

/* -------------------------------------------------------------------------
   Faixa — sangra a largura da tela.
   ---------------------------------------------------------------------- */

.moinho-galeria--faixa {
	position: relative;
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	gap: 0;
}

.moinho-galeria__faixa-quadro {
	border-radius: 0;
}

/* Telefone: a proporcao 21:9 deixaria a foto com 3cm de altura. */
@media (max-width: 47.9375rem) {
	.moinho-galeria__faixa-quadro {
		--moinho-media-ratio: 4 / 3;
	}
}

.moinho-galeria__faixa-texto {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-3xs);

	padding: var(--moinho-space-lg) var(--moinho-container-padding);
	/* Gradiente, nao caixa: o texto ancora no rodape da foto sem cortar a
	   imagem em duas. */
	background: linear-gradient(to top, rgb(9 6 16 / 0.82), rgb(9 6 16 / 0));
	color: var(--moinho-branco);
}

.moinho-galeria__faixa-titulo {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h3-size);
	line-height: var(--moinho-role-h3-leading);
	letter-spacing: var(--moinho-role-h3-tracking);
	font-weight: var(--moinho-role-h3-weight);
	max-inline-size: 26ch;
}

.moinho-galeria__faixa-apoio {
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-color-text-on-dark-muted);
	max-inline-size: 46ch;
}

/* -------------------------------------------------------------------------
   Carrossel — a largura da pista e do componente trilha.

   Nao redeclare inline-size no slide: a trilha usa grid-auto-columns, e um
   tamanho fixo aqui brigaria com o track, quebrando o scroll-snap.
   ---------------------------------------------------------------------- */

.moinho-galeria--carrossel [data-moinho-trilha] {
	cursor: grab;
	user-select: none;
}

.moinho-galeria--carrossel [data-moinho-trilha].is-arrastando {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.moinho-galeria--carrossel {
	display: block;
}

.moinho-galeria__slide .moinho-media {
	border-radius: var(--moinho-radius-panel);
	box-shadow: var(--moinho-shadow-md);
}

/* -------------------------------------------------------------------------
   Tira — altura fixa, largura pela proporcao.

   A trilha padrao distribui os slides em colunas de mesma largura, e o que
   varia e a ALTURA: retrato e paisagem lado a lado desalinham a pista e
   deixam buraco embaixo da foto deitada. Aqui a conta se inverte — a altura
   e a mesma para todos, `grid-auto-columns: auto` deixa cada slide pedir a
   largura que a proporcao exige, e a fileira fecha reta.
   ---------------------------------------------------------------------- */

.moinho-galeria--tira {
	--moinho-tira-altura: clamp(16rem, 26vw, 24rem);

	display: block;
}

.moinho-galeria--tira .moinho-trilha__lista {
	grid-auto-columns: auto;
	align-items: start;
}

.moinho-galeria--tira .moinho-galeria__slide .moinho-media {
	block-size: var(--moinho-tira-altura);
	/* auto + aspect-ratio = a largura sai da proporcao declarada no item. */
	inline-size: auto;
	border-radius: var(--moinho-radius-panel);
	box-shadow: var(--moinho-shadow-md);
}

.moinho-galeria--tira .moinho-galeria__legenda {
	max-inline-size: 26ch;
}

/* No telefone a pista vira uma foto por vez: altura livre e largura travada,
   que e o inverso do desktop. Tira de 16rem num aparelho de 375px deixaria
   cada foto do tamanho de um selo. */
@media (max-width: 47.9375rem) {
	.moinho-galeria--tira .moinho-trilha__lista {
		grid-auto-columns: minmax(min(20rem, 78vw), 1fr);
	}

	.moinho-galeria--tira .moinho-galeria__slide .moinho-media {
		block-size: auto;
		inline-size: 100%;
	}
}