/**
 * Image Gallery & Lightbox Styles
 *
 * Complete image gallery styling with lightbox functionality
 * Merged from style.css for better organization
 *
 * @package purple-surgical
 */

/*
====================================================
Image Gallery Base Styles
====================================================
*/

.image-gallery-section .section-header {
	margin-bottom: 3.125rem; /* 50px */
}

.gallery-link {
	display: block;
	border-radius: 3.125rem; /* 50px */
	height: 27.25rem; /* 436px */
}

.compact-container .gallery-link {
	height: 24.063rem; /* 385px */
}

.gallery-link img {
	border-radius: 3.125rem; /* 50px */
}

.image-gallery-section .image-gallery-carousel {
	padding-left: 14.375rem; /* 230px */
	padding-right: 14.375rem; /* 230px */
}

/* Image Gallery Carousel Arrow Container (for mobile/tablet ≤ 991px) */
.image-gallery-section .ps-slick-arrow-container {
	display: none; /* Hidden by default, shown via JS on mobile/tablet */
	justify-content: center;
	gap: 3.125rem; /* 50px */
	margin-top: 2.5rem; /* 40px */
}

.image-gallery-section .ps-slick-arrow-container.show {
	display: flex;
}

.image-gallery-section .ps-slick-arrow {
	width: 4.6875rem; /* 75px */
	height: 4.6875rem; /* 75px */
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.image-gallery-section .ps-slick-arrow.slick-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.image-gallery-section .ps-slick-arrow.slick-disabled:hover {
	transform: scale(1);
}

.image-gallery-section .ps-slick-arrow svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Image Gallery Carousel Arrows (for desktop > 991px) */
.image-gallery-carousel .slick-prev.ps-slick-arrow,
.image-gallery-carousel .slick-next.ps-slick-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.image-gallery-carousel .slick-prev.ps-slick-arrow {
	left: 3.125rem; /* 50px */
}

.image-gallery-carousel .slick-next.ps-slick-arrow {
	left: auto;
	right: 3.125rem; /* 50px */
}

/*
====================================================
Lightbox Styles
====================================================
*/

/* Lightbox Container */
.ps-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ps-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

/* Overlay */
.ps-lightbox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Container */
.ps-lightbox-container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem; /* 64px 32px */
}

/* Close Button */
.ps-lightbox-close {
	position: absolute;
	top: 1.5rem; /* 24px */
	right: 1.5rem; /* 24px */
	width: 3rem; /* 48px */
	height: 3rem; /* 48px */
	background: rgba(255, 255, 255, 0.1);
	border: 0.125rem solid rgba(255, 255, 255, 0.2); /* 2px */
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;
	color: #fff;
}

.ps-lightbox-close:hover {
	background: var(--ps-purple);
	border-color: var(--ps-purple);
	transform: rotate(90deg);
}

.ps-lightbox-close svg {
	width: 1.5rem; /* 24px */
	height: 1.5rem; /* 24px */
}

/* Navigation Buttons */
.ps-lightbox-prev,
.ps-lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3.5rem; /* 56px */
	height: 3.5rem; /* 56px */
	background: rgba(255, 255, 255, 0.1);
	border: 0.125rem solid rgba(255, 255, 255, 0.2); /* 2px */
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;
	color: #fff;
}

.ps-lightbox-prev {
	left: 2rem; /* 32px */
}

.ps-lightbox-next {
	right: 2rem; /* 32px */
}

.ps-lightbox-prev:hover,
.ps-lightbox-next:hover {
	background: var(--ps-purple);
	border-color: var(--ps-purple);
	transform: translateY(-50%) scale(1.1);
}

.ps-lightbox-prev svg,
.ps-lightbox-next svg {
	width: 2rem; /* 32px */
	height: 2rem; /* 32px */
}

/* Content */
.ps-lightbox-content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Image */
.ps-lightbox-image {
	max-width: 100%;
	max-height: 85vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0.5rem; /* 8px */
	box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.5); /* 0 20px 60px */
	transition: opacity 0.3s ease;
}

/* Loader */
.ps-lightbox-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ps-lightbox-loader.is-loading {
	opacity: 1;
	visibility: visible;
}

/* Spinner */
.ps-lightbox-spinner {
	width: 3rem; /* 48px */
	height: 3rem; /* 48px */
	border: 0.25rem solid rgba(255, 255, 255, 0.2); /* 4px */
	border-top-color: var(--ps-purple);
	border-radius: 50%;
	animation: ps-lightbox-spin 0.8s linear infinite;
}

@keyframes ps-lightbox-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Counter */
.ps-lightbox-counter {
	position: absolute;
	bottom: 2rem; /* 32px */
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 0.5rem 1.25rem; /* 8px 20px */
	border-radius: 1.5625rem; /* 25px */
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 0.0625rem solid rgba(255, 255, 255, 0.1); /* 1px */
}

.ps-lightbox-current {
	color: var(--ps-purple);
	font-weight: 700;
}

/* Prevent body scroll when lightbox is open */
body.ps-lightbox-open {
	overflow: hidden;
}

/* Gallery Link Hover Effect */
.has-lightbox .gallery-link {
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.has-lightbox .gallery-link::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(168, 83, 208, 0.8) 0%, rgba(233, 30, 99, 0.8) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
	border-radius: 3.125rem; /* 50px */
}

.has-lightbox .gallery-link::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 3rem; /* 48px */
	height: 3rem; /* 48px */
	background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 30C27.3137 30 30 27.3137 30 24C30 20.6863 27.3137 18 24 18C20.6863 18 18 20.6863 18 24C18 27.3137 20.6863 30 24 30Z' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 12C14 12 6 24 6 24C6 24 14 36 24 36C34 36 42 24 42 24C42 24 34 12 24 12Z' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 2;
}

.has-lightbox .gallery-link:hover::before {
	opacity: 1;
}

.has-lightbox .gallery-link:hover::after {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.1);
}

/*
====================================================
Responsive Styles
====================================================
*/

/* Gallery Responsive Styles */
@media only screen and (max-width: 1799px) {
	.image-gallery-section .image-gallery-carousel {
		padding-left: 9.375rem; /* 150px */
		padding-right: 9.375rem; /* 150px */
	}

	.image-gallery-carousel .slick-prev.ps-slick-arrow {
		left: 0;
	}

	.image-gallery-carousel .slick-next.ps-slick-arrow {
		right: 0;
	}

	.gallery-link {
		height: 25rem; /* 400px */
	}
}

@media only screen and (max-width: 1599px) {
	.image-gallery-section .image-gallery-carousel {
		padding-left: 6.25rem; /* 100px */
		padding-right: 6.25rem; /* 100px */
	}

	.gallery-link {
		height: 21.875rem; /* 350px */
	}
}

@media only screen and (max-width: 1399px) {
	.gallery-link {
		height: 18.75rem; /* 300px */
	}
}

@media only screen and (max-width: 1199px) {
	.gallery-link {
		height: 21.875rem; /* 350px */
	}

	.gallery-link:not(.has-carousel .gallery-link) {
		height: 18.75rem; /* 300px */
	}
}

/* Lightbox Responsive Styles */
@media (max-width: 991px) {
	/* Gallery */
	.image-gallery-section .image-gallery-carousel {
		padding: 0;
	}

	.gallery-link {
		height: 18.75rem; /* 300px */
	}

	.gallery-link:not(.has-carousel .gallery-link) {
		height: 15.625rem; /* 250px */
	}

	/* Lightbox */
	.ps-lightbox-container {
		padding: 3rem 1.5rem; /* 48px 24px */
	}

	.ps-lightbox-prev,
	.ps-lightbox-next {
		width: 3rem; /* 48px */
		height: 3rem; /* 48px */
	}

	.ps-lightbox-prev {
		left: 1rem; /* 16px */
	}

	.ps-lightbox-next {
		right: 1rem; /* 16px */
	}

	.ps-lightbox-prev svg,
	.ps-lightbox-next svg {
		width: 1.5rem; /* 24px */
		height: 1.5rem; /* 24px */
	}
}

@media (max-width: 767px) {
	/* Gallery */
	.gallery-link:not(.has-carousel .gallery-link) {
		height: 18.75rem; /* 300px */
	}

	/* Lightbox */
	.ps-lightbox-container {
		padding: 2rem 1rem; /* 32px 16px */
	}

	.ps-lightbox-close {
		top: 1rem; /* 16px */
		right: 1rem; /* 16px */
		width: 2.5rem; /* 40px */
		height: 2.5rem; /* 40px */
	}

	.ps-lightbox-close svg {
		width: 1.25rem; /* 20px */
		height: 1.25rem; /* 20px */
	}

	.ps-lightbox-prev,
	.ps-lightbox-next {
		width: 2.5rem; /* 40px */
		height: 2.5rem; /* 40px */
	}

	.ps-lightbox-prev {
		left: 0.5rem; /* 8px */
	}

	.ps-lightbox-next {
		right: 0.5rem; /* 8px */
	}

	.ps-lightbox-counter {
		bottom: 1rem; /* 16px */
		font-size: 0.75rem; /* 12px */
		padding: 0.375rem 1rem; /* 6px 16px */
	}

	.ps-lightbox-image {
		max-height: 75vh;
	}
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.ps-lightbox,
	.ps-lightbox-image,
	.ps-lightbox-close,
	.ps-lightbox-prev,
	.ps-lightbox-next,
	.has-lightbox .gallery-link::before,
	.has-lightbox .gallery-link::after {
		transition: none;
	}

	.ps-lightbox-spinner {
		animation: none;
		border-top-color: var(--ps-pink);
	}
}