/*
 * PDSTYLE Gallery — Portable Divi Gallery Enhancement
 * Version: 1.0
 *
 * DEPENDENCIES:
 * - Divi Gallery module
 * - pdstyle.css design tokens (recommended)
 * - pdstyle-gallery.js
 *
 * SETUP:
 * Add the CSS class "pdstyle-gallery" to a Divi Gallery module.
 *
 * The JavaScript reads the images already rendered by Divi
 * and builds the enhanced main-image, thumbnail and lightbox UI.
 *
 * Site-level branding is inherited from the global
 * --pdstyle-* design tokens.
 *
 * Gallery-specific appearance can be adjusted using the
 * --pdstyle-gallery-* variables below.
 */



/* ==========================================================
   GALLERY — SITE VARIABLES
   ========================================================== */

.pdstyle-gallery,
.pdstyle-gallery-lightbox {
	--pdstyle-gallery-accent: var(--pdstyle-accent, #C89B3C);
	--pdstyle-gallery-accent-hover: var(--pdstyle-primary, #1F3A2A);

	--pdstyle-gallery-control-bg: rgba(15, 17, 21, 0.60);
	--pdstyle-gallery-control-bg-hover: rgba(15, 17, 21, 0.82);
	--pdstyle-gallery-control-color: var(--pdstyle-white, #FFFFFF);

	--pdstyle-gallery-lightbox-bg: rgba(15, 17, 21, 0.95);

	--pdstyle-gallery-main-ratio: 16 / 9;
	--pdstyle-gallery-thumb-ratio: 16 / 9;
	--pdstyle-gallery-thumb-gap: 6px;

	--pdstyle-gallery-main-radius: 0px;
	--pdstyle-gallery-thumb-radius: 0px;

	--pdstyle-gallery-arrow-size: 40px;
	--pdstyle-gallery-lightbox-arrow-size: 48px;
}

.pdstyle-gallery {
	width: 100%;
	max-width: 100%;
}

/*
 * Progressive enhancement:
 * Divi's normal gallery remains visible until JavaScript has
 * successfully built the PDSTYLE Gallery.
 */

.pdstyle-gallery.pdstyle-gallery-ready .et_pb_gallery_items,
.pdstyle-gallery.pdstyle-gallery-ready .et_pb_gallery_pagination {
	display: none !important;
}


/* ==========================================================
   GALLERY — BASE
   ========================================================== */

.pdstyle-gallery-ui,
.pdstyle-gallery-ui * {
	box-sizing: border-box;
}

.pdstyle-gallery-ui {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}


/* ==========================================================
   GALLERY — MAIN IMAGE
   ========================================================== */

.pdstyle-gallery-main {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--pdstyle-gallery-main-ratio);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--pdstyle-gallery-main-radius);
	background: var(--pdstyle-white, #FFFFFF);
}

.pdstyle-gallery-main-button {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	box-shadow: none;
	cursor: zoom-in;
}

.pdstyle-gallery-main-image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: cover;
}

.pdstyle-gallery-main-controls {
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
}

.pdstyle-gallery-counter,
.pdstyle-gallery-fullscreen {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--pdstyle-gallery-control-bg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--pdstyle-gallery-control-color);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
}

.pdstyle-gallery-counter {
	left: 12px;
	bottom: 12px;
	pointer-events: none;
}

.pdstyle-gallery-fullscreen {
	top: 12px;
	right: 12px;
	width: 42px;
	height: 42px;
	padding: 0;
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.2s ease, transform 0.2s ease;
}

.pdstyle-gallery-fullscreen:hover,
.pdstyle-gallery-fullscreen:focus-visible {
	background: var(--pdstyle-gallery-control-bg-hover);
	transform: scale(1.05);
}

.pdstyle-gallery-fullscreen svg {
	width: 19px;
	height: 19px;
}


/* ==========================================================
   GALLERY — THUMBNAILS
   ========================================================== */

.pdstyle-gallery-thumbnails {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: var(--pdstyle-gallery-thumb-gap) 0 0;
	padding: 0;
	overflow: hidden;
}

.pdstyle-gallery-thumbs-viewport {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.pdstyle-gallery-thumbs-track {
	display: flex;
	gap: var(--pdstyle-gallery-thumb-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.pdstyle-gallery-thumbnail {
	flex: 0 0 calc((100% - (var(--pdstyle-gallery-thumb-gap) * 3)) / 4);
	min-width: 0;
	aspect-ratio: var(--pdstyle-gallery-thumb-ratio);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--pdstyle-gallery-thumb-radius);
	background: transparent;
	box-shadow: none;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.86;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.pdstyle-gallery-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: cover;
}

.pdstyle-gallery-thumbnail:hover,
.pdstyle-gallery-thumbnail:focus-visible,
.pdstyle-gallery-thumbnail.is-active {
	opacity: 1;
}


/* ==========================================================
   GALLERY — THUMBNAIL ARROWS
   ========================================================== */

.pdstyle-gallery-thumb-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pdstyle-gallery-arrow-size);
	height: var(--pdstyle-gallery-arrow-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pdstyle-gallery-accent);
	color: var(--pdstyle-white, #FFFFFF);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.pdstyle-gallery-thumb-prev {
	left: 14px;
}

.pdstyle-gallery-thumb-next {
	right: 14px;
}

.pdstyle-gallery-thumb-arrow:hover,
.pdstyle-gallery-thumb-arrow:focus-visible {
	background: var(--pdstyle-gallery-accent-hover);
	transform: translateY(-50%) scale(1.08);
}

.pdstyle-gallery-thumb-arrow:disabled {
	opacity: 0.3;
	cursor: default;
	transform: translateY(-50%);
}


/* ==========================================================
   LIGHTBOX
   ========================================================== */

.pdstyle-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	overscroll-behavior: contain;
	touch-action: none;
	isolation: isolate;
	background: var(--pdstyle-gallery-lightbox-bg);
}

.pdstyle-gallery-lightbox[hidden] {
	display: none !important;
}

.pdstyle-gallery-lightbox-content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(90vw, 1400px);
	height: min(85vh, 900px);
	overflow: hidden;
	touch-action: none;
}

.pdstyle-gallery-lightbox-image {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	touch-action: none;
	transform: translate3d(0, 0, 0) scale(1);
	transform-origin: center center;
	will-change: transform;
	opacity: 1;
	transition: opacity 0.14s ease;
}

.pdstyle-gallery-lightbox-image.is-changing {
	opacity: 0;
}


/* ==========================================================
   LIGHTBOX — CONTROLS
   ========================================================== */

.pdstyle-gallery-lightbox-close,
.pdstyle-gallery-lightbox-prev,
.pdstyle-gallery-lightbox-next {
	position: fixed;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--pdstyle-gallery-control-color);
	cursor: pointer;
	pointer-events: auto;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.pdstyle-gallery-lightbox-close {
	top: max(16px, env(safe-area-inset-top));
	right: max(16px, env(safe-area-inset-right));
	gap: 8px;
	height: 46px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--pdstyle-gallery-control-bg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 15px;
	font-weight: 600;
	transition: background 0.2s ease, transform 0.2s ease;
}

.pdstyle-gallery-lightbox-close:hover,
.pdstyle-gallery-lightbox-close:focus-visible {
	background: var(--pdstyle-gallery-control-bg-hover);
	transform: scale(1.05);
}

.pdstyle-gallery-lightbox-close-icon {
	font-size: 28px;
	line-height: 1;
}

.pdstyle-gallery-lightbox-close-text {
	font-size: 0.9rem;
	line-height: 1;
}

.pdstyle-gallery-lightbox-counter {
	position: fixed;
	top: max(16px, env(safe-area-inset-top));
	left: max(16px, env(safe-area-inset-left));
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--pdstyle-gallery-control-bg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--pdstyle-gallery-control-color);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
}

.pdstyle-gallery-lightbox-arrow {
	top: 50%;
	width: var(--pdstyle-gallery-lightbox-arrow-size);
	height: var(--pdstyle-gallery-lightbox-arrow-size);
	border-radius: 50%;
	background: var(--pdstyle-gallery-accent);
	font-size: 26px;
	line-height: 1;
	transform: translateY(-50%);
	transition: background 0.2s ease, transform 0.2s ease;
}

.pdstyle-gallery-lightbox-prev {
	left: max(24px, env(safe-area-inset-left));
}

.pdstyle-gallery-lightbox-next {
	right: max(24px, env(safe-area-inset-right));
}

.pdstyle-gallery-lightbox-arrow:hover,
.pdstyle-gallery-lightbox-arrow:focus-visible {
	background: var(--pdstyle-gallery-accent-hover);
	transform: translateY(-50%) scale(1.05);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {
	.pdstyle-gallery-thumbnail {
		flex-basis: calc((100% - (var(--pdstyle-gallery-thumb-gap) * 2)) / 3);
	}
}

@media (max-width: 767px) {
	.pdstyle-gallery-thumbnail {
		flex-basis: calc((100% - var(--pdstyle-gallery-thumb-gap)) / 2);
	}

	.pdstyle-gallery-thumb-arrow {
		--pdstyle-gallery-arrow-size: 34px;
		font-size: 18px;
	}

	.pdstyle-gallery-thumb-prev {
		left: 10px;
	}

	.pdstyle-gallery-thumb-next {
		right: 10px;
	}

	.pdstyle-gallery-lightbox-content {
		width: 100vw;
		height: 100dvh;
	}

	.pdstyle-gallery-lightbox-close {
		top: max(16px, env(safe-area-inset-top));
		right: max(12px, env(safe-area-inset-right));
		height: 42px;
		padding: 0 12px;
		gap: 6px;
	}

	.pdstyle-gallery-lightbox-close-icon {
		font-size: 24px;
	}

	.pdstyle-gallery-lightbox-close-text {
		font-size: 0.8rem;
	}

	.pdstyle-gallery-lightbox-arrow {
		--pdstyle-gallery-lightbox-arrow-size: 44px;
		font-size: 22px;
	}

	.pdstyle-gallery-lightbox-prev {
		left: max(8px, env(safe-area-inset-left));
	}

	.pdstyle-gallery-lightbox-next {
		right: max(8px, env(safe-area-inset-right));
	}

	.pdstyle-gallery-counter {
		left: 10px;
		bottom: 10px;
		font-size: 0.8rem;
	}

	.pdstyle-gallery-fullscreen {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
	}

	.pdstyle-gallery-lightbox-counter {
		left: 10px;
		top: 10px;
	}
}