@charset "UTF-8";
/* ==========================================================================
   成都亲子游 · 行程小助手  —  viewer.css
   实景图画廊（详情页）+ 全屏看图器
   类名与 public/js/views.js 的 photoGallery()、public/js/viewer.js 一一对应。
   依赖 app.css 的设计令牌（--c-*、--r-*、--sp-*）。
   本文件不使用 @import、不引用外部图片、不使用 !important
   ========================================================================== */

/* ===== 1. 详情页顶部：实景照片当主角 =====
   🔴 第一版把「卡通插画」和「实景照片」上下堆在一起，问题是：既重复，
   又把照片挤到首屏之外 —— 而用户点开详情就是想看"这地方长什么样"。
   现在的规则：**有照片就让照片当 hero，插画不再显示**（没照片时才用插画兜底）。 */

.hero-photo__wrap {
  display: grid;
  gap: var(--sp-2);
}

/* 主图：可点进全屏，所以用 button 而不是 div（键盘也能聚焦） */
.hero-photo {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(160deg, var(--c-primary-soft), var(--c-bg));
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--ease-pop);
}
.hero-photo:active { transform: scale(.995); }

.hero-photo__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 「⛶ 全屏看 N 张」角标 */
.hero-photo__badge {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: rgba(53, 48, 44, .66);
  color: #fffdf8;
  font-size: .84rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

/* 缩略图条：横向滚动不换行（换行会让高矮跳动，小朋友点不准） */
.hero-photo__strip {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.hero-photo__strip::-webkit-scrollbar { display: none; }

.hero-photo__thumb {
  flex: 0 0 auto;
  width: 78px;
  height: 58px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-surface-2);
  cursor: pointer;
  opacity: .68;
  transition: opacity var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-pop);
}
.hero-photo__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo__thumb.is-active {
  opacity: 1;
  border-color: var(--c-primary);
  transform: scale(1.05);
}

.hero-photo__hint {
  margin: var(--sp-2) 0 0;
  color: var(--c-ink-soft);
  font-size: .84rem;
  text-align: center;
}

/* 兼容旧的画廊类名（历史截图 / 文档里引用过，保留样式避免样式表里出现"孤儿类"） */
.gallery__main,
.gallery__img,
.gallery__zoom,
.gallery__strip,
.gallery__thumb,
.gallery__count { /* 已由 .hero-photo 系列取代，此处仅作占位保留 */ }

/* ===== 2. 全屏看图器 ===== */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: rgba(24, 20, 18, .96);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  touch-action: none;              /* 自己处理手势，禁止浏览器缩放/滚动 */
  overscroll-behavior: contain;
}
.viewer[hidden] { display: none; }
.viewer.is-open { opacity: 1; }

/* 顶部：标题 + 计数 + 关闭 */
.viewer__top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: calc(var(--sp-2) + env(safe-area-inset-top)) var(--sp-3) var(--sp-2);
  color: #fffdf8;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent);
}

.viewer__meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}

.viewer__title {
  font-size: calc(1rem * var(--font-scale));
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer__counter {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .18);
  font-size: .82rem;
  font-weight: 700;
}

.viewer__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fffdf8;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.viewer__close:active { transform: scale(.92); }

/* 舞台：图片在自己里面做 transform，不重排 */
.viewer__stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}

.viewer__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.viewer.is-zoomed .viewer__stage { cursor: grab; }

/* 左右切换按钮（小屏上小一点，不挡图） */
.viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  border: 0;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .14);
  color: #fffdf8;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}
.viewer__nav--prev { left: var(--sp-2); }
.viewer__nav--next { right: var(--sp-2); }
.viewer__nav:active { background: rgba(255, 255, 255, .28); }
/* 放大时藏掉箭头，避免挡着看细节 */
.viewer.is-zoomed .viewer__nav { opacity: 0; pointer-events: none; }

/* 底部：缩略图 + 操作提示 */
.viewer__bottom {
  position: relative;
  z-index: 3;
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent);
}

.viewer__thumbs {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.viewer__thumbs::-webkit-scrollbar { display: none; }
.viewer__thumbs:empty { display: none; }

.viewer__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 42px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  opacity: .55;
  cursor: pointer;
}
.viewer__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.viewer__thumb.is-active {
  opacity: 1;
  border-color: var(--c-accent);
}

.viewer__hint {
  display: block;
  margin-top: var(--sp-2);
  text-align: center;
  color: rgba(255, 253, 248, .7);
  font-size: .78rem;
}

/* 打开全屏时锁住背景滚动 */
body.has-viewer { overflow: hidden; }

/* ===== 3. 响应式 ===== */
@media (min-width: 820px) {
  .hero-photo__img { aspect-ratio: 16 / 10; }
  .hero-photo__thumb { width: 98px; height: 72px; }
  .viewer__nav { width: 56px; height: 80px; font-size: 2.4rem; }
  .viewer__thumb { width: 72px; height: 54px; }
}

@media (max-width: 359px) {
  .hero-photo__thumb { width: 62px; height: 47px; }
  .viewer__hint { display: none; }   /* 小屏优先给图留空间 */
}

/* ===== 4. 动效降级 ===== */
@media (prefers-reduced-motion: reduce) {
  .viewer,
  .hero-photo,
  .hero-photo__thumb { transition: none; }
  .hero-photo:active,
  .hero-photo__thumb.is-active { transform: none; }
}