/* ==========================================================================
   CARDS — os blocos que apresentam cada matéria nas listas
   ==========================================================================

   Tipos de card (cada um tem um arquivo em template-parts/cards/):
   - CARD BASE ............ regras comuns a todos
   - CARD DESTAQUE ........ matéria principal (imagem grande, título forte)
   - CARD PADRÃO .......... imagem em cima, título embaixo
   - CARD HORIZONTAL ...... texto à esquerda, miniatura à direita
   - CARD COMPACTO ........ só texto
   - CARD CONCURSO ........ fundo branco, dados do concurso
   - DADOS DO CONCURSO .... situação, remuneração, vagas, prazo

   COMO O CLIQUE FUNCIONA
   O link do título se estende sobre o card inteiro (classe .card__link),
   então qualquer ponto do card abre a matéria. A etiqueta da editoria
   continua sendo um link separado.

   AJUSTES COMUNS
   - Tamanho dos títulos: --titulo-card e --titulo-card-destaque (variaveis.css).
   - Cantos das imagens: --raio-medio (variaveis.css).
   - Proporção das imagens: "aspect-ratio" em cada tipo de card abaixo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CARD BASE
   -------------------------------------------------------------------------- */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--espaco-3);
	min-width: 0;
}

.card__imagem {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--raio-medio);
	background: var(--cor-superficie);
}

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

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.card:hover .card__imagem img {
		transform: scale(1.035); /* Leve aproximação da imagem ao passar o mouse. */
	}
}

.card__corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--espaco-2);
	min-width: 0;
}

.card__titulo {
	font-family: var(--fonte-titulos);
	font-size: var(--titulo-card);
	font-weight: var(--peso-negrito);
	line-height: 1.28;
	letter-spacing: -0.012em;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

.card__link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--transicao), color var(--transicao);
}

/* Faz o link do título cobrir o card inteiro. */
.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.card:hover .card__link {
	color: inherit;
	text-decoration-color: var(--cor-destaque);
}

.card__link:focus-visible {
	outline: none;
}

.card__link:focus-visible::after {
	outline: 2px solid var(--cor-foco);
	outline-offset: 4px;
	border-radius: var(--raio-medio);
}

.card__resumo {
	color: var(--cor-texto-secundario);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--espaco-2);
	font-size: var(--texto-meta);
	color: var(--cor-texto-suave);
}

.card__meta-leitura {
	white-space: nowrap; /* "· 2 min de leitura" nunca se separa no meio. */
}

.card__meta-separador {
	margin-right: var(--espaco-1);
}

/* --------------------------------------------------------------------------
   CARD DESTAQUE
   -------------------------------------------------------------------------- */
.card--destaque {
	gap: var(--espaco-4);
}

.card--destaque .card__imagem {
	aspect-ratio: 16 / 9;
}

.card--destaque .card__titulo {
	font-size: var(--titulo-card-destaque);
	font-weight: var(--peso-extra);
	line-height: 1.12;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.card--destaque .card__resumo {
	font-size: var(--texto-grande);
	line-height: 1.55;
	max-width: 62ch;
}

.card--destaque.card--sem-imagem {
	padding: var(--espaco-6);
	border-radius: var(--raio-grande);
	background: var(--cor-superficie);
}

/* --------------------------------------------------------------------------
   CARD PADRÃO
   -------------------------------------------------------------------------- */
.card--padrao .card__resumo {
	display: -webkit-box;
	-webkit-line-clamp: 3; /* Resumo do card limitado a 3 linhas (o texto completo está no artigo). */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card--padrao.card--sem-imagem {
	padding-top: var(--espaco-4);
	border-top: 2px solid var(--cor-destaque);
}

/* --------------------------------------------------------------------------
   CARD HORIZONTAL
   Celular: miniatura quadrada pequena à direita.
   Tablet em diante: miniatura maior (3:2) e resumo visível.
   -------------------------------------------------------------------------- */
.card--horizontal {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px;
	align-items: start;
	gap: var(--espaco-4);
	padding-block: var(--espaco-5);
	border-bottom: 1px solid var(--cor-linha);
}

.card--horizontal.card--sem-imagem {
	grid-template-columns: minmax(0, 1fr);
}

.card--horizontal .card__imagem {
	aspect-ratio: 1 / 1;
	border-radius: var(--raio-pequeno);
}

.card--horizontal .card__resumo {
	display: none;
}

@media (min-width: 768px) {
	.card--horizontal {
		grid-template-columns: minmax(0, 1fr) 220px;
		gap: var(--espaco-6);
	}

	.card--horizontal .card__imagem {
		aspect-ratio: 3 / 2;
		border-radius: var(--raio-medio);
	}

	.card--horizontal .card__resumo {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.card--horizontal .card__titulo {
		font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
	}
}

/* --------------------------------------------------------------------------
   CARD COMPACTO
   -------------------------------------------------------------------------- */
.card--compacto {
	padding-block: var(--espaco-4);
	border-bottom: 1px solid var(--cor-linha);
}

.card--compacto:first-child {
	padding-top: 0;
}

.card--compacto:last-child {
	border-bottom: 0;
}

.card--compacto .card__titulo {
	font-size: 1.0625rem;
	line-height: 1.32;
}

/* --------------------------------------------------------------------------
   CARD CONCURSO
   -------------------------------------------------------------------------- */
.card--concurso {
	height: 100%;
	padding: var(--espaco-5);
	border-radius: var(--raio-grande);
	background: var(--cor-fundo);
	box-shadow: var(--sombra-suave);
	transition: box-shadow var(--transicao), transform var(--transicao);
}

.card--concurso .card__corpo {
	height: 100%;
	gap: var(--espaco-3);
}

.card--concurso .card__meta {
	margin-top: auto; /* Data sempre no pé do card, alinhada entre cards vizinhos. */
	padding-top: var(--espaco-2);
}

@media (hover: hover) {
	.card--concurso:hover {
		box-shadow: 0 10px 28px rgba(15, 43, 36, 0.1);
	}
}

.card__orgao {
	position: relative;
	z-index: 1;
	font-size: var(--texto-pequeno);
	font-weight: var(--peso-semi);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cor-primaria);
}

/* --------------------------------------------------------------------------
   DADOS DO CONCURSO (dentro dos cards)
   -------------------------------------------------------------------------- */
.dados-concurso {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--espaco-3);
	width: 100%;
}

.dados-concurso__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: var(--espaco-2) var(--espaco-4);
	width: 100%;
}

.dados-concurso__item dt {
	font-size: 0.75rem;
	font-weight: var(--peso-medio);
	letter-spacing: 0.02em;
	color: var(--cor-texto-suave);
}

.dados-concurso__item dd {
	font-size: 0.9375rem;
	font-weight: var(--peso-semi);
	color: var(--cor-texto);
	overflow-wrap: anywhere;
}

/* Situação do concurso: o TEXTO informa; a cor só reforça. */
.situacao {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.25rem 0.7rem;
	border-radius: var(--raio-pilula);
	font-size: var(--texto-pequeno);
	font-weight: var(--peso-semi);
	line-height: 1.3;
	background: var(--cor-marfim-escuro);
	color: var(--cor-texto-secundario);
}

.situacao::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
}

/* Aberto / publicado: verde. */
.situacao--inscricoes-abertas,
.situacao--edital-publicado {
	background: var(--cor-verde-claro);
	color: var(--cor-primaria);
}

/* Em preparação: dourado. */
.situacao--previsto,
.situacao--autorizado,
.situacao--banca-definida {
	background: var(--cor-dourado-claro);
	color: var(--cor-dourado-escuro);
}

/* Em andamento: marinho. */
.situacao--em-andamento {
	background: #E6EAF1;
	color: var(--cor-marinho);
}

/* Encerrado: cinza (padrão acima). */