/* ==========================================================================
   AMIA, Arquivo da Memória Intercultural das Artes da Cena no Brasil
   Identidade visual sobre o tema Astra.

   As cores vêm do próprio acervo: o ocre da madeira e o carmim, o índigo e o
   amarelo das fitas do Cavalo Marinho; o pacha (verde) da maquiagem do
   Kathakali. Os fundos são papel e tinta, a matéria de um arquivo.
   ========================================================================== */

:root {
	/* Cores */
	--amia-tinta: #16110e;
	--amia-tinta-2: #241c17;
	--amia-tinta-3: #362b23;
	--amia-papel: #f7f2e9;
	--amia-papel-2: #ede3d4;
	--amia-papel-3: #ded1bd;
	--amia-ocre: #c08a2e;
	--amia-ocre-claro: #e0b45f;
	--amia-carmim: #a63426;
	--amia-pacha: #1e6b54;
	--amia-indigo: #2b4a7a;

	--amia-texto: #211a15;
	--amia-texto-suave: #5c4f44;
	--amia-texto-claro: #ece3d5;
	--amia-texto-claro-suave: #b7a897;

	/* Tipografia */
	--amia-fonte-titulo: "Spectral", Georgia, "Times New Roman", serif;
	--amia-fonte-corpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Ritmo */
	--amia-largura: 1200px;
	--amia-largura-texto: 68ch;
	--amia-espaco: clamp(3rem, 7vw, 6.5rem);
	--amia-raio: 2px;

	--amia-transicao: 380ms cubic-bezier(0.2, 0.7, 0.3, 1);
	--amia-sombra: 0 1px 2px rgba(22, 17, 14, 0.08), 0 12px 32px rgba(22, 17, 14, 0.1);
	--amia-sombra-alta: 0 2px 4px rgba(22, 17, 14, 0.12), 0 24px 56px rgba(22, 17, 14, 0.18);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
	font-family: var(--amia-fonte-corpo);
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--amia-texto);
	background: var(--amia-papel);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
	font-family: var(--amia-fonte-titulo);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: var(--amia-tinta);
}

h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); }
h4 { font-size: 1.2rem; }

p { margin-bottom: 1.35em; }

a {
	color: var(--amia-carmim);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--amia-transicao);
}

a:hover,
a:focus { color: var(--amia-ocre); }

:focus-visible {
	outline: 2px solid var(--amia-ocre);
	outline-offset: 3px;
}

::selection {
	background: var(--amia-ocre);
	color: var(--amia-tinta);
}

/* O Astra reserva 4em acima e abaixo do conteúdo. Nas páginas, cada seção já
   traz o próprio respiro e as faixas coloridas vão de ponta a ponta, então a
   margem do tema abriria uma tira clara entre o hero e o topo da página.
   Nos posts e arquivos do blog a margem do tema continua valendo. */
body.page #primary,
body.page .entry-content {
	margin-top: 0;
	margin-bottom: 0;
}

#page,
.site-content {
	background: var(--amia-papel);
}

/* Largura de leitura confortável no corpo das páginas internas. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
	max-width: var(--amia-largura-texto);
}

.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > .wp-block-columns,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-group,
.entry-content > .wp-block-gallery {
	max-width: none;
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */

.site-header {
	background: var(--amia-papel);
	border-bottom: 1px solid var(--amia-papel-3);
	transition: background var(--amia-transicao), border-color var(--amia-transicao);
}

.site-title,
.site-title a {
	font-family: var(--amia-fonte-titulo);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--amia-tinta);
	text-transform: uppercase;
}

.site-description {
	font-family: var(--amia-fonte-corpo);
	font-size: 0.75rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--amia-texto-suave);
}

.main-header-menu .menu-link,
.main-header-menu > li > a {
	font-family: var(--amia-fonte-corpo);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--amia-tinta);
}

/* Sublinhado que cresce a partir da esquerda no item de menu. */
.main-header-menu > .menu-item > .menu-link {
	position: relative;
}

.main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 0.55rem;
	height: 2px;
	background: var(--amia-ocre);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--amia-transicao);
}

.main-header-menu > .menu-item:hover > .menu-link::after,
.main-header-menu > .current-menu-item > .menu-link::after,
.main-header-menu > .current-menu-ancestor > .menu-link::after {
	transform: scaleX(1);
}

/* Cabeçalho transparente sobre o hero da página inicial.
   O Astra 4 pinta a barra interna (.ast-primary-header-bar), não o <header>,
   então é ela que precisa ficar transparente. */
.amia-header-transparente .site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 20;
	background: transparent;
	border-bottom-color: transparent;
}

.amia-header-transparente .site-header:not(.amia-fixo),
.amia-header-transparente .site-header:not(.amia-fixo) .ast-primary-header-bar,
.amia-header-transparente .site-header:not(.amia-fixo) .main-header-bar,
.amia-header-transparente .site-header:not(.amia-fixo) .ast-desktop-header-content {
	background: transparent !important;
	border-bottom-color: transparent !important;
}

.amia-header-transparente .site-header:not(.amia-fixo) .site-title a,
.amia-header-transparente .site-header:not(.amia-fixo) .site-description,
.amia-header-transparente .site-header:not(.amia-fixo) .main-header-menu > .menu-item > .menu-link {
	color: var(--amia-papel) !important;
	text-shadow: 0 1px 14px rgba(12, 9, 7, 0.7);
}

/* O submenu abre sobre fundo próprio, nunca sobre a foto, por isso fica de
   fora da regra acima. Sem essa separação os links do submenu herdavam a cor
   clara do cabeçalho transparente e sumiam, o que só acontecia na página
   inicial: é a única com cabeçalho sobre imagem. */
.main-header-menu .sub-menu {
	/* O Astra fixa 240px, o que cortava "Laboratório Intercultural de
	   Atuação". A caixa fica mais larga e o texto passa a quebrar em duas
	   linhas em vez de transbordar. */
	width: 278px !important;
	max-width: none !important;
	padding: 0.4rem 0;
	border: 1px solid var(--amia-tinta-3);
	border-top: 2px solid var(--amia-ocre);
	border-radius: var(--amia-raio);
	background: var(--amia-tinta);
	box-shadow: 0 18px 44px rgba(12, 9, 7, 0.34);
}

.main-header-menu .sub-menu .menu-link,
.amia-header-transparente .site-header .sub-menu .menu-link,
.site-header.amia-fixo .sub-menu .menu-link {
	padding: 0.62rem 1.25rem !important;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.35;
	text-transform: none;
	white-space: normal !important;
	overflow-wrap: break-word;
	color: var(--amia-texto-claro) !important;
	text-shadow: none !important;
	background: transparent !important;
	border: 0;
	transition: background var(--amia-transicao), color var(--amia-transicao);
}

.main-header-menu .sub-menu .menu-item:hover > .menu-link,
.main-header-menu .sub-menu .menu-link:focus,
.main-header-menu .sub-menu .current-menu-item > .menu-link {
	background: var(--amia-tinta-2) !important;
	color: var(--amia-ocre-claro) !important;
}

/* O sublinhado animado é só do primeiro nível. */
.main-header-menu .sub-menu .menu-link::after { content: none; }

/* Ao rolar, o cabeçalho ganha corpo e passa a acompanhar a página. */
.site-header.amia-fixo {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 30;
	border-bottom-color: var(--amia-papel-3);
	box-shadow: 0 1px 24px rgba(22, 17, 14, 0.09);
	animation: amia-desce var(--amia-transicao);
}

.site-header.amia-fixo,
.site-header.amia-fixo .ast-primary-header-bar,
.site-header.amia-fixo .main-header-bar,
.site-header.amia-fixo .ast-desktop-header-content {
	background: rgba(247, 242, 233, 0.95) !important;
	backdrop-filter: saturate(1.4) blur(10px);
}

@keyframes amia-desce {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Hero da página inicial
   -------------------------------------------------------------------------- */

.amia-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(86vh, 860px);
	padding: 0;
	overflow: hidden;
	background: var(--amia-tinta);
}

.amia-hero__img,
.amia-hero .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center 42%;
}

/* Escurece o pé da imagem para o texto respirar. Quando o hero é um bloco
   "Capa", o gradiente já vem do próprio bloco e esta camada não entra. */
.amia-hero:not(.wp-block-cover)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(12, 9, 7, 0.92) 0%,
		rgba(12, 9, 7, 0.55) 34%,
		rgba(12, 9, 7, 0.12) 66%,
		rgba(12, 9, 7, 0.4) 100%
	);
}

/* O bloco "Capa" traz sua própria caixa interna; ela recebe o mesmo
   tratamento do contêiner do hero escrito à mão. */
.amia-hero.wp-block-cover {
	align-items: flex-end;
	padding: 0;
	/* O bloco grava a altura em vh no atributo inline. Em telas muito altas
	   isso vira um hero de dois mil pixels; o teto em px segura a proporção. */
	min-height: min(88vh, 900px) !important;
}

/* O véu do hero é feito aqui, e não no atributo do bloco, porque são duas
   camadas: uma sobe do pé da imagem, outra vem da esquerda, atrás do texto.
   A foto do Cavalo Marinho tem fundo de madeira clara, e sem a camada lateral
   o texto se perde justamente onde ele começa. */
.amia-hero .wp-block-cover__background {
	/* Duas camadas: a elipse cobre a coluna de texto à esquerda, do
	   sobretítulo até os botões, e a faixa de baixo assenta o rodapé do
	   quadro. O lado direito fica livre, para as cores das fitas aparecerem. */
	background:
		radial-gradient(
			145% 130% at 0% 64%,
			rgba(12, 9, 7, 0.95) 0%,
			rgba(12, 9, 7, 0.86) 26%,
			rgba(12, 9, 7, 0.58) 44%,
			rgba(12, 9, 7, 0.2) 62%,
			rgba(12, 9, 7, 0) 76%
		),
		linear-gradient(
			to top,
			rgba(12, 9, 7, 0.6) 0%,
			rgba(12, 9, 7, 0.18) 28%,
			rgba(12, 9, 7, 0) 56%,
			rgba(12, 9, 7, 0.32) 100%
		) !important;
	opacity: 1 !important;
}

.amia-hero .wp-block-cover__inner-container,
.amia-hero__conteudo {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--amia-largura) !important;
	margin: 0 auto;
	padding: 0 1.5rem clamp(3rem, 7vw, 5.5rem);
	color: var(--amia-texto-claro);
}

.amia-hero__sobretitulo {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 1.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--amia-papel);
	text-shadow: 0 1px 3px rgba(12, 9, 7, 0.95), 0 2px 18px rgba(12, 9, 7, 0.85);
}

.amia-hero__sobretitulo::before {
	content: "";
	width: 3rem;
	height: 2px;
	background: var(--amia-ocre-claro);
}

/* Mesmo caso dos cabeçalhos de seção: o layout restrito centraliza tudo que
   tem largura máxima. No hero isso desalinhava o título em relação ao
   sobretítulo e aos botões. */
.amia-hero__titulo,
.amia-hero__resumo,
.amia-hero__sobretitulo,
.amia-hero__acoes {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.amia-hero__titulo {
	max-width: 20ch;
	margin: 0 0 1.25rem;
	font-size: clamp(2.4rem, 5.6vw, 4.75rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--amia-papel);
	text-wrap: balance;
}

.amia-hero__resumo {
	max-width: 44ch;
	margin: 0 0 2.25rem;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.6;
	/* Sobre fotografia, o cinza-claro do corpo não sustenta o contraste:
	   aqui o texto vai quase branco e ganha sombra. */
	color: #f4ede1;
	text-shadow: 0 1px 3px rgba(12, 9, 7, 0.9), 0 2px 22px rgba(12, 9, 7, 0.8);
}

.amia-hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.amia-hero__credito {
	position: absolute;
	right: 1.5rem;
	bottom: 1rem;
	z-index: 2;
	max-width: 34ch;
	padding: 0.5rem 0.75rem;
	border-radius: var(--amia-raio);
	background: rgba(12, 9, 7, 0.55);
	backdrop-filter: blur(3px);
	font-size: 0.6875rem;
	line-height: 1.45;
	text-align: right;
	color: rgba(245, 239, 229, 0.92);
	text-shadow: 0 1px 3px rgba(12, 9, 7, 0.95), 0 1px 12px rgba(12, 9, 7, 0.9);
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

/* O bloco "Botão" do editor coloca a classe no invólucro e o estilo visível
   no <a> interno, por isso as regras miram o link, e não o invólucro. */
.amia-botao .wp-block-button__link,
a.amia-botao {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.85rem;
	border: 1px solid transparent;
	border-radius: var(--amia-raio);
	background: transparent;
	font-family: var(--amia-fonte-corpo);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform var(--amia-transicao), background var(--amia-transicao),
		color var(--amia-transicao), border-color var(--amia-transicao);
}

.amia-botao--principal .wp-block-button__link,
a.amia-botao--principal {
	background: var(--amia-ocre);
	color: var(--amia-tinta);
}

.amia-botao--principal .wp-block-button__link:hover,
.amia-botao--principal .wp-block-button__link:focus,
a.amia-botao--principal:hover {
	background: var(--amia-ocre-claro);
	color: var(--amia-tinta);
	transform: translateY(-2px);
}

.amia-botao--contorno .wp-block-button__link,
a.amia-botao--contorno {
	border-color: rgba(247, 242, 233, 0.5);
	color: var(--amia-papel);
}

.amia-botao--contorno .wp-block-button__link:hover,
.amia-botao--contorno .wp-block-button__link:focus,
a.amia-botao--contorno:hover {
	border-color: var(--amia-papel);
	background: rgba(247, 242, 233, 0.12);
	color: var(--amia-papel);
	transform: translateY(-2px);
}

.amia-botao--escuro .wp-block-button__link,
a.amia-botao--escuro {
	border-color: var(--amia-tinta);
	color: var(--amia-tinta);
}

.amia-botao--escuro .wp-block-button__link:hover,
.amia-botao--escuro .wp-block-button__link:focus,
a.amia-botao--escuro:hover {
	background: var(--amia-tinta);
	color: var(--amia-papel);
}

.amia-hero__acoes { gap: 0.9rem; }

/* --------------------------------------------------------------------------
   Seções
   -------------------------------------------------------------------------- */

.amia-secao {
	padding: var(--amia-espaco) 1.5rem;
}

.amia-secao--tinta {
	background: var(--amia-tinta);
	color: var(--amia-texto-claro);
}

.amia-secao--tinta h1,
.amia-secao--tinta h2,
.amia-secao--tinta h3 { color: var(--amia-papel); }

.amia-secao--papel-2 { background: var(--amia-papel-2); }

.amia-secao__interno {
	max-width: var(--amia-largura);
	margin: 0 auto;
}

.amia-secao__cabecalho {
	margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.amia-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.9rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--amia-carmim);
}

.amia-etiqueta::before {
	content: "";
	width: 2.25rem;
	height: 2px;
	background: currentColor;
}

.amia-secao--tinta .amia-etiqueta { color: var(--amia-ocre-claro); }

/* O Astra aplica `max-width:none; margin-left:auto; margin-right:auto` a todo
   filho direto de um grupo de blocos. Isso centraliza os cabeçalhos de seção e
   solta a largura dos parágrafos, então as regras abaixo precisam do
   !important para reencostar o texto à esquerda e devolver a medida de
   leitura. É a única sobreposição forçada do tema-pai neste arquivo. */
.amia-secao__titulo,
.amia-secao__resumo,
.amia-secao__cabecalho > .amia-etiqueta,
.amia-secao__interno > p,
.amia-secao__interno > ul,
.amia-secao__interno > ol,
.amia-secao__interno > blockquote,
.amia-percurso__texto,
.amia-cartao__texto {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.amia-secao__titulo {
	max-width: 24ch !important;
	margin-bottom: 0.75rem;
	text-wrap: balance;
}

.amia-secao__resumo {
	max-width: 62ch !important;
	margin-bottom: 0;
	font-size: 1.0625rem;
	color: var(--amia-texto-suave);
}

/* Medida de leitura para o texto corrido dentro das seções.
   A galeria também é uma <ul>, mas quer a largura toda, daí o :not(). */
.amia-secao__interno > p,
.amia-secao__interno > ul:not(.amia-galeria),
.amia-secao__interno > ol,
.amia-secao__interno > blockquote {
	max-width: var(--amia-largura-texto) !important;
}

/* Textos em colunas e cartões usam a largura da própria caixa. */
.wp-block-column .amia-secao__interno > p,
.amia-cartao__texto,
.amia-percurso__texto {
	max-width: none !important;
}

.amia-secao--tinta .amia-secao__resumo { color: var(--amia-texto-claro-suave); }

/* Texto longo em duas colunas: leitura de arquivo, não de blog. */
.amia-texto-duplo {
	max-width: 100ch;
	column-gap: 3.5rem;
}

@media (min-width: 900px) {
	.amia-texto-duplo { column-count: 2; }
}

.amia-texto-duplo p:first-child { margin-top: 0; }

/* Capitular na abertura do texto institucional. */
.amia-capitular > p:first-of-type::first-letter {
	float: left;
	margin: 0.07em 0.12em 0 0;
	font-family: var(--amia-fonte-titulo);
	font-size: 3.6em;
	font-weight: 700;
	line-height: 0.78;
	color: var(--amia-carmim);
}

/* --------------------------------------------------------------------------
   Cartões (pesquisadores, parcerias, coleções)
   -------------------------------------------------------------------------- */

.amia-grade {
	display: grid;
	gap: clamp(1.5rem, 2.6vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.amia-grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

/* Cartões lado a lado precisam alinhar topo e base mesmo quando um tem
   imagem e o outro não, ou quando os textos têm tamanhos diferentes. */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-column > .amia-cartao { flex: 1; }

.amia-cartao {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--amia-papel-3);
	border-radius: var(--amia-raio);
	background: var(--amia-papel);
	transition: transform var(--amia-transicao), box-shadow var(--amia-transicao),
		border-color var(--amia-transicao);
}

/* O grupo interno do editor não herda o flex do cartão sem isto. */
.amia-cartao > .amia-cartao__corpo {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.amia-cartao:hover {
	transform: translateY(-4px);
	border-color: var(--amia-ocre);
	box-shadow: var(--amia-sombra-alta);
}

.amia-secao--tinta .amia-cartao {
	border-color: var(--amia-tinta-3);
	background: var(--amia-tinta-2);
}

.amia-cartao__midia {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--amia-tinta-2);
}

.amia-cartao__midia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.amia-cartao:hover .amia-cartao__midia img { transform: scale(1.045); }

.amia-cartao--retrato .amia-cartao__midia { aspect-ratio: 3 / 4; }

.amia-cartao__corpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.6rem 1.5rem 1.75rem;
}

.amia-cartao__papel {
	margin-bottom: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--amia-carmim);
}

.amia-secao--tinta .amia-cartao__papel { color: var(--amia-ocre-claro); }

.amia-cartao__titulo {
	margin: 0 0 0.7rem;
	font-size: 1.4rem;
	line-height: 1.2;
}

.amia-cartao__titulo a { color: inherit; text-decoration: none; }
.amia-cartao__titulo a:hover { color: var(--amia-carmim); }
.amia-secao--tinta .amia-cartao__titulo a:hover { color: var(--amia-ocre-claro); }

.amia-cartao__texto {
	flex: 1;
	margin: 0 0 1.35rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--amia-texto-suave);
}

.amia-secao--tinta .amia-cartao__texto { color: var(--amia-texto-claro-suave); }

.amia-cartao__link {
	align-self: flex-start;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.amia-cartao__link::after {
	content: " →";
	display: inline-block;
	transition: transform var(--amia-transicao);
}

.amia-cartao__link:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Galeria de acervo
   -------------------------------------------------------------------------- */

/* A galeria é uma <ul> e cairia na medida de leitura das seções; aqui ela
   recupera a largura inteira e o número de colunas pedido no shortcode. */
.amia-galeria {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(
		var(--amia-galeria-colunas, 4),
		minmax(0, 1fr)
	);
	max-width: none !important;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

@media (max-width: 1100px) {
	.amia-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
	.amia-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.amia-galeria__item figure {
	margin: 0;
	height: 100%;
	overflow: hidden;
	border-radius: var(--amia-raio);
	background: var(--amia-tinta-2);
}

.amia-galeria__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1), filter var(--amia-transicao);
	filter: saturate(0.92);
}

.amia-galeria__item:hover .amia-galeria__img {
	transform: scale(1.05);
	filter: saturate(1.05);
}

.amia-galeria__item figcaption {
	display: block;
	padding: 0.85rem 0.95rem 1rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--amia-texto-claro-suave);
}

.amia-galeria__titulo {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--amia-fonte-titulo);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--amia-papel);
}

.amia-galeria__legenda { display: block; }

/* --------------------------------------------------------------------------
   Números do acervo
   -------------------------------------------------------------------------- */

.amia-numeros {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	padding: clamp(2rem, 4vw, 3rem) 0 0;
	border-top: 1px solid var(--amia-tinta-3);
}

.amia-numero__valor {
	display: block;
	font-family: var(--amia-fonte-titulo);
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	font-weight: 600;
	line-height: 1;
	color: var(--amia-ocre);
	font-variant-numeric: tabular-nums;
}

.amia-numero__rotulo {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--amia-texto-claro-suave);
}

/* --------------------------------------------------------------------------
   Citação de destaque
   -------------------------------------------------------------------------- */

.amia-citacao {
	max-width: 46ch;
	margin: 0;
	padding-left: 1.75rem;
	border-left: 3px solid var(--amia-ocre);
	font-family: var(--amia-fonte-titulo);
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	font-style: italic;
	line-height: 1.42;
	color: var(--amia-tinta);
}

.amia-secao--tinta .amia-citacao { color: var(--amia-papel); }

.amia-citacao cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--amia-fonte-corpo);
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--amia-texto-suave);
}

.amia-secao--tinta .amia-citacao cite { color: var(--amia-ocre-claro); }

/* --------------------------------------------------------------------------
   Linha do tempo (percursos de pesquisa)
   -------------------------------------------------------------------------- */

.amia-percurso {
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--amia-papel-3);
}

.amia-percurso__item {
	position: relative;
	padding: 0 0 2.5rem 2rem;
}

.amia-percurso__item::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: -7px;
	width: 12px;
	height: 12px;
	border: 2px solid var(--amia-papel);
	border-radius: 50%;
	background: var(--amia-carmim);
}

.amia-percurso__ano {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--amia-carmim);
}

.amia-percurso__titulo {
	margin: 0 0 0.6rem;
	font-size: 1.25rem;
}

.amia-percurso__texto {
	max-width: 62ch;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--amia-texto-suave);
}

/* --------------------------------------------------------------------------
   Marcação de pendência (visível apenas para editores)
   -------------------------------------------------------------------------- */

.amia-pendencia {
	display: inline-block;
	padding: 0.1em 0.5em;
	border: 1px dashed var(--amia-carmim);
	border-radius: var(--amia-raio);
	background: rgba(166, 52, 38, 0.07);
	font-family: var(--amia-fonte-corpo);
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--amia-carmim);
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

/* O Astra monta o rodapé em faixas próprias; todas precisam do fundo escuro,
   senão só a borda superior muda de cor e o texto claro cai sobre branco. */
.site-footer,
.site-footer .site-below-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-footer .ast-builder-grid-row-container,
.ast-small-footer {
	background: var(--amia-tinta) !important;
	color: var(--amia-texto-claro-suave);
}

.site-footer { border-top: 3px solid var(--amia-ocre); }

.site-footer a,
.ast-small-footer a { color: var(--amia-ocre-claro); }

.site-footer p,
.site-footer .ast-footer-copyright { color: var(--amia-texto-claro-suave); }

.amia-creditos {
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.7;
}

.amia-creditos__linha { margin: 0 0 0.7rem; }
.amia-creditos__linha strong { color: var(--amia-papel); letter-spacing: 0.08em; }

.amia-creditos__fomento {
	margin-top: 1.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--amia-tinta-3);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--amia-ocre-claro);
}

/* --------------------------------------------------------------------------
   Carrossel de notícias (Spectra)

   O bloco chega com tipografia e botão próprios; aqui ele passa a falar a
   mesma língua do resto do site.
   -------------------------------------------------------------------------- */

.uagb-post-grid .uagb-post__inner-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--amia-papel-3);
	border-radius: var(--amia-raio);
	background: var(--amia-papel);
	transition: transform var(--amia-transicao), box-shadow var(--amia-transicao),
		border-color var(--amia-transicao);
}

.uagb-post-grid .uagb-post__inner-wrap:hover {
	transform: translateY(-4px);
	border-color: var(--amia-ocre);
	box-shadow: var(--amia-sombra-alta);
}

.uagb-post-grid .uagb-post__image {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--amia-tinta-2);
}

.uagb-post-grid .uagb-post__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.uagb-post-grid .uagb-post__inner-wrap:hover .uagb-post__image img { transform: scale(1.045); }

.uagb-post-grid .uagb-post__text { padding: 1.4rem 1.4rem 1.6rem; }

.uagb-post-grid .uagb-post__title {
	margin: 0 0 0.5rem;
	font-family: var(--amia-fonte-titulo);
	font-size: 1.2rem;
	line-height: 1.24;
}

.uagb-post-grid .uagb-post__title a { color: var(--amia-tinta); text-decoration: none; }
.uagb-post-grid .uagb-post__title a:hover { color: var(--amia-carmim); }

.uagb-post-grid .uagb-post-grid-byline,
.uagb-post-grid .uagb-post__author,
.uagb-post-grid .uagb-post__date {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--amia-texto-suave);
}

.uagb-post-grid .uagb-post__excerpt {
	margin: 0.7rem 0 1.2rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--amia-texto-suave);
}

/* O botão do bloco vem azul e arredondado por padrão. */
.uagb-post-grid .uagb-post__cta,
.uagb-post-grid .uagb-post__cta a,
.uagb-post-grid .wp-block-button__link {
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-family: var(--amia-fonte-corpo) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
	color: var(--amia-carmim) !important;
	text-decoration: none;
}

.uagb-post-grid .uagb-post__cta a::after {
	content: " →";
	display: inline-block;
	transition: transform var(--amia-transicao);
}

.uagb-post-grid .uagb-post__cta a:hover { color: var(--amia-ocre) !important; }
.uagb-post-grid .uagb-post__cta a:hover::after { transform: translateX(4px); }

/* Setas e marcadores do carrossel */
.uagb-post-grid .slick-prev::before,
.uagb-post-grid .slick-next::before { color: var(--amia-tinta); }
.uagb-post-grid .slick-dots li button::before { color: var(--amia-tinta); }
.uagb-post-grid .slick-dots li.slick-active button::before { color: var(--amia-carmim); }
.uagb-post-grid .slick-slide > div { height: 100%; }
.uagb-post-grid .slick-track { display: flex; align-items: stretch; }

/* --------------------------------------------------------------------------
   Tainacan: alinha a listagem do acervo à identidade do site
   -------------------------------------------------------------------------- */

.tainacan-title,
.tainacan-item-title {
	font-family: var(--amia-fonte-titulo) !important;
}

.theme-items-list .tainacan-card,
.tainacan-items-list .tainacan-card {
	border-radius: var(--amia-raio);
}

/* --------------------------------------------------------------------------
   Preferências de movimento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Telas pequenas
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.amia-hero { min-height: 78vh; }

	/* Em tela estreita o texto ocupa toda a largura, então o véu lateral não
	   protege nada: aqui ele vira uma única camada que sobe do pé da imagem. */
	.amia-hero .wp-block-cover__background {
		background: linear-gradient(
			to top,
			rgba(12, 9, 7, 0.94) 0%,
			rgba(12, 9, 7, 0.86) 42%,
			rgba(12, 9, 7, 0.5) 68%,
			rgba(12, 9, 7, 0.35) 100%
		) !important;
	}

	.amia-hero__credito { position: static; margin-top: 2rem; text-align: left; max-width: none; }
	.amia-hero__acoes .amia-botao { flex: 1 1 auto; justify-content: center; }
	.amia-texto-duplo { column-count: 1; }
}