/* -------------------------------------------------------------------------------- */
/*	云集画廊：缩略图网格与灯箱
/*	自带明暗配色，跟随站点 html[data-theme] 切换
/* -------------------------------------------------------------------------------- */

:root {
	--yjg-gap: 1.2rem;
	--yjg-radius: .8rem;
	--yjg-surface: #FFFFFF;
	--yjg-text: #1B2530;
	--yjg-text-soft: #44505C;
	--yjg-muted: #6F7B87;
	--yjg-border: #E4E9EF;
	--yjg-hover: rgba( 15, 25, 35, .06 );
	--yjg-overlay: rgba( 10, 14, 19, .92 );
	--yjg-shadow: 0 .4rem 1.6rem rgba( 15, 25, 35, .12 );
}

[data-theme="dark"] {
	--yjg-surface: #11171E;
	--yjg-text: #E8EDF3;
	--yjg-text-soft: #B4BFCC;
	--yjg-muted: #8794A2;
	--yjg-border: #2E3946;
	--yjg-hover: rgba( 255, 255, 255, .07 );
	--yjg-overlay: rgba( 3, 6, 10, .96 );
	--yjg-shadow: 0 .4rem 1.6rem rgba( 0, 0, 0, .5 );
}

/* 网格 */

.yj-gallery {
	display: grid;
	gap: var(--yjg-gap);
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	margin: 2rem 0;
}

@media ( max-width: 600px ) {
	.yj-gallery {
		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
		gap: .8rem;
	}
}

/* 指定列数的短代码用法 */

.yj-gallery-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yj-gallery-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yj-gallery-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media ( max-width: 700px ) {
	.yj-gallery-cols-3,
	.yj-gallery-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.yj-gallery-item {
	aspect-ratio: var(--yjg-ratio, 4 / 3);
	background: var(--yjg-surface);
	border: 1px solid var(--yjg-border);
	border-radius: var(--yjg-radius);
	display: block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}

.yj-gallery-item:hover,
.yj-gallery-item:focus-visible {
	box-shadow: var(--yjg-shadow);
	transform: translateY(-2px);
}

.yj-gallery-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.yj-gallery-item img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
	width: 100%;
}

.yj-gallery-item:hover img {
	transform: scale( 1.04 );
}

/* 图注：默认隐藏，悬停或聚焦时浮现 */

.yj-gallery-caption {
	background: linear-gradient( transparent, rgba( 10, 14, 19, .78 ) );
	bottom: 0;
	color: #FFFFFF;
	font-size: 1.2rem;
	left: 0;
	opacity: 0;
	overflow: hidden;
	padding: 1.6rem .8rem .6rem;
	position: absolute;
	right: 0;
	text-overflow: ellipsis;
	transition: opacity .2s ease;
	white-space: nowrap;
}

.yj-gallery-item:hover .yj-gallery-caption,
.yj-gallery-item:focus-visible .yj-gallery-caption {
	opacity: 1;
}

.yj-gallery-empty {
	color: var(--yjg-muted);
	font-size: 1.4rem;
	margin: 2rem 0;
}

/* 灯箱 */

.yj-lightbox {
	align-items: center;
	background: var(--yjg-overlay);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 99999;
}

.yj-lightbox[hidden] {
	display: none;
}

.yj-lightbox-stage {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-height: 92vh;
	max-width: 96vw;
	outline: none;
}

.yj-lightbox-img {
	border-radius: var(--yjg-radius);
	box-shadow: 0 1rem 4rem rgba( 0, 0, 0, .5 );
	display: block;
	max-height: 84vh;
	max-width: 96vw;
	object-fit: contain;
}

.yj-lightbox-bar {
	align-items: center;
	color: #E8EDF3;
	display: flex;
	font-size: 1.3rem;
	gap: 1.2rem;
	justify-content: center;
	max-width: 96vw;
}

.yj-lightbox-caption {
	color: rgba( 232, 237, 243, .82 );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.yj-lightbox-count {
	color: rgba( 232, 237, 243, .55 );
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

.yj-lightbox-btn {
	align-items: center;
	background: rgba( 255, 255, 255, .1 );
	border: none;
	border-radius: 50%;
	color: #FFFFFF;
	cursor: pointer;
	display: flex;
	font-size: 2.4rem;
	height: 4.4rem;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	transition: background-color .2s ease;
	width: 4.4rem;
	-webkit-tap-highlight-color: transparent;
}

.yj-lightbox-btn:hover,
.yj-lightbox-btn:focus-visible {
	background: rgba( 255, 255, 255, .22 );
	outline: none;
}

.yj-lightbox-prev { left: 2vw; }
.yj-lightbox-next { right: 2vw; }

.yj-lightbox-close {
	font-size: 2.8rem;
	right: 2vw;
	top: 3vh;
}

@media ( max-width: 700px ) {
	.yj-lightbox-btn {
		font-size: 2rem;
		height: 3.8rem;
		width: 3.8rem;
	}

	.yj-lightbox-prev { left: 1rem; }
	.yj-lightbox-next { right: 1rem; }
	.yj-lightbox-close { right: 1rem; top: 1.6rem; }
}

@media ( prefers-reduced-motion: reduce ) {
	.yj-gallery-item,
	.yj-gallery-item img,
	.yj-gallery-caption,
	.yj-lightbox-btn {
		transition: none;
	}
}