/* ================================================================
   7. 第四屏 — 画廊布局 + 图片弹窗
   ================================================================ */

/* ┌────────────────────────────────────────────┐
 * │ 7.1  画廊基础布局                           │
 * └────────────────────────────────────────────┘ */

/* ── 画廊容器 ── */
.page-gallery-v2 {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 2;
  flex-direction: column;
  /* 禁止选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 边缘渐隐遮罩（上下 + 左右交叉） */
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 30%,
      black 50%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      black 30%,
      black 50%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 30%,
      black 50%,
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0%,
      black 30%,
      black 50%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ── 画廊内图片禁止拖拽和选中 ── */
.page-gallery-v2 img {
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* ── 照片容器（绝对定位，由 JS 控制位置） ── */
.photos {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

/* ── 照片行 ── */
.photos_line {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1px;
  height: 342em;
  margin-bottom: 48em;
  flex-shrink: 0;
  user-select: none;
}

/* ── 单张照片卡片 ── */
.photos_line_photo {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1px;
  width: 234em;
  height: 100%;
  margin-right: 36em;
  border-radius: 15em;
  background-color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}

/* ── 照片行和卡片的响应式字号（控制 em 单位的实际像素值） ── */
.photos_line,
.photos_line_photo {
  font-size: clamp(1px, 0.04vw + 0.15vh, 2.8px);
}

/* ── 照片图片填满容器 ── */
.page-gallery-v2 .photos_line_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 等比裁切填满 */
  display: block;
  transition: 0.3s ease;
}

/* ── 悬停放大效果 ── */
.page-gallery-v2 .photos_line_photo:hover img {
  transform: scale(1.2);
}

.photos_line_photo {
  will-change: transform;
  contain: layout style paint; /* ★ 限制影响范围 */
}

.photos_line_photo img {
  pointer-events: none; /* ★ 防止图片拦截鼠标事件 */
  transform: translateZ(0); /* ★ 强制 GPU 层 */
}