.gridContainer {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	container-type: size;
	container-name: voice-grid;
	overflow: hidden;
}

.grid {
	--voice-grid-columns: 1;
	--voice-grid-gap: 12px;
	--voice-grid-side-padding: 12px;
	--voice-grid-vertical-padding: 14px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	width: 100%;
	height: 100%;
	padding: var(--voice-grid-vertical-padding) var(--voice-grid-side-padding);
	gap: var(--voice-grid-gap);
	box-sizing: border-box;
}

.gridItem {
	width: calc(
		(100% - (var(--voice-grid-columns) - 1) * var(--voice-grid-gap)) / var(--voice-grid-columns)
	);
	max-width: calc(
		(100% - (var(--voice-grid-columns) - 1) * var(--voice-grid-gap)) / var(--voice-grid-columns)
	);
	aspect-ratio: 16 / 9;
	min-width: 0;
}

/* Single tile sizing — fill the container while preserving aspect ratio */
.grid[data-tile-count='1'] {
	align-content: center;
}

.grid[data-tile-count='1'] .gridItem {
	width: min(
		calc(100cqw - (2 * var(--voice-grid-side-padding))),
		calc((100cqh - (2 * var(--voice-grid-vertical-padding))) * 16 / 9)
	);
	max-width: min(
		calc(100cqw - (2 * var(--voice-grid-side-padding))),
		calc((100cqh - (2 * var(--voice-grid-vertical-padding))) * 16 / 9)
	);
}

/* Responsive column counts based on container size + participant count */
@container voice-grid (min-width: 520px) and (min-height: 260px) {
	.grid:has(> :nth-child(2)) {
		--voice-grid-columns: 2;
	}
}

@container voice-grid (min-width: 860px) and (min-height: 360px) {
	.grid:has(> :nth-child(5)) {
		--voice-grid-columns: 3;
	}
}

@container voice-grid (min-width: 1180px) and (min-height: 460px) {
	.grid:has(> :nth-child(10)) {
		--voice-grid-columns: 4;
	}
}

/* Tighter gaps for crowded calls */
.grid:has(> :nth-child(6)) {
	--voice-grid-gap: 10px;
}

.grid:has(> :nth-child(12)) {
	--voice-grid-gap: 8px;
}

.grid:has(> :nth-child(24)) {
	--voice-grid-gap: 6px;
}

.grid:has(> :nth-child(40)) {
	--voice-grid-gap: 4px;
}
