/* photo 皮肤 — M6：混排密度（宽高比 + id 哈希两档交错，见 render.mjs）、
   点击放大、地标双语角标。深色暗房是硬约束。 */

:root {
  --bg: #111113;
  --bg-raised: #1c1b1e;
  --ink: #ece9e4;
  --muted: #8f8d89;
  --accent: #d9a15b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

main { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
h1 { font-size: 1.4rem; }

/* 密排墙：列宽固定像素（不用 minmax(...,1fr)），跟 grid-auto-rows 用
   同一基准单位——评审 F6：上一版列宽随视口浮动、行高固定，格子像素比例
   跟 size-wide 名义上对应的横图比例对不上，21/22 张图被 cover 裁掉
   28%–54%，不是轻微修边。size-* 的 span 数按小狮子/photo 素材各自的
   真实宽高比精确反推（见 render.mjs 的 photoCellClass：4:3、3:2、竖幅
   三档 + id 哈希洗出的放大档），格子像素比例跟照片原生比例基本重合，
   cover 直接贴满、几乎不裁。justify-content: center 让整墙居中，行尾
   凑不满一列的空隙分两边，不露右边一条空白。grid-auto-flow: dense 让
   各档跨列跨行铺开、缝隙自动回填。 */
.photo-wall {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  grid-auto-rows: 40px;
  grid-auto-flow: dense;
  gap: 0.5rem;
  justify-content: center;
}
/* min-height: 0 破掉 grid item 默认的「内容最小尺寸」——不加这条，
   img 的原生宽高（HTML width/height 属性）会把格子的实际高度顶到远超
   grid-auto-rows 给的固定值（老熟人了，跟 art.css 的 height:auto 是
   同一类「替换元素固有尺寸绕过显式尺寸」坑，这次踩在 grid item 这一侧）。 */
.photo-cell { position: relative; cursor: zoom-in; overflow: hidden; min-height: 0; }
.photo-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px;
  transition: transform 0.15s ease;
}
.photo-cell img:hover { transform: scale(1.02); }
.size-4x3 { grid-column: span 4; grid-row: span 3; }
.size-4x3-big { grid-column: span 8; grid-row: span 6; }
.size-3x2 { grid-column: span 3; grid-row: span 2; }
.size-3x2-big { grid-column: span 6; grid-row: span 4; }
.size-portrait { grid-column: span 2; grid-row: span 3; }
.size-portrait-big { grid-column: span 4; grid-row: span 6; }

.photo-caption {
  position: absolute;
  left: 0.5em;
  bottom: 0.5em;
  right: 0.5em;
  font-size: 0.75rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 0.15em 0.5em;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 地标角标：中英双语比随手街景的地点名长得多，用琥珀色描边跟普通角标
   区分开——一眼能看出「这张是有名字的地方」。 */
.photo-landmark .photo-caption { border: 1px solid var(--accent); color: var(--accent); }

/* display:none 打底、[hidden] 一撤才切 flex——author 样式的优先级本来就
   高于浏览器 UA 样式表的 [hidden]{display:none}，之前直接在这条规则里写
   display:flex 会让 lightbox 无视 hidden 属性、全程盖在整个页面上（用户
   反馈「所有图片都蒙上了什么东西」，那层暗色遮罩其实一直开着）。 */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 9, 0.92);
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  cursor: zoom-out;
  z-index: 100;
}
.lightbox:not([hidden]) { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }

.site-foot { text-align: center; padding: 2rem 0; font-size: 0.8rem; color: var(--muted); }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--accent); }

@media (max-width: 480px) {
  main { padding: 2rem 1rem 3rem; }
  .photo-wall {
    grid-template-columns: repeat(auto-fill, 26px);
    grid-auto-rows: 26px;
    gap: 0.35rem;
  }
  /* 窄屏把 -big 档降回普通档——评审 F6：320–390px 视口下 explicit column
     数量少，-big 档的大 span（如 span 8）有触发隐式列（宽度不受控）的
     风险；窄屏本来空间就不够放「更大一格」，直接不放大最安全。 */
  .size-4x3-big { grid-column: span 4; grid-row: span 3; }
  .size-3x2-big { grid-column: span 3; grid-row: span 2; }
  .size-portrait-big { grid-column: span 2; grid-row: span 3; }
}