/* ============================================================
   文章列表布局样式（niRvana-diy）
   移植自 niRvana 原主题 assets/css/riven-style.css，只取「列表布局」相关段落：
     · 卡片横排 / 左图右文（card-row-mode）
     · 卡片网格每行数量（--ncard-colw）与卡片尺寸适配
     · 移动端适配
   未包含原文件的 .container 宽度覆写、分页样式重绘、页面横幅（pagehero）等部分，
   那些由本主题自身的 CSS 负责。
   后台开关：外观 → 设置外观 → 首页设置 → 文章列表样式
   变量来源：head.php 输出的 --nirvana-site-width / --nthumb-width / --nthumb-height / --ncard-colw
   ============================================================ */

/* ---------- 卡片横排：左图右文（card-row-mode） ---------- */
.postLists.cards.card-row-mode .post-card-wrapper {
    width: 100%;
    max-width: none;
    padding: 0 0 16px;
}

.postLists.cards.card-row-mode .card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: auto;
    min-height: 200px;
}

.postLists.cards.card-row-mode .card a[showas="padding"] {
    display: none;
}

.postLists.cards.card-row-mode .card a[showas="img"] {
    position: relative;
    display: block;
    width: var(--nthumb-width, 260px);
    flex-shrink: 0;
    height: var(--nthumb-height, 200px);
    min-height: 0;
    overflow: hidden;
    border-radius: 13px 0 0 13px !important;
    background: #f5f6f8;
}

.postLists.cards.card-row-mode .card a[showas="img"] .cover {
    padding-top: 0;
    width: 100%;
    min-height: 100%;
    border-radius: 0 !important;
}

.postLists.cards.card-row-mode .card a[showas="img"] img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.postLists.cards.card-row-mode .card .meta {
    flex: 1;
    display: grid;
    grid-template-areas:
        "title"
        "cats"
        "desc";
    grid-template-rows: auto auto auto;
    align-content: center;
    padding: 18px 22px;
    border-radius: 0 13px 13px 0;
}

.postLists.cards.card-row-mode .card h2 {
    grid-area: title;
    font-size: 18px;
    margin: 0 0 10px;
    white-space: normal;
    color: #475669;
}

.postLists.cards.card-row-mode .card h2 a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.postLists.cards.card-row-mode .card .tags {
    grid-area: cats;
    position: relative;
    margin-top: -1px;
    white-space: normal;
}

/* 时间与分类重叠在同一位置：hover 时分类淡出、时间原位浮现 */
.postLists.cards.card-row-mode .card .summary {
    grid-area: cats;
    position: relative;
    margin: 12px 0 0;
    color: #738192;
    font-size: 12px;
}

/* 摘要：原卡片网格模式隐藏，横排模式显示（左图右文右侧摘要） */
.postLists.cards .card-desc {
    display: none;
}

.postLists.cards.card-row-mode .card-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    grid-area: desc;
    margin: 10px 0 0;
    color: #738192;
    font-size: 13px;
    line-height: 1.6;
}

/* 取消下沉：仅去掉位移，保留原 hover 阴影与分类缩放/日期展开特效 */
.postLists.cards.card-row-mode .card:hover {
    transform: none;
}

@media (max-width: 767px) {
    .postLists.cards.card-row-mode .card a[showas="img"] {
        width: 120px;
        min-height: 150px;
    }

    .postLists.cards.card-row-mode .card .meta {
        padding: 12px 14px;
    }

    .postLists.cards.card-row-mode .card h2 {
        font-size: 15px;
    }
}


/* ============================================================
   修复：页面底部横向滚动条
   封面墙场景卡片、卡片列表等元素会横向超出视口几像素，
   在此禁止 html/body 横向滚动，隐藏边缘溢出（不影响纵向滚动与主体内容）。
   ============================================================ */
html,
body {
    overflow-x: hidden !important;
}

/* ---------- 卡片网格：每行卡片数与尺寸适配 ----------
   卡片网格模式（后台「文章列表样式」→「卡片样式」）：
   桌面每行 N 个（--ncard-colw，由后台「每行卡片数」决定）
   说明：所有规则用 :not(.card-row-mode) 限定，避免影响「卡片横排（左图右文）」模式
   ------------------------------------------------------------ */
@media (min-width: 1200px) {
    .postListsModel .postLists.cards:not(.card-row-mode) .post-card-wrapper,
    .postLists.cards:not(.card-row-mode) .post-card-wrapper.col-lg-2_5 {
        width: var(--ncard-colw, 25%);
    }
}

/* 平板（768-1199px）保持每行 3 个 */
@media (min-width: 768px) and (max-width: 1199px) {
    .postListsModel .postLists.cards:not(.card-row-mode) .post-card-wrapper {
        width: 33.3333%;
    }
}

/* 卡片尺寸适配：封面比例 89.45% → 78%（更宽卡片下更协调） */
.postLists.cards:not(.card-row-mode) .card .cover {
    padding-top: 78%;
}

/* 卡片内容区加大内边距、放大标题与分类间距 */
.postLists.cards:not(.card-row-mode) .card .meta {
    padding: 12px 16px 14px;
}

.postLists.cards:not(.card-row-mode) .card h2 {
    font-size: 16px;
    margin: 8px 0 0;
}

.postLists.cards:not(.card-row-mode) .card .tags {
    margin-top: 8px;
}

/* ---------- 深色模式配色（对齐主题暗色卡片 #34425a 体系） ---------- */
html[data-dark="1"] .postLists.cards.card-row-mode .card .meta {
    background: #34425a;
}

html[data-dark="1"] .postLists.cards.card-row-mode .card h2 {
    color: #e8eef7;
}

html[data-dark="1"] .postLists.cards.card-row-mode .card-desc,
html[data-dark="1"] .postLists.cards.card-row-mode .card .summary {
    color: #9aa7b8;
}

html[data-dark="1"] .postLists.cards.card-row-mode .card a[showas="img"] {
    background: #2b3648;
}

/* ---------- 置顶角标（列表卡片 / 单列大卡片 / 微语共用） ---------- */
.ni-sticky-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff6b6b, #f0563e);
    color: #fff !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: .5px;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(240, 86, 62, .35);
}

/* 卡片网格：卡片左上角浮标 */
.postLists.cards .card {
    position: relative;
}

.postLists.cards .card .ni-sticky-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
}

/* 微语页：置顶徽章与作者名同行（作者行结构 strong + 徽章 + block 时间） */
.page-memo-author .ni-sticky-badge {
    margin-left: 8px;
    vertical-align: -3px;
    margin-top: -2px;
}

/* 深色模式微调 */
html[data-dark="1"] .ni-sticky-badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* ============================================================
   简约列表（左文右图，仿 zhoutian.com 布局）
   后台开关：首页设置 → 文章列表样式 → 简约（左文右图）
   ============================================================ */

/* ---------- 容器 ---------- */
.postLists.ni-simple-list {
    display: block;
    margin: 0;
}

/* ---------- 条目卡片：左文右图 ---------- */
.ni-simple-post {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 150px;
    margin-bottom: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 45, 61, .05);
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}

.ni-simple-post:hover {
    box-shadow: 0 8px 22px rgba(31, 45, 61, .1);
}

/* ---------- 左侧文字区 ---------- */
.ni-simple-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 24px 16px;
}

/* 标题（重置主题 article h2 的橙色下边框与颜色） */
.ni-simple-title {
    margin: 0 0 10px;
    border-bottom: 0;
    padding-bottom: 0;
    color: #475669;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
}

.ni-simple-title:before {
    display: none;
    margin-top: 0;
    height: 0;
}

.ni-simple-title a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475669;
    transition: color .22s ease;
}

.ni-simple-title a:hover {
    color: #20a0ff;
}

/* 摘要（max-height 兜底 2 行，防止行高继承差异把盒子撑高） */
.ni-simple-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    max-height: 3.55em;
    color: #738192;
    font-size: 14px;
    line-height: 1.75;
}

/* ---------- 底部元信息行：日期 / 浏览 / 分类 + 右侧评论 ---------- */
.ni-simple-meta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: auto;
    padding-top: 14px;
    color: #738192;
    font-size: 13px;
    line-height: 1.6;
}

/* 日期 / 浏览 / 分类：彩色胶囊底（蓝 / 绿 / 橙），默认隐藏，hover 元信息区时浮现 */
.ni-simple-date,
.ni-simple-views,
.ni-simple-cats {
    display: inline-flex;
    align-items: center;
    padding: 2px 12px;
    border-radius: 20px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}

.ni-simple-date  { background: #e8f4ff; color: #1e93e6; }
.ni-simple-views { background: #eaf9e8; color: #2fa806; }
.ni-simple-cats  { background: #fff4e8; color: #f6821f; }

/* ---------- 文章标签：默认显示彩色胶囊，hover 元信息区时让位给日期/分类 ---------- */
.ni-simple-tags {
    position: absolute;
    left: 0;
    top: 14px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    max-width: 72%;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity .25s ease, transform .25s ease;
}

/* 每个标签一个颜色的胶囊底（浅底深字，与主题色板一致，按序轮换） */
.ni-simple-tags a {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 20px;
    transition: filter .22s ease;
}

.ni-simple-tags a:hover {
    filter: brightness(.95);
    text-decoration: none;
}

/* 彩色胶囊色板：标签与评论数共用（浅底深字，与主题色板一致，随机取用） */
.ni-simple-meta .ni-tag-c0 { background: #fff4e8; color: #f6821f; }
.ni-simple-meta .ni-tag-c1 { background: #e8f4ff; color: #1e93e6; }
.ni-simple-meta .ni-tag-c2 { background: #eaf9e8; color: #2fa806; }
.ni-simple-meta .ni-tag-c3 { background: #f0edff; color: #7a6ee0; }
.ni-simple-meta .ni-tag-c4 { background: #f0f3f7; color: #7b8ba0; }
.ni-simple-meta .ni-tag-c5 { background: #ffeef0; color: #f0606d; }

/* 无标签占位：灰色胶囊，不可点 */
.ni-simple-tags .ni-tag-none {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 20px;
    background: #f0f3f7;
    color: #a5b1c2;
    cursor: default;
}

/* hover 元信息区：标签淡出，日期/浏览/分类浮现 */
.ni-simple-meta:hover .ni-simple-tags {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.ni-simple-meta:hover .ni-simple-date,
.ni-simple-meta:hover .ni-simple-views,
.ni-simple-meta:hover .ni-simple-cats {
    opacity: 1;
    transform: translateY(0);
}

.ni-simple-meta .page-svg-icon {
    margin-right: 4px;
    vertical-align: -0.12em;
    opacity: .8;
}

.ni-simple-meta a {
    color: inherit;
    transition: color .22s ease;
}

.ni-simple-meta a:hover {
    color: #20a0ff;
}

/* 评论数靠右：胶囊底色随机（复用 .ni-tag-c0~c5 色板） */
.ni-simple-comments {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 2px 12px;
    border-radius: 20px;
    transition: filter .22s ease;
}

.ni-simple-comments:hover {
    filter: brightness(.95);
    text-decoration: none;
}

/* ---------- 右侧封面图（自适应卡片高度，永不超出卡片） ---------- */
/* 注意：主题全局规则 article>:last-child{margin-bottom:0!important} 会命中封面（它是卡片最后一个子元素），
   导致图片底部贴边不对称，这里提高优先级恢复底部间距 */
.postLists .ni-simple-post > .ni-simple-cover {
    margin-bottom: 12px !important;
}

.ni-simple-cover {
    display: block;
    flex: 0 0 300px;
    align-self: stretch;
    margin: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f6f8;
}

.ni-simple-cover img {
    display: block;
    width: 300px;
    height: 160px;
    min-height: 150px;
    object-fit: cover;
    transition: transform .35s ease;
}

.ni-simple-post:hover .ni-simple-cover img {
    transform: scale(1.04);
}

/* ---------- 置顶角标 ---------- */
.ni-simple-post .ni-sticky-badge.ni-sticky-badge-corner {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
}

/* 置顶卡片：文字区顶部给角标留空间，避免盖住标题 */
.ni-simple-post.ni-card-sticky .ni-simple-body {
    padding-top: 42px;
}

/* ---------- 列表样式-2（右图左文）：与 simple 同模板，仅镜像为缩略图在左 ---------- */
.ni-simple-rtl .ni-simple-post {
    flex-direction: row-reverse;
}

/* ---------- 移动端：图上文下 ---------- */
@media (max-width: 768px) {
    .ni-simple-post,
    .ni-simple-rtl .ni-simple-post {
        flex-direction: column-reverse;
    }

    .ni-simple-body {
        padding: 14px 16px 12px;
    }

    .ni-simple-title {
        font-size: 17px;
    }

    .ni-simple-excerpt {
        font-size: 13px;
    }

    .ni-simple-cover {
        flex: none;
        margin: 12px 12px 0;
    }

    .ni-simple-cover img {
        width: 100%;
        height: 168px;
    }

    .ni-simple-meta {
        gap: 4px 12px;
        font-size: 12px;
    }

    .ni-simple-comments {
        margin-left: auto;
    }
}

/* ---------- 深色模式 ---------- */
html[data-dark="1"] .ni-simple-post {
    border-color: #2b3648;
    background: #1c222d;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

html[data-dark="1"] .ni-simple-post:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}

html[data-dark="1"] .ni-simple-title a {
    color: #cfd8e3;
}

html[data-dark="1"] .ni-simple-title a:hover {
    color: #20a0ff;
}

html[data-dark="1"] .ni-simple-excerpt,
html[data-dark="1"] .ni-simple-meta {
    color: #9aa7b8;
}

html[data-dark="1"] .ni-simple-cover {
    background: #2b3648;
}

/* ============================================================
   简约样式-1（ni-mini）：仿 9sb.net 单行布局
   小日历日期 + 标题 + 右侧评论数，无缩略图无摘要
   ============================================================ */
.ni-mini-post {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 16px 22px;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 45, 61, .05);
    transition: box-shadow .3s ease, transform .3s ease;
}

.ni-mini-post:hover {
    box-shadow: 0 8px 22px rgba(31, 45, 61, .1);
    transform: translateY(-2px);
}

/* 小日历日期：大号「日」+ 下行「月 / 年」，左侧圆点装饰 */
.ni-mini-date {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;
    line-height: 1.15;
    text-decoration: none;
}

.ni-mini-date::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 38%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c3ccd6;
    transform: translateY(-50%);
    transition: background .25s ease, transform .25s ease;
    animation: ni-mini-dot-breathe 2.6s ease-out infinite;
}

/* 圆点常态呼吸波纹 */
@keyframes ni-mini-dot-breathe {
    0% {
        box-shadow: 0 0 0 0 rgba(163, 178, 194, .45);
    }

    55% {
        box-shadow: 0 0 0 4px rgba(163, 178, 194, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(163, 178, 194, 0);
    }
}

/* 悬停卡片：圆点变蓝、放大，波纹换成主题蓝并加快节奏 */
@keyframes ni-mini-dot-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 160, 255, .5);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(32, 160, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(32, 160, 255, 0);
    }
}

.ni-mini-post:hover .ni-mini-date::before {
    background: #20a0ff;
    transform: translateY(-50%) scale(1.35);
    animation: ni-mini-dot-pulse 1.5s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ni-mini-date::before,
    .ni-mini-post:hover .ni-mini-date::before {
        animation: none;
        transition: none;
    }
}

.ni-mini-day {
    font-size: 24px;
    font-weight: 700;
    color: #475669;
    transition: color .22s ease;
}

.ni-mini-ym {
    margin-top: 2px;
    font-size: 11px;
    color: #a5b1c2;
    white-space: nowrap;
}

.ni-mini-post:hover .ni-mini-day {
    color: #20a0ff;
}

.ni-mini-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 18px;
    padding: 0;
    border: 0;
}

.ni-mini-title a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 500;
    color: #475669;
    transition: color .22s ease;
}

.ni-mini-title a:hover {
    color: #20a0ff;
    text-decoration: none;
}

.ni-mini-comments {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 14px;
    color: #738192;
    transition: color .22s ease;
}

.ni-mini-comments:hover {
    color: #20a0ff;
    text-decoration: none;
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
    .ni-mini-post {
        padding: 13px 16px;
        margin: 0 15px 10px;
    }

    /* 手机端取消悬停上移，避免触屏点击时卡片跳动 */
    .ni-mini-post:hover {
        transform: none;
    }

    .ni-mini-day {
        font-size: 20px;
    }

    .ni-mini-title {
        margin: 0 12px;
    }

    .ni-mini-title a {
        font-size: 14px;
    }
}

/* ---------- 深色模式 ---------- */
html[data-dark="1"] .ni-mini-post {
    border-color: #2b3648;
    background: #1c222d;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

html[data-dark="1"] .ni-mini-post:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}

html[data-dark="1"] .ni-mini-day {
    color: #cfd8e3;
}

html[data-dark="1"] .ni-mini-title a {
    color: #cfd8e3;
}

html[data-dark="1"] .ni-mini-title a:hover {
    color: #20a0ff;
}

html[data-dark="1"] .ni-mini-ym {
    color: #6f7d90;
}

html[data-dark="1"] .ni-mini-comments {
    color: #9aa7b8;
}

html[data-dark="1"] .ni-mini-date::before {
    background: #5f6d80;
    animation-name: ni-mini-dot-breathe-dark;
}

@keyframes ni-mini-dot-breathe-dark {
    0% {
        box-shadow: 0 0 0 0 rgba(95, 109, 128, .6);
    }

    55% {
        box-shadow: 0 0 0 4px rgba(95, 109, 128, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(95, 109, 128, 0);
    }
}

html[data-dark="1"] .ni-mini-post:hover .ni-mini-date::before {
    background: #20a0ff;
    animation-name: ni-mini-dot-pulse;
}

/* ============================================================
   列表页分页：完全沿用微语页 .home-pagination 胶囊分段条
   （上一页 + 页码 + 省略号 + 下一页 + .anchor 滑块）
   深色见 niRvana_dark.css 的 html[data-dark="1"] 规则
   ============================================================ */
.pagenav.page-microblog-pagi {
    margin: 28px auto -20px;
    padding: 0;
    text-align: center;
}

.page-microblog-pagi .home-pagination {
    position: relative;
    white-space: nowrap;
    margin: 0 auto;
    padding: 1px;
    text-align: center;
    display: block;
    width: max-content;
    background: #e0e4ec;
    border-radius: 100px;
    -webkit-box-shadow: 0 1px rgba(255, 255, 255, .5), 0 5px 10px rgba(31, 45, 61, .15) inset;
    box-shadow: 0 1px rgba(255, 255, 255, .5), 0 5px 10px rgba(31, 45, 61, .15) inset;
    list-style: none;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.page-microblog-pagi .home-pagination > li {
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
}

.page-microblog-pagi .home-pagination > li > a {
    display: block;
    text-decoration: none;
    position: relative;
    color: #99a9bf;
    text-shadow: 0 1px rgba(255, 255, 255, .75);
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 14px;
    -webkit-transition: .25s;
    transition: .25s;
    border-radius: 100px;
}

.page-microblog-pagi .home-pagination > li:not(.active) > a:hover {
    text-shadow: 0 0 10px #fff, 0 0 13px #fff;
}

.page-microblog-pagi .home-pagination > li.active > a {
    color: #738192;
    font-weight: 600;
}

.page-microblog-pagi .home-pagination > li.anchor {
    position: absolute;
    top: 1px;
    left: 0;
    width: 38px;
    height: 38px;
    background: #fff;
    background: linear-gradient(#fff, #f7f8fa);
    border-radius: 100px;
    -webkit-box-shadow: 0 6px 6px rgba(31, 45, 61, .05), 0 10px 10px rgba(31, 45, 61, .15), 0 -1px 2px rgba(255, 255, 255, .5) inset;
    box-shadow: 0 6px 6px rgba(31, 45, 61, .05), 0 10px 10px rgba(31, 45, 61, .15), 0 -1px 2px rgba(255, 255, 255, .5) inset;
    -webkit-transition: left .25s ease, width .25s ease, opacity .25s ease;
    transition: left .25s ease, width .25s ease, opacity .25s ease;
    pointer-events: none;
}

.page-microblog-pagi .home-pagination .home-page-text {
    display: none;
}