/**
 * 首页皮肤共享骨架（跨皮肤公用结构：区块容器/宽度模式/标题行/卡片化/文章卡网格）
 * 各皮肤 CSS 只写自己的外观差异（先 base 后皮肤层，enqueue 依赖保证顺序）
 * 颜色全部走父主题变量，深浅色模式自动适配
 */

/*==== 皮肤根容器：撑满页眉页脚之间，通栏区块自行控制内边距 ====*/
.zibll-home {
    position: relative;
    margin: 0;
    --zsh-narrow: 800px;  /*窄版宽度上限，皮肤级外观设置经 wp_head 覆写*/
    --zsh-radius: var(--main-radius); /*卡片圆角（0=跟随主题）*/
    --zsh-gap: 24px;      /*相邻区块卡片间距*/
}

/*==== 入场动画（隐藏态仅在 html.zanim-js 下生效：类由 wp_head 内联脚本最先加上，
   无 JS / 脚本失败时内容恒可见；reduced-motion 访客直接显示）====*/
.zanim-js [data-zanim] {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.zanim-js [data-zanim="fade-up"]     { transform: translateY(36px); }
.zanim-js [data-zanim="zoom-in"]     { transform: scale(.94); }
.zanim-js [data-zanim="slide-left"]  { transform: translateX(-44px); }
.zanim-js [data-zanim="slide-right"] { transform: translateX(44px); }
.zanim-js [data-zanim].zanim-in {
    opacity: 1;
    transform: none;
}
.zanim-js [data-zanim].zanim-now {
    transition: none; /*首屏内元素直接显示，不做动画（JS 判定）*/
}
@media (prefers-reduced-motion: reduce) {
    .zanim-js [data-zanim] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/*==== 通栏区块 ====
   区块级设置（上/下外边距、上/下内边距）经内联 style 以 CSS 变量挂 section（引擎
   zibll_home_section_style），var() 回退即默认；内联优先级最高，选择器/媒体查询压不过。
   --zsh-mb 覆盖全局「区块纵向间距」。*/
.zibll-home-section {
    padding: var(--zsh-pt, 40px) 0 var(--zsh-pb, 40px);
    margin-top: var(--zsh-mt, 0);
    margin-bottom: var(--zsh-mb, 0);
}
.zibll-home-section + .zibll-home-section {
    padding-top: var(--zsh-pt, 0px); /*相邻区块不重复上半间距（用户显式设置经变量仍生效）*/
}

/*==== 区块宽度模式（引擎按后台设置为区块挂 zibll-home-w-* 类）=====
   container=继承主题 .container 宽度（默认）
   full=通栏全宽：区块无 .container，内层自补横向留白；「通栏内容宽度」>0 时内容限宽居中
   narrow=窄版居中：内容上限 --zsh-narrow */
.zibll-home-w-full > .zibll-home-full-in {
    width: 100%;
    padding: 0 clamp(16px, 4vw, 64px);
}
/*通栏内容层：背景/卡片保持铺满全宽，仅内容限宽居中（「通栏内容宽度」>0 时经 --zsh-fullw 生效）*/
.zibll-home-w-full > .zibll-home-full-in > .zibll-home-full-con {
    max-width: var(--zsh-fullw, 100%);
    margin-left: auto;
    margin-right: auto;
}
.zibll-home-w-narrow > .container {
    width: 100%;
    max-width: var(--zsh-narrow);
}

/*==== 区块卡片化（皮肤根挂 zibll-home-carded 时启用）：
   区块整体成一张卡片，标题行成为卡片头部——标题与内容融为一体。
   间距模型：每个区块（含 hero）统一 margin-bottom=--zsh-gap——hero 与首卡、
   卡与卡、末卡与页脚三处间隔全部由同一个设置驱动 ====*/
.zibll-home-carded .zibll-home-section {
    padding: 0;
    margin: var(--zsh-mt, 0) 0 var(--zsh-mb, var(--zsh-gap));
}
.zibll-home-carded .zibll-home-section:last-child {
    margin-bottom: var(--zsh-mb, 0); /*末卡间隔由根容器 padding-bottom 出，避免双重*/
}
.zibll-home-carded .zibll-home-section:not(.zibll-home-hero) > .container,
.zibll-home-carded .zibll-home-section:not(.zibll-home-hero) > .zibll-home-full-in {
    padding: var(--zsh-pt, 24px) clamp(16px, 3vw, 28px) var(--zsh-pb, 24px);
    border-radius: var(--zsh-radius);
    background: var(--main-bg-color);
    box-shadow: var(--main-shadow);
}
/*卡片底色变体（外观设置→卡片底色，深浅色自动适配；tint 微染必须给纯变量回退行）*/
.zibll-home-bg-muted.zibll-home-carded .zibll-home-section:not(.zibll-home-hero) > .container,
.zibll-home-bg-muted.zibll-home-carded .zibll-home-section:not(.zibll-home-hero) > .zibll-home-full-in {
    background: var(--muted-bg-color);
}
.zibll-home-bg-tint.zibll-home-carded .zibll-home-section:not(.zibll-home-hero) > .container,
.zibll-home-bg-tint.zibll-home-carded .zibll-home-section:not(.zibll-home-hero) > .zibll-home-full-in {
    background: var(--main-bg-color);
    background: color-mix(in srgb, var(--theme-color) 5%, var(--main-bg-color));
}
.zibll-home-bg-plain.zibll-home-carded .zibll-home-section:not(.zibll-home-hero) > .container,
.zibll-home-bg-plain.zibll-home-carded .zibll-home-section:not(.zibll-home-hero) > .zibll-home-full-in {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--main-border-color);
}
/*卡片头部：标题行与卡片同底色，仅以分隔线与内容区分。
  头部负 margin 反拉贴卡片顶，自身上内边距同样消费 --zsh-pt——否则头部写死的 padding
  会遮住区块级「上内边距」设置（设多少标题到卡顶距离都恒为旧值，表现为设置无效）。
  语义与设置一致：0=标题贴卡片顶*/
.zibll-home-carded .zibll-home-sec-head {
    margin: calc(var(--zsh-pt, 24px) * -1) -24px 20px;
    padding: var(--zsh-pt, 24px) 24px 14px;
    border-bottom: 1px solid var(--main-border-color);
    border-radius: var(--zsh-radius) var(--zsh-radius) 0 0;
}

/*==== 区块标题行（对齐 al-left/al-center 独立；样式 st-plain 简洁文本 / st-icon 图标 /
   st-motion 流光动效。装饰全部为真实元素或动画渐变，不用伪元素线条）====*/
.zibll-home-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.zibll-home-sec-head-in {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.zibll-home-sec-titwrap {
    min-width: 0;
}
.zibll-home-sec-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--main-color);
}
.zibll-home-sec-sub {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted-2-color);
}
/*居中对齐：标题组整体居中（图标式=图标在上，标题中，副标题下）*/
.zibll-home-sec-head.al-center {
    flex-direction: column;
    gap: 10px;
    text-align: center;
}
.zibll-home-sec-head.al-center .zibll-home-sec-head-in {
    flex-direction: column;
    gap: 10px;
}
/*图标样式：图标片（主题色渐变微染）；排布由对齐决定*/
.zibll-home-sec-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 18px;
    color: var(--theme-color);
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-color) 16%, transparent), color-mix(in srgb, var(--theme-color) 7%, transparent));
}
/*流光动效：主题色高光周期性扫过标题文字（不支持 clip 时为纯色，动画自动无副作用）*/
.zibll-home-sec-head.st-motion .zibll-home-sec-title {
    color: var(--main-color);
    background: linear-gradient(110deg, var(--main-color) 42%, var(--theme-color) 50%, var(--main-color) 58%);
    background-size: 240% 100%;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .zibll-home-sec-head.st-motion .zibll-home-sec-title {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: zb-sec-shine 4.5s linear infinite;
    }
}
@keyframes zb-sec-shine {
    0%   { background-position: 220% 0; }
    100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .zibll-home-sec-head.st-motion .zibll-home-sec-title {
        animation: none;
    }
}
.zibll-home-sec-more {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--muted-2-color);
    transition: color .2s;
}
.zibll-home-sec-more:hover {
    color: var(--theme-color);
}

/*==== 文章卡网格（共享结构，外观由各皮肤层覆写）====*/
.zibll-home-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.zibll-home-post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--zsh-radius, var(--main-radius));
    background: var(--main-bg-color);
    color: var(--main-color);
    transition: transform .25s, box-shadow .25s;
}
.zibll-home-post-card:hover {
    transform: translateY(-4px);
}
.zibll-home-post-card .card-thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /*16:9，皮肤可改比例*/
    overflow: hidden;
    background: var(--muted-bg-color);
}
.zibll-home-post-card .card-thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.zibll-home-post-card:hover .card-thumb img {
    transform: scale(1.05);
}
.zibll-home-post-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
}
.zibll-home-post-card .card-cat {
    font-size: 12px;
    color: var(--theme-color);
    margin-bottom: 8px;
}
.zibll-home-post-card .card-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--main-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zibll-home-post-card .card-excerpt {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted-2-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zibll-home-post-card .card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    font-size: 12px;
    color: var(--muted-2-color);
}
.zibll-home-post-card .card-more {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s, transform .25s;
    white-space: nowrap;
}
.zibll-home-post-card:hover .card-more {
    opacity: 1;
    transform: none;
}
/*无缩略图卡：正文区上移补位（避免顶部空白）*/
.zibll-home-post-card.no-thumb .card-body {
    padding-top: 20px;
}

/*==== 列表样式模式容器（精选文章选 父主题/交错/扁平/时间轴 时，容器在卡片内部）====*/
.zibll-home-section .posts-row {
    margin: 0;
}
.zibll-home-carded .posts-row .posts-item {
    box-shadow: none;
}

/*==== 短代码/HTML 区容器 ====*/
.zibll-home-shortcode > *,
.zibll-home-html > * {
    max-width: 100%;
}

/*==== 响应式 ====*/
@media (max-width: 992px) {
    .zibll-home-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .zibll-home-section {
        padding: var(--zsh-pt, 26px) 0 var(--zsh-pb, 26px);
    }
    .zibll-home-sec-title {
        font-size: 18px;
    }
    .zibll-home-sec-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        font-size: 15px;
    }
    .zibll-home-carded .zibll-home-section:not(.zibll-home-hero) > .container,
    .zibll-home-carded .zibll-home-section:not(.zibll-home-hero) > .zibll-home-full-in {
        padding: var(--zsh-pt, 18px) 16px var(--zsh-pb, 18px);
    }
    .zibll-home-carded .zibll-home-sec-head {
        margin: calc(var(--zsh-pt, 18px) * -1) -16px 16px;
        padding: var(--zsh-pt, 18px) 16px 12px;
    }
}
@media (max-width: 560px) {
    .zibll-home-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}