/* =========================================================================
   Catálogo de formações — /cursos/ e /areas/{slug}/
   ====================================================================== */

.catalogo__topo { padding-bottom: var(--sp-10); }

/* --- Filtros por área ---------------------------------------------------
   Links reais com href, não botões com JS. O filtro é uma URL — precisa
   ser compartilhável, indexável (com noindex nos combinados) e funcionar
   sem JavaScript. */

.catalogo__filtros {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin-top: var(--sp-10);
}

.filtro {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-5);
	border: 1px solid var(--line);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition:
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out);
}

.filtro:hover {
	border-color: var(--brand);
	color: var(--text);
}

.filtro.is-ativo {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.filtro__conta {
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	opacity: .7;
}

/* --- Grade ---------------------------------------------------------------
   `auto-fit` com poucos itens estica o card pela largura toda — um curso
   sozinho vira uma faixa de 1180px. A variante --poucos trava a largura
   máxima da grade para que o card mantenha proporção de card. */

.catalogo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--sp-6);
}

.catalogo__grid--poucos {
	max-width: 760px;
	margin-inline: auto;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 360px));
	justify-content: center;
}

/* --- Paginação ------------------------------------------------------------ */

.catalogo__paginacao {
	margin-top: var(--sp-16);
	display: flex;
	justify-content: center;
}

.catalogo__paginacao .nav-links {
	display: flex;
	gap: var(--sp-2);
	align-items: center;
}

.catalogo__paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--sp-3);
	border: 1px solid var(--line);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition:
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

.catalogo__paginacao .page-numbers:hover {
	border-color: var(--brand);
	color: var(--text);
}

.catalogo__paginacao .page-numbers.current {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

/* --- Estado vazio ---------------------------------------------------------
   Convite para agir, não pedido de desculpas. */

.catalogo__vazio {
	max-width: var(--medida-titulo);
	margin-inline: auto;
	text-align: center;
	padding-block: var(--sp-16);
}

.catalogo__vazio p {
	margin-top: var(--sp-5);
	color: var(--text-muted);
	max-width: var(--medida-apoio);
	margin-inline: auto;
}


@media (max-width: 600px) {
	/* Filtros roláveis na horizontal: com muitas áreas, empilhados
	   consumiam meia tela antes do primeiro curso aparecer. */
	.catalogo__filtros {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		scrollbar-width: none;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
	}

	.catalogo__filtros::-webkit-scrollbar { display: none; }
	.filtro { flex: none; }

	.catalogo__paginacao .page-numbers { min-width: 44px; height: 44px; }
}