/**
 * Popup
 *
 * A white panel over the page. Content + Media puts a photo beside the copy, full height of
 * the panel, on either side; every other style is the copy alone, with its form or embed
 * below the description.
 */

.jazzy-dialog.popup {
	background: var(--white);
	border-radius: 10px;
	max-height: 90dvh;
	max-width: min(640px, calc(100vw - (2 * var(--container-outer-padding))));
	overflow: hidden auto;
}

.jazzy-dialog.popup > .close {
	background: var(--charcoal-10);
	margin: var(--text-spacing-xsmall) var(--text-spacing-xsmall) 0 0;
	right: 0;
	top: 0;
	z-index: 1;
}

.jazzy-dialog.popup > .close:hover {
	background: var(--charcoal-15);
}

.jazzy-dialog.popup .content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	padding: var(--text-spacing-xlarge);
}

.jazzy-dialog.popup .content > * {
	margin: 0;
}

/* Clears the close button, which sits over the copy's top right corner. */
.jazzy-dialog.popup .content > :first-child {
	margin-right: var(--text-spacing-large);
}

.jazzy-dialog.popup .description > * {
	margin: 0;
}

.jazzy-dialog.popup .description > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.jazzy-dialog.popup :is(.form, .embed) {
	width: 100%;
}

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

.jazzy-dialog.popup .buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xsmall);
	margin-top: var(--text-spacing-xsmall);
}

/*** Style: media ***/

.jazzy-dialog.popup.style-media {
	max-width: min(960px, calc(100vw - (2 * var(--container-outer-padding))));
}

.jazzy-dialog.popup.style-media[open] {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.jazzy-dialog.popup.style-media .media {
	aspect-ratio: auto;
	grid-row: 1;
	min-height: 100%;
}

.jazzy-dialog.popup.style-media .content {
	align-self: center;
	grid-row: 1;
}

/** Layout: image right **/

.jazzy-dialog.popup.style-media.image-right[open] {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.jazzy-dialog.popup.style-media.image-right .media {
	grid-column: 2;
}

.jazzy-dialog.popup.style-media.image-right .content {
	grid-column: 1;
}

/*** Motion ***/

@media (prefers-reduced-motion: no-preference) {

	.jazzy-dialog.popup,
	.jazzy-dialog.popup::backdrop {
		transition:
			display var(--motion-slow) allow-discrete,
			overlay var(--motion-slow) allow-discrete,
			opacity var(--motion-slow) var(--ease-out),
			translate var(--motion-slow) var(--ease-out);
	}

	.jazzy-dialog.popup:not([open]) {
		opacity: 0;
		translate: 0 var(--text-spacing-small);
	}

	.jazzy-dialog.popup::backdrop {
		opacity: 0;
	}

	.jazzy-dialog.popup[open]::backdrop {
		opacity: .6;
	}

	@starting-style {

		.jazzy-dialog.popup[open] {
			opacity: 0;
			translate: 0 var(--text-spacing-small);
		}

		.jazzy-dialog.popup[open]::backdrop {
			opacity: 0;
		}

	}

}

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

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

	.jazzy-dialog.popup .content {
		padding: var(--text-spacing-medium);
	}

	/* Photo above the copy, whichever side it sits on wider. */
	.jazzy-dialog.popup.style-media[open],
	.jazzy-dialog.popup.style-media.image-right[open] {
		grid-template-columns: minmax(0, 1fr);
	}

	.jazzy-dialog.popup.style-media .media,
	.jazzy-dialog.popup.style-media.image-right .media {
		aspect-ratio: 16 / 9;
		grid-column: 1;
		grid-row: 1;
		min-height: 0;
	}

	.jazzy-dialog.popup.style-media .content,
	.jazzy-dialog.popup.style-media.image-right .content {
		grid-column: 1;
		grid-row: 2;
	}

}