/**
 * 站长自建页面的电脑端版式。
 *
 * 只在 `kind == "page"` 的路由上加载（`shell::assets` 的 `PC_ROUTE_ASSETS`），
 * 而且**只在配了侧边栏时才真正用得上** —— 没侧栏的页面服务端不包骨架，
 * 下面这几条一条都匹配不到。
 *
 * 三栏的写法与 SNS 首页那一套对齐（`pc/css/sns.css` 的 `.ls-sns-page`）：
 * 同样的间距变量、同样的 300px 侧栏宽度。两套各写各的话，同一个小工具
 * 在首页和自建页面上会长得不一样宽。
 */

.ls-page-layout {
    display: flex;
    gap: var(--ls-gap, 12px);
    padding: 12px;
    max-width: var(--ls-width);
    margin: 0 auto;
    box-sizing: border-box;
    align-items: flex-start;
}

/* 正文占满剩下的宽度。`min-width: 0` 少不得 —— flex 子项的默认最小宽度是
   内容宽度，站长正文里一张宽图或一段不换行的代码就能把侧栏挤出屏幕。 */
.ls-page-main {
    flex: 1;
    min-width: 0;
}

/* 侧栏宽度与 SNS 首页那两条一致（`.ls-sidebar-left` 是 300px）。 */
.ls-page-side {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ls-gap, 12px);
}

/* 窄屏改成上下排：两栏加正文在 1100 以下已经开始横向滚了。
   侧栏排到正文**后面** —— 手机浏览器上先看到内容比先看到一列小工具重要。 */
@media (max-width: 1100px) {
    .ls-page-layout {
        flex-direction: column;
    }

    .ls-page-side {
        width: 100%;
        order: 2;
    }

    .ls-page-main {
        order: 1;
    }
}