/*
 * 子主题列表风格：时间轴式
 * 共享布局骨架见 list-base.css。行式布局：
 * [日期块 | 定宽定高缩略图 | 标题+摘要+tags，meta 恒钉卡片底部]
 * 卡片有底色（main-bg，深浅色自适应）无阴影，靠底色与间隔区分；
 * 相对时间隐藏（与左侧日期块重复），作者是否显示跟随父主题设置
 */

/* ==== 容器：单列卡片，间隔后台可调 ==== */
.posts-row.zibll-child-grid.zibll-child-timeline {
    grid-template-columns: 1fr;
    gap: var(--zcl-gap, 14px);
    margin-bottom: 20px;
}

/* ==== 行卡片：有底色、无阴影边框（扁平模式兼容）、圆角 ==== */
.posts-row.zibll-child-grid.zibll-child-timeline > .posts-item {
    flex-direction: row;
    align-items: stretch; /* body 满卡高 → meta 恒在卡片底部；图片满卡高 */
    position: relative;
    padding: 0;
    min-height: 160px;
    background: var(--main-bg-color);
    box-shadow: none;
    border: 0;
    /* 仅右侧圆角：左侧图片贴边，保证图片四角全直 */
    border-radius: 0 var(--main-radius) var(--main-radius) 0;
    overflow: hidden;
}
.posts-row.zibll-child-grid.zibll-child-timeline > .posts-item:hover {
    transform: none;
    box-shadow: 0 0 10px var(--main-shadow);
}

/* ==== 中：文本列（覆盖父主题 jsb，内容顶对齐；meta 包裹层由 base 的 margin-top:auto 压底）==== */
.posts-row.zibll-child-grid.zibll-child-timeline > .posts-item .item-body {
    justify-content: flex-start;
}
.posts-row.zibll-child-grid.zibll-child-timeline > .posts-item .item-heading {
    font-size: 19px;
    margin-bottom: 10px;
}
.posts-row.zibll-child-grid.zibll-child-timeline > .posts-item .item-excerpt {
    -webkit-line-clamp: 2;
}

/* 缩略图：宽高均由后台独立设置，fit-cover 裁切；卡片更高时缩略图顶对齐 */
.posts-row.zibll-child-grid.zibll-child-timeline > .posts-item > .post-graphic {
    flex: 0 0 var(--zcl-tlw, 220px);
    width: var(--zcl-tlw, 220px);
    align-self: flex-start;
    margin: 0;
}
.posts-row.zibll-child-grid.zibll-child-timeline > .posts-item .item-thumbnail {
    width: 100%;
    height: var(--zcl-tlh, 220px);
    min-height: 0;
    padding-bottom: 0;
    border-radius: 0;
}

/* ==== 左：日期块（顶部大字=日，底部=年月）==== */
.posts-row.zibll-child-grid.zibll-child-timeline > .posts-item > .zibll-child-tl-date {
    flex: 0 0 110px;
    align-self: center;
    text-align: center;
    padding: 0 12px 0 16px;
}
.zibll-child-tl-day {
    display: block;
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    color: var(--muted-2-color);
}
.zibll-child-tl-md {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--main-border-color);
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--muted-2-color);
    white-space: nowrap;
}

/* ==== 卡片底部 meta：传统横排；相对时间隐藏（与左日期块重复），作者跟随父主题设置 ==== */
.posts-row.zibll-child-grid.zibll-child-timeline > .posts-item .item-meta > .icon-circle,
.posts-row.zibll-child-grid.zibll-child-timeline > .posts-item .meta-author .icon-circle {
    display: none !important;
}

/* ==== 移动端 ≤768px：日期行在上（不变），下方 [左图 | 右文] 两列 ====
   纯 CSS 网格重排条目的三个子块（日期块/图/文列），无结构改动；
   右文 = 简介 + 标签 + meta（标题隐藏，2026-09 与需求方确认）；
   图片列拉伸至行高（右文更高时图随行高，fit-cover 裁切） */
@media (max-width: 768px) {
    .posts-row.zibll-child-grid.zibll-child-timeline > .posts-item {
        /* ⚠️必须 !important：atomic-wind 插件的 Tailwind `.flex{display:flex!important}` 会压掉
           本条 display:grid（条目元素带 flex 类）→ 移动端网格重排整体失效。双 !important 比特异性
           （0,3,1 vs 0,1,0）我方胜，不赌加载顺序（同 §8.2.14 modal/collapse 护栏思路） */
        display: grid !important;
        flex-direction: column;
        grid-template-columns: 110px minmax(0, 1fr);
        grid-template-areas:
            'date date'
            'img  body';
        padding: 0;
        min-height: 0;
    }
    /* 无缩略图条目：图列不存在，退化为日期/正文两行通栏，防左侧留 110px 空列 */
    .posts-row.zibll-child-grid.zibll-child-timeline > .posts-item.no-thumb {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            'date'
            'body';
    }
    .posts-row.zibll-child-grid.zibll-child-timeline > .posts-item > .zibll-child-tl-date {
        grid-area: date;
        display: flex;
        flex: 0;
        align-items: baseline;
        gap: 8px;
        padding: 12px 14px 10px;
        text-align: left;
    }
    .zibll-child-tl-day {
        font-size: 26px;
    }
    .zibll-child-tl-md {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
    /* 左：图片列。grid 默认 stretch 拉满行高；缩略图撑满其高度（img 绝对定位铺满） */
    .posts-row.zibll-child-grid.zibll-child-timeline > .posts-item > .post-graphic {
        grid-area: img;
        width: 100%;
        align-self: stretch;
        margin: 0;
    }
    .posts-row.zibll-child-grid.zibll-child-timeline > .posts-item .item-thumbnail {
        height: 100%;
        min-height: 110px; /* 右文极短时图片不至于扁成一条 */
        padding-bottom: 0;
    }
    /* 右：文本列（标题隐藏；简介在上，标签+meta 由 base 的 margin-top:auto 压底） */
    .posts-row.zibll-child-grid.zibll-child-timeline > .posts-item .item-body {
        grid-area: body;
        padding: 3px 8px 5px 8px;
    }
}