/* Contact page — mobile source order.
 *
 * Mobile visitors landing on /contact/ had to scroll past the heading, the
 * blurb, four contact-method cards and the social row before the form came
 * into view. The hero grid's left column is now split into two children
 * (.bx-contact-head and .bx-contact-methods) so the form can be placed
 * between them on small screens:
 *
 *   mobile   : heading -> FORM -> contact methods
 *   desktop  : heading + methods stacked on the left, form on the right
 *              (unchanged from the original design)
 *
 * Plain CSS in its own file rather than Tailwind utilities, because
 * assets/css/src/input.css is regenerated by build_css.py — and the tooling to
 * recompile app.min.css is not currently on disk, so any new utility class
 * would simply never exist.
 */

/* ---- mobile / tablet: form directly after the heading ---- */
@media (max-width: 1023.98px) {
	.bx-contact-head {
		order: 1;
	}

	.bx-contact-form {
		order: 2;
	}

	.bx-contact-methods {
		order: 3;
	}
}

/* ---- desktop: keep the original two-column layout ----
 * All three children are placed EXPLICITLY. Setting only grid-row on the form
 * is not safe: grid auto-placement positions definite-row items first, so the
 * form (row 1, auto column, span 7) would claim columns 1-7 and push the
 * heading over to columns 8-12 — form on the left, heading on the right.
 * Pinning every child removes the auto-placement step entirely. */
@media (min-width: 1024px) {
	.bx-contact-head {
		grid-column: 1 / span 5;
		grid-row: 1;
	}

	.bx-contact-methods {
		grid-column: 1 / span 5;
		grid-row: 2;
		/* The methods block used to carry the heading's bottom spacing (mt-8);
		 * in row 2 the grid gap already provides that separation. */
		margin-top: 0;
	}

	.bx-contact-form {
		grid-column: 6 / span 7;
		grid-row: 1 / span 2;
	}
}