/* 航天图库栏目（/images*）。
   模板：pages/images.html、pages/images_grid.html、pages/image_detail.html。

   网格与图注的核心规则是从 topic-article.css 的图集（`.tgal` / `.tgal-img` /
   `.tgal-credit`）与正文配图（`.tfig-link` / `.tfig-credit`）搬过来的，
   **前缀去掉**。
   ❌ 不 `<link>` topic-article.css：那 25 KB 里绝大部分是专题正文专用，
   而且它一半的规则带 `.ta-body` / `.topic-article` 前缀 —— 那些前缀存在的
   唯一理由是压过 news.css 的 `news-body-md` 排版，而这一栏没有那个祖先，
   一条也不会命中。搬核心、去前缀，是唯一干净的做法。 */

.images-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px 72px;
}

/* ---- Hero ---- */

.images-hero { margin-bottom: 22px; }
.images-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  margin-bottom: 8px;
}
.images-main h1 {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  line-height: 1.15;
  margin: 0 0 12px;
}
.images-intro {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  max-width: 760px;
  margin: 0;
}
.images-back { margin: 12px 0 0; font-size: 13px; }
.images-back a { color: var(--accent); text-decoration: none; }
.images-back a:hover { text-decoration: underline; }

/* ---- 区块头 ---- */

.images-sec { margin-top: 34px; }
.images-sec-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-faint);
}
.images-sec-h h2 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
}
.images-sec-h .c {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
}

/* ---- 图片网格 ----
   来源是 `.tgm-shots.multi`（2 列 / 640px 起 3 列）。这里是独立栏目、不受
   正文栏宽约束，所以列数往上放到 6 —— 一屏能扫过的图多一倍。 */

.img-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px) { .img-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 880px) { .img-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .img-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* 整格可点，不带正文链接的橙色下划线（原来靠 `.ta-body .tgal` 那条压制，
   这里没有那个祖先，直接写裸类）。 */
.img-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  text-decoration: none;
}
/* 图片不套框、不做 hover —— 只留圆角与加载时的底色（同 `.tgal-img`）。 */
.img-thumb {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-inset);
}
.img-thumb img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 署名。11px + mono + muted，与 `.tgal-credit` / `.tfig-credit` 同一档。
   ⚠️ **muted 不是 faint**：署名是合规要求的文字，深色主题下 faint 落在
   面板底上只有 3.9:1，muted 是 7.5:1。 */
.img-credit {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}
.img-credit a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.img-credit a:hover { color: var(--accent); }

/* ---- 实体 / 分类入口 ---- */

.ent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 640px) { .ent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 880px) { .ent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ent-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elev);
  text-decoration: none;
}
.ent-cell:hover { border-color: var(--accent); }
/* 详情页「关联」那一组是 div 而不是 a（里面已经有两个链接），不该有 hover 边框。 */
.ent-cell.is-static:hover { border-color: var(--line); }
.ent-cell .n {
  min-width: 0;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--fg-strong);
  overflow-wrap: anywhere;
}
.ent-cell .v { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); white-space: nowrap; }
.ent-cell a { color: inherit; text-decoration: none; }
.ent-cell a:hover { color: var(--accent); }

.cat-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
.cat-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  text-decoration: none;
}
.cat-cell:hover { border-color: var(--accent); }
.cat-cell b { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--fg-strong); }
.cat-cell span { font-size: 13px; color: var(--fg-muted); }
.cat-cell .v { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); }

/* ---- 详情页 ---- */

.image-detail { max-width: 900px; }
.img-hero { margin: 0 0 18px; }
/* 来源是 `.tfig-link`：圆角 + 加载底色 + hover 微放大。 */
.img-hero-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-inset);
}
.img-hero-link img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.img-hero-link:hover img { transform: scale(1.015); }
@media (prefers-reduced-motion: reduce) {
  .img-hero-link img { transition: none; }
  .img-hero-link:hover img { transform: none; }
}
.img-hero figcaption {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.img-cap { display: block; }
.img-hero .img-credit { display: block; margin-top: 3px; }

.img-kv {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
}
.img-kv .kv {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.6;
}
.img-kv .kv + .kv { border-top: 1px solid var(--line-faint); }
.img-kv .k { flex: 0 0 72px; color: var(--fg-faint); }
.img-kv .v { min-width: 0; color: var(--fg); overflow-wrap: anywhere; }
.img-kv .v a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.img-kv .v a:hover { color: var(--accent); }

/* 单图声明句。比栏目声明重一档（它就在图旁边），但仍是辅助文字。 */
.img-notice-one {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-muted);
}

/* ---- 栏目声明 ----
   每一页页脚之上都有一段。用 inset 底色与正文分开，但**不用 faint 色**：
   这段是合规文本，对比度按正文要求给。 */
.images-notice {
  margin-top: 40px;
  padding: 16px 18px;
  border: 1px solid var(--line-faint);
  border-radius: 12px;
  background: var(--bg-inset);
}
.images-notice p {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.images-notice a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.images-notice a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .images-main { padding: 12px 14px 56px; }
}