/**
 * Estilos do catálogo (spec 004): filtros, cabeçalho, grid e paginação.
 * Carregado só no arquivo de imóveis. Depende de tokens.css/base.css.
 *
 * @package valquiria-ramos
 */

/* padding só no bloco (o padding lateral vem do .vr-container). */
.vr-catalogo { padding-block: var(--vr-space-7) var(--vr-space-8); }

/* Cabeçalho de resultados */
.vr-catalogo__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vr-space-4);
	margin-bottom: var(--vr-space-5);
}
.vr-catalogo__count { font-family: var(--vr-font-ui); font-weight: 400; font-size: clamp(20px, 3vw, 26px); }
.vr-catalogo__acoes { display: flex; align-items: center; gap: var(--vr-space-4); }
.vr-catalogo__limpar { color: var(--vr-gold); font-weight: 600; white-space: nowrap; }
.vr-catalogo__limpar:hover { color: var(--vr-gold-grad-1); }

/* Botão que abre o modal de filtros (só no mobile) */
.vr-filtros-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	border: 0;
	border-radius: var(--vr-radius-pill);
	padding: 10px 18px;
	background: var(--vr-dark);
	color: var(--vr-cream);
	font-weight: 600;
	font-size: 12px;
	white-space: nowrap;
}
.vr-filtros-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Barra de filtros (desktop) */
.vr-filtros {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin-bottom: 40px;
}
.vr-filtro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	border: 1px solid var(--vr-border);
	border-radius: 15px;
	padding: 4px 19px 9px 12px;
	min-height: 51px;
	background: transparent;
}
.vr-filtro__label { font-size: 14px; color: var(--vr-text-2); }
.vr-filtro select {
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	color: var(--vr-text-2);
	width: 100%;
	cursor: pointer;
}
.vr-filtro select:focus { outline: none; }

/* Ações do formulário de filtros (só aparecem no modal mobile) */
.vr-filtros__acoes { display: none; }

/* Modal de filtros — no desktop é apenas um passthrough (display: contents) */
.vr-filtros-modal { display: contents; }
.vr-filtros-modal__painel { display: contents; }
.vr-filtros-modal__head { display: none; }

/* Grid (display:grid vem do base.css) — 3 colunas, 48px entre linhas, 20px colunas */
.vr-catalogo .vr-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 20px; }

/* Estado vazio */
.vr-vazio { padding: var(--vr-space-8) 0; text-align: center; color: var(--vr-text-2); font-size: 18px; }

/* Paginação */
.vr-pagination { margin-top: var(--vr-space-7); }
.vr-pagination ul { display: flex; justify-content: center; gap: var(--vr-space-2); flex-wrap: wrap; }
.vr-pagination li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: 999px;
	color: var(--vr-text);
	font-weight: 600;
}
.vr-pagination li .page-numbers.current { background: var(--vr-gold); color: var(--vr-cream); }
.vr-pagination li a.page-numbers:hover { background: var(--vr-cream); color: var(--vr-gold); }

/* ---------- Tablet/Mobile: filtros viram modal ---------- */
@media (max-width: 900px) {
	.vr-filtros-toggle { display: inline-flex; }
	.vr-catalogo__limpar { display: none; } /* limpar vai para dentro do modal */

	.vr-catalogo .vr-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }

	/* Modal de filtros em tela cheia (Figma 32:1040). */
	.vr-filtros-modal {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 300;
		background: var(--vr-cream);
		overflow-y: auto;
	}
	.vr-filtros-modal.is-open { display: block; }
	.vr-filtros-modal__painel { display: block; padding: 24px 16px 40px; }
	.vr-filtros-modal__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--vr-space-7);
	}
	.vr-filtros-modal__head span { font-family: var(--vr-font-ui); font-weight: 400; font-size: 20px; color: var(--vr-black); }
	.vr-filtros-modal__fechar { background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: var(--vr-text); }

	.vr-filtros { grid-template-columns: 1fr; gap: 20px; margin-bottom: 0; }

	.vr-filtros__acoes {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--vr-space-5);
		margin-top: var(--vr-space-7);
	}
	.vr-filtros__aplicar {
		width: 100%;
		background: var(--vr-dark);
		color: var(--vr-cream);
		border: 0;
		border-radius: var(--vr-radius-pill);
		padding: 14px;
		font-weight: 600;
		font-size: 16px;
	}
	.vr-filtros__limpar { color: var(--vr-gold); font-weight: 600; }
}

@media (max-width: 620px) {
	.vr-catalogo .vr-cards-grid { grid-template-columns: 1fr; }
	.vr-catalogo__head { align-items: center; }
}