/*
 * Tarja — componentes. As cores e fontes vêm do theme.json.
 * Obras nunca são recortadas: .as-pp usa contain sobre a cor "parede".
 */
:root {
	--as-papel: var(--wp--preset--color--papel);
	--as-tinta: var(--wp--preset--color--tinta);
	--as-grafite: var(--wp--preset--color--grafite);
	--as-parede: var(--wp--preset--color--parede);
	--as-filete: var(--wp--preset--color--filete);
	--as-anton: var(--wp--preset--font-family--anton);
	--as-franklin: var(--wp--preset--font-family--libre-franklin);
}

body { -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(a, button, select, [tabindex]):focus-visible { outline: 2px solid var(--as-tinta); outline-offset: 3px; }

/* ---------- Tarja ---------- */
.as-tarja {
	display: inline-block; margin: 0; padding: .45em .6em .4em;
	background: var(--as-tinta); color: var(--as-papel) !important;
	font-family: var(--as-franklin); font-weight: 600; font-size: .72rem;
	letter-spacing: .16em; text-transform: uppercase; line-height: 1; text-decoration: none;
}
h2.as-tarja, h3.as-tarja { font-family: var(--as-franklin); font-size: .72rem; }
a.as-tarja:hover { background: var(--as-grafite); }
.as-tarja--nome { font-family: var(--as-anton); font-weight: 400; font-size: 1.4rem; letter-spacing: .02em; padding: .3em .45em .25em; }
.as-tarja--mini { font-size: .6rem; padding: .35em .5em .3em; vertical-align: .15em; margin-left: .4em; }

/* ---------- Cabeçalho ---------- */
.as-cabecalho { padding-block: 1.25rem; }
.as-cabecalho__linha { gap: 1rem 1.75rem; }
.as-menu { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.as-menu a { text-decoration: none; }
.as-menu a:hover { text-decoration: underline; text-underline-offset: 4px; }
.as-loja {
	border: 2px solid var(--as-tinta); padding: .45em .7em .4em; font-size: .72rem;
	font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.as-loja:hover { background: var(--as-tinta); color: var(--as-papel); }

/* ---------- Lombada (a partir de 900px) ---------- */
.as-lombada { display: none; }
@media (min-width: 900px) {
	body { padding-left: 56px; }
	.as-lombada { display: block; position: fixed; left: 24px; top: 0; bottom: 0; border-left: 2px solid var(--as-tinta); z-index: 1; }
	.as-lombada span {
		position: absolute; bottom: 24px; left: -12px; writing-mode: vertical-rl; transform: rotate(180deg);
		background: var(--as-tinta); color: var(--as-papel); font-size: .6rem; font-weight: 600;
		letter-spacing: .16em; text-transform: uppercase; padding: .7em .35em;
	}
}

/* ---------- Página ---------- */
.as-pagina { padding-block: 1rem 0; }
.rank-math-breadcrumb { font-size: .8rem; color: var(--as-grafite); margin-bottom: 1.25rem; }
.rank-math-breadcrumb a { color: inherit; }

/* ---------- Seções ---------- */
.as-secao { margin-top: 3.5rem; }
.as-cabeca {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1rem;
	padding-bottom: .6rem; border-bottom: 2px solid var(--as-tinta); margin-bottom: 1.25rem;
}
.as-mais {
	display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	text-decoration: none; border-bottom: 2px solid var(--as-tinta); padding-bottom: .2em; margin-right: 1.25rem;
}
.as-vazio { color: var(--as-grafite); }

/* ---------- Passe-partout ---------- */
.as-pp { background: var(--as-parede); display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 6%; }
.as-pp img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.as-pp--vazio { min-height: 8rem; }

/* ---------- Grade e card ---------- */
.as-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 2rem 1.5rem; }
.as-card { display: block; text-decoration: none; }
.as-card__rotulo { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--as-grafite); margin: .75rem 0 0; }
.as-card__titulo { font-family: var(--as-anton); font-size: 1.35rem; line-height: 1.05; text-transform: uppercase; margin: .35rem 0 0; }
.as-card__meta { font-size: .85rem; color: var(--as-grafite); margin: .25rem 0 0; }
.as-card:hover .as-card__titulo { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Linha de lista ---------- */
.as-lista { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--as-tinta); }
.as-linha { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--as-filete); }
.as-linha__data { font-family: var(--as-anton); font-size: 1.05rem; line-height: 1.1; text-transform: uppercase; }
.as-linha__nome { display: inline; font-weight: 700; line-height: 1.3; text-decoration: none; }
.as-linha__nome:hover { text-decoration: underline; }
.as-linha__meta { display: block; font-size: .85rem; color: var(--as-grafite); }
/* Miniatura da capa, só quando existe; inteira, como toda obra. */
.as-linha:has(.as-linha__miniatura) { grid-template-columns: 6.5rem minmax(0, 1fr) 6rem; }
.as-linha__miniatura { background: var(--as-parede); aspect-ratio: 4 / 3; padding: 6%; display: flex; align-items: center; justify-content: center; }
.as-linha__miniatura img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* No celular a coluna da data encolhe em todas as linhas, com ou sem miniatura:
   assim os nomes começam alinhados. */
@media (max-width: 599px) {
	.as-linha { grid-template-columns: 5rem minmax(0, 1fr); }
	.as-linha:has(.as-linha__miniatura) { grid-template-columns: 5rem minmax(0, 1fr) 4.5rem; }
}

/* ---------- Obra ---------- */
.as-obra { display: grid; gap: 2rem; }
/* A altura mínima dá presença à obra ao lado da ficha; no celular, ela só
   cercava uma obra horizontal de parede cinza (caixa de 350px, obra de 149px). */
.as-obra__imagem { aspect-ratio: auto; }
@media (min-width: 900px) {
	.as-obra { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
	.as-obra__imagem { min-height: 320px; }
}
.as-obra__imagem .wp-block-image { margin: 0; }
.as-obra__imagem img { max-height: 78vh; }
.as-obra__titulo { margin: .9rem 0 0; }
.as-ficha { font-size: .95rem; margin: .75rem 0 0; }
.as-materiais { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.as-materiais a { display: inline-block; border: 1px solid var(--as-tinta); padding: .3em .6em; font-size: .8rem; text-decoration: none; }
.as-materiais a:hover { background: var(--as-tinta); color: var(--as-papel); }
.as-obra__texto { margin-top: 2.5rem; }
.as-navegacao { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 2px solid var(--as-tinta); padding-top: 1rem; margin-top: 3.5rem; }
.as-navegacao a { font-family: var(--as-anton); text-transform: uppercase; text-decoration: none; }
.as-navegacao a:hover { text-decoration: underline; }

/* ---------- Home ---------- */
/* minmax(0, …) também no celular: uma coluna "auto" cresce com o conteúdo mais
   largo e faz a página inteira rolar para o lado. */
.as-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 900px) { .as-home { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.as-home .as-secao { margin-top: 0; }

/* Destaque: uma imagem grande, inteira, com legenda. */
.as-destaque__link { display: block; text-decoration: none; }
.as-destaque__imagem { aspect-ratio: 5 / 4; }
.as-destaque__legenda { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; margin: .8rem 0 0; }
.as-destaque__legenda .as-tarja--mini { margin-left: 0; }
.as-destaque__titulo { font-family: var(--as-anton); font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; }
.as-destaque__meta { font-size: .85rem; color: var(--as-grafite); }
.as-destaque__link:hover .as-destaque__titulo { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Cartaz de exposição (Agora e Próximas) ---------- */
.as-cartazes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 2rem 1.5rem; }
.as-cartaz { display: block; text-decoration: none; }
/* Sem capa, o nome vira o cartaz: nunca um retângulo cinza vazio. */
.as-cartaz__tipografico { aspect-ratio: 4 / 3; background: var(--as-tinta); display: flex; align-items: flex-end; padding: 1.25rem; }
.as-cartaz__tipografico .as-cartaz__nome { color: var(--as-papel); font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin: 0; overflow-wrap: anywhere; }
.as-cartaz__nome { font-family: var(--as-anton); font-size: 1.45rem; line-height: 1.02; text-transform: uppercase; margin: .75rem 0 0; }
.as-cartaz__data { font-family: var(--as-anton); font-size: 1.15rem; line-height: 1.1; text-transform: uppercase; margin: .75rem 0 0; }
.as-cartaz__local { font-size: .85rem; color: var(--as-grafite); margin: .25rem 0 0; }
.as-cartaz:hover .as-cartaz__nome { text-decoration: underline; text-underline-offset: 4px; }
.as-cartaz:hover .as-cartaz__tipografico { background: var(--as-grafite); }

/* ---------- Realizadas: índice por ano ---------- */
.as-ano { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-top: 2.5rem; }
.as-ano__numero { font-family: var(--as-anton); font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: .9; margin: 0; }
.as-ano .as-linha__nome { font-size: 1.15rem; }
@media (min-width: 900px) {
	.as-ano { grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; }
	/* O ano acompanha a rolagem enquanto as exposições dele passam. */
	.as-ano__numero { position: sticky; top: 1.5rem; align-self: start; }
}

/* ---------- Agenda ---------- */
.as-noticias .wp-block-post-template { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--as-tinta); }
.as-noticias .wp-block-post-template > li { padding: 1.5rem 0; border-bottom: 1px solid var(--as-filete); }
.as-noticias .wp-block-post-date {
	display: inline-block; background: var(--as-tinta); color: var(--as-papel); font-size: .66rem; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; line-height: 1; padding: .45em .6em .4em;
}
.as-noticias .wp-block-post-title { font-size: clamp(1.5rem, 3vw, 2rem); margin: .75rem 0 0; }
.as-noticias .wp-block-post-title a { text-decoration: none; }
.as-noticias .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.as-noticia__obras { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.as-noticia__obra { display: block; }

/* ---------- Filtros ---------- */
.as-filtro { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin: 0 0 1.5rem; }
.as-filtro label { display: grid; gap: .25rem; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.as-filtro select {
	font: inherit; font-size: .9rem; letter-spacing: 0; text-transform: none; min-width: 10rem;
	border: 2px solid var(--as-tinta); border-radius: 0; background: var(--as-papel); padding: .4em .6em;
}
.as-filtro button {
	font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	background: var(--as-tinta); color: var(--as-papel); border: 2px solid var(--as-tinta); padding: .6em 1em; cursor: pointer;
}
.as-tipos { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 2rem; }
.as-tipos a {
	display: inline-block; border: 2px solid var(--as-tinta); padding: .4em .7em; font-size: .72rem;
	font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.as-tipos a[aria-current="page"] { background: var(--as-tinta); color: var(--as-papel); }

/* ---------- Exposição ---------- */
.as-dados { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 1.5rem 0 0; }
.as-dados dt { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--as-grafite); padding-top: .25em; }
.as-dados dd { margin: 0; }
.as-abertura { font-family: var(--as-anton); font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: uppercase; margin: 1rem 0 0; }
.as-descricao { max-width: 65ch; margin-top: 1.5rem; }

/* ---------- Sobre e currículo ---------- */
.as-retrato img { max-width: min(100%, 360px); height: auto; }
.as-cv h3 { font-size: 1.1rem; margin: 2rem 0 .75rem; }
.as-cv ul { list-style: none; padding: 0; margin: 0; }
.as-cv li { padding: .5rem 0; border-bottom: 1px solid var(--as-filete); max-width: 72ch; }

/* ---------- Rodapé ---------- */
.as-rodape { margin-top: 5rem; border-top: 2px solid var(--as-tinta); padding-block: 1.5rem 2.5rem; font-size: .85rem; }
.as-rodape__linha { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; }
.as-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.as-rodape__monograma { width: 72px; height: 72px; mix-blend-mode: multiply; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }