/* =============================================================
   Capacitação
   A listagem mostra a capacitação inteira, como no evento. Em
   cima, data, título e descrição (com a imagem ao lado, quando
   houver); embaixo, os vídeos ocupando a largura do card.

   A grade de vídeos se ajusta à quantidade, que vem em
   data-total (1, 2 ou 3; acima de três a linha continua com três
   e quebra):
   - um vídeo sai grande, mas não da largura toda — um player de
     1200px pede rolagem para ser visto inteiro;
   - dois dividem a linha;
   - três ou mais formam colunas de três no desktop e de duas no
     tablet. No telefone, sempre um por linha.
   ============================================================= */

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

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

@media (min-width: 48em) {
	.capacitacao--com-imagem {
		grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	}
}

/* Mesma moldura do evento: a imagem inteira, centrada, sem recorte. */
.capacitacao__midia {
	position: relative;
	overflow: hidden;
	background: var(--c-fundo-sunk);
	aspect-ratio: 4 / 3;
}

.capacitacao__midia img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: var(--e-3);
	object-fit: contain;
}

@media (min-width: 48em) {
	.capacitacao__midia {
		aspect-ratio: auto;
		min-height: 12rem;
		border-inline-end: 1px solid var(--c-borda);
	}
}

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

.capacitacao__marcas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-2);
}

.capacitacao__data,
.capacitacao__contagem {
	padding: var(--e-1) var(--e-3);
	border-radius: 999px;
	font-size: var(--t-xs);
	font-weight: var(--peso-medio);
	letter-spacing: 0.03em;
}

.capacitacao__data {
	background: var(--c-acao-suave);
	color: var(--c-acao-escura);
}

.capacitacao__contagem {
	border: 1px solid var(--c-borda);
	color: var(--c-texto-medio);
}

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

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

/* Vídeos ------------------------------------------------------ */
.capacitacao__videos {
	grid-column: 1 / -1;
	display: grid;
	gap: var(--e-5);
	padding: var(--e-5) var(--e-6) var(--e-6);
	border-block-start: 1px solid var(--c-borda);
}

.capacitacao__videos[data-total="1"] {
	max-width: 48rem;
}

@media (min-width: 48em) {
	.capacitacao__videos[data-total="2"],
	.capacitacao__videos[data-total="3"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.capacitacao__videos[data-total="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 47.99em) {
	.capacitacao__corpo,
	.capacitacao__videos {
		padding-inline: var(--e-4);
	}
}