/* Catálogo de apps — §5.6. Mesmo padrão de controles do explorador de
   canais (assets/css/components/explorador-canais.css), mas o grid aqui
   é de cards completos (logo + nome + categoria + preço + CTA), não só
   logos — cada card já converte sozinho (§5.6). */

.boek-catalogo-apps {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1rem;
	padding-block: 2rem;
}

/* Corrige heading-order (§17): antes o H1 do hero ia direto pro H3 de
   cada card do grid, sem H2 no meio — achado real via Lighthouse/axe.
   Esse título espelha o aria-label já existente na section (redundância
   inofensiva: reforça o mesmo nome tanto pra quem navega por landmark
   quanto por heading). */
.boek-catalogo-apps__titulo {
	margin-bottom: 0.5rem;
}

.boek-catalogo-apps__controles {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-block: 1rem;
}

@media (min-width: 600px) {
	.boek-catalogo-apps__controles {
		flex-direction: row;
	}
}

.boek-catalogo-apps__campo {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
}

.boek-catalogo-apps__campo label {
	font-size: var(--boek-text-small);
	font-weight: 600;
}

.boek-catalogo-apps__busca,
.boek-catalogo-apps__categoria,
.boek-catalogo-apps__faixa {
	min-height: var(--boek-tap-min);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--boek-creme);
	border-radius: 0.5rem;
	font-size: var(--boek-text-body);
}

.boek-catalogo-apps__contador {
	font-size: var(--boek-text-small);
	color: var(--boek-turquesa-a11y);
}

.boek-catalogo-apps__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 1rem;
}

@media (min-width: 600px) {
	.boek-catalogo-apps__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.boek-catalogo-apps__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.boek-catalogo-apps__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.boek-catalogo-apps__vazio {
	text-align: center;
	padding: 2rem 1rem;
}