/**
 * 极客多媒体智能相册 - 前端样式
 * 深色外观 / 竖图完整显示（object-fit: contain）/ 多种切换效果 / 全屏
 */

.gsg-gallery {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 1.5em auto;
	padding: 10px;
	background: #1b1b20;
	border-radius: var(--gsg-radius, 14px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
	font-size: 0;
}

.gsg-gallery *,
.gsg-gallery *::before,
.gsg-gallery *::after {
	box-sizing: border-box;
}

/* ---------- 主舞台：等比自适应，竖图完整显示不裁切 ---------- */
.gsg-stage {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-height: 80vh;
	margin: 0 auto;
	border-radius: max(0px, calc(var(--gsg-radius, 14px) - 4px));
	background: #111114;
	font-size: 14px;
	outline: none;
}

.gsg-stage:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.gsg-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.gsg-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
	z-index: 2;
}

/* 关键：contain + max 约束，任何横竖尺寸都完整落在画布内 */
.gsg-slide img.gsg-img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: default;
	border-radius: 0;
	box-shadow: none;
}

.gsg-slide video {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background: #000;
}

/* 说明文字 */
.gsg-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	max-width: 100%;
	padding: 22px 16px 10px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 3;
}

.gsg-gallery:hover .gsg-slide.is-active .gsg-caption {
	opacity: 1;
}

/* ---------- 切换效果 ---------- */
/* 淡入淡出（默认） */
.gsg-effect-fade .gsg-slide {
	transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}
.gsg-effect-fade .gsg-slide.is-active {
	transition-delay: 0s;
}

/* 左右滑动（方向感知） */
.gsg-effect-slide .gsg-slide {
	transform: translateX(calc(var(--gsg-d, 1) * 60px));
	transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.5s;
}
.gsg-effect-slide .gsg-slide.is-active {
	transform: translateX(0);
	transition-delay: 0s;
}

/* 缩放 */
.gsg-effect-zoom .gsg-slide {
	transform: scale(1.07);
	transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.55s;
}
.gsg-effect-zoom .gsg-slide.is-active {
	transform: scale(1);
	transition-delay: 0s;
}

/* 翻转 */
.gsg-effect-flip .gsg-stage {
	perspective: 1400px;
}
.gsg-effect-flip .gsg-slide {
	transform: perspective(1400px) rotateY(calc(var(--gsg-d, 1) * 16deg));
	transform-origin: center;
	transition: opacity 0.4s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}
.gsg-effect-flip .gsg-slide.is-active {
	transform: rotateY(0);
	transition-delay: 0s;
}

/* 无效果 */
.gsg-effect-none .gsg-slide {
	transition: none;
}

/* ---------- 主画布导航箭头 ---------- */
.gsg-nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: #fff;
	cursor: pointer;
	background: rgba(20, 20, 24, 0.6);
	border: none;
	border-radius: 50%;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.25s ease, background 0.25s ease;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.gsg-nav.gsg-prev {
	left: 12px;
}

.gsg-nav.gsg-next {
	right: 12px;
}

.gsg-gallery:hover .gsg-nav,
.gsg-stage:focus-within .gsg-nav {
	opacity: 1;
}

.gsg-nav:hover {
	background: rgba(20, 20, 24, 0.85);
}

.gsg-nav:active {
	transform: translateY(-50%) scale(0.92);
}

/* ---------- 全屏按钮 ---------- */
.gsg-fs {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
	background: rgba(20, 20, 24, 0.55);
	border: none;
	border-radius: 50%;
	transition: background 0.25s ease, transform 0.25s ease;
}

.gsg-fs:hover {
	background: rgba(20, 20, 24, 0.85);
	transform: scale(1.08);
}

/* ---------- 计数器 ---------- */
.gsg-counter {
	position: absolute;
	right: 12px;
	bottom: 10px;
	z-index: 5;
	padding: 3px 10px;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(20, 20, 24, 0.55);
	border-radius: 999px;
	pointer-events: none;
}

/* ---------- 缩略图导航 ---------- */
.gsg-thumbs-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
}

.gsg-thumbs {
	display: flex;
	flex: 1 1 auto;
	gap: 10px;
	max-width: 100%;
	padding: 4px 2px;
	font-size: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}

.gsg-thumbs::-webkit-scrollbar {
	display: none;
}

.gsg-thumb {
	position: relative;
	flex: 0 0 auto;
	width: 96px;
	height: 64px;
	padding: 0;
	cursor: pointer;
	background: #111114;
	border: 2px solid transparent;
	border-radius: max(0px, calc(var(--gsg-radius, 14px) * 0.5 - 1px));
	overflow: hidden;
	opacity: 0.6;
	transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.gsg-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gsg-thumb:hover {
	opacity: 0.9;
}

.gsg-thumb.is-active {
	border-color: #ffffff;
	opacity: 1;
}

.gsg-thumb-play,
.gsg-thumb-videoicon {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 13px;
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.gsg-thumb-videoicon {
	font-size: 14px;
}

.gsg-t-nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	background: rgba(60, 60, 68, 0.4);
	border: none;
	border-radius: 50%;
	transition: background 0.25s ease;
}

.gsg-t-nav:hover {
	background: rgba(60, 60, 68, 0.8);
}

/* ---------- 全屏状态 ---------- */
.gsg-gallery:fullscreen {
	width: 100%;
	height: 100%;
	max-width: none;
	padding: 14px;
	background: #0b0b0d;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.gsg-gallery:fullscreen .gsg-stage {
	max-height: none;
	height: 100%;
	flex: 1 1 auto;
}

/* 无原生全屏 API 时的模拟全屏 */
.gsg-gallery.gsg-faux-fs {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483000;
	width: 100vw;
	height: 100vh;
	max-width: none;
	margin: 0;
	padding: 14px;
	background: #0b0b0d;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.gsg-gallery.gsg-faux-fs .gsg-stage {
	max-height: none;
	height: 100%;
	flex: 1 1 auto;
}

/* ---------- 移动端 ---------- */
@media (hover: none) {
	.gsg-nav {
		opacity: 1;
		width: 34px;
		height: 34px;
		background: rgba(20, 20, 24, 0.5);
	}
	.gsg-thumb {
		width: 76px;
		height: 52px;
	}
	.gsg-caption {
		opacity: 1;
		padding-top: 16px;
	}
}

@media (max-width: 480px) {
	.gsg-gallery {
		padding: 8px;
		border-radius: 10px;
	}
	.gsg-t-nav {
		display: none;
	}
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
	.gsg-slide,
	.gsg-nav,
	.gsg-thumb,
	.gsg-fs {
		transition: none !important;
		animation: none !important;
	}
}