/* ============================================================
   2-layout / container.css
   统一的"内容容器系统"——全站所有页面宽度的唯一决定者

   设计原则：
   1. 所有容器基于 5 种"页面模式"之一：wide / standard / reading / form / auth
   2. 模式通过语义 class 标注，或通过 .content--* 修饰类显式指定
   3. 各 4-pages/*.css 不再定义 max-width / margin:0 auto
   4. 响应式 padding 用 clamp()，不再有"桌面 24、移动 16"的硬切换

   使用（3 种方式任选一种）：
   A) 页面模板已有语义根 class（推荐，零改动）：
      <div class="content forum-page"> → 自动套用 standard(1200px)
      <div class="content static-content-page"> → 自动套用 reading(800px)

   B) 在 .content 上加修饰类（显式、明确）：
      <div class="content content--wide">
      <div class="content content--reading">

   C) 纯新页面无语义根 class：
      默认 .content 继承 --container-wide（1440px）

   ============================================================ */


/* ────────────────────────────────────────────────────────────
   基础：.content 是所有页面的内容区域
   ──────────────────────────────────────────────────────────── */
.content {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: var(--container-wide);   /* 默认：宽 */
    margin: 0 auto;                      /* 默认：居中 */
    padding: var(--content-padding-y) var(--content-padding-x);
    overflow-x: clip;
    box-sizing: border-box;
}

/* ────────────────────────────────────────────────────────────
   修饰类：显式选择容器模式
   用法：<div class="content content--reading">
   ──────────────────────────────────────────────────────────── */
.content--wide      { max-width: var(--container-wide); }
.content--standard  { max-width: var(--container-standard); }
.content--reading   { max-width: var(--container-reading); }
.content--form      { max-width: var(--container-form); }

/* ────────────────────────────────────────────────────────────
   语义根类：基于现有模板 class 自动套用容器尺寸
   ──────────────────────────────────────────────────────────── */

/* ── Standard (1200px) ── 双栏详情型页面 */
.content.forum-page,              /* page-forum.php 论坛列表 */
.content.post-detail-page,        /* single-forum_post.php / page-post-detail.php */
.content.profile-content,         /* page-profile.php 个人资料 */
.content.member-profile-page,     /* page-member.php 会员主页 */
.content.blog-single-page         /* page-blog-detail.php 博客详情 */
{
    max-width: var(--container-standard);
}

/* ── Reading (800px) ── 长文阅读型页面 */
.content.tool-detail-page,        /* single-ai_tool.php 工具详情 */
.content.static-content-page,     /* About/Contact/Help/Privacy/Terms */
.content.user-public-page,        /* page-user-posts / followers / following */
.content.messages-content         /* page-messages.php 消息通知列表 */
{
    max-width: var(--container-reading);
}

/* ── Form (640px) ── 表单 / 聚焦操作型页面 */
.content.compose-page             /* page-new-post.php / page-edit-post.php */
{
    max-width: var(--container-form);
}

/* ────────────────────────────────────────────────────────────
   双栏布局辅助：在 standard 模式下的主 + 侧栏
   所有"详情 + 侧栏"的页面共用（可选使用）
   ──────────────────────────────────────────────────────────── */
.split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--gap-lg);
    align-items: start;
}

.split-layout--wide-sidebar {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.split-layout--narrow-sidebar {
    grid-template-columns: 240px minmax(0, 1fr);
}

/* 侧栏 sticky，顶部吸附 */
.split-layout > aside,
.split-layout > .split-sidebar {
    position: sticky;
    top: calc(var(--topbar-height) + var(--gap-md));
    height: fit-content;
}

/* ────────────────────────────────────────────────────────────
   认证页：独立的 full-viewport 居中模式
   替换原 auth.css 里的 .auth-page / .auth-container
   ──────────────────────────────────────────────────────────── */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--content-padding-x);
    background: var(--bg-body);
}

.auth-container {
    width: 100%;
    max-width: var(--container-auth);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: var(--shadow-md);
}

/* ────────────────────────────────────────────────────────────
   响应式：三个断点。全站统一。
   ──────────────────────────────────────────────────────────── */

/* ── 平板：1024px 及以下：双栏变单栏 ── */
@media (max-width: 1024px) {
    .split-layout,
    .split-layout--wide-sidebar,
    .split-layout--narrow-sidebar {
        grid-template-columns: 1fr;
    }

    .split-layout > aside,
    .split-layout > .split-sidebar {
        position: static;
        order: 2;   /* 侧栏落到主内容下方 */
    }

    /* 窄侧栏变体保持侧栏在上 */
    .split-layout--narrow-sidebar > .split-sidebar {
        order: 1;
    }
}

/* ── 手机：768px 及以下：.main 不再留 sidebar 空间 ── */
@media (max-width: 768px) {
    .content {
        padding-bottom: calc(var(--content-padding-y) + 64px); /* 避开底部 nav */
    }

    /* 认证页也要避开底部 nav */
    .auth-page {
        padding-bottom: calc(var(--content-padding-x) + 64px);
    }
}