/**
 * 「开发」分类皮肤(皮肤名 product) —— 一级分类 product 及其子分类 logs 共用
 *
 * 一个一级分类一个 CSS: 开发自己的版式(复刻自 blog.css)放在本文件前半段,
 * 子分类「日志」的流水列表样式放在文件末尾(仍然限定在 body[data-skin="logs"] 下),
 * 这样开发整棵树只有这一个样式文件,不会再散落到 css/logs.css。
 *
 * 列表是「一篇文章两行」的左右交替版式:
 *   第 1 行: 标题(整行)
 *   第 2 行: 图片 + 缩略内容;奇数条图片在左,偶数条图片在右,依次循环
 * 实现方式: .card 用 grid 两列, .card-main 设 display:contents,
 * 让标题/日期/摘要直接参与卡片栅格, 不需要改模板结构。
 *
 * 从此与 blog.css 各管各的: 改博客不影响开发,反之亦然。
 * 所有选择器限定在 body[data-skin="product"] / body[data-skin="logs"] 下。
 */

body[data-skin="product"] {
    --cc-thumb-h: 220px;
}

/* =========================================================
 * 1. 列表：单列，每条之间留大间距
 * ========================================================= */
body[data-skin="product"] .post-grid {
    grid-template-columns: 1fr;
    gap: 44px;
}

body[data-skin="product"] .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    padding: 18px;
    /* 边框常驻透明，悬停只换颜色，避免多出 1px 时整页跳动 */
    border: 1px solid transparent;
    /* 取消卡片底色：不再用 1 楼 / 2 楼交错灰，直接透出页面底色 */
    background: transparent;
    transition: border-color var(--transition);
}

/* 奇偶交错底色已取消，保留透明以覆盖列表通用的偶数行背景 */
body[data-skin="product"] .card:nth-child(even) {
    background: transparent;
}

/* 1 楼 / 2 楼：鼠标触及楼层容器出现 1px 深色边线 */
body[data-skin="product"] .card:hover {
    border-color: #1a1a1a;
}

/* 文字列：标题 → 时间/分类 → 缩略内容，依次排在图片旁边。
   图片与文字都显式落在第 1 行，否则「图在第 2 列、文字在第 1 列」会被自动放置排成两行 */
body[data-skin="product"] .card-main {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

body[data-skin="product"] .card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .1px;
}

body[data-skin="product"] .card-title:hover {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 图片：奇数条在左，高度跟着文字列走，最低保持 --cc-thumb-h。
   img 用绝对定位，否则图片原始比例会反过来撑高整行 */
body[data-skin="product"] .card-thumb {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    display: block;
    align-self: stretch;
    width: 100%;
    height: auto;
    min-height: var(--cc-thumb-h);
    overflow: hidden;
    background: #f2f2f2;
}

body[data-skin="product"] .card-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

body[data-skin="product"] .card:hover .card-thumb img {
    transform: scale(1.03);
}

/* 时间 + 分类：跟在标题下方，不再顶到容器右上角 */
body[data-skin="product"] .card-meta {
    margin: 0;
    font-size: 12px;
    letter-spacing: .06em;
    color: #999;
    white-space: nowrap;
}

/* 缩略内容：铺在楼层底色上，行数按图片高度给足，超出裁掉不溢出 */
body[data-skin="product"] .card-excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 偶数条：文字在左，图片在右 */
body[data-skin="product"] .card:nth-child(even) .card-main {
    grid-column: 1;
}

body[data-skin="product"] .card:nth-child(even) .card-thumb {
    grid-column: 2;
}

/* 没有封面的文章：文字列占满整行，避免留下空栏 */
body[data-skin="product"] .card:not(:has(.card-thumb)) .card-main {
    grid-column: 1 / -1;
}

/* =========================================================
 * 2. 侧栏
 *
 * 右栏列表(条目高度/分隔线/标题字号与颜色)已统一收敛到 css/style.css
 * 的「右栏文章列表」段落, 这里不再重复定义。
 * ========================================================= */

/* 标签云：去掉灰色底块，改成底部细线；悬停只加深线条，不再变底色 */
body[data-skin="product"] .cc-tag {
    padding: 5px 0 6px;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
    transition: color var(--transition), border-color var(--transition);
}

body[data-skin="product"] .cc-tag:hover {
    background: transparent;
    border-bottom-color: var(--color-text);
}

/* =========================================================
 * 3. 响应式
 * ========================================================= */
@media (max-width: 1200px) {
    body[data-skin="product"] {
        --cc-thumb-h: 190px;
    }

    body[data-skin="product"] .post-grid {
        gap: 36px;
    }

    body[data-skin="product"] .card {
        gap: 20px;
        padding: 16px;
    }
}

/* 手机：单列堆叠，图片在上，标题 / 时间分类 / 摘要在下方 */
@media (max-width: 768px) {
    body[data-skin="product"] {
        --cc-thumb-h: 180px;
    }

    body[data-skin="product"] .post-grid {
        gap: 30px;
    }

    body[data-skin="product"] .card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }

    /* 单列：图片一行，文字整块下一行 */
    body[data-skin="product"] .post-grid .card .card-thumb {
        grid-column: 1;
        grid-row: 1;
    }

    body[data-skin="product"] .post-grid .card .card-main {
        grid-column: 1;
        grid-row: 2;
    }

    body[data-skin="product"] .card-meta {
        justify-self: start;
        align-self: auto;
    }

    body[data-skin="product"] .card-excerpt {
        font-size: 13px;
        -webkit-line-clamp: 4;
    }
}

/* =========================================================
 * 4. 子分类「日志」：时间在左、标题在右的单行流水
 *
 * 日志是开发的子分类,不再单独维护 css/logs.css:
 * 它沿用本文件(CategoryCustomizer 沿分类树向上取到 css/product.css),
 * 只是皮肤名仍是 logs,所以这一段单独限定 body[data-skin="logs"]。
 * 结构由 category/logs.php 输出,不输出封面与摘要。
 * ========================================================= */
body[data-skin="logs"] .log-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-border);
}

body[data-skin="logs"] .log-item {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--color-border);
}

body[data-skin="logs"] .log-date {
    flex: none;
    width: 88px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

body[data-skin="logs"] .log-title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
    transition: color var(--transition);
}

body[data-skin="logs"] .log-item:hover .log-title {
    color: var(--link-hover);
}

/* 窄屏：时间换到标题上方 */
@media (max-width: 640px) {
    body[data-skin="logs"] .log-item {
        flex-wrap: wrap;
        gap: 4px;
        padding: 12px 2px;
    }

    body[data-skin="logs"] .log-date {
        width: auto;
        font-size: 12px;
    }
}

/* =========================================================
 * 5. 子分类「项目 / github」：单列三行卡片
 *
 * github 也是开发的子分类,沿用本文件(分类树向上取到 css/product.css),
 * 不再单独维护 css/github.css —— 与第 4 段的「日志」子分类同理。
 * 仅皮肤名是 github,故这一段单独限定 body[data-skin="github"]。
 * 结构由 category/github.php 输出(三行:标题+时间 / 略缩 / 字段行),
 * 自定义字段 album_style - album_released - album_artist - alist_down。
 * ========================================================= */
body[data-skin="github"] {
    --gh-thumb-h: 0px;
    /* GitHub 标记图标, 供标题与右侧栏标题前缀使用(通过 mask 继承文字颜色) */
    --gh-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M8%200C3.58%200%200%203.58%200%208c0%203.54%202.29%206.53%205.47%207.59.4.07.55-.17.55-.38%200-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01%201.08.58%201.23.82.72%201.21%201.87.87%202.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95%200-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12%200%200%20.67-.21%202.2.82.64-.18%201.32-.27%202-.27.68%200%201.36.09%202%20.27%201.53-1.04%202.2-.82%202.2-.82.44%201.1.16%201.92.08%202.12.51.56.82%201.27.82%202.15%200%203.07-1.87%203.75-3.65%203.95.29.25.54.73.54%201.48%200%201.07-.01%201.93-.01%202.2%200%20.21.15.46.55.38A8.013%208.013%200%200%200%2016%208c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E");
}

/* 单列,用细分隔线代替背景色区分每条 */
body[data-skin="github"] .post-grid {
    grid-template-columns: 1fr;
    gap: 0;
}

/* 卡片:无色背景、无奇偶交错,仅底部 1px 分隔线 */
body[data-skin="github"] .card {
    display: block;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;          /* 去除背景颜色 */
    transition: background-color var(--transition);
}

body[data-skin="github"] .card:hover {
    background: transparent;           /* 1/2 楼变化一并取消 */
}

body[data-skin="github"] .card:nth-child(even) {
    background: transparent;           /* 去除奇偶交错底色 */
}

body[data-skin="github"] .card-main {
    display: block;
}

/* 第一行:标题(左) + 时间(最右) */
body[data-skin="github"] .gh-row1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

body[data-skin="github"] .gh-row1 .card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}

/* 标题前缀:GitHub 图标 */
body[data-skin="github"] .gh-row1 .card-title::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--gh-icon) center / contain no-repeat;
    mask: var(--gh-icon) center / contain no-repeat;
}

body[data-skin="github"] .gh-row1 .card-title:hover {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body[data-skin="github"] .gh-time {
    flex: none;
    font-size: 13px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 右侧栏标题前缀:GitHub 图标 */
body[data-skin="github"] .cc-side-right .cc-side-title::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    background-color: currentColor;
    -webkit-mask: var(--gh-icon) center / contain no-repeat;
    mask: var(--gh-icon) center / contain no-repeat;
}

/* 第二行:略缩内容, 上下带边线(上深下浅) */
body[data-skin="github"] .gh-excerpt {
    margin: 10px 0;
    padding: 12px 0;
    border-top: 1px solid var(--color-text);       /* 上边线:深色 */
    border-bottom: 1px solid var(--color-border);   /* 下边线:浅色 */
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 第三行:字段依次排列,以「-」分隔, 带浅色背景 */
body[data-skin="github"] .gh-row3 {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    padding: 8px 12px;
    background: #f6f6f6;                  /* 第三行浅色背景 */
    border-radius: var(--radius, 2px);
    font-size: 13px;
    color: var(--color-text-secondary);
}

body[data-skin="github"] .gh-field {
    white-space: nowrap;
}

body[data-skin="github"] .gh-sep {
    color: #cccccc;
}

body[data-skin="github"] .gh-link {
    color: var(--color-link, #2a6df4);
    text-decoration: none;
}

body[data-skin="github"] .gh-link:hover {
    text-decoration: underline;
}

/* 窄屏:标题与时间允许换行,时间落到标题下方 */
@media (max-width: 640px) {
    body[data-skin="github"] .gh-row1 {
        flex-wrap: wrap;
        gap: 4px;
    }

    body[data-skin="github"] .gh-excerpt {
        -webkit-line-clamp: 4;
    }
}