/* =======================================================
   画廊基础组件 (所有布局通用)
   基础类： pswp-gallery, 对应 photoswipe 的监听
======================================================= */

/* 每个独立的卡片盒子 */
.pswp-gallery .gallery-item {
  position: relative;
  /* 极其重要：为浮层提供定位基准 */
  overflow: hidden;
  border-radius: 8px;
  /* 圆角 */
  margin: 0;
  /* 重置默认 margin */
  background: #f8f8f8;
  /* 加载出图前的底色 */
}

.pswp-gallery .gallery-item a {
  display: block;
  width: 100%;
  height: 100%;
}

.pswp-gallery .gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 保证图片按比例填充不变形 */
  transition: transform 0.3s ease;
  /* 鼠标悬停放大的过渡动画 */
}

/* 鼠标悬停时图片微微放大，增加高级感 */
.pswp-gallery .gallery-item:hover img {
  transform: scale(1.03);
}

/* =======================================================
   浮层系统：标题 与 视频播放按钮
======================================================= */

/* --- 顶部文字悬浮层 --- */
.pswp-gallery .gallery-caption {
  position: absolute;
  top: 0;
  /* 吸附在顶部 */
  left: 0;
  width: 100%;
  z-index: 2;
  /* 浮在图片(底层)之上 */

  /* 顶部黑色渐变，确保任何图片上白字都能看清 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  color: #fff;
  padding: 12px 12px 30px;
  font-size: 14px;
  margin: 0;

  /* 【关键】防止文字遮罩拦截点击，确保能点击打开大图 */
  pointer-events: none;
  opacity: 0.7;
}

.pswp-gallery .gallery-item:hover .gallery-caption {
  opacity: 1;
}

/* --- 视频播放图标悬浮层 --- */
.pswp-gallery .is-video {
  position: relative;
  display: block;
}

.pswp-gallery .is-video::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  /* 层级最高，浮在标题和图片之上 */

  /* 播放按钮样式 */
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  /* 毛玻璃高级效果 */
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding-left: 4px;
  /* 视觉修正播放三角居中 */

  pointer-events: none;
  /* 同样不可拦截点击 */
}


/* =======================================================
   三种排版模式 (在使用时选一个类名加到父容器即可)
======================================================= */

/* --- 模式 1：瀑布流排版-横向优先排序 (依赖 Masonry.js) --- */
.gallery-masonry-row {
  width: 100%;
  /* 清除浮动，防止容器高度塌陷 */
  margin: 0 auto;
  min-height: 1px;
}

.gallery-masonry-row::after {
  content: "";
  display: block;
  clear: both;
}

.gallery-masonry-row .gallery-item {
  float: left;
  width: calc(50% - 5px); /* 手机 2 列 */
  margin-bottom: 10px;
  
  /* 关键：防止 Masonry 计算重叠 */
  /* 如果有文字描述，这里需要特殊处理，或者只给内部的 img 容器设比例 */
  aspect-ratio: var(--w) / var(--h); 
}

/* 如果你的 caption 增加了额外高度，建议将比例给到包裹图片的 a 标签 */
.gallery-masonry-row .gallery-item a {
  display: block;
  width: 100%;
  aspect-ratio: var(--w) / var(--h);
  background: #eee; /* 加载前的占位色 */
}

/* 给 Masonry.js 定位宽高的辅助元素 */
.gallery-masonry-row .grid-sizer { width: calc(50% - 5px); }
.gallery-masonry-row .gutter-sizer { width: 10px; }

@media (min-width: 768px) {
  .gallery-masonry-row .gallery-item,
  .gallery-masonry-row .grid-sizer {
    width: calc(33.333% - 8px); /* 电脑 3 列 */
  }
  .gallery-masonry-row .gutter-sizer { width: 12px; }
}

/* --- 模式 2：瀑布流排版 (Masonry) --- */
/* 特点：宽度固定，基于 CSS，只能实现纵向优先排布；顺序重要的话不是很推荐 */
.gallery-masonry {
  column-count: 2;
  /* 手机默认 2 列 */
  column-gap: 10px;
  /* 列间距 */
}

.gallery-masonry .gallery-item {
  break-inside: avoid;
  /* 防止单张图被切成两半放到两列 */
  margin-bottom: 10px;
  /* 上下行间距 */
}

/* 电脑端自动变为 3 列 */
@media (min-width: 768px) {
  .gallery-masonry {
    column-count: 3;
    column-gap: 12px;
  }

  .gallery-masonry .gallery-item {
    margin-bottom: 12px;
  }
}


/* --- 模式 3：自适应行高排版 (Justified) --- */
/* 特点：每一行的高度整齐，宽度自动拉伸填满，适合大量横图/视频 */
.gallery-justified {
  display: flex;
  flex-wrap: wrap;
  /* 自动换行 */
  gap: 10px;
  /* 间距 */
}

.gallery-justified .gallery-item {
  flex-grow: 1;
  /* 自动拉伸填满剩余宽度 */
  height: 200px;
  /* 【核心】这里的 200px 是这一行的基准高度 */
}

/* 保护机制：防止最后一行只有 1 张图时被无限拉扯变形 */
.gallery-justified::after {
  content: "";
  flex-grow: 999;
}

/***** ============
  custom pswp
**/

.pswp--custom-bg {
  --pswp-bg: #7079bf;
}