/* ============================================================
   影集（相册）前台样式 · gallery.css
   只服务两个页面：相册列表页的「开册区」、相册详情页的照片墙。
   基调与其他模块一致：扁平 + 通透玻璃；层次靠 1px 细边线，全站不用阴影。
   类名统一 gal- 前缀，避免与既有样式冲突。
   ============================================================ */

/* ============ 一、开册区：把几项一次填清楚 ============ */

/* 卡片本体：半透明玻璃底 + 一条细边线 */
.gal-new {
  position: relative;
  margin: 2px 0 30px;
  padding: 24px 26px 22px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand-line); /* 顶边一道细线：充当封面压印，不用阴影分层次 */
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}

/* 卡片抬头：标题在左，一句提示在右 */
.gal-new-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--brand-line);
}
.gal-new-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .3px; }
.gal-new-sub { margin: 0; color: var(--muted); font-size: 12.5px; }

/* 字段网格：两列，窄屏自动收成一列 */
.gal-new-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.gal-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gal-field > span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.gal-field > span em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 5px; }
.gal-field input,
.gal-field textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 11px 13px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .78);
  transition: border-color .18s, background .18s;
}
.gal-field input:hover,
.gal-field textarea:hover { border-color: var(--field-line-hover); }
.gal-field input:focus,
.gal-field textarea:focus { outline: none; border-color: var(--brand); background: #fff; }
.gal-field textarea { resize: vertical; min-height: 92px; line-height: 1.85; }
/* 只读项（作者）：底色调淡，一眼看出不用填 */
.gal-field input[readonly] { background: rgba(233, 241, 254, .6); color: var(--ink-soft); }

/* 通栏的一格（说明、版权声明都占满整行） */
.gal-span { grid-column: 1 / -1; }

/* 版权声明是只读说明：开册时程序自动落款，这里只是先让作者看见写了什么 */
.gal-note-ro {
  margin: 0;
  border: 1px dashed var(--brand-line);
  border-radius: var(--radius-sm);
  background: rgba(233, 241, 254, .45);
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.gal-note-ro b { color: var(--brand-strong); font-weight: 600; }

/* 卡片底栏：左边一句说明，右边按钮组 */
.gal-new-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.gal-new-hint { color: var(--muted); font-size: 12.5px; line-height: 1.8; }
.gal-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 按钮：一律不换行，主按钮实底、次按钮描边；按钮与链接共用同一套样子 */
.gal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background .18s, border-color .18s, color .18s;
}
.gal-btn-main { background: var(--brand); border-color: var(--brand); color: #fff; }
.gal-btn-main:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.gal-btn-ghost { background: rgba(255, 255, 255, .7); border-color: var(--line); color: var(--ink-soft); font-weight: 500; }
.gal-btn-ghost:hover { border-color: var(--brand-line); color: var(--brand-strong); }

/* 未登录时：同一张卡，只留一句话和登录入口 */
.gal-login { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.gal-login p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

/* ============ 二、详情页：三种看法的切换 ============ */

.gal-views { margin-bottom: 34px; }

/* 按钮组 */
.gal-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gal-switch-tip { color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.gal-tab {
  white-space: nowrap;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  color: var(--ink-soft);
  transition: background .18s, border-color .18s, color .18s;
}
.gal-tab:hover { border-color: var(--brand-line); color: var(--brand-strong); }
.gal-tab[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* 折叠屏看法的说明条：只在折叠看法下出现 */
.gal-fold-note {
  display: none;
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(233, 241, 254, .55);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.9;
}
.gal-views[data-gal-view="fold"] .gal-fold-note { display: block; }

/* —— 默认看法：整墙（等宽网格、密排、快速浏览）—— */
.gal-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 14px;
  margin-top: 18px;
}
.gal-shot { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
.gal-shot-link {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #eef2f9;
}
.gal-solo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s; }
.gal-shot-link:hover .gal-solo { transform: scale(1.03); }
.gal-cap { font-size: 12.5px; line-height: 1.75; color: var(--ink-soft); }
.gal-cap b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.gal-cap-meta { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); line-height: 1.7; }

/* 折叠用的双屏块：平时收起来，只有折叠看法才展开 */
.gal-duo { display: none; position: relative; }

/* —— 大图看法：单列大图，配标题与拍摄信息 —— */
.gal-views[data-gal-view="big"] .gal-wall { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.gal-views[data-gal-view="big"] .gal-shot { width: 100%; max-width: 940px; margin: 0 auto; }
.gal-views[data-gal-view="big"] .gal-solo {
  aspect-ratio: auto;
  max-height: 76vh;
  object-fit: contain;
  background: #f2f6fc;
}
.gal-views[data-gal-view="big"] .gal-cap { font-size: 13.5px; line-height: 1.9; }
.gal-views[data-gal-view="big"] .gal-cap b { font-size: 16px; }
.gal-views[data-gal-view="big"] .gal-cap-meta { font-size: 12.5px; }

/* —— 折叠看法：摊成一台折叠屏手机 —— */
/* 两列即两面屏，中缝落在两列之间；每三张里的第一张跨缝摊开 */
.gal-views[data-gal-view="fold"] .gal-wall {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 26px;
  position: relative;
  padding: 16px;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
/* 中缝：一条 1px 的渐变细线，从上下两头淡入淡出，像铰链的合缝 */
.gal-views[data-gal-view="fold"] .gal-wall::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(28, 37, 54, .22) 6%, rgba(28, 37, 54, .22) 94%, transparent);
  pointer-events: none;
  z-index: 2;
}
/* 缝两侧的一层柔光带：让折痕看着是「压出来」的，不用阴影 */
.gal-views[data-gal-view="fold"] .gal-wall::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(199, 220, 252, .5) 45%, rgba(199, 220, 252, .5) 55%, transparent);
  pointer-events: none;
  z-index: 2;
}
/* 跨缝的那几张：整行铺满两面屏 */
.gal-views[data-gal-view="fold"] .gal-shot:nth-child(3n+1) { grid-column: 1 / -1; }
.gal-views[data-gal-view="fold"] .gal-shot:nth-child(3n+1) .gal-solo { display: none; }
.gal-views[data-gal-view="fold"] .gal-shot:nth-child(3n+1) .gal-duo {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
}
/* 左右两面屏：各占一半，合起来就是一张完整的图 */
.gal-pane { flex: 1 1 50%; position: relative; overflow: hidden; min-width: 0; min-height: 0; }
.gal-pane img { position: absolute; top: 0; left: 0; display: block; width: 200%; height: 100%; object-fit: cover; }
/* 右半屏：把图往左推一个屏宽，露出的是同一张图的右半边 */
.gal-pane-r img { left: -100%; }

/* —— 窄屏（手机、平板竖拿）：能看、不横向溢出 —— */
@media (max-width: 620px) {
  .gal-new { padding: 18px 16px 16px; }
  .gal-new-grid { grid-template-columns: minmax(0, 1fr); }
  .gal-views[data-gal-view="fold"] .gal-wall { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  /* 窄屏等于合上手机：竖缝换成横缝，一张图上下分屏 */
  .gal-views[data-gal-view="fold"] .gal-wall::before,
  .gal-views[data-gal-view="fold"] .gal-wall::after { display: none; }
  .gal-views[data-gal-view="fold"] .gal-shot:nth-child(3n+1) .gal-duo {
    flex-direction: column;
    aspect-ratio: 4 / 3;
  }
  .gal-views[data-gal-view="fold"] .gal-shot:nth-child(3n+1) .gal-duo::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--brand-line);
    pointer-events: none;
    z-index: 2;
  }
  .gal-pane img { width: 100%; height: 200%; }
  .gal-pane-r img { left: 0; top: -100%; }
}