/* ==========================================================================
   图集（正文图片 ≥2 张的文章）
   —— 列表页「图集卡片」+ 详情页单列大图堆叠 + 全屏灯箱，样式集中在本文件。
   颜色一律取 main.css 里已有的变量（--accent / --accent-07 / --text-3 / --link-quiet …），
   7 套配色（default / spring / summer / autumn / winter / hot / pink）下自动跟随，无写死主题色。
   本文件由 modules/layout.html 在 main.css 之后引入，可安全覆盖 main.css 中的窄屏卡片 grid。
   ========================================================================== */

/* ---------------- 1. 列表页：图集卡片 ---------------- */

/* 图集卡片整体回到块级流：取消 main.css 窄屏给 .news-item 上的 grid 模板 */
.news-item--gallery {
  display: block;
}

.news-item--gallery .ng-head {
  display: block;
}

/* 标题行 / 底部提示共用的小图标：用 mask 上色，颜色跟随变量 */
.ng-ic {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5z'/%3E%3C/svg%3E")
    center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5z'/%3E%3C/svg%3E")
    center / 16px 16px no-repeat;
}

/* 底部提示用放大镜图标（更小、更淡）；详情页正文前的小字提示复用同一套 class */
.ng-ic--zoom {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
  background-color: var(--text-3);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.3l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm-1 2v2H7v2h2v2h2v-2h2V8h-2V6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.3l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm-1 2v2H7v2h2v2h2v-2h2V8h-2V6z'/%3E%3C/svg%3E");
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
}

/* ② 元信息行：沿用 .news-meta 的字号/颜色，只调它与上下元素的间距 */
.news-item--gallery .ng-meta {
  margin-top: 8px;
}

/* ③ 3 列缩略图网格：最多 9 张、1:1 裁切、间隙 2px、最宽 420px（对齐参考站 .li-img） */
.news-item--gallery .ng-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  max-width: 420px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.news-item--gallery .ng-grid li {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background: var(--accent-07);
  cursor: zoom-in;
}

/* .details img 的 max-width/圆角不能漏进来，这里全部显式覆盖 */
.news-item--gallery .ng-grid img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.news-item--gallery .ng-grid li:hover img {
  transform: scale(1.06);
}

.news-item--gallery .ng-grid li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ④ 底部一行小字 */
.news-item--gallery .ng-hint {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 12px;
}

/* ==========================================================================
   2. 详情页：正文图片「单列大图堆叠」（对齐参考站 http://www.lalmes.top/bloginfo/58.html）
   参考站规则：.details img { display:block; width:100%; max-width:600px; margin:10px auto }
   —— 单列、最宽 600px、水平居中、上下各 10px 间距；点击放大由 gallery.js 接管。
   只在 .details.gallery-details（正文 ≥2 张图）上生效：
     服务端 templates/post.html 按与列表图集卡相同的判定（正文出现 ≥2 个 <img>）加这个 class，
     gallery.js 再兜底一遍并接上灯箱；单图 / 无图文章的 .details 没有这个 class，
     正文样式与改动前逐字一致（只有 main.css 的 .details img { max-width:min(600px,100%) }）。
   ========================================================================== */

.details.gallery-details img {
  display: block !important;
  width: 100% !important;
  max-width: 600px !important;
  height: auto !important;
  margin: 10px auto !important;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  /* 编辑器图集块会给图片挂 flex 尺寸（如 flex:1.77 1 0%），一并清掉，保证一列一图 */
  flex: none !important;
}

.details.gallery-details img:hover {
  opacity: 0.94;
}

.details.gallery-details img:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Halo 编辑器把连续图片包成 <div data-type="gallery"> 里再嵌 [data-type="gallery-group"]，
   并用内联 style（display:grid / display:flex / gap）把同一组的图横向排成一行。
   这里把这些包装层强制回块级，图片才是一张一行、单列堆叠。 */
.details.gallery-details [data-type="gallery"],
.details.gallery-details [data-type="gallery"] > div,
.details.gallery-details [data-type="gallery-group"],
.details.gallery-details [data-type="gallery-group"] > div {
  display: block !important;
  flex: none !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 正文之前的一行小字提示「图片点击放大」（由 gallery.js 生成，只在多图文章出现） */

/* ---------------- 3. 全屏灯箱（列表卡片与详情页共用） ---------------- */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.gallery-lightbox.is-open {
  display: block;
}

/* 遮罩本身是「变暗」语义，不参与主题配色（任何配色下都需要压暗背景） */
.gallery-lightbox .gl-mask {
  position: absolute;
  inset: 0;
  background: rgb(10 14 24 / 92%);
}

.gallery-lightbox .gl-figure {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 56px 68px;
}

.gallery-lightbox .gl-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 12px 44px rgb(0 0 0 / 55%);
}

.gallery-lightbox .gl-count {
  position: absolute;
  top: 18px;
  left: 50%;
  padding: 4px 14px;
  border-radius: 14px;
  background: rgb(0 0 0 / 45%);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.5px;
  transform: translateX(-50%);
}

.gallery-lightbox .gl-btn {
  position: absolute;
  border: 0;
  background: rgb(255 255 255 / 14%);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s;
}

.gallery-lightbox .gl-btn:hover,
.gallery-lightbox .gl-btn:focus-visible {
  background: rgb(255 255 255 / 28%);
  outline: none;
}

.gallery-lightbox .gl-prev,
.gallery-lightbox .gl-next {
  top: 50%;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 40px;
}

.gallery-lightbox .gl-prev {
  left: 16px;
}

.gallery-lightbox .gl-next {
  right: 16px;
}

.gallery-lightbox .gl-close {
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 36px;
}

body.gallery-lock {
  overflow: hidden;
}

/* ---------------- 4. 窄屏 ---------------- */
@media (max-width: 768px) {
  .news-item--gallery {
    display: block;
  }

  .news-item--gallery .ng-grid {
    max-width: none;
    margin-top: 8px;
  }

  /* 窄屏下正文列本身已不足 600px，单列宽 100% 即自适应；间距略收 */
  .details.gallery-details img {
    margin: 8px auto !important;
  }

  .gallery-lightbox .gl-figure {
    padding: 48px 12px;
  }

  .gallery-lightbox .gl-prev,
  .gallery-lightbox .gl-next {
    top: auto;
    bottom: 16px;
    margin-top: 0;
  }
}

/* ==========================================================================
   5. 图库独立页 /photos —— 全站文章正文图片汇总网格
   沿用第 1 节「图集卡片」的 1:1 缩略图规则（外层 .news-item--gallery），这里只放宽列数与
   最大宽度，让整页自适应。颜色一律取现有变量（--accent / --text-3 …），7 套配色自动跟随。
   ========================================================================== */

.photos-page .ng-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
  max-width: none;
  margin-top: 14px;
}

/* 数据源容器（全部文章正文，仅供 photos.js 取图）不参与排版 */
.photos-source {
  display: none !important;
}

.photos-page .photos-count {
  color: var(--accent);
  font-weight: 700;
}

.article-meta .mi-source {
  color: var(--text-3);
}

@media (max-width: 768px) {
  .photos-page .ng-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
    margin-top: 10px;
  }
}
/* ===== PHOTOS-PAGE-BEGIN（photos_deploy.py 自动维护，勿手改） ===== */
/* ==========================================================================
   5b. 图库页 /photos —— 计数（共 X 张 · 本页 Y 张）/ 分页条 / 本页文章列表
   分页条直接复用 main.css 第 8 节的 .pagination（方块细边框、当前页 accent 底、
   .disabled 灰底），所以 7 套配色（default / spring / summer / autumn / winter / hot /
   pink）自动跟随，本文件不写死任何颜色。
   ========================================================================== */

/* 计数行里「共 X 张 · 本页 Y 张」的分隔符 */
.photos-sep {
  margin: 0 6px;
  color: var(--text-3);
}

.photos-foot {
  margin-top: 18px;
  padding-bottom: 10px;
}

.photos-pageinfo {
  margin: 0 0 10px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

/* 分页条容器（ul.pagination 由 photos.js 生成，样式来自 main.css 第 8 节） */
.photos-pager {
  margin: 0;
}

.photos-pager .pagination {
  margin: 0;
  padding: 0;
  list-style: none;
}

.photos-pager[hidden] {
  display: none !important;
}

/* 本页文章（标题 + 链接） */
.photos-postlist {
  margin: 14px 0 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.9;
  word-break: break-word;
}

.photos-postlist a {
  color: var(--link-quiet);
}

.photos-postlist a:hover {
  color: var(--accent);
}

@media (max-width: 768px) {
  .photos-pageinfo,
  .photos-postlist {
    font-size: 12px;
  }
}

/* 窄屏：页码只留「上一页 / 页码窗口 / 下一页」，首尾两个「首页 / 尾页」占位较多、先隐藏，
   保证 320~360px 宽度下分页条不横向溢出 */
@media (max-width: 520px) {
  .photos-pager .pagination li.ph-edge {
    display: none;
  }
}
/* ===== PHOTOS-PAGE-END ===== */

/* 「＋更多图片」格子：仅当正文图 >9 张时由模板渲染（多出来的图不再被静默隐藏） */
.news-item--gallery .ng-grid li.ng-more {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--accent-09);
  outline: 1px dashed var(--line);
  outline-offset: -1px;
}
.news-item--gallery .ng-grid li.ng-more:hover {
  transform: none;
}
.news-item--gallery .ng-grid li.ng-more a {
  color: var(--text-2);
  font-size: 12px;
  text-decoration: none;
}

/* ⑤ 两栏：左缩略图网格 + 右摘要（窄屏堆叠）；摘要与普通卡片同源（p.status.excerpt） */
.news-item--gallery .ng-flex {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 10px;
}
.news-item--gallery .ng-left {
  flex: 0 0 auto;
  max-width: 420px;
}
.news-item--gallery .ng-left .ng-grid {
  margin-top: 0;
}
.news-item--gallery .ng-excerpt {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.75;
  text-align: justify;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
@media (max-width: 768px) {
  /* 手机上先读摘要、再翻缩略图（DOM 是「图→文」，这里反转为「文→图」） */
  .news-item--gallery .ng-flex {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .news-item--gallery .ng-left {
    max-width: none;
    width: 100%;
  }
  .news-item--gallery .ng-excerpt {
    -webkit-line-clamp: 4;
  }
}