/*
 * Universo Autoral — obras e coleções.
 *
 * A lógica do Ateliê se inverte aqui. Lá a superfície é clara e a página
 * convida; aqui a superfície é a Noite — a mesma paleta, virada do avesso —,
 * a densidade cai e a única coisa iluminada é a obra. Nada de cartão, borda ou
 * fundo em volta da fotografia: o que separa uma peça da outra é o vazio.
 */

/* ---- grade de obras ---- */

.mm-grade-obras.wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	padding: 0;
	/* Bem acima do blockGap padrão: o silêncio entre as peças é o ponto. */
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.mm-grade-obras > li {
	min-width: 0;
	margin-block-start: 0;
	display: flex;
	flex-direction: column;
	gap: .625rem;
}

/*
 * Profundidade sem cartão. Sobre superfície escura a fotografia tende a boiar,
 * e a saída óbvia — moldura, fundo elevado, borda — devolveria o catálogo que o
 * Autoral não quer ser. Então a profundidade vem de fora da peça: uma sombra
 * larga e difusa escurece o entorno e a obra descola do fundo, sem ganhar
 * contorno nenhum. Ela só funciona porque o fundo é a Noite e não um tom mais
 * fundo: sombra precisa de algum lugar para onde escurecer.
 */
.mm-grade-obras__foto {
	margin: 0;
	box-shadow: none;
	transition: box-shadow .5s ease, transform .5s ease;
}

/* O recorte precisa morar no link para o zoom não vazar da moldura da foto. */
.mm-grade-obras__foto a {
	display: block;
	overflow: hidden;
}

.mm-grade-obras__foto img {
	display: block;
	width: 100%;
	height: clamp(240px, 28vw, 360px);
	aspect-ratio: auto;
	/* O bloco do WordPress inclui cover inline; a obra deve aparecer inteira. */
	object-fit: contain !important;
	/*
	 * A peça entra um pouco recuada e vem para a frente no ponteiro: ganha luz e
	 * cresce três por cento. É movimento de aproximação, não de interface — e
	 * some inteiro para quem pediu menos animação.
	 */
	filter: brightness(1);
	transform: scale(1);
	transition: filter .5s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}

.mm-grade-obras__foto:hover,
.mm-grade-obras__foto:focus-within {
	transform: none;
	box-shadow: none;
}

.mm-grade-obras__foto a:hover img,
.mm-grade-obras__foto a:focus-visible img {
	filter: brightness(1);
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mm-grade-obras__foto,
	.mm-grade-obras__foto img {
		transition: none;
	}

	.mm-grade-obras__foto:hover,
	.mm-grade-obras__foto:focus-within {
		transform: none;
	}

	.mm-grade-obras__foto a:hover img,
	.mm-grade-obras__foto a:focus-visible img {
		transform: none;
	}
}

.mm-grade-obras__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--texto);
	font-weight: 600;
	line-height: 1.3;
}

.mm-grade-obras__titulo a {
	color: var(--wp--preset--color--cal);
	text-decoration: none;
}

.mm-grade-obras__titulo a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--rosa);
	text-underline-offset: 3px;
}

.mm-grade-obras .mm-rotulo {
	margin: 0 !important;
	color: var(--wp--preset--color--taupe);
}

@media (max-width: 63.99em) {
	.mm-grade-obras.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 37.49em) {
	.mm-grade-obras.wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
	.mm-grade-obras__foto img { height: 320px; }
}

/* ---- lista de coleções ---- */

.mm-colecoes ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	font-size: .84375rem;
}

.mm-colecoes a {
	color: var(--wp--preset--color--agua-cinza);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.mm-colecoes a:hover {
	color: var(--wp--preset--color--agua);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * "Outras coleções" não deve listar a coleção que a pessoa já está lendo. O
 * bloco do core não sabe filtrar, mas marca o item atual — e isso basta.
 */
.mm-colecoes--outras .current-cat {
	display: none;
}

/* ---- apresentação da artista ---- */

/*
 * O retrato acompanha o texto em primeira pessoa. O recorte fica aqui, e não no
 * arquivo, para que trocar a fotografia no editor não exija recortá-la antes.
 */
.mm-retrato {
	margin: 0;
}

.mm-retrato img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 62%;
}

.mm-retrato figcaption {
	margin-top: .625rem;
	/* O core centraliza legenda de imagem; aqui tudo se alinha pela esquerda. */
	text-align: left;
	font-size: .78125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--taupe);
}

/*
 * No celular a coluna do texto vem primeiro e o retrato fecha o bloco. A
 * proporção continua de retrato: um recorte panorâmico aqui cortaria o rosto,
 * e uma foto sem rosto e sem peça não é fotografia nenhuma.
 */
@media (max-width: 47.99em) {
	.mm-apresenta .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ---- obra ---- */

/*
 * A obra nunca é cortada na própria página dela: quem manda é a proporção da
 * fotografia. Por isso a imagem não é esticada até a largura do bloco — ela
 * cresce até onde couber e para. Se ocupasse a caixa inteira com `contain`, a
 * sombra desenharia uma moldura em volta do vazio das laterais.
 *
 * Quem impede o corte é o atributo `scale: contain` do bloco, no template: o
 * core imprime `object-fit` como estilo inline, e estilo inline nenhuma folha
 * de estilo alcança.
 */
.mm-obra .mm-obra__foto img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 78vh;
	margin-inline: auto;
}

/* A mesma sombra da grade, sem movimento: aqui a obra já chegou. */
.mm-retrato img,
.mm-obra__foto img {
	box-shadow: none;
}

.mm-obra__leitura .mm-rotulo {
	color: var(--wp--preset--color--taupe);
}

/* ---- ficha técnica ---- */

/*
 * Vem de mm_obra_ficha_html(), não do editor: os dados moram nos metadados da
 * obra e seria erro pedir que a Flavia os repetisse dentro do texto.
 */
.mm-ficha {
	margin: var(--wp--preset--spacing--40) 0 0;
	border-top: 1px solid var(--wp--preset--color--noite-alta);
	font-size: .84375rem;
}

.mm-ficha__par {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: 0 1rem;
	padding: .625rem 0;
	border-bottom: 1px solid var(--wp--preset--color--noite-alta);
}

.mm-ficha dt {
	margin: 0;
	color: var(--wp--preset--color--taupe);
	font-size: .6875rem;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.9;
}

.mm-ficha dd {
	margin: 0;
	color: var(--wp--preset--color--cal);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 35.99em) {
	.mm-ficha__par {
		grid-template-columns: 1fr;
		gap: .125rem;
	}
}

.mm-obra__acao {
	margin-top: var(--wp--preset--spacing--30);
}

/* ---- passo entre obras ---- */

.mm-obra__passos {
	font-size: .84375rem;
}

.mm-obra__passos a {
	color: var(--wp--preset--color--agua-cinza);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.mm-obra__passos a:hover {
	color: var(--wp--preset--color--agua);
	text-decoration: underline;
	text-underline-offset: 3px;
}