/* resources/css/layout/_grid.css
   全站断点定义 + 通用栏容器。
   各栏目三栏/两栏 grid 在此定义基础变量，具体 grid-template 在各 module 实现。
*/

/* ── 断点 token（与 Tabler Bootstrap 保持一致） ── */
:root {
    --bp-sm:  576px;
    --bp-md:  768px;
    --bp-lg:  992px;
    --bp-xl:  1200px;
}

/* ── 通用两栏容器 ── */
.layout-2col {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

/* ── 通用三栏容器 ── */
.layout-3col {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 1.5rem;
    align-items: start;
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

/* ── 响应式降级 ── */
@media (max-width: 992px) {
    .layout-3col {
        grid-template-columns: 180px 1fr;
    }
}

@media (max-width: 768px) {
    .layout-2col,
    .layout-3col {
        grid-template-columns: 1fr;
    }
}