/* 后台有自定义样式颜色值等的修改，每个变量已经规定，否则不能再后台修改、只定义一次，无重复。此注释永久保留。 */

/* ============================================================
 * 网格卡片样式（从 style.css 迁移）
 * ============================================================ */

/* 列数 / 间距由 responsive.css 按统一断点给出（首页 6→5→4→3→2），此处只定基础布局 */
.grid-wrap {
    display: grid;
    gap: 16px;
}
.grid-card { text-decoration: none; display: block; }
.grid-card-cover {
    position: relative;
    aspect-ratio: 2/3;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-bg-page-soft);
    transition: transform .3s ease, box-shadow .3s ease;
}
.grid-card:hover .grid-card-cover {
    transform: translateY(-4px);
    box-shadow: var(--main-shadow-hover);
}
.grid-card-cover img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; transition: transform .4s ease; }
/* 悬停图片微缩放：封面向左上"揭开"时图片轻微放大，增强层次（scale(1) 为无效写法，此前无缩放效果） */
.grid-card:hover .grid-card-cover img { transform: scale(1.05); }
/* 版本号：文字模式 + 橙色底色（色块形态由统一类 .ver-badge 提供，见 tags.css）。
   本处只管定位/显隐：默认隐藏，hover 淡入。 */
.grid-card-ver {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .3s ease, transform .35s ease, visibility .3s;
}
.grid-card:hover .grid-card-ver {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.grid-card-overlay {
    position: absolute;
    inset: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 3px;
    color: var(--color-text-invert);
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
}
.grid-card-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.15) 100%);
    z-index: 0;
}
.grid-card-overlay > * {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity .3s ease;
}
.grid-card:hover .grid-card-overlay {
    opacity: 1;
    visibility: visible;
}
.grid-card:hover .grid-card-overlay > * {
    opacity: 1;
}
/* 分类名：纯文字（遮罩内一律纯文字）。
   ⚠️ 2026-10-01 曾试过加底色（实心靛蓝 → 透化压暗），用户最终裁定「不要底色」，
      已回退。不要再给这个元素加 background / padding / border-radius。 */
.grid-card-cat {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    /* 提亮：在 text-dim 基础上向 text-invert（遮罩内的白字系）混色，保证深色遮罩上足够清晰 */
    color: color-mix(in srgb, var(--color-text-dim) 55%, var(--color-text-invert));
    margin-bottom: 2px;
}
/* 中文标题：纯白（继承遮罩 --color-text-invert）+ 加粗到 700（2026-10-01 用户「加粗一点」） */
.grid-card-cn { display: block; font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.grid-card-en { display: block; font-size: 11px; opacity: 0.9; }
.grid-card-series { display: inline-block; font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }