/*
 * 子主题列表模块共享基础样式（所有列表风格公用的布局骨架）
 * 作用域：仅作用于容器类 .zibll-child-grid 及其注入类，父主题列表原样时零影响
 * 条目统一纵向（图在上、日期/标题/摘要在下）；配色/圆角全部走父主题 CSS 变量
 * 图幅变量 --zcl-* 默认值在此兜底，启用对应风格时由其 head CSS 输出后台设置值覆盖
 * 标签/徽标/meta 极简单色化为全风格共用约定（显隐仍由父主题设置控制）
 * 父主题对列表条目宽/边距使用了 !important，此处用更高权重的双类选择器对等压制
 */

/* ==== 容器：两列网格；中和父主题 posts-row 负 margin 与子项定宽 ==== */
.posts-row.zibll-child-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--zcl-gap, 16px); /* 卡片间隔，后台可调 */
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
    --zcl-grid: 56.25%;  /* 网格卡图幅（图高÷图宽） */
    --zcl-hero: 36%;     /* 特写卡图幅（仅交错式使用） */
    --zcl-grid-m: 60%;   /* 移动端网格卡图幅 */
    --zcl-hero-m: 62.5%; /* 移动端特写卡图幅（仅交错式使用） */
    --zcl-gap: 16px;     /* 卡片间隔 */
}
/* 首页栏目 tab：bootstrap 用 .tab-pane{display:none} 收起未激活面板，但本容器 display:grid
   权重相同且加载在后，会把隐藏面板顶成「透明却占高」。fade 未激活（无 .in）时显式恢复隐藏 */
.posts-row.zibll-child-grid.tab-pane.fade:not(.in) {
    display: none;
}
/* 首页栏目 tab 切换项内边距（父主题 2px 11px 偏挤，同选择器加载在后覆盖） */
.index-tab ul>li {
    padding: 6px 11px;
}
/* 分页导航、排序下拉、加载骨架等非条目子元素：通栏一行，并去掉父主题的左右定距 */
.posts-row.zibll-child-grid > :not(.posts-item) {
    grid-column: 1 / -1;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==== 条目基础：纵向网格卡（list/card/style2 三种源结构统一为上图下文）==== */
.posts-row.zibll-child-grid > .posts-item {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0;
    overflow: hidden;
}
.posts-row.zibll-child-grid > .posts-item .post-graphic,
.posts-row.zibll-child-grid > .posts-item .post-graphic.order1 {
    margin: 0;
    width: 100%;
    order: 0; /* 归零父主题 img_position=right 的 order1，纵向布局图恒在上 */
}
.posts-row.zibll-child-grid > .posts-item .item-thumbnail {
    width: 100%;
    height: auto;
    min-height: 0;
    padding-bottom: var(--zcl-grid, 56.25%); /* 16:9，后台可调 */
    max-height: 420px; /* 宽内容列（无侧边栏）下图幅过大时限高裁切，保持美观 */
    border-radius: var(--main-radius) var(--main-radius) 0 0; /* 上圆下方：底部与文本区衔接 */
}
/* 父主题给 img 加了 radius8（四角圆），必须让 img 继承容器圆角，
   否则交错/扁平的图片下角、时间轴的图片四角都会被 radius8 裁圆（2026-08-29 实战） */
.posts-row.zibll-child-grid .item-thumbnail img {
    border-radius: inherit;
    /* ⚠️ 必须钉死定位原点：父主题仅 .item-thumbnail img{position:absolute}，无 left/top → left
       落 static position。主题列表页的静态位置恰好贴左上，但 grid 容器下静态位置会算到第 2 列起点，
       图片整体右移半条（2026-08-30 真机 CDP 实测：img left=680px，视觉上「图只占一半、左半空白」） */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 文本区：flex 纵向，徽标/meta 组压底，两卡并排时底边对齐 */
.posts-row.zibll-child-grid > .posts-item .item-body {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    margin: 0;
    padding: 8px 12px 8px;
}
.posts-row.zibll-child-grid > .posts-item .item-body > div:last-child,
.posts-row.zibll-child-grid > .posts-item .item-body > .item-meta {
    margin-top: auto;
}
/* style2 列表源：标题在最外层、图与正文在内层 .flex 容器；
   contents 化让图/文成为条目的直接 flex 子项，从而能把图重排到标题之上 */
.posts-row.zibll-child-grid > .posts-item.style2 > .flex {
    display: contents;
}
.posts-row.zibll-child-grid > .posts-item.style2 .post-graphic {
    order: -1;
}
.posts-row.zibll-child-grid > .posts-item .item-heading {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 17px;
    max-height: none;
}
.posts-row.zibll-child-grid > .posts-item .item-excerpt {
    /* 源结构可能带 text-ellipsis（单行截断），统一改为两行 clamp */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    height: auto;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 8px;
}
.posts-row.zibll-child-grid--nx > .posts-item .item-excerpt {
    display: none !important;
}
.posts-row.zibll-child-grid > .posts-item .item-meta {
    margin-top: auto;
    border-top: 1px solid var(--main-border-color); /* 与正文区的分隔线 */
    padding-top: 5px;
}

/* ==== 标签/徽标极简化：显隐由父主题「显示列表标签」设置控制，这里只统一观感 ==== */
/* 分类(c-blue等彩色)/专题/标签(#前缀)/付费(jb-yellow渐变) 统一为单色胶囊 */
.posts-row.zibll-child-grid .item-tags a {
    background: var(--muted-bg-color);
    color: var(--muted-2-color);
    border: 0;
    box-shadow: none;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1.5;
    margin-right: 6px;
}
.posts-row.zibll-child-grid .item-tags a:hover {
    color: var(--focus-color);
    background: var(--muted-bg-color);
}
/* 付费/会员徽标：去掉渐变底，仅保留主题色文字以示区分 */
.posts-row.zibll-child-grid .item-tags a.meta-pay {
    color: var(--theme-color);
}
/* 分类/专题的图标装饰去掉（标签的 # 前缀是文本内容，保留） */
.posts-row.zibll-child-grid .item-tags .fa-folder-open-o,
.posts-row.zibll-child-grid .item-tags .fa-cube {
    display: none;
}

/* ==== meta 页脚极简化：统一弱灰小字，图标(currentColor)随之变淡 ==== */
.posts-row.zibll-child-grid .item-meta,
.posts-row.zibll-child-grid .item-meta item,
.posts-row.zibll-child-grid .item-meta a {
    color: var(--muted-2-color);
}
.posts-row.zibll-child-grid .item-meta item,
.posts-row.zibll-child-grid .item-meta a {
    font-size: 12px;
}

/* ==== 移动端恢复 meta-right 全部 meta 项：父主题 main.css 在 ≤640px 隐藏
   .posts-item:not(.no-thumb) .meta-right item（zib-head.php 仅放行后台
   「列表小部件→移动端优先显示」选中的一项）。子主题卡片 meta 走极简化观感
   但信息保持完整：双类同权重 + !important 压过隐藏规则，更高权重压过放行规则。
   641-768px 区间父主题本就不隐藏，故断点与其对齐用 640 ==== */
@media (max-width: 640px) {
    .posts-row.zibll-child-grid .meta-right item {
        display: unset !important;
    }
}

/* ==== 移动端 ≤768px：单列 ==== */
@media (max-width: 768px) {
    .posts-row.zibll-child-grid {
        grid-template-columns: 1fr;
        margin-bottom: 15px;
    }
    .posts-row.zibll-child-grid > .posts-item .item-thumbnail {
        padding-bottom: var(--zcl-grid-m, 60%); /* 单列网格卡，后台可调 */
        max-height: none; /* 移动端卡片窄，不存在巨图问题 */
    }
    .posts-row.zibll-child-grid > .posts-item .item-body {
        padding: 12px 14px 14px;
    }
    .posts-row.zibll-child-grid > .posts-item .item-heading {
        font-size: 16px;
    }
    .posts-row.zibll-child-grid > .posts-item .item-excerpt {
        margin-bottom: 6px;
    }
    /* meta 两端布局在窄卡（扁平两列 / 时间轴右列）下允许换行：
       meta-right 全部项恢复显示后总宽可能超出卡宽，溢出比换行更难看 */
    .posts-row.zibll-child-grid .item-meta {
        flex-wrap: wrap;
        row-gap: 2px;
    }
}

/* ==== 超窄屏 ≤480px：进一步收紧 ==== */
@media (max-width: 480px) {
    .posts-row.zibll-child-grid > .posts-item .item-body {
        padding: 10px 12px 12px;
    }
}

/* ==== svg 图标护栏（全页生效级）：页面含 atomic-wind 等块时，其 Tailwind preflight 全局
   svg{display:block} 会把行内 meta 项顶成多行（2026-08-31 bare 页实测，默认模板/含页眉页脚
   页同样存在）。此处显式恢复行内盒 + 父主题同款尺寸（值与父主题全局 svg 规则一致，
   仅多 display:inline-block）；作用域锁 .posts-row，不碰列表区之外的任何 svg ==== */
.posts-row svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
}
.posts-row svg.icon {
    margin: 0;
}