/*
    Theme Name: zibll - Child
    Description: zibll 子主题
    Template: zibll
    Version: 1.0.0
*/

/* =========================================================
   沉浸海报卡片（静态版）
   600×900 竖图铺满整卡，标题/标签/作者以渐变蒙版叠在底部。
   纯 CSS 覆盖，不改父主题、不改布局列数、不涉及视频逻辑。
   由 body.poster-card 开关（删 functions.php 里的 body_class 即关）。
   ========================================================= */

/* 卡片容器：去内边距、整卡出血、统一圆角，高度锁成 2:3 */
body.poster-card .posts-item.card {
    padding: 0;
    overflow: hidden;
    position: relative;
    border-radius: var(--main-radius);
    aspect-ratio: 2 / 3; /* 600×900 海报比例 */
}

/* 缩略图绝对铺满整卡 */
body.poster-card .posts-item.card .item-thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    border-radius: 0;
}

body.poster-card .posts-item.card .item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* 文字区：绝对定位压在海报底部，叠一层从透明到黑的渐变蒙版 */
body.poster-card .posts-item.card .item-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding: 46px 14px 12px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.6) 42%,
        rgba(0, 0, 0, 0) 100%
    );
    border-radius: 0 0 var(--main-radius) var(--main-radius);
    pointer-events: none; /* 蒙版不挡图片，下方链接仍可点 */
}

/* 标题、标签、meta 内部仍可点击 */
body.poster-card .posts-item.card .item-body a,
body.poster-card .posts-item.card .item-body .item-tags,
body.poster-card .posts-item.card .item-body .item-meta {
    pointer-events: auto;
}

/* 标题：白字、单行、超出省略号 */
body.poster-card .posts-item.card .item-heading {
    margin: 0 0 6px;
    min-height: 0;
    max-height: none;
    font-size: 15px;
    line-height: 1.35em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.poster-card .posts-item.card .item-heading > a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.poster-card .posts-item.card .item-heading > a,
body.poster-card .posts-item.card .item-heading > a:hover {
    color: #fff;
}

/* 标签：半透明白底胶囊 */
body.poster-card .posts-item.card .item-tags {
    min-height: 0;
    margin-bottom: 6px;
}

body.poster-card .posts-item.card .item-tags a {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: transparent;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* meta：作者 / 时间 / 浏览 全部转浅色 */
body.poster-card .posts-item.card .item-meta,
body.poster-card .posts-item.card .item-meta item,
body.poster-card .posts-item.card .item-meta a,
body.poster-card .posts-item.card .item-meta .meta-right item {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.poster-card .posts-item.card .item-meta .meta-author span {
    color: #fff !important;
}

/* 卡片标题里隐藏副标题：仅视觉隐藏，文字仍在 DOM 中（不影响 SEO），
   只作用于卡片标题，文章页内的标题/副标题不受影响 */
.posts-item.card .item-heading .focus-color {
    display: none;
}

/* =========================================================
   文章卡片 + 搜索页：隐藏底部「时间」（含前面的红点），避免空间挤换行。
   时间是 .item-meta 左侧的 .icon-circle（带 title 时间戳）；
   .meta-right 里的评论/浏览/点赞不受影响。列表模式(.list)不动。
   ========================================================= */
.posts-item.card .item-meta > .icon-circle,
.posts-item.card .item-meta > .meta-author .icon-circle {
    display: none;
}

/* =========================================================
   卡片左上角「系统分类」图标（Windows / Linux / Android）
   配合 functions.php 注入的 .has-os / .os-xxx class，
   用主题自带 Font Awesome 字体图标绘制，零外部资源。
   ========================================================= */

/* 图标行：作为 meta 整行的独立一项，靠两端对齐贴在卡片最右边 */
.zc-os-badges {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

/* 单个图标：尺寸、颜色都跟随 meta 那一排，自动融入 */
.zc-os-badge .fa {
    font-size: 14px;
    line-height: 1;
    color: inherit;
}

/* 卡片下载数：和其他 meta item 风格一致 */
.meta-downloads .fa {
    margin-right: 3px;
}

/* 移动端缩小标题/内边距 */
@media (max-width: 768px) {
    body.poster-card .posts-item.card .item-heading {
        font-size: 14px;
    }
    body.poster-card .posts-item.card .item-body {
        padding: 36px 10px 10px;
    }
}

/* =========================================================
   侧边栏小工具：游戏截图（竖向一排排列）
   配合 inc/screenshots-widget.php 输出的 .zgr-shots 结构。
   ========================================================= */
.zgr-shots {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.zgr-shot {
    display: block;
    line-height: 0;
    overflow: hidden;
}
.zgr-shot-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.25s ease;
}
.zgr-shot:hover .zgr-shot-img {
    transform: scale(1.03);
}
.zgr-shots-more {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--focus-color);
    cursor: pointer;
}
.zgr-shots-more:hover { opacity: .8; }
.zgr-more-arrow { margin-left: 4px; transition: transform .2s ease; }
.zgr-shots-more:hover .zgr-more-arrow { transform: translateY(2px); }

/* =========================================================
   侧边栏小工具：系统配置（最低 / 推荐 Tab，纯 CSS radio 切换）
   配合 inc/requirements-widget.php。颜色全用主题变量，自动适配暗色。
   ========================================================= */
.zgr-req .zgr-req-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}
.zgr-req-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.zgr-req-tab {
    flex: 1;
    text-align: center;
    padding: 6px 10px;
    border-radius: var(--main-radius, 8px);
    background: var(--muted-bg-color);
    color: var(--muted-color);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
/* 选中态：高亮当前 Tab */
.zgr-req-tab.active {
    background: var(--focus-color, #f04494);
    color: #fff;
    font-weight: 600;
}
/* 面板显隐：默认隐藏，.active 显示（JS 控制；默认 min 面板带 active 兜底） */
.zgr-req-panel { display: none; }
.zgr-req-panel.active,
.zgr-req-p-only {
    display: block;
}
/* 配置内容排版 */
.zgr-req-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.zgr-req-panel li {
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.5;
    border-bottom: 1px solid var(--main-border-color);
    color: var(--muted-color);
}
.zgr-req-panel li:last-child { border-bottom: 0; }
.zgr-req-panel strong,
.zgr-req-panel b {
    color: var(--key-color);
    font-weight: 600;
}

/* =========================================================
   正文图片/视频居中
   ========================================================= */
.wp-posts-content img,
.wp-posts-content video {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-posts-content p:has(img),
.wp-posts-content p:has(video) {
    text-align: center;
}