/**
 * Newsletter
 *
 * Photo runs to the left edge of the screen, form column sits on the right half and
 * bottom-aligns with it. A yellow wash rises out of the bottom 300px behind everything.
 */

.module.newsletter:last-child {
	margin-bottom: var(--module-spacing-xlarge);
}

.module.newsletter .container {
	align-items: end;
}

.module.newsletter .media {
	aspect-ratio: 701 / 700;
	grid-row: 1;
}

.module.newsletter .content {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	grid-row: 1;
	padding-bottom: var(--module-spacing-medium);
	text-align: center;
}

/** Layout: image left (default) **/

.module.newsletter.image-left .media {
	grid-column: 1 / span 6;
	margin-left: var(--viewport-edge);
}

.module.newsletter.image-left .media img {
	object-position: right center;
}

.module.newsletter.image-left .content {
	grid-column: 7 / span 6;
	padding-left: var(--text-spacing-small);
}

/** Layout: image right **/

.module.newsletter.image-right .media {
	grid-column: 7 / span 6;
	margin-right: var(--viewport-edge);
}

.module.newsletter.image-right .media img {
	object-position: left center;
}

.module.newsletter.image-right .content {
	grid-column: 1 / span 6;
	padding-right: var(--text-spacing-small);
}

/* The mark fans up from the cut-out's feet, wider than its box so the outer rays run off it. */
.module.newsletter .watermark {
	bottom: 0;
	color: var(--watermark-color);
	left: 50%;
	pointer-events: none;
	position: absolute;
	translate: -50% 0;
	width: 140%;
}

.module.newsletter .watermark svg {
	display: block;
	height: auto;
	max-width: none;
	opacity: .05;
	width: 100%;
}

.wash.aqua .module.newsletter .watermark svg,
.module.newsletter.wash.aqua .watermark svg {
	opacity: .25;
}

/* The same strip the case-study panel and the stories sidebar wear, drawn in the column's own
   flow so the column's gap is what stands it off the copy or the button. */
.module.newsletter .pattern {
	align-self: stretch;
	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.newsletter .text {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
}

.module.newsletter .text > * {
	margin-block: 0;
}

.module.newsletter .emphasis {
	margin-bottom: 2px;
}

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

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

.module.newsletter .gfield {
	grid-column: 1 / -1;
	text-align: left;
}

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

.module.newsletter .gform_footer {
	display: flex;
	justify-content: center;
	margin-top: var(--text-spacing-large);
}

.module.newsletter .embed form > .btn {
	justify-self: center;
	margin-top: var(--text-spacing-large);
}

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

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

	/* Stacked, the photograph and the form are two halves of one module rather than two columns of
	   a row, and the plain grid gap between them read as a paragraph break. A step wider says the
	   form is its own thing under the picture. */
	.module.newsletter .container {
		row-gap: var(--text-spacing-xxlarge);
	}

	.module.newsletter .media {
		grid-row: auto;
	}

	.module.newsletter .content {
		grid-row: auto;
	}

	.module.newsletter.image-left .media,
	.module.newsletter.image-right .media {
		grid-column: 1 / -1;
		margin-inline: var(--viewport-edge);
	}

	.module.newsletter.image-left .content,
	.module.newsletter.image-right .content {
		grid-column: 1 / -1;
		padding-inline: 0;
	}

}

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

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

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

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

}