/**
 * Gallery frontend.
 *
 * @package WPCG
 */

/*--------------------------------------------------------------
# Gallery Variables
--------------------------------------------------------------*/

.wpcg-gallery {

	--wpcg-bg: #000;

	--wpcg-text: #fff;

	--wpcg-radius: 12px;

	--wpcg-transition: .25s ease;

	--wpcg-nav-size: 48px;

	--wpcg-nav-bg: rgba(0, 0, 0, .55);

	--wpcg-nav-bg-hover: rgba(0, 0, 0, .82);

	--wpcg-overlay-bg: unset;

	/* --wpcg-overlay-bg: linear-gradient(180deg,
			rgba(0, 0, 0, .55) 0%,
			rgba(0, 0, 0, 0) 40%,
			rgba(0, 0, 0, .65) 100%); */

	position: relative;

	width: 100%;

	margin: 0 auto;

	overflow: hidden;

	border-radius: var(--wpcg-radius);

	background: #f6f6f6;

}

/*--------------------------------------------------------------
# Stage
--------------------------------------------------------------*/

.wpcg-stage {

	position: relative;

	width: 100%;

	overflow: hidden;

	cursor: pointer;

	user-select: none;

	-webkit-user-select: none;

}

.wpcg-image-wrapper {

	position: relative;

	width: 100%;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	background: #f4f4f4;

	overflow: hidden;

}

.wpcg-image {

	display: block;

	width: 100%;

	height: auto;

	object-fit: contain;

	transition:
		transform .35s ease,
		opacity .25s ease;

	-webkit-user-drag: none;

	user-select: none;

}

.wpcg-image.loading {

	opacity: .4;

}

.wpcg-image.loaded {

	opacity: 1;

}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.wpcg-nav {

	position: absolute;

	top: 50%;

	width: var(--wpcg-nav-size);
	height: var(--wpcg-nav-size);

	margin-top: calc(var(--wpcg-nav-size) / -2);

	display: flex;

	align-items: center;
	justify-content: center;

	padding: 0;
	border: 0;
	border-radius: 50%;

	background: var(--wpcg-nav-bg) !important;
	color: #fff;

	font-size: 22px;
	line-height: 1;

	cursor: pointer;

	z-index: 100;

	opacity: 1;
	visibility: visible;

	transform: scale(.92);

	transition:
		opacity var(--wpcg-transition),
		visibility var(--wpcg-transition),
		transform var(--wpcg-transition),
		background var(--wpcg-transition);

}

/* Position */

.wpcg-nav-prev {
	left: 16px;
}

.wpcg-nav-next {
	right: 16px;
}

/* Show arrows on hover */

.wpcg-gallery:hover .wpcg-nav,
.wpcg-stage:hover .wpcg-nav,
.wpcg-nav:focus-visible {

	opacity: 1;
	visibility: visible;

	transform: scale(1);

}

/* Hover */

.wpcg-nav:hover:not(:disabled) {

	background: var(--wpcg-nav-bg-hover);

	transform: scale(1.08);

}

/* Disabled state */

.wpcg-nav:disabled {

	opacity: .35;

	cursor: not-allowed;

	pointer-events: none;

}

/* Arrow icon */

.wpcg-nav span {

	display: block;

	line-height: 1;

	font-size: 26px;

	pointer-events: none;

}

/*--------------------------------------------------------------
# Overlay
--------------------------------------------------------------*/

.wpcg-overlay {

	position: absolute;

	inset: 0;

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	padding: 16px;

	background: var(--wpcg-overlay-bg);

	opacity: 0;

	transition: opacity var(--wpcg-transition);

	z-index: 20;

	pointer-events: none;

}

.wpcg-stage:hover .wpcg-overlay,
.wpcg-gallery:hover .wpcg-overlay {

	opacity: 1;

}

.wpcg-overlay>* {

	pointer-events: auto;

}

/*--------------------------------------------------------------
# Counter
--------------------------------------------------------------*/

.wpcg-counter {

	display: inline-flex;

	align-items: center;

	align-self: flex-start;

	padding: 6px 12px;

	border-radius: 999px;

	background: rgba(0, 0, 0, .55);

	color: #fff;

	font-size: 14px;

	font-weight: 600;

	line-height: 1;

	backdrop-filter: blur(6px);

}

.wpcg-current,
.wpcg-total {

	min-width: 18px;

	text-align: center;

}

.wpcg-separator {

	margin: 0 6px;

	opacity: .75;

}

/*--------------------------------------------------------------
# Toolbar
--------------------------------------------------------------*/

.wpcg-toolbar {

	display: flex;

	align-items: center;

	justify-content: flex-end;

	gap: 10px;

	align-self: flex-end;

}

.wpcg-toolbar button {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 42px;

	height: 42px;

	border: 0;

	border-radius: 50%;

	background: rgba(0, 0, 0, .55);

	color: #fff;

	cursor: pointer;

	transition:
		background var(--wpcg-transition),
		transform var(--wpcg-transition);

}

.wpcg-toolbar button:hover {

	background: rgba(0, 0, 0, .82);

	transform: scale(1.06);

}

.wpcg-toolbar button:focus-visible {

	outline: 2px solid #fff;

	outline-offset: 2px;

}

/*--------------------------------------------------------------
# Loading
--------------------------------------------------------------*/

.wpcg-loading {

	position: absolute;

	inset: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	background: rgba(255, 255, 255, .45);

	opacity: 0;

	visibility: hidden;

	transition: opacity .25s ease;

	z-index: 25;

}

.wpcg-loading.is-active {

	opacity: 1;

	visibility: visible;

}

.wpcg-spinner {

	width: 42px;

	height: 42px;

	border: 3px solid rgba(255, 255, 255, .35);

	border-top-color: #fff;

	border-radius: 50%;

	animation: wpcg-spin .8s linear infinite;

}

@keyframes wpcg-spin {

	from {

		transform: rotate(0deg);

	}

	to {

		transform: rotate(360deg);

	}

}

/*--------------------------------------------------------------
# Animation Helpers
--------------------------------------------------------------*/

.wpcg-fade-in {

	animation: wpcg-fade-in .25s ease forwards;

}

.wpcg-fade-out {

	animation: wpcg-fade-out .25s ease forwards;

}

@keyframes wpcg-fade-in {

	from {

		opacity: 0;

	}

	to {

		opacity: 1;

	}

}

@keyframes wpcg-fade-out {

	from {

		opacity: 1;

	}

	to {

		opacity: 0;

	}

}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media (max-width: 1024px) {

	.wpcg-nav {

		width: 44px;
		height: 44px;

	}

	.wpcg-nav-prev {

		left: 12px;

	}

	.wpcg-nav-next {

		right: 12px;

	}

	.wpcg-overlay {

		padding: 14px;

	}

}

@media (max-width: 768px) {

	.wpcg-nav {

		width: 40px;
		height: 40px;

		font-size: 18px;

	}

	.wpcg-nav-prev {

		left: 10px;

	}

	.wpcg-nav-next {

		right: 10px;

	}

	.wpcg-counter {

		font-size: 13px;

		padding: 5px 10px;

	}

	.wpcg-toolbar {

		gap: 8px;

	}

	.wpcg-toolbar button {

		width: 38px;
		height: 38px;

	}

}

@media (max-width: 480px) {

	.wpcg-nav {

		width: 36px;
		height: 36px;

	}

	.wpcg-nav span {

		font-size: 18px;

	}

	.wpcg-overlay {

		padding: 10px;

	}

	.wpcg-counter {

		font-size: 12px;

	}

	.wpcg-toolbar {

		gap: 6px;

	}

	.wpcg-toolbar button {

		width: 34px;
		height: 34px;

	}

}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

.wpcg-nav:focus-visible,
.wpcg-toolbar button:focus-visible {

	outline: 2px solid #ffffff;

	outline-offset: 2px;

}

@media (prefers-reduced-motion: reduce) {

	.wpcg-gallery *,
	.wpcg-gallery *::before,
	.wpcg-gallery *::after {

		animation: none !important;

		transition: none !important;

		scroll-behavior: auto !important;

	}

}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

.wpcg-hidden {

	display: none !important;

}

.wpcg-invisible {

	visibility: hidden !important;

}

.wpcg-disabled {

	opacity: .4 !important;

	pointer-events: none !important;

	cursor: default !important;

}

.wpcg-no-select {

	user-select: none;
	-webkit-user-select: none;

}

/*--------------------------------------------------------------
# Print
--------------------------------------------------------------*/

@media print {

	.wpcg-overlay,
	.wpcg-nav,
	.wpcg-toolbar {

		display: none !important;

	}

	.wpcg-gallery {

		break-inside: avoid;

		background: transparent;

	}

	.wpcg-image {

		max-width: 100%;

		height: auto;

	}

}

.wpcg-image.is-zoomed {

	cursor: zoom-out;

	transform-origin: center center;

}

/*--------------------------------------------------------------
# Video Gallery
--------------------------------------------------------------*/

/*
 * Video container.
 */
.wpcg-video {

	position: relative;

	width: 100%;

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	background: #000;

	overflow: hidden;

}

/*
 * Video thumbnail.
 */
.wpcg-video-thumbnail {

	display: block;

	width: 100%;

	height: auto;

	object-fit: cover;

	-webkit-user-drag: none;

	user-select: none;

	transition:
		transform .35s ease,
		opacity .25s ease;

}

/*
 * Video thumbnail hover.
 */
.wpcg-video:hover .wpcg-video-thumbnail {

	transform: scale(1.02);

}

/*
 * Play button.
 */
.wpcg-video-play {

	position: absolute;

	top: 50%;

	left: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 64px;

	height: 64px;

	padding: 0;

	margin: 0;

	border: 0;

	border-radius: 50%;

	background: rgba(0, 0, 0, .72);

	color: #fff;

	font-size: 26px;

	line-height: 1;

	cursor: pointer;

	transform:
		translate(-50%, -50%) scale(1);

	transition:
		background var(--wpcg-transition),
		transform var(--wpcg-transition);

	z-index: 5;

}

/*
 * Play icon.
 */
.wpcg-video-play span {

	display: block;

	margin-left: 4px;

	line-height: 1;

	pointer-events: none;

}

/*
 * Play button hover.
 */
.wpcg-video-play:hover {

	background: rgba(0, 0, 0, .9);

	transform:
		translate(-50%, -50%) scale(1.1);

}

/*
 * Play button focus.
 */
.wpcg-video-play:focus-visible {

	outline: 2px solid #fff;

	outline-offset: 4px;

}

/*
 * YouTube player in gallery.
 */
.wpcg-video-player {

	display: block;

	width: 100%;

	aspect-ratio: 16 / 9;

	height: 100%;

	border: 0;

	background: #000;

}

/*
 * Video player wrapper.
 */
.wpcg-video.is-playing {

	background: #000;

}

/*
 * Ensure video iframe fills the gallery.
 */
.wpcg-video.is-playing .wpcg-video-player {

	display: block;

	width: 100%;

	height: 100%;

	aspect-ratio: 16 / 9;

	border: 0;

}

/*--------------------------------------------------------------
# Modal Video
--------------------------------------------------------------*/

/*
 * Modal stage.
 */
.wpcg-modal-stage {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	overflow: hidden;

	background: #000;

}

/*
 * YouTube iframe inside modal.
 */
.wpcg-modal-stage .wpcg-modal-video {

	display: block;

	width: min(90vw, 1200px);

	max-width: 100%;

	height: min(50.625vw, 675px);

	max-height: 80vh;

	aspect-ratio: 16 / 9;

	border: 0;

	background: #000;

	transform: none !important;

	flex: 0 1 auto;

}

/*--------------------------------------------------------------
# Responsive Video
--------------------------------------------------------------*/

@media (max-width: 768px) {

	.wpcg-video-play {

		width: 56px;

		height: 56px;

		font-size: 22px;

	}

	.wpcg-modal-stage .wpcg-modal-video {

		width: 92vw;

		height: auto;

		max-height: 70vh;

		aspect-ratio: 16 / 9;

	}

}

@media (max-width: 480px) {

	.wpcg-video-play {

		width: 48px;

		height: 48px;

		font-size: 19px;

	}

	.wpcg-modal-stage .wpcg-modal-video {

		width: 94vw;

		height: auto;

		max-height: 65vh;

		aspect-ratio: 16 / 9;

	}

}


/*--------------------------------------------------------------
# Video Accessibility
--------------------------------------------------------------*/


.wpcg-video-play:focus-visible {

	outline: 2px solid #fff;

	outline-offset: 4px;

}

@media (prefers-reduced-motion: reduce) {

	.wpcg-video-thumbnail,
	.wpcg-video-play {

		transition: none;

	}

}

/*--------------------------------------------------------------
# Navigation Fix
--------------------------------------------------------------*/
.wpcg-stage {

	position: relative;

}

.wpcg-nav {

	position: absolute;

	z-index: 1000;

}

.wpcg-nav-prev {

	left: 16px;

}

.wpcg-nav-next {

	right: 16px;

}

.wpcg-overlay {

	z-index: 10;

}

.wpcg-nav-next,
.wpcg-nav-prev {

	pointer-events: auto;

	position: absolute !important;

}

/*--------------------------------------------------------------
# Modal YouTube Override
--------------------------------------------------------------*/
/*
.wpcg-modal-stage .wpcg-modal-video {

	display: block;

	width: min(90vw, 1200px);

	height: min(67.5vw, 675px);

	max-width: 100%;

	max-height: 80vh;

	aspect-ratio: 16 / 9;

	border: 0;

	background: #000;

}

@media (max-width: 768px) {

	.wpcg-modal-stage .wpcg-modal-video {

		width: 92vw;

		height: auto;

		aspect-ratio: 16 / 9;

		max-height: 70vh;

	}

} */

/*--------------------------------------------------------------
# Desktop Toolbar Always Visible
--------------------------------------------------------------*/

@media (min-width: 769px) {

	.wpcg-overlay {

		opacity: 1;

	}

	.wpcg-toolbar {

		opacity: 1;

		visibility: visible;

		pointer-events: auto;

	}

	.wpcg-toolbar button {

		opacity: 1;

		visibility: visible;

		pointer-events: auto;

	}

	/*
	 * Make toolbar visible even when
	 * parent overlay is visually hidden.
	 */
	.wpcg-stage {

		position: relative;

	}

	.wpcg-toolbar {

		position: absolute;

		right: 16px;

		bottom: 16px;

		z-index: 30;

	}

}