/* ============================================================
   Monumentos Virtuais — Listagens (monumentos e artistas)
   ============================================================ */

.mv3-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
	margin: 24px 0;
	/*
	 * Cada card tem a própria altura. Sem isso, o grid estica todos os
	 * cards da linha até a altura do mais alto — e artista sem foto virava
	 * um retângulo com um vão enorme embaixo.
	 */
	align-items: start;
}

.mv3-card {
	display: block; text-decoration: none; color: inherit;
	background: #1a1a1a; border-radius: 6px; overflow: hidden;
	border: 1px solid #2a251f;
	transition: transform .15s ease, border-color .15s ease;
}
.mv3-card:hover { transform: translateY(-2px); border-color: #C8702A; }

.mv3-card__thumb { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #222; }
.mv3-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Card de monumento com foto: título sobre a imagem ----
 * O plugin não põe classe própria no card de monumento, então ele é
 * identificado por NÃO ser card de artista.
 * Formato vertical com o texto sobreposto embaixo, como no site de
 * referência. Só vale quando há foto; sem foto o card segue o formato
 * antigo (texto em bloco), que continua legível.
 */
.mv3-card:not(.mv3-card--artist):has(.mv3-card__thumb) {
	position: relative;
	aspect-ratio: 3 / 4;
}
.mv3-card:not(.mv3-card--artist):has(.mv3-card__thumb) .mv3-card__thumb {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
}
.mv3-card:not(.mv3-card--artist):has(.mv3-card__thumb) .mv3-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 16px 16px;
	background: linear-gradient(to top, rgba(10,10,10,.92) 35%, rgba(10,10,10,.55) 70%, transparent);
}
.mv3-card:not(.mv3-card--artist):has(.mv3-card__thumb) .mv3-card__title {
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .01em;
}

/*
 * Foto do artista: retangular, ocupando a largura do card — igual ao site
 * de referência. Era um círculo de 120px, mas os retratos do acervo são
 * composições (performance, cena, instrumento) e o corte circular
 * descartava justamente o que a foto mostrava.
 * A classe mantém o nome --round porque vem do markup do plugin.
 */
.mv3-card__thumb--round {
	/*
	 * 4:5 em vez de 4:3: quase todos os retratos do acervo são verticais,
	 * e o recorte horizontal cortava as cabeças (Aurora, Iara, Riáh,
	 * Davison, Mateus, Sophia).
	 */
	aspect-ratio: 4/5;
	border-radius: 0;
	margin: 0;
	width: 100%;
}

/*
 * Ancora o recorte um pouco acima do centro. Em retrato, o rosto fica no
 * terço superior — centralizar corta a testa e sobra chão.
 */
.mv3-card__thumb--round img {
	object-position: center 22%;
}

.mv3-card__body { padding: 16px; }
.mv3-card__artist { display: block; color: #C8A82A; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; margin-bottom: 4px; }
.mv3-card__title { font-size: 16px; margin: 0 0 6px; line-height: 1.3; }
.mv3-card__year { color: #999; font-size: 12px; }

/* Alinhado à esquerda, como os cards de monumento */
.mv3-card--artist { text-align: left; }

/*
 * Sem foto: uma faixa fina em vez de espaço vazio, só para o card não
 * começar direto no texto e destoar dos vizinhos.
 */
.mv3-card--artist:not(:has(.mv3-card__thumb))::before {
	content: '';
	display: block;
	height: 4px;
	background: linear-gradient(90deg, #C8702A, #C8A82A);
}

.mv3-pagination {
	display: flex; justify-content: center; align-items: center; gap: 20px;
	margin: 32px 0; color: #999; font-size: 14px;
}
.mv3-pagination a { color: #C8702A; text-decoration: none; }
.mv3-pagination a:hover { text-decoration: underline; }


/* Bio em versos (poema): preserva as quebras de linha */
.mv3-artist__bio--verso p {
	white-space: pre-line;
	line-height: 1.9;
}

/* ---- Tag de colaboração no perfil do artista ---- */

.mv3-artist__tag {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 10px;
	border: 1px solid #C8A82A;
	border-radius: 999px;
	color: #C8A82A;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	vertical-align: middle;
}