/**
 * Dialog — a pop-up card: a round photo in a narrow sticky column beside eyebrow, heading and
 * text. With no photo the text takes the full width. Full Width spans the grid; Centered drops a
 * column and a gap from each side on desktop. The dialog scrolls itself and locks the page.
 */

/*** Module: Dialog ***/

html:has(.jazzy-dialog.dialog-module[open]) {
	overflow: hidden;
}

.jazzy-dialog.dialog-module {
	--dialog-inset: var(--module-spacing-small);
	background: none;
	color: var(--text);
	max-height: calc(100dvh - 2 * var(--dialog-inset));
	max-width: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	width: calc(var(--container-width) - 2 * var(--container-outer-padding));
}

.jazzy-dialog.dialog-module.width-centered {
	width: calc(var(--container-width) - 2 * var(--container-outer-padding) - 2 * (var(--one-column-width) + var(--gap)));
}

.jazzy-dialog.dialog-module .dialog-layout {
	align-items: start;
	column-gap: calc(var(--one-column-width) + var(--gap));
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	padding: var(--text-spacing-xxlarge) var(--text-spacing-xxlarge) var(--module-spacing-small);
}

.jazzy-dialog.dialog-module .media {
	position: sticky;
	top: 0;
}

.jazzy-dialog.dialog-module .dialog-content > .eyebrow {
	margin: 0 0 var(--text-spacing-xsmall);
}

.jazzy-dialog.dialog-module .dialog-content > .heading-3 {
	margin-bottom: var(--text-spacing-small);
}

.jazzy-dialog.dialog-module .dialog-layout.no-media {
	grid-template-columns: minmax(0, 1fr);
}

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

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

	.jazzy-dialog.dialog-module.width-centered {
		width: calc(var(--container-width) - 2 * var(--container-outer-padding));
	}

	.jazzy-dialog.dialog-module .dialog-layout {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--text-spacing-xlarge) var(--text-spacing-large);
		row-gap: var(--text-spacing-large);
	}

	.jazzy-dialog.dialog-module .media {
		position: relative;
		width: calc(200rem / 16);
	}

}

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

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

	.jazzy-dialog.dialog-module {
		--dialog-inset: var(--container-outer-padding);
	}

	.jazzy-dialog.dialog-module .dialog-layout {
		padding: var(--text-spacing-xlarge) var(--text-spacing-small) var(--text-spacing-large);
	}

	.jazzy-dialog.dialog-module .media {
		width: calc(160rem / 16);
	}

}