/* ==========================================================================
   侧边栏加宽（自定义样式，不修改主题源文件，更新主题不丢失）
   --------------------------------------------------------------------------
   主题默认布局（themes/butterfly/source/css）：
     .layout            max-width: 1200px
     .layout > 主内容    width: 74%
     #aside-content     width: 26%      ← 在 1200px 容器下只有约 304px，偏窄

   本文件改为：侧边栏用弹性宽度（310px ~ 380px），主内容自动占满剩余空间，
   并把整体容器从 1200px 放宽到 1320px —— 大屏下侧边栏更宽且正文不缩水。

   想再宽/再窄，改下面 4 个变量即可（改完 hexo g 重新生成，或刷新预览）。
   ========================================================================== */

:root {
  --sb-max: 380px;      /* 侧边栏最大宽度（原约 304px）：大屏下生效 */
  --sb-min: 310px;      /* 侧边栏最小宽度（小屏下生效，原约 252px） */
  --sb-ratio: 30%;      /* 侧边栏占行宽比例（原主题为 26%），中间尺寸由它决定 */
  --layout-max: 1320px; /* 页面整体最大宽度（原 1200px） */
}

/* ── 桌面端（≥901px，与主题的 minWidth901 断点对齐）──────────────────── */
@media screen and (min-width: 901px) {
  /* 整体容器放宽一点，避免侧边栏变宽后正文被压缩 */
  .layout {
    max-width: var(--layout-max);
  }

  /* 主内容：不再固定 74%，改为占满侧边栏之外的剩余空间 */
  #content-inner > div:first-child {
    width: auto;
    flex: 1 1 0%;
    min-width: 0;
  }

  /* 侧边栏：随屏幕宽度在 310px ~ 380px 之间自适应
     （实测：≥1350px 屏幕 380px；1280px 屏幕 367px；1200px 屏幕 343px；
       1024px 屏幕取最小值 310px） */
  #aside-content {
    width: clamp(var(--sb-min), var(--sb-ratio), var(--sb-max));
    flex: 0 0 auto;
  }
}

/* ── 超大屏（≥2000px）：主题本来就会把容器放到 70% 并按比例放大侧边栏，
      这里跟随其比例（容器放宽到 75%），侧边栏不设像素上限、按 30% 同步放大，
      这样侧边栏明显变宽，同时正文仍不小于原来 ─────────────────────── */
@media screen and (min-width: 2000px) {
  :root {
    --sb-max: 100%;
    --layout-max: 75%;
  }
}

/* ── 窄屏（≤900px）：主题会把侧边栏并到正文下方，保持原样不动 ────────── */