/**
 * Gallery Spotlight — Frontend Styles
 *
 * Two-tier flex layout:
 *   .product-gallery        — outer column (gap = --gs-pagination-gap)
 *     .gs-gallery-inner     — inner row/column (gap = --gs-gallery-gap)
 *       .thumbnails
 *       .main-image
 *     .gs-pagination
 *
 * All spacing is controlled by CSS custom properties set via inline style
 * on .product-gallery. Zero margins used for layout.
 *
 * @package BloomStack\GallerySpotlight
 * @since 1.0.0
 * @since 1.4.0 Restructured to two-tier flex layout with CSS custom properties.
 */

/* ===== CSS Custom Property Defaults ===== */
.single-product .product-gallery {
	--gs-gallery-gap: 20px;
	--gs-pagination-gap: 10px;
}

/* ===== Outer Wrapper ===== */
.single-product .product-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--gs-pagination-gap);

	/* Hide gallery until Swiper initialises to prevent FOUC (flash of
	   unstyled content — raw stacked slides before JS lays them out).
	   JS adds .gs-initialized after both Swipers are ready.
	   Fallback timeout in JS ensures gallery is never permanently hidden. */
	opacity: 0;
}

/* Reveal once Swiper has initialised — fade in over 0.3s. */
.single-product .product-gallery.gs-initialized {
	opacity: 1;
	transition: opacity 0.3s ease;
}

/* ===== Gallery Inner (thumbnails + main image) ===== */
.single-product .product-gallery .gs-gallery-inner {
	display: flex;
	width: 100%;
	gap: var(--gs-gallery-gap);
	align-items: flex-start;
}

/* Left: thumbnails on the left, main on the right. */
.single-product .product-gallery.gallery-thumb-left .gs-gallery-inner {
	flex-direction: row;
}

/* Right: main on the left, thumbnails on the right. */
.single-product .product-gallery.gallery-thumb-right .gs-gallery-inner {
	flex-direction: row-reverse;
}

/* Bottom: main on top, thumbnails beneath.
   DOM order is thumbnails → main-image, so use order to flip visually. */
.single-product .product-gallery.gallery-thumb-bottom .gs-gallery-inner {
	flex-direction: column;
}

.single-product .product-gallery.gallery-thumb-bottom .main-image {
	order: 1;
	width: 100%;
}

.single-product .product-gallery.gallery-thumb-bottom .thumbnails {
	order: 2;
}

/* ===== Main Image ===== */
.single-product .product-gallery .main-image {
	max-height: 780px;
	overflow: hidden;
	position: relative;
	flex: 1;
	min-width: 0;
}

.single-product .product-gallery .main-image img,
.single-product .product-gallery .main-image video {
	width: 100%;
	height: auto;
	border-radius: 5px;
}

.single-product .product-gallery .main-image a {
	display: block;
}

/* ===== Gallery Navigation Controls ===== */

/**
 * Navigation wrapper — holds prev/next buttons.
 * Positioned absolutely within .main-image via position modifiers.
 */
.gs-nav-wrapper {
	position: absolute;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 6px;
	pointer-events: none;
}

/* Allow pointer events on interactive children only. */
.gs-nav-wrapper .gs-nav-btn {
	pointer-events: auto;
}

/* --- Position modifiers --- */
.gs-nav-wrapper.gs-nav-top-left {
	top: 12px;
	left: 12px;
}

.gs-nav-wrapper.gs-nav-top-right {
	top: 12px;
	right: 12px;
}

.gs-nav-wrapper.gs-nav-bottom-left {
	bottom: 12px;
	left: 12px;
}

.gs-nav-wrapper.gs-nav-bottom-right {
	bottom: 12px;
	right: 12px;
}

/* --- Prev / Next buttons --- */
.gs-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #fff;
	color: #333;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	-webkit-appearance: none;
	appearance: none;
	line-height: 1;
}

.gs-nav-btn:hover,
.gs-nav-btn:focus {
	background: #f5f5f5;
	border-color: rgba(0, 0, 0, 0.2);
	outline: none;
}

.gs-nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

.gs-nav-btn svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
}

/* --- Shape modifiers --- */
.gs-nav-round .gs-nav-btn {
	border-radius: 50%;
}

.gs-nav-square .gs-nav-btn {
	border-radius: 4px;
}

/* --- Pagination dots (below gallery inner) --- */
.single-product .product-gallery .gs-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.gs-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: rgba(0, 0, 0, 0.18);
	border-radius: 50%;
	opacity: 1;
	transition: background 0.2s ease, transform 0.2s ease;
	cursor: pointer;
}

.gs-pagination .swiper-pagination-bullet-active {
	background: #333;
	transform: scale(1.2);
}

/* ===== Thumbnails ===== */
.single-product .product-gallery .thumbnails {
	display: flex;
	overflow: hidden;
}

.single-product .product-gallery .thumbnails .swiper-slide {
	overflow: hidden;
	opacity: 0.7;
}

.single-product .product-gallery .thumbnails .swiper-slide.swiper-slide-thumb-active {
	opacity: 1;
}

.single-product .product-gallery .thumbnails img,
.single-product .product-gallery .thumbnails video {
	cursor: pointer;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 5px;
}

/* Square aspect ratio for vertical (left/right) thumbnail slides. */
.single-product .product-gallery.gallery-thumb-left .thumbnails .swiper-slide,
.single-product .product-gallery.gallery-thumb-right .thumbnails .swiper-slide {
	aspect-ratio: 1;
}

/* ===== Thumbnail Sizing — Left/Right ===== */
.single-product .product-gallery.gallery-thumb-left .thumbnails,
.single-product .product-gallery.gallery-thumb-right .thumbnails {
	flex: 0 0 15.2%;
	flex-direction: column;
}

/* ===== Thumbnail Sizing — Bottom ===== */
.single-product .product-gallery.gallery-thumb-bottom .thumbnails {
	width: 100%;
	height: auto !important;
	overflow: hidden;
}

.single-product .product-gallery.gallery-thumb-bottom .thumbnails .swiper-wrapper {
	flex-direction: row;
}

.single-product .product-gallery.gallery-thumb-bottom .thumbnails .swiper-slide {
	width: auto;
}

/* ===== Video Wrappers ===== */
.video-wrapper {
	position: relative;
	width: 100%;
}

.video-wrapper.vimeo-wrapper {
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video-wrapper.vimeo-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 5px;
}

.video-wrapper.mp4-wrapper video {
	width: 100%;
	height: auto;
	border-radius: 5px;
}

/* ===== Video Lightbox Expand Button ===== */
.main-image .video-slide {
	position: relative;
}

.main-image .gs-lightbox-expand {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.main-image .video-slide:hover .gs-lightbox-expand,
.main-image .video-slide:focus-within .gs-lightbox-expand {
	opacity: 1;
}

.main-image .gs-lightbox-expand:hover,
.main-image .gs-lightbox-expand:focus {
	background: rgba(0, 0, 0, 0.8);
	outline: none;
}

.main-image .gs-lightbox-expand svg {
	width: 18px;
	height: 18px;
	pointer-events: none;
}

/* ===== Main Image Sizing ===== */
.main-image .gallery-spotlight-main-img {
	max-width: 100%;
	height: auto;
}

/* ===== Responsive ===== */
@media (max-width: 920px) {
	/* Collapse inner layout to column on mobile for all positions. */
	.single-product .product-gallery .gs-gallery-inner {
		flex-direction: column !important;
	}

	/* Main image always first on mobile. */
	.single-product .product-gallery .main-image {
		width: 100%;
		order: 1;
	}

	/* Thumbnails always below the main image on mobile. */
	.single-product .product-gallery .thumbnails {
		width: 100%;
		flex: initial;
		flex-direction: row;
		overflow-x: auto;
		order: 2;
		height: auto !important;
	}

	/* Hide thumbnails on mobile when setting is off. */
	.single-product .product-gallery[data-show-mobile-thumbs="false"] .thumbnails {
		display: none;
	}
}