/**
 * 图片灯箱样式（配合 assets/js/lightbox.js）。
 *
 * 结构：
 *   .tc-lb            遮罩层（默认 display:none，加 .is-open 才显示）
 *   .tc-lb__backdrop  半透明背景，点击关闭
 *   .tc-lb__img       高清原图（contain，不裁切）
 *   .tc-lb__caption   图片说明
 *   .tc-lb__counter   「3 / 8」计数
 *   .tc-lb__btn       关闭 / 上一张 / 下一张
 *
 * @package Tuchang_Corporate
 */

.tc-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 56px);
}

.tc-lb.is-open {
	display: flex;
	animation: tc-lb-fade 0.18s var(--tc-ease) both;
}

.tc-lb-lock {
	overflow: hidden;
}

.tc-lb__backdrop {
	position: absolute;
	inset: 0;
	/*
	 * 遮罩必须足够不透明：首页背景是浅色内容，
	 * 之前用 0.92 时下方的标题与按钮会隐约透出来，画面显脏。
	 */
	background: rgba(9, 20, 36, 0.97);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.tc-lb__img,
.tc-lb__video {
	position: relative;
	z-index: 1;
	display: none;
	max-width: 100%;
	max-height: calc(100vh - clamp(80px, 12vw, 150px));
	width: auto;
	height: auto;
	object-fit: contain;
	background: #fff;
	border-radius: var(--tc-radius-sm);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

/*
 * 图片与视频共用同一块舞台，同一时刻只显示一个。
 *
 * 用类而不是 hidden 属性来切换：UA 的 `[hidden]{display:none}` 优先级最低，
 * 本文件下面任何一条 `display` 都能把它顶掉 —— 那样「隐藏」会静默失效，
 * 结果是一张破图永远压在视频上面。
 */
.tc-lb:not(.is-video) .tc-lb__img,
.tc-lb.is-video .tc-lb__video {
	display: block;
}

.tc-lb__video {
	background: #000;
}

.tc-lb__video.is-error {
	min-width: 320px;
	min-height: 180px;
	background: #2a1418;
}

.tc-lb__img.is-loading {
	min-width: 160px;
	min-height: 120px;
	opacity: 0.5;
}

.tc-lb__img.is-error {
	min-width: 240px;
	min-height: 140px;
}

.tc-lb__caption {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: clamp(10px, 2.5vw, 26px);
	max-width: min(720px, 80vw);
	margin: 0;
	transform: translateX(-50%);
	font-size: var(--tc-fs-sm);
	color: var(--tc-text-inverse-soft);
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.tc-lb__caption[hidden] {
	display: none;
}

.tc-lb__counter {
	position: absolute;
	z-index: 2;
	top: clamp(12px, 2.5vw, 24px);
	left: 50%;
	margin: 0;
	padding: 3px 12px;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	font-size: var(--tc-fs-xs);
	color: var(--tc-white);
	font-variant-numeric: tabular-nums;
}

.tc-lb__counter[hidden] {
	display: none;
}

.tc-lb__btn {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	color: var(--tc-white);
	cursor: pointer;
	transition:
		background var(--tc-dur) var(--tc-ease),
		border-color var(--tc-dur) var(--tc-ease);
}

.tc-lb__btn:hover,
.tc-lb__btn:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border-color: var(--tc-white);
}

.tc-lb__btn--close {
	top: clamp(12px, 2.5vw, 24px);
	right: clamp(12px, 2.5vw, 24px);
}

.tc-lb__btn--nav {
	top: 50%;
	transform: translateY(-50%);
}

.tc-lb__btn--prev {
	left: clamp(10px, 2.5vw, 28px);
}

.tc-lb__btn--next {
	right: clamp(10px, 2.5vw, 28px);
}

/* 只有一张图时不显示翻页按钮。 */
.tc-lb.is-single .tc-lb__btn--nav {
	display: none;
}

@keyframes tc-lb-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (max-width: 599px) {
	.tc-lb__btn {
		width: 40px;
		height: 40px;
	}

	.tc-lb__img,
	.tc-lb__video {
		max-height: calc(100vh - 150px);
	}
}