/* --- 图片放大背景 --- */
body.theme-ethereal .single-detail__image--zoomed {
	background: var(--bg-primary);
}


/* 左侧画廊 */
.single-detail__gallery {
	position: sticky;
	top: calc(72px + var(--spacing-lg));
	height: fit-content;
	z-index: 1;
}


/* 相关推荐：提升层级避免被 sticky 画廊覆盖 */
.related-section {
	position: relative;
	z-index: 2;
}

.single-detail__slider {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.single-detail__viewport {
	position: relative;
	/* 高度随当前图片原始比例自适应：由 inline style 或 JS 设置 --img-ratio（宽/高） */
	aspect-ratio: var(--img-ratio, 1);
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-xl);
	background: var(--bg-secondary);
	border: 1px solid var(--border-light);
	transition: aspect-ratio 0.4s ease;
}


/* 高分辨率图片自适应模式：根据图片实际比例显示 */
.single-detail__viewport--expanded {
	aspect-ratio: var(--img-ratio, auto);
}


/* 图片在放大模式下的显示方式 */
.single-detail__viewport--expanded .single-detail__image {
	object-fit: contain;
}

.single-detail__track {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.single-detail__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity var(--transition-normal);
}

.single-detail__slide.active {
	opacity: 1;
}

.single-detail__image {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	/* 完整展示图片（不裁剪），配合视口 aspect-ratio 由图片原始比例决定高度 */
	object-fit: contain;
	cursor: zoom-in;
	transition: transform var(--transition-slow) var(--ease-out-expo);
}




/* 箭头按钮 */
.single-detail__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--overlay-ui);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-full);
	color: #fff;
	cursor: pointer;
	transition: all var(--transition-fast);
	z-index: 10;
}

.single-detail__arrow:hover {
	background: var(--overlay-ui-hover);
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: var(--shadow-glow);
}

.single-detail__arrow:active {
	transform: translateY(-50%) scale(0.92);
}

.single-detail__arrow--prev {
	left: var(--spacing-md);
}

.single-detail__arrow--next {
	right: var(--spacing-md);
}


/* 放大按钮 */
.single-detail__zoom-btn {
	position: absolute;
	top: var(--spacing-md);
	right: var(--spacing-md);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--overlay-ui);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-full);
	color: #fff;
	cursor: pointer;
	transition: all var(--transition-fast);
	z-index: 10;
}

.single-detail__zoom-btn:hover {
	background: var(--overlay-ui-hover);
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: var(--shadow-glow);
}


/* 图片计数 */
.single-detail__counter {
	position: absolute;
	top: var(--spacing-md);
	left: var(--spacing-md);
	padding: var(--spacing-xs) var(--spacing-md);
	background: var(--overlay-ui-strong);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--radius-full);
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	font-family: var(--font-mono);
	letter-spacing: var(--tracking-wide);
	z-index: 10;
}


/* 图片标题 */
.single-detail__captions {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
	background: linear-gradient(to top, var(--overlay-ui-full) 0%, transparent 100%);
	z-index: 10;
	pointer-events: none;
}

.single-detail__caption {
	display: none;
}

.single-detail__caption.active {
	display: block;
	animation: fadeIn var(--transition-fast);
}

.single-detail__caption-text {
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--text-sm);
	margin: 0;
	line-height: var(--leading-normal);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
}


/* 缩略图 */
.single-detail__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-sm);
}




/* 占位符 */
.single-detail__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	background: var(--bg-secondary);
	border-radius: var(--radius-xl);
	border: 1px dashed var(--border-color);
	color: var(--text-muted);
	gap: var(--spacing-md);
}

.single-detail__placeholder svg {
	opacity: 0.2;
}

.single-detail__placeholder-hint {
	font-size: var(--text-sm);
	color: var(--text-light);
}


/* 右侧内容 */
/* ================================================================
   文章详情 — 高端黑金风格
   ================================================================ */

/* --- 入场动画 --- */
@keyframes contentFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes accentLineGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes numberPop {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

.single-detail__content {
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    position: relative;
}


/* 画廊缩略图/放大按钮/计数器/标题样式已在上方定义，此处重复已删除 */

/* ============================================================
   移动端触摸目标优化（WCAG AA 标准：≥ 44x44px）
   ============================================================ */
@media (max-width: 768px) {
    /* 确保所有按钮最小触摸区域 44x44px */
    button,
    [type="button"],
    [type="submit"],
    [type="reset"],
    .button,
    .btn,
    .nav-action-link,
    .pose-card__overlay-fav,
	.favorite-btn,
	.menu-toggle,
	{
		min-width: 44px;
        min-height: 44px;
        padding: 12px 16px;  /* 增加内边距确保可点击区域 */
    }
    

    /* 画廊箭头按钮 */
    .single-detail__arrow {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    

    /* 缩略图按钮 */
    .single-detail__thumb-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 4px;
    }