/*
 * ZEO 2.1.1 media parity.
 *
 * Every rule is scoped to the existing private strip or page-200 hero
 * classes. The custom properties are emitted by media-211.php so a saved
 * native background remains the source of truth.
 */

:where(.zeo-media-211-private-strip, .zeo-private-strip, .zeo-commission-strip) {
	--zeo-media-211-bg-color: #1d302c;
	--zeo-media-211-bg-image: url('../images/reference/plaster-dark.png');
	--zeo-media-211-bg-position: center;
	--zeo-media-211-bg-repeat: repeat;
	--zeo-media-211-bg-size: 360px auto;
	--zeo-media-211-overlay: 0;
	--zeo-media-211-overlay-color: #000000;
	position: relative;
	isolation: isolate;
	background-color: var(--zeo-media-211-bg-color) !important;
	background-image: var(--zeo-media-211-bg-image) !important;
	background-position: var(--zeo-media-211-bg-position) !important;
	background-repeat: var(--zeo-media-211-bg-repeat) !important;
	background-size: var(--zeo-media-211-bg-size) !important;
}

/* The homepage's legacy commission rule is also !important. Keep this
   higher-specificity override limited to the same private-strip classes. */
body.home :is(.zeo-media-211-private-strip, .zeo-private-strip, .zeo-commission-strip) {
	background-color: var(--zeo-media-211-bg-color, #1d302c) !important;
	background-image: var(--zeo-media-211-bg-image, url('../images/reference/plaster-dark.png')) !important;
	background-position: var(--zeo-media-211-bg-position, center) !important;
	background-repeat: var(--zeo-media-211-bg-repeat, repeat) !important;
	background-size: var(--zeo-media-211-bg-size, 360px auto) !important;
}

:where(.zeo-media-211-private-strip, .zeo-private-strip, .zeo-commission-strip)::after {
	position: absolute;
	inset: 0;
	z-index: 0;
	content: '';
	background: var(--zeo-media-211-overlay-color);
	opacity: var(--zeo-media-211-overlay);
	pointer-events: none;
}

:where(.zeo-media-211-private-strip, .zeo-private-strip, .zeo-commission-strip) > * {
	position: relative;
	z-index: 1;
}

/* Core Image receives this class only after a user stores a 2.1.1 focal
   point or mobile source, so ordinary editorial images keep their native
   sizing. */
.zeo-media-211-embedded-image {
	position: relative;
	overflow: hidden;
}

.zeo-media-211-embedded-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--zeo-media-211-desktop-position, 50% 50%) !important;
}

@media (max-width: 767px) {
	.zeo-media-211-embedded-image img {
		object-position: var(--zeo-media-211-mobile-position, var(--zeo-media-211-desktop-position, 50% 50%)) !important;
	}
}

/* Native Cover desktop focalPoint and the existing page CSS remain untouched.
   This mobile-only rule is active only when 2.1.1 has saved a mobile value. */
@media (max-width: 767px) {
	.zeo-media-211-mobile-ready .wp-block-cover__image-background {
		object-position: var(--zeo-media-211-mobile-position, 50% 50%) !important;
	}
}

/* Editor-side controls and their actual-ratio previews. */
.zeo-media-211__preview {
	position: relative;
	width: 100%;
	margin: 8px 0 12px;
	overflow: hidden;
	background: #e9e5dc;
}

.zeo-media-211__preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zeo-media-211__preview--hero {
	max-height: 180px;
}

.zeo-media-211__preview--embedded {
	max-height: 160px;
}

.zeo-media-211__preview-label {
	position: absolute;
	top: 6px;
	left: 8px;
	z-index: 1;
	padding: 3px 6px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: .04em;
}

.zeo-media-211__preview-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 8px 0 12px;
}

.zeo-media-211__preview-pair .zeo-media-211__preview {
	margin: 0;
	max-height: none;
}

.zeo-media-211__help {
	margin: 0 0 10px;
	color: #646970;
	font-size: 12px;
	line-height: 1.45;
}

.editor-styles-wrapper :is(.zeo-media-211-private-strip, .zeo-private-strip, .zeo-commission-strip) {
	position: relative;
	isolation: isolate;
	background-color: var(--zeo-media-211-bg-color, #1d302c) !important;
	background-image: var(--zeo-media-211-bg-image, url('../images/reference/plaster-dark.png')) !important;
	background-position: var(--zeo-media-211-bg-position, center) !important;
	background-repeat: var(--zeo-media-211-bg-repeat, repeat) !important;
	background-size: var(--zeo-media-211-bg-size, 360px auto) !important;
}

.editor-styles-wrapper .zeo-media-211-private-preview :is(.zeo-media-211-private-strip, .zeo-private-strip, .zeo-commission-strip) {
	background-color: var(--zeo-media-211-bg-color, #1d302c) !important;
	background-image: var(--zeo-media-211-bg-image, url('../images/reference/plaster-dark.png')) !important;
	background-position: var(--zeo-media-211-bg-position, center) !important;
	background-repeat: var(--zeo-media-211-bg-repeat, repeat) !important;
	background-size: var(--zeo-media-211-bg-size, 360px auto) !important;
}

.editor-styles-wrapper .zeo-media-211-private-preview :is(.zeo-media-211-private-strip, .zeo-private-strip, .zeo-commission-strip)::after {
	background: var(--zeo-media-211-overlay-color, #000000);
	opacity: var(--zeo-media-211-overlay, 0);
}

.editor-styles-wrapper :is(.zeo-media-211-private-strip, .zeo-private-strip, .zeo-commission-strip)::after {
	z-index: 0;
}

.editor-styles-wrapper :is(.zeo-media-211-private-strip, .zeo-private-strip, .zeo-commission-strip) > * {
	position: relative;
	z-index: 1;
}