/**
 * Media Content — default design tokens.
 *
 * These are the plugin-level defaults for --ftps-media-content-* properties.
 * Override any of them in your theme's page-sections-tokens.css file.
 */

@layer ftps-defaults {

.page-section-media-content {

	/* ── Layout ─────────────────────────────────────────────────────── */
	--ftps-media-content-max-width: var(--max-width-wide, 1200px);
	--ftps-media-content-gap: 20px;
	--ftps-media-content-col-padding: var(--space-normal, 1rem);
	--ftps-media-content-col-width: 50%;
}

} /* end @layer ftps-defaults */

/* TODO: Verify dead code — ps-mc-* classes are not output by render.php; candidate for removal. */
.ps-mc-media {
	margin: var(--ftps-media-content-gap) 0;
}

.page-section-media-content .ftps-media-content-inner {
	margin: 0 auto;
	max-width: var(--ftps-media-content-max-width);
}

.page-section-media-content .media-content-inner {
	margin: 0 auto;
	max-width: var(--ftps-media-content-max-width);
}

.page-section-media-content {
	margin-left: var(--ftps-media-content-gap);
	margin-right: var(--ftps-media-content-gap);
}

/* At some point the media/content get next to eachother */
@media(min-width: 48.5em){

	.ftps-media-content-container {
		display: flex;
		align-items: center;
		margin: 0 calc( -1 * var(--ftps-media-content-col-padding) );
	}

	.page-section-media-content.media-side-right .ftps-media-content-container {
		flex-direction: row-reverse;
	}

	.page-section-media-content .ftps-media-content-media,
	.page-section-media-content .ftps-media-content-content {
		max-width: var(--ftps-media-content-col-width);
		min-width: var(--ftps-media-content-col-width);
		padding: 0 var(--ftps-media-content-col-padding);
	}

}

@media only screen and (min-width: 50em) { 	/* 800px */

	.page-section-media-content .ftps-media-content-inner {
		max-width: var(--ftps-media-content-max-width);
	}

	/* start to display side-by-side */
	.ps-mc-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 calc( -1 * var(--ftps-media-content-gap) );
	}

	/* side of media can be overridden */
	.ps-mc-media-right .ps-mc-wrapper {
		flex-direction: row;
	}

	.ps-mc-media-left .ps-mc-wrapper {
		flex-direction: row-reverse;
	}

	.ps-mc-content {
		width: var(--ftps-media-content-col-width);
		min-width: var(--ftps-media-content-col-width);
		max-width: var(--ftps-media-content-col-width);
		padding: 0 var(--ftps-media-content-gap);
	}

	.ps-mc-media {
		margin: 0;
		width: var(--ftps-media-content-col-width);
		min-width: var(--ftps-media-content-col-width);
		max-width: var(--ftps-media-content-col-width);
		padding: 0 var(--ftps-media-content-gap);
	}

}