@charset "utf-8";
/* ==========================================================================
   media-cards.css —— 首页 / 分类页共用的封面卡片网格
   （扁平工业 + Windows 经典视窗风：蓝白灰、纯净无外框）
   --------------------------------------------------------------------------
   v5 变更（本次焦点：选中态）
   · 彻底删除大面积羽化渐变：原来的 ::before（22px 双层 linear-gradient 光晕）
     整块移除，不再有任何颜色向上晕染进图片内容区。
   · 选中 / 悬浮只剩图片最底部一条 3px 纯色紧凑横条（工业实体横条）：
       position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
       background-color: #2b579a;      ← 默认色；换工业琥珀就写 #ea580c
       z-index: 2;
     容器保留 overflow: hidden + border-radius: 6px，横条两端随下圆角自然裁切。
   · 选中感改由"极轻微滤镜"承担：图片 brightness(1.03) + 原有 1.035 微缩放。
   · 颜色变量集中在一处，随时可微调（见下方 --media-accent / tokens）。

   v4 及更早
   · 高度像素级精确：padding-top: calc(比例高度% ± 固定像素)
       竖式 2:3  → calc(150%    - 8px)   海报偏高，减 8px
       竖式 3:4  → calc(133.33% - 8px)
       横式 16:9 → calc(56.25%  + 10px)  保持宽画幅，高度加 10px
       横式 16:10→ calc(62.5%   + 10px)
       方形 1:1  → calc(100%    + 0)
   · 网格宽屏固定 4 列；卡片无边框 / 无阴影 / 无灰底卡槽，完全透明。
   · 日期只显示年份；左上角分类标签与右下角标签角标均已删除。

   类名契约
   ─────────────────────────────────────────────────────────────────────────
   .media-cards                 网格容器（宽屏固定 4 列 / 中屏 3 / 窄屏 2）
   .media-cards.is-auto         改回 auto-fill 自适应列宽（可选）
   .media-cards.no-zoom         关闭封面悬停微缩放 / 微高亮（可选）
   .media-cards.bar-thick       底边横条 4px（默认 3px，可选）
   .media-cards.ring            可选：1.5px 蓝色包围描边（默认关闭，不写就没有）
   .ratio-2-3 / .ratio-3-4      竖式封面（加在网格或单卡上）
   .ratio-16-9 / .ratio-16-10   横式封面
   .ratio-1-1                   方形
   .media-card                  单张卡片（.active = 选中态）
   .media-card-frame            整卡锚点
   .media-card-media            图片容器：比例高度 + 6px 圆角 + overflow:hidden
   .media-card-media::after     底部 3px 纯色横条（唯一的高亮，无渐变）
   .media-card-placeholder      缺图占位
   .media-card-badge            角标（.is-episode 左下"置顶"；.is-quality 已不再输出）
   .media-card-copy / -title / -date   居中文案（14px 标题 / 12px 年份）

   接入方式
   ─────────────────────────────────────────────────────────────────────────
   <link rel="stylesheet" href="/static/css/media-cards.css?v=...">（放主题表之后）
   {{template "mediaCards" .}}         分类页 / 标签页（按 .CategoryLayout 定比例）
   {{template "mediaCardsSection" .}}  首页楼层（按 HomeSection.LayoutType 定比例）
   ========================================================================== */


/* ==========================================================================
   ① 设计令牌 + 网格（宽屏固定 4 列自适应撑满）
   --------------------------------------------------------------------------
   想换色只动这两个变量：
     经典深蓝   --media-accent: #2b579a;   （当前默认，沉稳不突兀）
     工业琥珀   --media-accent: #ea580c;   （高对比，偏"警示"气质）
   ========================================================================== */

.media-cards {
  /* —— 列数与间距 —— */
  --media-cols: 4;                  /* 宽屏固定 4 列 */
  --media-card-gap: 18px;           /* 间距 16~20px */
  --media-card-min: 200px;          /* 仅 .is-auto 自适应列宽时使用 */

  /* —— 尺寸与圆角 —— */
  --media-card-radius: 6px;         /* 图片容器四角小半圆 */
  --media-ratio-h: 150%;            /* 高/宽 百分比：150% = 2:3 竖式海报 */
  --media-size-adj: -8px;           /* 在比例高度上叠加的固定像素（竖式 -8px） */

  /* —— 配色（蓝白灰 / 扁平工业） —— */
  --media-card-text: #1c1a17;
  --media-card-muted: #777777;      /* 年份：沉稳中灰 */
  --media-card-media-bg: #e9e6df;   /* 封面未加载时的底色 */
  --media-accent: #2b579a;          /* 选中横条颜色：Windows 经典深蓝 */
  --media-bar-line: 3px;            /* 底边横条厚度（.bar-thick 覆盖为 4px） */
  --media-hover-brightness: 1.03;   /* 选中 / 悬浮时图片的微高亮 */
  --media-hover-zoom: 1.035;        /* 选中 / 悬浮时图片的微缩放 */
  --media-ring: 1.5px;              /* 仅 .ring 用 */

  /* —— 角标 —— */
  --media-tag-bg: rgba(20, 26, 36, .58);

  display: grid;
  grid-template-columns: repeat(var(--media-cols, 4), minmax(0, 1fr));
  gap: var(--media-card-gap, 18px);
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* 可选：需要"最后一页自动撑满"时改用 auto-fill 自适应列宽 */
.media-cards.is-auto {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--media-card-min, 200px)), 1fr));
}

/* 空状态：纯文字，不再画框 */
.media-cards-empty {
  grid-column: 1 / -1;
  padding: 56px 16px;
  color: var(--media-card-muted, #777777);
  text-align: center;
  font-size: 12px;
}


/* ==========================================================================
   ② 比例 + 像素微调：竖式 −8px / 横式 +10px
   ========================================================================== */

.media-cards.ratio-2-3,   .media-card.ratio-2-3   { --media-ratio-h: 150%;      --media-size-adj: -8px; }
.media-cards.ratio-3-4,   .media-card.ratio-3-4   { --media-ratio-h: 133.3333%; --media-size-adj: -8px; }
.media-cards.ratio-1-1,   .media-card.ratio-1-1   { --media-ratio-h: 100%;      --media-size-adj: 0px;  }
.media-cards.ratio-16-9,  .media-card.ratio-16-9  { --media-ratio-h: 56.25%;    --media-size-adj: 10px; }
.media-cards.ratio-16-10, .media-card.ratio-16-10 { --media-ratio-h: 62.5%;     --media-size-adj: 10px; }

/* 底边横条厚度：想要 4px 就给网格加 .bar-thick */
.media-cards.bar-thick { --media-bar-line: 4px; }


/* ==========================================================================
   ③ 单张卡片：纯净无外框（无边框 / 无阴影 / 无灰底卡槽）
   ========================================================================== */

.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;          /* 卡片完全透明 */
  border: 0;                        /* 去掉外部描边 */
  box-shadow: none;                 /* 去掉卡框投影 */
  border-radius: 0;
}

.media-card-frame {
  display: block;
  margin: 0;
  color: inherit;
  text-decoration: none;
  outline: none;                    /* 键盘焦点不画包围框，改用底部横条 + 标题下划线 */
}

/* 键盘可达性：不要任何包围轮廓，用"底部横条 + 标题下划线"替代 */
.media-card:focus-within .media-card-title {
  color: var(--media-accent, #2b579a);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   ④ 图片容器：固定高度微调 + 6px 圆角 + cover 铺满
   --------------------------------------------------------------------------
   height:0 + padding-top 百分比是"比例 ± 固定像素"的唯一精确表达方式；
   封面绝对定位铺满容器（含 padding 区），object-fit:cover 保证不变形、无白边。
   没有左 / 上 / 右边框，卡片背景完全透明。
   ========================================================================== */

.media-card-media {
  position: relative;
  display: block;
  width: 100%;
  height: 0;                        /* 高度完全交给 padding-top 计算 */
  padding-top: calc(var(--media-ratio-h, 150%) + var(--media-size-adj, -8px));
  overflow: hidden;                 /* 让底部横条两端贴合 6px 下圆角 */
  border: 0;                        /* 显式声明：上/左/右/下都没有边框 */
  outline: none;
  border-radius: var(--media-card-radius, 6px);
  background: var(--media-card-media-bg, #e9e6df);
  isolation: isolate;               /* 底部横条 / 角标的层级只在容器内排序 */
}

.media-card-media > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  object-fit: cover;
  object-position: center;
  transform: scale(1.001);
  transition: transform .38s cubic-bezier(.2, .7, .2, 1), filter .2s ease;
  backface-visibility: hidden;
}

/* 选中 / 悬浮：极轻微高亮 + 微缩放（不再依赖大面积颜色涂抹） */
.media-card:hover .media-card-media > img,
.media-card.active .media-card-media > img {
  filter: brightness(var(--media-hover-brightness, 1.03));
  transform: scale(var(--media-hover-zoom, 1.035));
}

.media-cards.no-zoom .media-card-media > img,
.media-cards.no-zoom .media-card:hover .media-card-media > img,
.media-cards.no-zoom .media-card.active .media-card-media > img {
  transform: none;
  filter: none;
  transition: none;
}

/* 缺图占位：扁平工业斜纹 + 经典文档图标 */
.media-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--media-card-media-bg, #e9e6df);
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(158, 154, 146, .18) 6px 7px);
  color: #8a857c;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.media-card-placeholder i {
  display: block;
  width: 32px;
  height: 38px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='38' shape-rendering='crispEdges'%3E%3Crect width='32' height='38' fill='%23ffffff'/%3E%3Crect x='31' width='1' height='38' fill='%23808080'/%3E%3Crect y='37' width='32' height='1' fill='%23808080'/%3E%3Crect x='4' y='5' width='20' height='2' fill='%23000080'/%3E%3Crect x='4' y='11' width='22' height='2' fill='%23c0c0c0'/%3E%3Crect x='4' y='16' width='16' height='2' fill='%23c0c0c0'/%3E%3Crect x='4' y='21' width='22' height='2' fill='%23c0c0c0'/%3E%3Crect x='4' y='26' width='12' height='2' fill='%23c0c0c0'/%3E%3C/svg%3E");
  opacity: .85;
}

.media-card-placeholder b { font-weight: 600; font-size: 10px; letter-spacing: .14em; }


/* ==========================================================================
   ⑤ 选中 / 悬浮指示：只有一条 3px 工业实体横条（横式 / 竖式通用）
   --------------------------------------------------------------------------
   · 位置：图片容器绝对定位的最底部，left/right 0，紧贴图片下沿；
   · 尺寸：高度仅 3px，紧凑利落，绝不向上晕染；
   · 颜色：纯色 #2b579a（--media-accent 一处可改）；
   · 裁切：容器 overflow:hidden + border-radius:6px，两端随下圆角自然裁切；
   · 显隐：默认 opacity:0，:hover / .active / :focus-within 时 1（0.2s）。
   ※ 这里没有任何 linear-gradient / radial-gradient，也没有大高度光晕。
   ========================================================================== */

.media-card-media::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--media-bar-line, 3px);
  background-color: var(--media-accent, #2b579a);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}

.media-card:hover .media-card-media::after,
.media-card.active .media-card-media::after,
.media-card:focus-within .media-card-media::after { opacity: 1; }

/* 可选（.ring）：1.5px 包围描边 —— 默认关闭，不写这个类就完全不会有框 */
.media-cards.ring .media-card:hover .media-card-media,
.media-cards.ring .media-card.active .media-card-media {
  box-shadow: 0 0 0 var(--media-ring, 1.5px) var(--media-accent, #2b579a);
}


/* ==========================================================================
   ⑥ 角标（左上角分类标签、右下角标签角标均已删除）
   ========================================================================== */

.media-card-badge {
  position: absolute;
  z-index: 3;                       /* 压在底部横条之上 */
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 12px);
  padding: 1px 6px;
  box-sizing: border-box;
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;             /* 不挡整卡点击 */
  border-radius: 3px;
  background: var(--media-tag-bg, rgba(20, 26, 36, .58));
  backdrop-filter: blur(4px);
}

.media-card-badge.is-quality { right: 6px; bottom: 6px; }   /* 模板已不再输出，保留供恢复用 */
.media-card-badge.is-episode { left: 6px; bottom: 6px; }    /* 置顶：只在 .Pinned 时出现 */


/* ==========================================================================
   ⑦ 文案：图片下方 8px，标题 14px 单行截断，年份 12px 中灰
   ========================================================================== */

.media-card-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 0;                 /* 与图片间距 8px（规范 6~8px） */
  text-align: center;
}

.media-card-title {
  margin: 0;
  max-width: 100%;
  color: var(--media-card-text, #1c1a17);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
  /* 单行居中省略截断 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .18s ease;
}

.media-card:hover .media-card-title,
.media-card.active .media-card-title { color: var(--media-accent, #2b579a); }

.media-card-date {
  display: block;
  margin: 0;
  color: var(--media-card-muted, #777777);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* 可选：需要摘要时自行加 .media-card-summary（默认不输出） */
.media-card-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 3px 0 0;
  max-width: 100%;
  color: var(--media-card-muted, #777777);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}


/* ==========================================================================
   ⑧ 复古工业风主题（win2000）兼容层
   --------------------------------------------------------------------------
   主题用 !important 清零全站圆角与投影，这里只把本组件需要的 6px 圆角
   （以及可选 .ring 的包围描边）恢复回来，不改动任何既有主题文件。
   ========================================================================== */

html body.w2k#top#top .media-cards .media-card-media,
html body.w2k#top#top .media-cards .media-card-media > img {
  border-radius: var(--media-card-radius, 6px) !important;
  border: 0 !important;               /* 双保险：任何主题都不许给封面加边框 */
}

html body.w2k#top#top .media-cards .media-card-media::after {
  height: var(--media-bar-line, 3px) !important;
  background-color: var(--media-accent, #2b579a) !important;
  background-image: none !important;  /* 双保险：任何主题都不许给这条线加渐变 */
  border-radius: 0 0 var(--media-card-radius, 6px) var(--media-card-radius, 6px);
}

html body.w2k#top#top .media-cards .media-card-badge {
  border-radius: 3px !important;
}

/* 仅 .ring 开启时才放行这一处 box-shadow（主题 `*{box-shadow:none!important}`） */
html body.w2k#top#top .media-cards.ring .media-card:hover .media-card-media,
html body.w2k#top#top .media-cards.ring .media-card.active .media-card-media {
  box-shadow: 0 0 0 var(--media-ring, 1.5px) var(--media-accent, #2b579a) !important;
}

/* 主题给所有 a 加了 transition:none!important 与 :hover 下划线，整卡锚点保持静态 */
html body.w2k#top#top .media-cards .media-card-frame,
html body.w2k#top#top .media-cards .media-card-frame:hover {
  text-decoration: none;
}


/* ==========================================================================
   ⑨ 深色模式（跟随 html.dark；网格与单卡两种用法都覆盖）
   --------------------------------------------------------------------------
   深底图上 #2b579a 会偏闷，这里把横条提亮一档；想用琥珀色就改成 #f97316。
   ========================================================================== */

html.dark .media-cards,
html.dark .media-card {
  --media-card-text: #e8e8e8;
  --media-card-muted: #888888;
  --media-card-media-bg: #141414;
  --media-tag-bg: rgba(0, 0, 0, .62);
  --media-accent: #5b93d6;          /* 深色下提亮的经典蓝（琥珀替代：#f97316） */
  --media-hover-brightness: 1.05;   /* 深色下微亮一点点更明显 */
}

html.dark .media-card-placeholder { color: #9a958c; }
html.dark .media-card-placeholder i { filter: invert(.88) hue-rotate(180deg); opacity: .7; }


/* ==========================================================================
   ⑩ 响应式与无障碍
   --------------------------------------------------------------------------
   宽屏严格 4 列撑满；中屏 3 列；窄屏 2 列。字号不随断点变化
   （标题恒 14px、日期恒 12px）。横条厚度不随断点变化，始终 3px。
   ========================================================================== */

@media (max-width: 1200px) {
  .media-cards { --media-cols: 3; --media-card-gap: 16px; }
}

@media (max-width: 860px) {
  .media-cards { --media-cols: 2; --media-card-gap: 14px; }
}

@media (max-width: 420px) {
  .media-cards { --media-card-gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .media-card-media > img,
  .media-card-media::after,
  .media-card-title { transition: none; }
  .media-card:hover .media-card-media > img,
  .media-card.active .media-card-media > img { transform: none; }
}