/* Field Container Layout Styles - Structural CSS Only */

/* Dynamic layout variations for checkbox and radio field containers */

/* ============= COLUMN LAYOUT (Default) ============= */
.checkbox-container-column,
.radio-container-column {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ============= ROW LAYOUT (Horizontal) ============= */
.checkbox-container-row,
.radio-container-row {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

/* ============= GRID LAYOUT (2-Column Grid) ============= */
.checkbox-container-grid,
.radio-container-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

/* ============= RESPONSIVE ADJUSTMENTS ============= */
@media (width <= 768px) {
	/* On mobile, grid layouts become single column */
	.checkbox-container-grid,
	.radio-container-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Row layouts stack vertically on mobile */
	.checkbox-container-row,
	.radio-container-row {
		flex-direction: column;
		gap: 12px;
	}
}