/**
 * Donate Embed — heading + content left, embed container right
 */

/*** Content ***/

.module.donate-embed .content {
	align-self: center;
	grid-column: 1 / 6;
	grid-row: 1;
	position: sticky;
	top: calc(var(--header-height) + var(--module-spacing-medium));
}

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

.module.donate-embed .content > * + .content-styles {
	margin-top: var(--text-spacing-small);
}

/*** Embed ***/

.module.donate-embed .embed-wrap {
	background: var(--appaloosa-beige);
	border-radius: var(--border-radius-large);
	grid-column: 7 / -1;
	grid-row: 1;
	padding: var(--text-spacing-large);
}

.module.donate-embed .embed-wrap iframe {
	display: block;
	height: auto;
	min-height: 400px;
	width: 100%;
}

.module.donate-embed .embed-placeholder {
	align-items: center;
	color: var(--grayhound);
	display: flex;
	font-style: italic;
	justify-content: center;
	margin: 0;
	min-height: 300px;
	text-align: center;
}

/** Layout: Embed Left / Content Right (reversed) **/

.module.donate-embed.layout-embed-left .content {
	grid-column: 7 / -1;
}

.module.donate-embed.layout-embed-left .embed-wrap {
	grid-column: 1 / 6;
}

/** No Content **/

.module.donate-embed.no-content .content {
	display: none;
}

.module.donate-embed.no-content .embed-wrap {
	grid-column: 3 / -3;
}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

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

	.module.donate-embed > .container {
		display: flex;
		flex-direction: column;
		gap: var(--text-spacing-large);
	}

	.module.donate-embed .content,
	.module.donate-embed .embed-wrap,
	.module.donate-embed.layout-embed-left .content,
	.module.donate-embed.layout-embed-left .embed-wrap,
	.module.donate-embed.no-content .embed-wrap {
		align-self: unset;
		grid-column: unset;
		grid-row: auto;
	}

	.module.donate-embed .content {
		position: relative;
		top: 0;
	}

	/* Reversed layout: embed renders first when stacked */
	.module.donate-embed.layout-embed-left .embed-wrap {
		order: -1;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

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

	.module.donate-embed > .container {
		gap: var(--text-spacing-medium);
	}

	.module.donate-embed .embed-wrap {
		padding: var(--text-spacing-medium);
	}

}