/**
 * OpenFields Group Field Styles
 *
 * Clean, modern styles for group fields that contain sub-fields.
 * Uses CSS custom properties for theming.
 *
 * @package OpenFields
 * @since   1.0.0
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

.cofld-group {
	--of-border-color: #c3c4c7;
	--of-border-radius: 4px;
	--of-spacing-xs: 4px;
	--of-spacing-sm: 8px;
	--of-spacing-md: 12px;
	--of-spacing-lg: 16px;
	--of-group-bg: #f9f9f9;
	--of-transition: 0.15s ease;
}

/* ==========================================================================
   Group Container
   ========================================================================== */

.cofld-group {
	box-sizing: border-box;
	background: var(--of-group-bg);
	border: 1px solid var(--of-border-color);
	border-radius: var(--of-border-radius);
	padding: var(--of-spacing-lg);
}

.cofld-group *,
.cofld-group *::before,
.cofld-group *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Group Content (Sub-fields Container)
   ========================================================================== */

.cofld-group-content {
	display: flex;
	flex-wrap: wrap;
	gap: var(--of-spacing-lg);
	margin: 0;
}

/* Block layout - full width sub-fields */
.cofld-group-content[data-layout="block"] {
	flex-direction: column;
}

.cofld-group-content[data-layout="block"] .cofld-group-subfield {
	width: 100% !important;
}

/* Row layout - horizontal sub-fields */
.cofld-group-content[data-layout="row"] {
	flex-direction: row;
}

/* Table layout - table-like appearance */
.cofld-group-content[data-layout="table"] {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

.cofld-group-content[data-layout="table"] .cofld-group-subfield {
	display: table-row;
}

.cofld-group-content[data-layout="table"] .cofld-field-label,
.cofld-group-content[data-layout="table"] .cofld-field-input {
	display: table-cell;
	padding: var(--of-spacing-sm);
	vertical-align: top;
}

.cofld-group-content[data-layout="table"] .cofld-field-label {
	width: 200px;
	white-space: nowrap;
}

/* ==========================================================================
   Sub-field Styling
   ========================================================================== */

.cofld-group-subfield {
	/* Inherits from .cofld-field-wrapper */
	position: relative;
}

/* Width handling for row layout */
.cofld-group-content[data-layout="row"] .cofld-group-subfield[style*="width: 50%"] {
	width: calc(50% - var(--of-spacing-lg) / 2) !important;
}

.cofld-group-content[data-layout="row"] .cofld-group-subfield[style*="width: 33%"] {
	width: calc(33.333% - var(--of-spacing-lg) * 2 / 3) !important;
}

.cofld-group-content[data-layout="row"] .cofld-group-subfield[style*="width: 25%"] {
	width: calc(25% - var(--of-spacing-lg) * 3 / 4) !important;
}

/* ==========================================================================
   Nested Groups
   ========================================================================== */

.cofld-group .cofld-group {
	background: #fff;
	margin-top: var(--of-spacing-md);
}

.cofld-group .cofld-group .cofld-group {
	background: var(--of-group-bg);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media screen and (max-width: 782px) {
	.cofld-group-content {
		flex-direction: column;
	}

	.cofld-group-content .cofld-group-subfield {
		width: 100% !important;
	}

	.cofld-group-content[data-layout="table"] {
		display: block;
	}

	.cofld-group-content[data-layout="table"] .cofld-group-subfield {
		display: block;
	}

	.cofld-group-content[data-layout="table"] .cofld-field-label,
	.cofld-group-content[data-layout="table"] .cofld-field-input {
		display: block;
		width: 100%;
	}
}