/**
 * Listing grid layout — used by the closed sales grid, and by any future grid
 * module. The card itself comes from listing-card.css, declared as a dependency.
 *
 * Flex, not CSS grid: grid placement breaks inside Elementor (CLAUDE.md §2), so
 * columns are computed as flex-basis percentages from a --bbis-grid-* count set
 * inline per instance.
 */

.bbis.bbis .bbis-grid {
	--bbis-grid-gap: 20px;
	--bbis-grid-cols: var(--bbis-grid-mobile, 1);
	font-family: var(--bbis-font-body);
}

@media (min-width: 600px) {
	.bbis.bbis .bbis-grid { --bbis-grid-cols: var(--bbis-grid-tablet, 2); }
}

@media (min-width: 1024px) {
	.bbis.bbis .bbis-grid {
		--bbis-grid-gap: 24px;
		--bbis-grid-cols: var(--bbis-grid-desktop, 3);
	}
}

.bbis.bbis .bbis-grid__title {
	font-family: var(--bbis-font-head);
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
	line-height: 1.15;
	margin: 0 0 18px;
}

.bbis.bbis .bbis-grid__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bbis-grid-gap);
}

.bbis.bbis .bbis-grid__list > .bbis-card__item {
	flex: 0 0 calc(
		(100% - (var(--bbis-grid-cols) - 1) * var(--bbis-grid-gap)) / var(--bbis-grid-cols)
	);
}