/* ── 单页布局 前端样式（旧版 + 新版 CSS Grid）─────────────────────── */

/* 外层容器：始终纵向堆叠（内部含 header/body/footer 区域）
   可配置变量：在父元素或子主题中覆盖 */
.bv-sp-layout {
    --sp-sticky-top:  80px;   /* 侧栏粘性吸顶偏移 */
    --sp-col-gap:     24px;   /* 双栏间距 */
    --sp-zone-gap:    0px;    /* Grid 模板各 zone 行间距（默认无间距） */
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 单列 body */
.bv-sp-body.bv-sp-cols-1 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* 双列 body */
.bv-sp-body.bv-sp-cols-2 {
    display: grid;
    grid-template-columns: var(--sp-ratio, 3fr 1fr);
    grid-template-areas: "main sidebar";
    gap: var(--sp-col-gap);
    align-items: start;
    width: 100%;
}
.bv-sp-body.bv-sp-cols-2 .bv-sp-main    { grid-area: main; }
.bv-sp-body.bv-sp-cols-2 .bv-sp-sidebar { grid-area: sidebar; position: sticky; top: var(--sp-sticky-top); }

/* 全宽区域 */
.bv-sp-zone-header,
.bv-sp-zone-after-content,
.bv-sp-zone-footer { width: 100%; }

@media (max-width: 768px) {
    .bv-sp-body.bv-sp-cols-2 {
        grid-template-columns: 1fr;
        grid-template-areas: "main" "sidebar";
    }
    .bv-sp-body.bv-sp-cols-2 .bv-sp-sidebar { position: static; }
}

/* ── 新版：CSS Grid 模板布局（bv-sp-tpl）────────────────────────────── */
.bv-sp-layout.bv-sp-tpl {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: var(--sp-zone-gap);
    width: 100%;
}

/* 每个区域根据 PHP 输出的内联 CSS 变量定位 */
.bv-sp-layout.bv-sp-tpl .bv-sp-zone {
    grid-column: var(--sp-col, 1 / -1);
    grid-row:    var(--sp-row, auto);
}

/* 侧栏区域在双栏模板中保持粘性 */
.bv-sp-layout.bv-sp-tpl .bv-sp-zone-sidebar {
    position: sticky;
    top: var(--sp-sticky-top);
    align-self: start;
}

@media (max-width: 768px) {
    .bv-sp-layout.bv-sp-tpl {
        grid-template-columns: 1fr;
    }
    .bv-sp-layout.bv-sp-tpl .bv-sp-zone {
        grid-column: 1 / -1 !important;
        grid-row:    auto !important;
    }
    .bv-sp-layout.bv-sp-tpl .bv-sp-zone-sidebar {
        position: static;
    }
}