/**
 * Grouped/columned layout for HivePress front-end edit forms.
 * Structure applied at runtime by edit-form-groups.js — see that file.
 */

.ec-form-fields--grouped {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ec-form-group {
	border: 0;
	margin: 0;
	padding: 22px 0 6px;
	display: block;
}

/* Divider above every group except the first. */
.ec-form-group + .ec-form-group {
	border-top: 1px solid var( --ec-line, #e3e8e5 );
	margin-top: 6px;
}

.ec-form-group__legend {
	display: block;
	width: 100%;
	padding: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --ec-ink-soft, #55635d );
}

/* Multi-column grid — fields flow left-to-right, wrapping as needed.
 * Full-width field types (images, textareas, the file/attachment
 * uploader) always span every column regardless of the group's column
 * count, since cramming a textarea or dropzone into a narrow column
 * defeats the point of grouping. */
.ec-form-group--cols-2,
.ec-form-group--cols-3 {
	display: grid;
	gap: 4px 24px;
	align-items: start;
}

.ec-form-group--cols-2 {
	grid-template-columns: repeat( 2, 1fr );
}

.ec-form-group--cols-3 {
	grid-template-columns: repeat( 3, 1fr );
}

.ec-form-group--cols-2 .ec-form-group__legend,
.ec-form-group--cols-3 .ec-form-group__legend {
	grid-column: 1 / -1;
}

.ec-form-group--cols-2 .hp-form__field--textarea,
.ec-form-group--cols-3 .hp-form__field--textarea,
.ec-form-group--cols-2 .hp-form__field--attachment_upload,
.ec-form-group--cols-3 .hp-form__field--attachment_upload,
.ec-form-group--cols-2 .hp-form__field--attachment-upload,
.ec-form-group--cols-3 .hp-form__field--attachment-upload {
	grid-column: 1 / -1;
}

/* Collapse to a single column on narrow screens — grouping/dividers stay,
 * only the multi-column layout gives way. */
@media ( max-width: 640px ) {
	.ec-form-group--cols-2,
	.ec-form-group--cols-3 {
		grid-template-columns: 1fr;
	}
}