/* Photo Gallery stylesheet - 半透明卡片式照片画廊 */

/* 定义玻璃感相关的变量 */
:root {
  --glass-border: rgba(255, 255, 255, 0.2); /* 玻璃感边框：光亮半透明 */
  --glass-bg: rgba(255, 255, 255, 0.1); /* 玻璃背景：极浅的半透明白 */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); /* 玻璃阴影 */
  --glass-highlight: rgba(255, 255, 255, 0.05); /* 玻璃高光 */
  --hover-glass-border: rgba(255, 127, 80, 0.4); /* 悬停时的玻璃边框 */
  --hover-glass-highlight: rgba(255, 127, 80, 0.1); /* 悬停时的高光 */
  /* Lightbox responsive variables */
  --lb-padding: 22px;
  --lb-max-width: 90%;
  --lb-max-height: 85vh;
}

html {
  scroll-behavior: smooth; /* 平滑滚动效果 */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg, #1a1a1a, #333); /* 渐变背景增强玻璃效果的对比度 */
  color: #f5f5f5;
  min-height: 100vh;
  margin: 0;
  padding: 20px 0;
}

.gallery-real-stack {
  display: none !important; /* 已取消堆叠预览的视觉显示 */
}

.gallery-real-stack.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.96);
}

.gallery-real-stack .stack-preview-card {
  position: absolute;
  width: clamp(160px, 22vw, 300px);
  max-height: 64vh;
  transform-origin: center center;
  transform: translate(var(--offset-x, 0px), var(--offset-y, 0px)) rotate(var(--rotate, 0deg)) scale(var(--scale, 1));
  transition: transform 0.38s ease, opacity 0.38s ease;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.94;
  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.38);
  /* 使用更透明的玻璃背景，让页面背景可以透出，同时保留对比度 */
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(20,20,20,0.25));
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 窄屏（移动设备）适配：发牌从页面左侧更靠上，堆叠更小 */
@media (max-width: 600px) {
  .gallery-real-stack {
    left: 8%;
    transform: translate(-8%, -48%) scale(0.68);
  }

  .gallery-real-stack .stack-preview-card {
    width: clamp(120px, 36vw, 180px);
    opacity: 0.98;
  }
}

.gallery-real-stack .stack-preview-card.image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 更轻的渐变背景：降低不透明度以便能看到页面背景 */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(40, 40, 40, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 14px 16px;
  box-shadow: 0 28px 52px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 0;
}

.gallery-real-stack .stack-preview-card.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), transparent);
  pointer-events: none;
  z-index: -1;
}

.gallery-real-stack .stack-preview-card.hp-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 18px 20px 16px;
  background: rgba(18, 18, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.gallery-real-stack .stack-preview-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.gallery-real-stack .stack-preview-card p,
.gallery-real-stack .stack-preview-card .hp-caption {
  margin-top: 0.75rem;
  margin-bottom: 0;
  padding: 0 1rem 1rem;
  text-align: center;
  color: rgba(240, 240, 240, 0.92);
  font-size: 0.9rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.gallery-real-stack .stack-preview-card .hp-gallery-img-wrapper,
.gallery-real-stack .stack-preview-card .hp-figure {
  transform: none !important;
  min-height: auto;
  box-shadow: none;
  /* 保持透明以便页面背景透出 */
  background: transparent;
  border: none;
  padding: 0;
}

.gallery-real-stack .stack-preview-card .hp-gallery-img-wrapper a {
  padding: 0;
  box-shadow: none;
}

.gallery-real-stack .stack-preview-card .hp-gallery-img-wrapper img,
.gallery-real-stack .stack-preview-card .hp-figure img {
  max-width: 100%;
  max-height: 100%;
  transform: none !important;
  filter: none !important;
}

.gallery-real-stack .stack-preview-card .hp-caption {
  padding: 0.75rem 1rem 1rem;
}
h1 {
  color: coral;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
h2 {
  color: coral;
  margin: 3rem 0 1.5rem;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  text-align: center;
  width: 100%;
}
.grid-container {
  /* increase base column width so folded (column) layout shows larger thumbnails */
  columns: 4 240px; /* 减少列数，增加每列宽度 */
  /* increase horizontal spacing between columns */
  column-gap: 3rem; /* 增加列间距从2rem到3rem */
  width: 92%; /* 略微增大宽度以保持边距均衡 */
  margin: 0 auto;
  position: relative; /* 为子元素的定位提供参考 */
  brackground: rgba(0, 0, 0, 0);
}

/* 确保图片容器可点击 */
.grid-container .image-wrapper {
  cursor: pointer;
}

/* 图片保持完全不透明 - 增强选择器优先级 */
.grid-container .image-wrapper img {
  width: 100%;
  border-radius: 5px;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 1 !important; /* 确保图片不透明 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 给图片加一点微妙的阴影 */
}

/* 文字也保持完全不透明 */
.grid-container .image-wrapper p {
  margin: 10px 0 5px;
  padding: 0;
  text-align: center;
  font-style: italic;
  color: #e0e0e0;
  font-size: 0.95rem;
  opacity: 1 !important; /* 确保文字不透明 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* 增强文字可读性 */
}

/* Lightbox 弹出层样式 */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  /* 背景图将通过 JS 动态设置 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Ensure lightbox always appears above all other UI elements */
  z-index: 2147483647 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1), visibility 0.5s;
}

/* 添加一个伪元素作为模糊遮罩层 */
.lightbox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.6);
  -webkit-filter: blur(40px) brightness(0.6);
  z-index: -1;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

/* 移动端降低模糊强度以提升性能 */
@media (max-width: 768px) {
  .lightbox::before {
    filter: blur(20px) brightness(0.6);
    -webkit-filter: blur(20px) brightness(0.6);
  }
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.lightbox-content {
  /* padding variable so buttons can align to visual content (adjusted by media queries) */
  background: rgba(30, 30, 30, 0.7); /* 半透明背景 */
  backdrop-filter: blur(15px); /* 背景模糊效果 - 玻璃感 */
  -webkit-backdrop-filter: blur(15px); /* Safari兼容性 */
  border: 1px solid rgba(255, 255, 255, 0.15); /* 玻璃边框 */
  padding: var(--lb-padding);
  border-radius: 20px; /* 更圆的边角 */
  max-width: var(--lb-max-width);
  max-height: var(--lb-max-height);
  /* allow absolutely-positioned button container to escape the content box */
  overflow: visible;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  position: relative;
  display: block; /* ensure it fills the wrapper's width */
  width: 100%;
  box-sizing: border-box; /* include padding/border in width calculations */
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), 
              opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 内层包装：用于把按钮定位为相对于内容的上方 */
.lightbox-inner {
  position: relative; /* 使内部绝对定位相对于此块 */
  display: inline-block; /* shrink-wrap 内容宽度 */
  max-width: 90%; /* 增加到与内容宽度一致 */
  width: auto; /* 保持包裹内容宽度，以便按钮能与内容右边界对齐 */
  box-sizing: border-box; /* make width calculations reliable */
}

/* 按钮容器 - 绝对定位，相对于 .lightbox-content 的右上方（直接子元素） */
.lightbox-content > .button-container {
  position: absolute;
  bottom: calc(100% + 12px); /* 放在 .lightbox-content 顶部上方，留 12px 间隙 */
  /* 把按钮右边界对齐到内容可视区域（不含 padding） */
  /* nudge a bit to the right: reduce the right offset so container sits slightly beyond content edge */
  right: calc(var(--lb-padding) - 8px);
  display: flex;
  gap: 10px;
  z-index: 1500;
  opacity: 0;
  transition: opacity 0.18s ease 0.08s, transform 0.18s ease;
  transform: translateY(-6px);
  pointer-events: none; /* 默认不可交互，激活时启用 */
}

/* 内容和按钮在lightbox激活时显示 */
.lightbox.active .lightbox-content {
  transform: scale(1.01); /* 略微放大显示更大的图片 */
  opacity: 1;
}

.lightbox.active .lightbox-content > .button-container {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* 激活时允许交互 */
}

/* 当视口较窄时，减小偏移以避免超出 */
@media (max-width: 480px) {
  .lightbox-inner {
    max-width: 92%;
  }
  .lightbox-content > .button-container {
    bottom: calc(100% + 8px);
  /* mobile: smaller nudge to the right */
  right: calc(var(--lb-padding) - 8px);
  }
}

.lightbox-img {
  display: block; /* 默认显示 */
  max-width: 100%;
  max-height: calc(var(--lb-max-height) - (var(--lb-padding) * 2)); /* keep padding accounted */
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  filter: none;
  object-fit: contain; /* 确保图片始终保持比例 */
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); /* 添加阴影增强立体感 */
  transform: scale(1); /* 初始大小 */
  transition: transform 0.3s ease; /* 平滑过渡 */
}

.lightbox-text {
  margin-top: 15px;
  padding: 0;
  text-align: center;
  font-style: italic;
  color: #f0f0f0;
  font-size: 1.2em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 图片包装器样式 - 玻璃感效果 */
.grid-container .image-wrapper {
  display: inline-block !important;
  width: 100% !important;
  /* 调整边框颜色以更适配深色背景（较低对比以减少刺眼感） */
  border: solid 1px rgba(255,255,255,0.06) !important; /* 更暗的玻璃边框 */
  /* 增大内部填充以给图片更多呼吸空间 */
  padding: 14px 18px !important; /* 增加左右填充 */
  box-shadow: var(--glass-shadow) !important; /* 玻璃阴影 */
  border-radius: 16px !important; /* 更圆的边角增强玻璃感 */
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
  /* 使用更透明的渐变背景以便页面背景透出，但保留玻璃高光 */
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(40,40,40,0.16)) !important;
  /* 适度降低模糊强度以兼顾性能与可见度 */
  backdrop-filter: blur(6px) !important; /* 背景模糊效果 - 轻量化 */
  -webkit-backdrop-filter: blur(6px) !important; /* Safari兼容性 */
  /* 增大外边距以扩大图片间隔 */
  margin: 0 1rem 2.4rem 1rem !important; /* 增加左右边距，也增加下边距 */
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 添加玻璃高光效果 */
.grid-container .image-wrapper::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 50% !important; /* 高光只占上半部分 */
  background: linear-gradient(to bottom, var(--glass-highlight), transparent) !important;
  /* 减弱高光强度，避免完全遮挡背景 */
  opacity: 0.15 !important;
  pointer-events: none !important; /* 不干扰鼠标事件 */
  z-index: -1 !important;
}

/* 悬停效果 - 增强区分度 */
.grid-container .image-wrapper:hover {
  border-color: rgba(255, 127, 80, 0.8); /* 半透明的珊瑚色边框 */
  transform: scale(1.06);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); /* 半透明阴影 */
  background-color: rgba(51, 51, 51, 0.7); /* 悬停时背景色略深 */
  z-index: 1;
}

main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  overflow-x: hidden; /* 防止水平溢出 */
  position: relative; /* 为子元素定位提供参考 */
  box-sizing: border-box;
}

body.parallax-active main {
  align-items: flex-start;
}

body.parallax-active main h1 {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

body:not(.parallax-active) main h1 {
  opacity: 1;
  transform: translateY(0);
}

footer {
  margin-top: 2rem;
  text-align: center;
  opacity: 0.7;
  color: #aaa;
  font-size: 0.9rem;
  width: 100%;
  padding: 1rem 0;
}

.close-button, .download-button {
  /* use clamp to scale between mobile and desktop */
  width: clamp(36px, 6.2vw, 56px);
  height: clamp(36px, 6.2vw, 56px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 3px 12px rgba(0,0,0,0.8);
  transition: transform .15s ease, background-color .15s ease;
  position: relative;
  z-index: 1600;
  padding: 0.12rem; /* ensure inner icon spacing scales */
}

.close-button {
  background: rgba(255,69,87,0.9);
}

.download-button {
  background: rgba(46,204,113,0.9);
}

/* hover & focus states */
.close-button:hover, .close-button:focus,
.download-button:hover, .download-button:focus {
  transform: scale(1.06);
  border-color: rgba(255,255,255,0.7);
}

/* visible focus ring for keyboard users */
.close-button:focus, .download-button:focus {
  outline: 3px solid rgba(255,255,255,0.12);
  outline-offset: 3px;
}

.close-button:before, .close-button:after {
  content: '';
  position: absolute;
  width: clamp(12px, 2.4vw, 18px);
  height: clamp(2px, 0.45vw, 2.8px);
  background-color: rgba(255, 255, 255, 0.9);
  /* center the cross lines inside the circular button */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.close-button:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-button:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 下载按钮图标 */
.download-button:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: clamp(5px, 1.1vw, 8px) solid transparent;
  border-right: clamp(5px, 1.1vw, 8px) solid transparent;
  border-top: clamp(6px, 1.2vw, 10px) solid rgba(255, 255, 255, 0.9);
  top: clamp(6px, 1.2vw, 10px);
  left: 50%;
  transform: translateX(-50%);
}

.download-button:after {
  content: '';
  position: absolute;
  width: clamp(1.2px, 0.28vw, 2.4px);
  height: clamp(8px, 1.8vw, 12px);
  background-color: rgba(255, 255, 255, 0.9);
  bottom: clamp(8px, 1.6vw, 14px);
  left: 50%;
  transform: translateX(-50%);
}

/* 在超窄竖屏设备上进一步压缩按钮，防止视觉上过大 */
@media (max-width: 420px), (orientation: portrait) {
  /* reduce lightbox padding and max dimensions on very small screens */
  :root {
    --lb-padding: 12px;
    --lb-max-width: 96%;
    --lb-max-height: 76vh;
  }
  .close-button, .download-button {
    width: clamp(32px, 7.2vw, 40px);
    height: clamp(32px, 7.2vw, 40px);
  }
  .close-button:before, .close-button:after { width: clamp(10px, 2.4vw, 14px); height: 2px; }
}

/* medium mobile adjustments */
@media (max-width: 768px) {
  :root {
    --lb-padding: 16px;
    --lb-max-width: 94%;
    --lb-max-height: 80vh;
  }
  .lightbox-content {
    padding: var(--lb-padding);
  }
  .lightbox-img {
    max-height: calc(var(--lb-max-height) - (var(--lb-padding) * 2));
  }
}




/* ======================================================================
   强制覆盖：将常见的包装器背景设为完全透明，移除遮罩和模糊，确保页面背景透出
   这些规则放在文件末尾以提高优先级，并使用 !important 来覆盖现有强样式。
   ====================================================================== */

/* 常见包装器：图片卡片、堆叠卡片、水平画廊容器 */
.image-wrapper,
.gallery-real-stack .stack-preview-card,
.gallery-real-stack .stack-preview-card.image-wrapper,
.gallery-real-stack .stack-preview-card .hp-gallery-img-wrapper,
.hp-gallery-img-wrapper,
.hp-gallery-horizontal-scroll-wrapper,
.grid-container .image-wrapper,
.grid-container .hp-gallery-img-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

/* 移除伪元素高光遮罩 */
.image-wrapper::before,
.gallery-real-stack .stack-preview-card.image-wrapper::before,
.grid-container .image-wrapper::before,
.hp-gallery-img-wrapper::before {
  opacity: 0 !important;
  display: none !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* 确保这些包装器的 z-index 不会遮挡页面背景 */
.image-wrapper,
.grid-container .image-wrapper,
.gallery-real-stack .stack-preview-card,
.hp-gallery-img-wrapper {
  z-index: 0 !important;
}

/* Restore scrollability for the rotated horizontal parallax shell which was
   inadvertently set to overflow: visible by the global transparent overrides.
   These rules are intentionally specific and placed at the end to ensure
   the hp-gallery horizontal scrolling and touch/drag interactions work. */
#parallax-gallery.active .hp-gallery .hp-gallery-horizontal-scroll-wrapper,
.hp-gallery .hp-gallery-horizontal-scroll-wrapper {
  overflow-y: auto !important; /* vertical scroll on the rotated wrapper */
  overflow-x: hidden !important;
  pointer-events: auto !important; /* ensure touch/mouse events reach it */
  -webkit-overflow-scrolling: touch !important; /* smooth native scrolling on iOS */
  touch-action: pan-y !important; /* hint to browser that vertical panning is expected */
}


/* 注意：上面已包含覆盖常见 wrapper 的透明规则，目的是让页面背景（css/background.css 中的 .background 或 html/body 背景）能透出。
   如果还看到遮挡，请在浏览器中清除缓存并检查是否有行内样式或其他样式表在页面末尾注入背景/遮罩。 */