/*
 * Dynamic Gallery Extra (Pro) — consumption stylesheet.
 *
 * Carries the video playback and magnifier zoom rules stripped from the free
 * Dynamic Gallery block. Consumes the markup the DynamicGalleryExtra module
 * injects through the free render filters plus the DOM the frontend engine
 * (build-view/dg-extra.js) creates at runtime:
 *
 *   .wpminty-dg__play-btn            play overlay inside a slide (PHP)
 *   .wpminty-dg__video-dialog        lightbox-mode video facade (PHP)
 *   .wpminty-dg__video-container     dialog inner centering box (PHP)
 *   .wpminty-dg__video-close         dialog close button (PHP)
 *   .wpminty-dg__slide-video         the player element (JS)
 *   .wpminty-dg__magnifier-lens      hover lens (JS, appended to stage)
 *   .wpminty-dg__magnifier-preview   zoom preview box (JS, appended to root)
 *   .wpminty-dg__magnifier-img       preview image (JS)
 *
 * Stacking: the video dialog sits at z-index 100000, deliberately one below
 * the free lightbox (100001), so an image lightbox opened over a playing
 * video still covers it. This sheet declares no dependency on the free
 * stylesheet handle; it only targets the shared `.wpminty-dg__*` classes.
 */

/* ======================================================================
 * Play button overlay
 * ==================================================================== */

.wpminty-dg__play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(48px, 8vw, 72px);
	height: clamp(48px, 8vw, 72px);
	padding: 0;
	color: #fff;
	background: rgba(17, 17, 17, 0.55);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease;
}

.wpminty-dg__play-btn:hover {
	background: rgba(17, 17, 17, 0.8);
}

.wpminty-dg__play-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ======================================================================
 * Magnifier
 * ==================================================================== */

.wpminty-dg__magnifier-lens {
	display: none;
	position: absolute;
	z-index: 3;
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	cursor: none;
	pointer-events: none;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.wpminty-dg__magnifier-preview {
	display: none;
	position: absolute;
	z-index: 3;
	/* Width is set inline by dg-extra.js; height follows the aspect-ratio
	   the engine mirrors from the active slide box. */
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	background-color: #fff;
	pointer-events: none;
}

/*
 * dg-extra.js lays this img out at the exact stage box size (inline px)
 * inside the preview box, so its cover crop and pixel scale match the stage
 * 1:1 and the inline scale() is a true zoom of the stage view. max-width none
 * defeats theme-level img caps that would clamp the inline width; the 100%
 * sizes are only the no-JS fallback.
 */
.wpminty-dg__magnifier-img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* ======================================================================
 * Video dialog facade (lightbox play mode)
 * ==================================================================== */

.wpminty-dg__video-dialog {
	position: fixed;
	inset: 0;
	z-index: 100000;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	padding: 0;
	overflow: hidden;
	border: none;
	background: rgba(0, 0, 0, 0.9);
}

.wpminty-dg__video-dialog::backdrop {
	background: rgba(0, 0, 0, 0.85);
}

.wpminty-dg__video-container {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	padding: clamp(16px, 4vw, 48px);
	overflow: hidden;
}

/* Player inside the dialog (lightbox mode): fit within the padded box. */
.wpminty-dg__video-container .wpminty-dg__slide-video {
	width: 100%;
	max-width: 1280px;
	max-height: 80vh;
	border: none;
	background: #000;
}

/*
 * Inline play mode: the engine appends the player directly to the slide, so
 * it must fill the slide box exactly (the slide is position:relative). The
 * higher-specificity selector overrides the dialog-scoped sizing above.
 * object-fit only affects a local <video>; provider iframes fill the box and
 * letterbox internally.
 */
.wpminty-dg__slide > .wpminty-dg__slide-video {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	border: none;
	background: #000;
	object-fit: cover;
}

/* Hide the play button once a slide is playing its video inline. */
.wpminty-dg__slide:has(.wpminty-dg__slide-video) .wpminty-dg__play-btn {
	display: none;
}

.wpminty-dg__video-close {
	position: absolute;
	top: clamp(8px, 2vw, 20px);
	right: clamp(8px, 2vw, 20px);
	width: 40px;
	height: 40px;
	padding: 0;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wpminty-dg__video-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* ======================================================================
 * Reduced motion
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wpminty-dg__play-btn,
	.wpminty-dg__video-close {
		transition: none;
	}
}