/* Portfolio Video Gallery – front end */
.pvg-gallery {
	--pvg-cols: 3;
	--pvg-cols-t: 2;
	--pvg-cols-m: 1;
	--pvg-gap: 16px;
	--pvg-radius: 0px;
	--pvg-ratio: 1/1;
	--pvg-pad-m: 16px;
	--pvg-shadow: 0 4px 20px rgba(0, 0, 0, .4);
	--pvg-shadow-hover: 0 10px 34px rgba(0, 0, 0, .46);
	--pvg-scale: 1.05;
	display: grid;
	grid-template-columns: repeat(var(--pvg-cols), minmax(0, 1fr));
	gap: var(--pvg-gap);
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	.pvg-gallery { grid-template-columns: repeat(var(--pvg-cols-t), minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.pvg-gallery {
		grid-template-columns: repeat(var(--pvg-cols-m), minmax(0, 1fr));
		padding-left: var(--pvg-pad-m);
		padding-right: var(--pvg-pad-m);
	}
}

/* The tile carries the shadow and the hover movement… */
.pvg-gallery .pvg-item {
	position: relative;
	margin: 0;
	aspect-ratio: var(--pvg-ratio);
	border-radius: var(--pvg-radius);
	box-shadow: var(--pvg-shadow) !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

/* Stronger hover shadow on a layer that only fades (animating box-shadow itself is slow). */
.pvg-gallery .pvg-item::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: var(--pvg-shadow-hover);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

/* …and the frame clips the media to the rounded corners. No background, so no dark edge shows. */
.pvg-frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	isolation: isolate;
}

.pvg-poster,
.pvg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	margin: 0;
	border: 0;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;
}

.pvg-video { pointer-events: none; }

/* The poster sits above the video and fades out once the video is really playing. */
.pvg-poster {
	z-index: 1;
	-webkit-user-drag: none;
}

.pvg-item.is-shown .pvg-poster { opacity: 0; }

.pvg-item:focus { outline: none; }

.pvg-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Hover animations – computers only, transform/opacity only (GPU friendly). */
@media (hover: hover) and (pointer: fine) {
	.pvg-fx-lift .pvg-item:hover { transform: translateY(-6px); }
	.pvg-fx-zoom .pvg-item:hover { transform: scale(var(--pvg-scale)); }
	.pvg-fx-zoom-inside .pvg-item:hover .pvg-poster,
	.pvg-fx-zoom-inside .pvg-item:hover .pvg-video { transform: scale(var(--pvg-scale)); }
	.pvg-gallery:not(.pvg-fx-none) .pvg-item:hover::before { opacity: 1; }

	/* Repel: the hovered video grows, its neighbours slide away (offsets set by the script). */
	.pvg-fx-repel .pvg-item {
		transform: translate(var(--pvg-px, 0px), var(--pvg-py, 0px)) scale(var(--pvg-ps, 1));
		transition-duration: .5s;
	}
	.pvg-fx-repel .pvg-item:hover {
		z-index: 2;
		transform: scale(var(--pvg-scale));
	}
}

/* Big play triangle: phones & tablets (tap to play), shown while the video is not playing. */
.pvg-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: clamp(40px, 22%, 96px);
	aspect-ratio: 1;
	transform: translate(-42%, -50%); /* a triangle looks centred slightly right of the true middle */
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35));
}

.pvg-play::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .78);
	clip-path: polygon(14% 4%, 96% 50%, 14% 96%);
	border-radius: 6px;
}

.pvg-touch-tap .pvg-item:not(.is-playing) .pvg-play,
.pvg-item.is-blocked:not(.is-playing) .pvg-play {
	opacity: 1;
}

/* Tap animation: the triangle presses in while the video starts, then pops out and fades as it plays. */
.pvg-play {
	transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.4);
}
.pvg-touch-tap .pvg-item.is-active:not(.is-playing) .pvg-play {
	opacity: .55;
	transform: translate(-42%, -50%) scale(.82);
	transition-duration: .15s;
}
.pvg-touch-tap .pvg-item.is-playing .pvg-play {
	opacity: 0;
	transform: translate(-42%, -50%) scale(1.6);
}

/* Zoom while playing (phones & tablets, tap mode). */
@media not all and (hover: hover) and (pointer: fine) {
	.pvg-touch-tap .pvg-item.is-active .pvg-poster,
	.pvg-touch-tap .pvg-item.is-active .pvg-video {
		transform: scale(var(--pvg-tap-zoom, 1.2));
		transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;
	}

	/* "The whole video grows": the frame scales instead of the picture inside it. */
	.pvg-touch-tap.pvg-tapzoom-tile .pvg-item.is-active .pvg-poster,
	.pvg-touch-tap.pvg-tapzoom-tile .pvg-item.is-active .pvg-video { transform: none; }
	.pvg-touch-tap.pvg-tapzoom-tile .pvg-item.is-active {
		z-index: 3;
		transform: scale(var(--pvg-tap-zoom-fit, var(--pvg-tap-zoom, 1.2)));
		transition: transform .6s cubic-bezier(.2, .7, .2, 1);
	}
}

@media (hover: hover) and (pointer: fine) {
	.pvg-touch-tap .pvg-item:not(.is-playing) .pvg-play { opacity: 0; }
}

/* Sound icon (top-left) on videos that have sound: appears when playing starts, hides after the set time. */
.pvg-sound {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	min-width: 30px;
	padding: 0 7px;
	box-sizing: border-box;
	border-radius: 15px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
}

.pvg-item.is-hint .pvg-sound {
	opacity: 1;
	transform: none;
}

.pvg-sound svg { display: block; flex: none; }
.pvg-sound .pvg-sound-on { display: none; }
.pvg-item.is-unmuted .pvg-sound .pvg-sound-on { display: inline; }
.pvg-item.is-unmuted .pvg-sound .pvg-sound-off { display: none; }

/* Text: the right wording per device, hidden once the sound is on or if left empty. */
.pvg-sound-hint { display: none; padding-right: 3px; }
.pvg-sound-hint:empty { display: none !important; }

@media (hover: hover) and (pointer: fine) {
	.pvg-item:not(.is-unmuted) .pvg-hint-mouse { display: inline; }
}

@media not all and (hover: hover) and (pointer: fine) {
	.pvg-item:not(.is-unmuted) .pvg-hint-touch { display: inline; }
}

/* Long-press protection on phones. */
.pvg-protect .pvg-item,
.pvg-protect .pvg-item img,
.pvg-protect .pvg-item video,
.pvg-protect figure.wp-block-video-portfolio video {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

@media (prefers-reduced-motion: reduce) {
	.pvg-item,
	.pvg-item::before,
	.pvg-poster,
	.pvg-video,
	.pvg-play,
	.pvg-sound { transition: none; }
	.pvg-item:hover,
	.pvg-item:hover .pvg-poster,
	.pvg-item:hover .pvg-video,
	.pvg-item.is-active,
	.pvg-item.is-active .pvg-poster,
	.pvg-item.is-active .pvg-video { transform: none !important; }
}