/**
 * Naddy Video Gallery — front-end styles.
 *
 * Kept deliberately small and low-specificity so themes stay in charge of the
 * gallery's own sizing. The one thing we insist on is the aspect ratio, which
 * comes from the poster image and prevents the slide collapsing (and shifting
 * the rest of the page) before the video has any dimensions.
 */

/* Themes round the corners of gallery images via the <img> itself, which our
   <video> never inherits. Picking the radius up from the theme's own images
   keeps the video visually identical to the photos beside it — no hardcoded
   value that would drift if the theme changes. */
/* Backgrounds stay transparent on purpose. A solid colour behind the video
   shows through the antialiased pixels of the rounded corner as a faint arc,
   because the clip edge is never perfectly opaque. With nothing behind it the
   corner blends into whatever the theme puts there. */
.nv-slide {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	background: transparent;
	aspect-ratio: var( --nv-ratio, 1 );
	cursor: pointer;
	border-radius: var( --nv-radius, 0 );
}

.nv-slide__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: transparent;
	border-radius: inherit;
}

.nv-thumb {
	overflow: hidden;
}

.nv-thumb__img {
	border-radius: inherit;
}

/* Play badge: visible while paused, fades out once the clip is running. */
.nv-slide__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #19312bab;
	color: #fff;
	pointer-events: none;
	border: 1px solid #ffffff6b;
	opacity: 1;
	transition: opacity 0.25s ease;
}

.nv-slide.is-playing .nv-slide__badge {
	opacity: 0;
}

.nv-slide__badge svg {
	margin-left: 2px;
}

/* Thumbnail strip entry. */
.nv-thumb {
	display: block;
	position: relative;
	line-height: 0;
}

.nv-thumb__img {
	display: block;
	width: 100%;
	height: auto;
}

/* The script publishes --nv-radius / --nv-thumb-radius on the gallery root, so
   every slide inherits them — including the ones a carousel clones later. */
.nv-thumb {
	border-radius: var( --nv-thumb-radius, var( --nv-radius, 0 ) );
}

.nv-thumb__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #19312bab;
	color: #fff;
	pointer-events: none;
	border: 1px solid #ffffff6b;
}

.nv-thumb__badge svg {
	width: 36px;
	height: 36px;
	margin-left: 3px;
}

/* Some themes hang zoom/lightbox affordances off the slide anchor. With the
   href removed the anchor is inert, but the cursor should say so too. */
a[data-nv-href] {
	cursor: default;
}

@media ( prefers-reduced-motion: reduce ) {
	.nv-slide__badge {
		transition: none;
	}
}