/**
 * VV Legacy Content Layer frontend styles.
 *
 * Everything is scoped to singular posts and the plugin body class so removing
 * or disabling the plugin restores the theme's original presentation.
 */

body.single-post.vv-lcl-active .entry-content h2 {
	position: relative;
	inset: auto;
	float: none;
	clear: both;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	box-sizing: border-box;
	border-bottom: 0 !important;
	text-align: center;
	transform: none;
}

body.single-post.vv-lcl-active .entry-content h2::after {
	content: "";
	display: block;
	position: absolute;
	inset-inline: max(1rem, calc((100% - 48.75rem) / 2));
	bottom: 0;
	border-bottom: 3px solid rgb(72, 207, 173);
}

body.single-post.vv-lcl-active .entry-content hr.wp-block-separator {
	position: relative;
	inset: auto;
	float: none;
	max-width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
	transform: none;
}

body.single-post.vv-lcl-active .entry-content .vv-lcl-flickr-embed {
	--vv-lcl-safe-gutter: 1rem;
	--vv-lcl-media-max: 100%;
	--vv-lcl-media-width: min(
		var(--vv-lcl-media-max),
		calc(100vw - (2 * var(--vv-lcl-safe-gutter)))
	);

	display: block;
	position: relative;
	inset: auto;
	width: var(--vv-lcl-media-width);
	max-width: calc(100vw - (2 * var(--vv-lcl-safe-gutter)));
	margin-inline: calc((100% - var(--vv-lcl-media-width)) / 2);
	box-sizing: border-box;
	transform: none;
}

body.single-post.vv-lcl-active .entry-content .vv-lcl-flickr-embed--landscape {
	--vv-lcl-media-max: 68.75rem; /* 1100px */
}

body.single-post.vv-lcl-active .entry-content .vv-lcl-flickr-embed--portrait {
	--vv-lcl-media-max: 47.5rem; /* 760px */
}

body.single-post.vv-lcl-active .entry-content .vv-lcl-flickr-embed--square {
	--vv-lcl-media-max: 56.25rem; /* 900px */
}

body.single-post.vv-lcl-active .entry-content .vv-lcl-flickr-embed img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

body.single-post.vv-lcl-active .entry-content .vv-lcl-flickr-embed iframe,
body.single-post.vv-lcl-active .entry-content .vv-lcl-flickr-embed .flickr-embed-frame {
	display: block;
	max-width: 100%;
	margin-inline: auto;
	border: 0;
}

@media (max-width: 64rem) {
	body.single-post.vv-lcl-active .entry-content .vv-lcl-flickr-embed {
		position: static;
		inset: auto;
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
		transform: none;
	}
}