/*
 * REACH Supply Find My Part desktop field layout.
 *
 * RS-DS-012: JavaScript-inserted section headings must not shift Breakdance's
 * position-based field-width rules. The field flow is converted to an explicit
 * 12-column grid on tablet/desktop, while the approved phone layout remains
 * untouched.
 */

@media (min-width: 768px) {
	body.reach-design-system .reach-compatibility-page :is(
		.rs-find-part-form:has(> .rs-find-part-section),
		.rs-find-part-form > :where(div, fieldset):has(> .rs-find-part-section)
	) {
		align-content: start !important;
		align-items: start !important;
		column-gap: var(--rs-space-4) !important;
		display: grid !important;
		grid-auto-flow: row !important;
		grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
		row-gap: var(--rs-space-5) !important;
		width: 100% !important;
	}

	body.reach-design-system .reach-compatibility-page :is(
		.rs-find-part-form:has(> .rs-find-part-section),
		.rs-find-part-form > :where(div, fieldset):has(> .rs-find-part-section)
	) > :where(
		.breakdance-form-field,
		[class*="breakdance-form-field"]
	) {
		align-self: start !important;
		box-sizing: border-box;
		flex: 0 0 auto !important;
		grid-column: 1 / -1 !important;
		margin: 0 !important;
		max-width: none !important;
		min-width: 0 !important;
		width: auto !important;
	}

	body.reach-design-system .reach-compatibility-page :is(
		.rs-find-part-form:has(> .rs-find-part-section),
		.rs-find-part-form > :where(div, fieldset):has(> .rs-find-part-section)
	) > :where(
		.rs-find-part-section,
		.rs-find-part-consent,
		.rs-find-part-submit-wrap,
		.rs-find-part-submit-note,
		.breakdance-form-message,
		.breakdance-form-success,
		.breakdance-form-error-message
	) {
		grid-column: 1 / -1 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Section 1: exact product, then equipment identity. */
	body.reach-design-system .reach-compatibility-page :is(
		.rs-find-part-form:has(> .rs-find-part-section),
		.rs-find-part-form > :where(div, fieldset):has(> .rs-find-part-section)
	) > :where(.breakdance-form-field, [class*="breakdance-form-field"]):has(#model_number) {
		grid-column: span 8 !important;
	}

	body.reach-design-system .reach-compatibility-page :is(
		.rs-find-part-form:has(> .rs-find-part-section),
		.rs-find-part-form > :where(div, fieldset):has(> .rs-find-part-section)
	) > :where(.breakdance-form-field, [class*="breakdance-form-field"]):has(#serial_number) {
		grid-column: span 4 !important;
	}

	body.reach-design-system .reach-compatibility-page :is(
		.rs-find-part-form:has(> .rs-find-part-section),
		.rs-find-part-form > :where(div, fieldset):has(> .rs-find-part-section)
	) > :where(.breakdance-form-field, [class*="breakdance-form-field"]):has(:is(#appliance_brand, #appliance_type)) {
		grid-column: span 6 !important;
	}

	/* Section 2: paired reference details; questions remain full width. */
	body.reach-design-system .reach-compatibility-page :is(
		.rs-find-part-form:has(> .rs-find-part-section),
		.rs-find-part-form > :where(div, fieldset):has(> .rs-find-part-section)
	) > :where(.breakdance-form-field, [class*="breakdance-form-field"]):has(:is(#existing_part_number, #equipment_spec)) {
		grid-column: span 6 !important;
	}

	/* Section 3: contact fields pair cleanly; Needed by remains full width. */
	body.reach-design-system .reach-compatibility-page :is(
		.rs-find-part-form:has(> .rs-find-part-section),
		.rs-find-part-form > :where(div, fieldset):has(> .rs-find-part-section)
	) > :where(.breakdance-form-field, [class*="breakdance-form-field"]):has(:is(#first_name, #last_name, #email, #phone)) {
		grid-column: span 6 !important;
	}

	/* Explicit full-row fields protect the intended layout from future
	 * Breakdance child-order changes or additional section headings. */
	body.reach-design-system .reach-compatibility-page :is(
		.rs-find-part-form:has(> .rs-find-part-section),
		.rs-find-part-form > :where(div, fieldset):has(> .rs-find-part-section)
	) > :where(.breakdance-form-field, [class*="breakdance-form-field"]):has(:is(
		#part_number,
		#review_goal,
		#connection_concern,
		#issue_description,
		#required_by,
		#evidence_files,
		#confirmation
	)) {
		grid-column: 1 / -1 !important;
	}
}