/**
 * Contact
 *
 * A 6/6 split: copy left, a Gravity Form right, top-aligned. The form's grid rules are
 * newsletter's — Gravity Forms' half-width setting needs a real grid to land on.
 * The aqua gradient behind this module belongs to the page-level .wash wrapper.
 */

.module.contact .container {
	align-items: start;
}

/*** Wash edge ***/

/* The submit button is the run's last content, so it would otherwise sit on the band's own
   edge. Set on the wrapper, not as module padding, so it replaces the run-out rather than
   stacking 240 on a run that already keeps its tail. */
.page-builder > .wash:is(.aqua, .ray, .program):not(.module):has(> .module.contact:last-child) {
	padding-bottom: var(--module-spacing-large);
}

.module.contact .content {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	grid-column: 1 / span 6;
}

.module.contact .content > * {
	margin-block: 0;
}

.module.contact .content-styles > * {
	margin-block: 0;
}

.module.contact .content-styles > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.contact .content .media {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	margin-top: var(--text-spacing-small);
}

.module.contact .form {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	grid-column: 7 / span 6;
	margin-left: var(--text-spacing-medium);
}

/* The case-study panel's box. The strip leaves the flow and rides the panel's edge, cut to the
   corners by the overflow, and the inset on that side grows to clear it. */
.module.contact .form.panel {
	background: var(--white);
	border-radius: 10px;
	overflow: hidden;
	padding: var(--text-spacing-large);
	position: relative;
}

.module.contact .form.panel .pattern {
	left: 0;
	position: absolute;
	right: 0;
}

.module.contact .form.panel > .pattern:first-child {
	top: 0;
}

.module.contact .form.panel > .pattern:last-child {
	bottom: 0;
}

.module.contact .form.panel:has(> .pattern:first-child) {
	padding-top: var(--module-spacing-small);
}

.module.contact .form.panel:has(> .pattern:last-child) {
	padding-bottom: var(--module-spacing-small);
}

.module.contact .gform_wrapper,
.module.contact .embed {
	width: 100%;
}

/* The same strip the case-study panel and the stories sidebar wear, in the column's flow so the
   column's gap is what stands it off the form. */
.module.contact .pattern {
	background: currentColor;
	color: var(--storm);
	display: block;
	height: 24px;
	-webkit-mask: url('../../svgs/pattern-bar.svg') repeat-x left top / auto 24px;
	mask: url('../../svgs/pattern-bar.svg') repeat-x left top / auto 24px;
}

.module.contact .gform_fields {
	display: grid;
	gap: var(--text-spacing-small) 10px;
	grid-template-columns: repeat(2, 1fr);
}

.module.contact textarea {
	border-radius: 24px;
	height: 150px;
	min-height: 150px;
	padding-block: var(--text-spacing-xsmall);
	resize: vertical;
}

.module.contact .gfield_description {
	padding-top: var(--text-spacing-xxsmall);
}

.module.contact .gfield {
	grid-column: 1 / -1;
}

.module.contact .gfield--width-half {
	grid-column: span 1;
}

.module.contact .gform_footer,
.module.contact .embed form > .btn {
	margin-top: var(--text-spacing-medium);
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

	.module.contact .container {
		row-gap: var(--text-spacing-medium);
	}

	.module.contact .content {
		grid-column: 1 / -1;
	}

	.module.contact .form {
		grid-column: 1 / -1;
		margin-left: 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	.module.contact .gform_fields,
	.module.contact .embed form {
		grid-template-columns: 1fr;
	}

	.module.contact .gfield--width-half,
	.module.contact .embed form > div > div {
		grid-column: 1 / -1;
	}

}