/* =============================================================
   Evento
   A listagem mostra o evento inteiro — por isso não existe
   página individual. Em telas largas o card vira uma faixa
   horizontal, que acomoda melhor a descrição.
   ============================================================= */

.evento {
	display: grid;
	overflow: hidden;
	background: var(--c-fundo);
	border: 1px solid var(--c-borda);
	border-radius: var(--raio);
}

.evento + .evento {
	margin-block-start: var(--e-5);
}

@media (min-width: 48em) {
	.evento {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		align-items: stretch;
	}
}

/* Cartaz em pé e foto deitada convivem na mesma moldura: quem se
   ajusta é a imagem — inteira, centrada — e o que sobra fica de fundo
   neutro. Recortar servia a um formato só, e num cartaz o recorte come
   justamente o texto, que é o conteúdo dele.

   A imagem sai do fluxo de propósito: assim é sempre a moldura que
   define o tamanho, e nunca o contrário. Deixá-la no fluxo com uma
   razão fixa saía pela culatra — na faixa horizontal, com a altura já
   vinda da linha da grade, o navegador usava a razão para calcular a
   LARGURA e a imagem transbordava por cima do texto. */
.evento__midia {
	position: relative;
	overflow: hidden;
	background: var(--c-fundo-sunk);
	aspect-ratio: 4 / 3;
}

.evento__midia img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* object-fit respeita a caixa de conteúdo: o padding vira a folga
	   entre a imagem e a borda da moldura. */
	padding: var(--e-3);
	object-fit: contain;
}

@media (min-width: 48em) {
	.evento__midia {
		/* Na faixa horizontal a altura vem da linha da grade, isto é, do
		   texto ao lado; o mínimo garante imagem visível em card curto. */
		aspect-ratio: auto;
		min-height: 15rem;
		border-inline-end: 1px solid var(--c-borda);
	}
}

.evento__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
	padding: var(--e-5) var(--e-6);
}

/* Período e categoria dividem a mesma linha; quebram quando não cabem. */
.evento__marcas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-2);
}

.evento__periodo {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-1) var(--e-3);
	border-radius: 999px;
	background: var(--c-acao-suave);
	color: var(--c-acao-escura);
	font-size: var(--t-xs);
	font-weight: var(--peso-medio);
	letter-spacing: 0.03em;
}

.evento__titulo {
	font-size: var(--t-lg);
	color: var(--c-texto-forte);
}

.evento__descricao {
	flex: 1;
	font-size: var(--t-sm);
	color: var(--c-texto-medio);
	white-space: pre-line;
}

.evento__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-4);
	margin-block-start: var(--e-2);
}

/* Documentos do evento, vindos do shortcode do gerenciador. Ocupam a
   largura inteira do card, abaixo da imagem e do texto: a grade de
   arquivos não cabe na coluna do texto. */
.evento__documentos {
	grid-column: 1 / -1;
	padding: var(--e-5) var(--e-6);
	border-block-start: 1px solid var(--c-borda);
}