/* ============================================================
   layout.css - 布局：容器 / 两栏 / 侧边栏 / 通用页面两栏
   ============================================================ */

/* ===== 主容器（左右留出工具栏空间） ===== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    padding-left: calc(var(--toolbar-width) + var(--space-lg));
    padding-right: calc(var(--toolbar-width) + var(--space-lg));
}

@media (min-width: 1600px) {
    .container {
        max-width: 1400px;
    }
}

@media (max-width: 992px) {
    .container {
        padding-left: calc(var(--toolbar-width) + var(--space-md));
        padding-right: calc(var(--toolbar-width) + var(--space-md));
    }
}

@media (max-width: 768px) {
    :root {
        --toolbar-width: 54px;
    }
    .container {
        padding-left: calc(var(--toolbar-width) + var(--space-sm));
        padding-right: calc(var(--toolbar-width) + var(--space-sm));
    }
}

@media (max-width: 480px) {
    :root {
        --toolbar-width: 48px;
    }
    .container {
        padding-left: calc(var(--toolbar-width) + var(--space-xs));
        padding-right: calc(var(--toolbar-width) + var(--space-xs));
    }
}

/* ===== 页面主区 ===== */
.page-main {
    padding: var(--space-lg) 0 var(--space-xl);
    min-height: calc(100vh - 200px);
}

/* ===== 两栏布局（首页：左 20% / 右 80%）===== */
.layout-2col {
    display: grid;
    grid-template-columns: minmax(240px, 20%) 1fr;
    gap: var(--space-lg);
    align-items: start;
}

/* 小屏：变单栏 */
@media (max-width: 900px) {
    .layout-2col {
        grid-template-columns: 1fr;
    }
}

/* ===== 侧边栏（首页左栏） ===== */
.layout-sidebar {
    position: sticky;
    top: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.layout-sidebar::-webkit-scrollbar {
    width: 4px;
}

@media (max-width: 900px) {
    .layout-sidebar {
        position: static;
        max-height: none;
    }
}

/* ===== 主内容区（右）===== */
.layout-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ===== 单栏内容（居中）===== */
.layout-narrow {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* ============================================================
   ★ 通用页面两栏（文章 / 独立页 / 系统归档页）
   左 = 主内容 1fr，右 = 侧栏 300px
   ============================================================ */
.page-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-lg);
    align-items: start;
}

/* 中等屏幕：侧栏稍窄 */
@media (max-width: 1100px) {
    .page-2col {
        grid-template-columns: minmax(0, 1fr) 260px;
    }
}

/* 小屏：隐藏侧栏，单栏 */
@media (max-width: 900px) {
    .page-2col {
        grid-template-columns: 1fr;
    }
    .page-2col .col-sidebar {
        display: none;
    }
}

/* ===== 侧栏列（通用页面右侧） ===== */
.col-sidebar {
    min-width: 0;
}

/* ===== 主内容列（通用页面左侧） ===== */
.page-2col .col-main {
    min-width: 0;
}

/* ===== 通用卡片 ===== */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.card-pad {
    padding: var(--space-lg);
}

/* ===== 卡片头部 ===== */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.card-title {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.card-title .badge {
    font-size: var(--font-xs);
    font-weight: 400;
    color: var(--text-muted);
    background: var(--bg-hover);
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

/* ===== 页面标题区（各类归档页）===== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.page-header h1 {
    font-size: var(--font-2xl);
    font-weight: 700;
}

.page-header .count {
    font-size: var(--font-sm);
    color: var(--text-muted);
    background: var(--bg-hover);
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
    .card-pad {
        padding: var(--space-md);
    }

    .card-header {
        padding: var(--space-sm) var(--space-md);
    }

    .page-header {
        padding: var(--space-sm) var(--space-md);
    }

    .page-header h1 {
        font-size: var(--font-xl);
    }
}

@media (max-width: 480px) {
    .card-pad {
        padding: var(--space-sm);
    }

    .page-header h1 {
        font-size: var(--font-lg);
    }
}