/*
 * v-browse — listados (browse de cualquier tabla).
 *   título de la página; banda a todo el ancho con filtros | barra de
 *   resultados; resultados debajo. Los contenedores del core quedan con
 *   display: contents para que todo sea hijo de la grilla de .c-results.
 */
@layer views {
	main[class*="v-browse"] .c-results {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		grid-template-areas: "title title" "filters nav" "body body";
		grid-template-rows: auto auto auto;
		align-items: center;
		column-gap: var(--space-m);
	}
	main[class*="v-browse"] :is(.c-results__inner, .c-results__inner > div) { display: contents; }
	/* lo que el core agrega sin ubicar (barra de letras, paginación…): a todo el ancho */
	main[class*="v-browse"] .c-results__inner > div > :not(.c-results-nav, .c-results__body) { grid-column: 1 / -1; }
	main[class*="v-browse"] .c-results__title { grid-area: title; padding-block: var(--space-s) var(--space-l); }
	main[class*="v-browse"] .c-results__filters { grid-area: filters; }
	main[class*="v-browse"] .c-results-nav { grid-area: nav; }
	main[class*="v-browse"] .c-results__body { grid-area: body; min-inline-size: 0; padding-block-start: var(--space-xl); }
	/* la banda: un pseudo-elemento en la fila de la barra, detrás de las dos celdas,
	   extendido a los costados de la ventana */
	main[class*="v-browse"] .c-results::before {
		content: "";
		grid-row: 2;
		grid-column: 1 / -1;
		align-self: stretch;
		background: var(--color-band);
		box-shadow: 0 0 0 100vmax var(--color-band);
		clip-path: inset(0 -100vmax);
	}
	main[class*="v-browse"] :is(.c-results__filters, .c-results-nav) {
		position: relative;
		display: flex;
		align-items: center;
		padding-block: var(--space-m);
	}
	main[class*="v-browse"] .c-results__filters:not(:has(.c-panel)) { display: none; }
	main[class*="v-browse"] .c-results:not(:has(.c-results__filters .c-panel)) .c-results-nav { grid-column: 1 / -1; }
}

@layer views {
	main[class*="v-browse"] { container: browse / inline-size; }
	@container browse (width < 40rem) {
		main[class*="v-browse"] .c-results { grid-template-columns: 1fr; grid-template-areas: "title" "filters" "nav" "body"; }
		main[class*="v-browse"] .c-results::before { grid-row: 2 / span 2; }
		main[class*="v-browse"] .c-results__filters { padding-block-end: 0; }
		main[class*="v-browse"] .c-results-nav { padding-block-start: var(--space-s); }
		main[class*="v-browse"] .c-results-nav__count { flex-basis: 100%; }
		main[class*="v-browse"] #browseResultsContainer > .c-results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m) var(--space-s); }
		main[class*="v-browse"] .bResultItemImg img { padding: var(--space-3xs); }
	}
}