/* ============================================
   左侧栏样式 sidebar.css
   适用范围：二级页（sidebar-list.php）+ 三级页（sidebar-detail.php）
   ------------------------------------------------------------
   内容沿用老站左栏的结构，视觉按现有设计语言重写：
     ① 分类导航 / 同类作品推荐（列表卡片）
     ② 广告位（整图链接）
     ③ 新上作品（缩略图网格）/ 常见基础介绍（文字列表）
   手机优先，断点与全站统一：768 / 992 / 1200 / 1400
   ★ 首页不加载本文件
   最后更新：2026-10-26（新建）
   ============================================ */


/* ============================================
   1. 左栏容器
   本身不放背景，让各个 .side-box 自己成卡片，
   这样天空留白处露出的还是板块灰底，不会糊成一大块白
   ============================================ */
.left-frame {
  display: none;                           /* 2026-10-26：992px 以下整栏不显示，右栏独占宽度，手机端内容更聚焦 */
  flex-direction: column;
  min-width: 0;                            /* 防止长内容把左栏撑破 */
}

/* ≥992px：左栏吸顶，内容较长时左栏跟着页面走，用户随时能切换栏目 */
/* 注意：桌面主导航本身也是 position: sticky（top: 0），
   所以这里的 top 要留出导航高度，否则会被导航盖住 */
@media (min-width: 992px) {
  .left-frame {
    display: flex;                         /* 桌面端恢复显示 */
    position: sticky;
    top: 4.5rem;                           /* 导航栏高度 + 一点呼吸空间 */
    align-self: start;                     /* 与 grid 的 align-items 配合，避免被拉满整列 */
  }
}


/* ============================================
   2. 侧栏卡片（老站 .box_1）
   ============================================ */
.side-box {
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border-gray);
  margin-bottom: 1rem;
}

.side-box:last-child {
  margin-bottom: 0;
}


/* ============================================
   3. 卡片标题（老站 .big-box h3）
   白底 + 左侧红色竖条 + 底部细分隔线：干净、和右栏标题条同一套语言
   ============================================ */
.side-box-title {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.875rem;                  /* 小节标题位置不动，只调下面的小标题 */
  margin: 0;
  border-bottom: 1px solid var(--color-border-gray-light);
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 1rem);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.4;
}

.side-box-title::before {
  content: '';
  flex-shrink: 0;
  width: 0.25rem;
  height: 1em;
  margin-right: 0.5rem;
  background-color: var(--color-primary);
}


/* ============================================
   4. 分类导航列表（老站 .small-box ul）
   ============================================ */
.side-cat-list {
  list-style: none;
}

.side-cat-list li + li {
  border-top: 1px solid #f2f2f2;            /* 细到几乎看不见的分隔线 */
}

.side-cat-list a {
  display: flex;                            /* 让文字与右侧箭头按中线对齐 */
  align-items: center;
  position: relative;
  /* 2026-10-26：分类文字右移（0.875rem → 3.125rem），
     与上方「分类导航」标题彻底错开，不再共用同一条左对齐线 */
  padding: 0.625rem 0.875rem 0.625rem 3.125rem;
  font-size: var(--font-size-body);
  color: #444;
  transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}

/* 当前栏目（= 当前页所属栏目）：变红、加底色、加粗，
   内边距不动，默认状态下 7 栏文字保持整齐对齐 */
.side-cat-list .is-current a {
  color: var(--color-primary);
  background-color: #fff5f6;
  font-weight: 600;
}

/* 鼠标经过：文字轻微右移 0.25rem，给一点"被指到"的反馈；
   只改悬停态，不影响默认对齐和当前栏目的对齐 */
.side-cat-list a:hover {
  color: var(--color-primary);
  background-color: #fff5f6;
  padding-left: 3.375rem;
}

/* 悬停时出现的左侧红条（用伪元素做，不占布局宽度）
   位置固定在文字左侧，不随悬停移动 */
.side-cat-list a::before {
  content: '';
  position: absolute;
  left: 2rem;
  top: 50%;
  width: 0.1875rem;
  height: 0;
  background-color: var(--color-primary);
  transform: translateY(-50%);
  transition: height 0.2s ease;
}

.side-cat-list a:hover::before,
.side-cat-list .is-current a::before {
  height: 1.1em;
}

/* 当前栏目文字后的右向箭头（2026-10-26 第四版）
   不再用字符 »（字形大小由字体决定，16px 下又小又不起眼），
   改用内联 SVG：宽高精确占 1.15em、矢量不糊，与面包屑箭头同一套视觉语言。
   flex 布局下箭头自动与文字中线对齐，margin-left 0.5rem 保证与文字有距离 */
.side-cat-list .is-current a::after {
  content: '';
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  margin-left: 0.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d21126' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5 15.5 12 9 18.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}


/* ============================================
   5. 广告位（老站 .second-level-bannerA / .tertiary-level-bannerA）
   整块图片链接，宽度 100%，高度按原比例
   ============================================ */
.side-ad {
  display: block;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border-gray);
  background-color: var(--color-bg-light);
  overflow: hidden;
}

.side-ad img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

/* 悬停轻微放大，暗示可点 */
.side-ad:hover img {
  transform: scale(1.03);
}

/* 5.1 较高广告位（分类导航下方 + 最底部，两者等高）
   高 = 宽的 1/3（aspect-ratio 3:1），是"原矮条高度的两倍"；
   广告不是页面主角，统一压成横幅，图片居中裁切不被竖图拉高 */
.side-ad-high img {
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center;
}

/* 5.2 较矮广告位（新上作品下方）
   高 = 宽的 1/6（aspect-ratio 6:1），即"原来第一个广告位的高度"，
   故意比 5.1 矮，避免三个广告位一样高 */
.side-ad-low img {
  aspect-ratio: 6 / 1;
  object-fit: cover;
  object-position: center;
}

/* 5.3 左栏中间广告拆成上下两块（上矮下高，同一个广告位空间分两次展示）
   同一张图分两次裁切：上图取顶部、下图取底部，避免上下完全重复 */
.side-ad-top img {
  aspect-ratio: 6 / 1;
  object-fit: cover;
  object-position: center top;
}

.side-ad-bottom img {
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center bottom;
}


/* ============================================
   6. 新上作品 / 同类推荐 · 单列布局（老站 .side-imgtxt）
   图上文下、每条独占一行，条目之间用点线分隔（仿老站 dotted 底边）
   ============================================ */
.side-works-list {
  list-style: none;
  /* 四周留白加大：上 0.75rem、左右 1.25rem、下 1rem，
     图片随内容区变窄而等比缩小，不再贴边显得满 */
  padding: 0.75rem 1.25rem 1rem;
}

/* 条目之间的点线分隔：间距略放宽，呼吸感更好 */
.side-works-list li + li {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px dotted #ddd;
}

.side-works-list a {
  display: block;
}

/* 图片：固定 16:10 展示框，图片等比缩小后居中显示，不裁切、不拉伸。
   竖图两侧留白、横图上下留白，留白处用浅灰底填充，保证每张图完整可见 */
.side-works-list img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;                        /* 等比缩小，完整显示，不裁切 */
  object-position: center;                    /* 水平 + 垂直居中 */
  border: 1px solid var(--color-border-gray-light);
  background-color: #f6f6f6;                  /* 图片未填满处的留白底色 */
  transition: border-color 0.2s ease;
}

.side-works-list a:hover img {
  border-color: var(--color-primary);
}

/* 标题：居中、单行省略，悬停变红 */
.side-works-list span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #444;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.side-works-list a:hover span {
  color: var(--color-primary);
}


/* ============================================
   7. 缩略图网格（老站 .side-imgtxt / .side-xh-img）单列版
   仅详情页「同类作品推荐」使用；列表页「新上作品」用上面的 .side-works-list
   四行一列（2026-11-03 由两行两列改为单列）：
     · 3:2 展示框（高 = 宽的 2/3）内等比缩小整图，不裁切、不拉伸（2026-11-03 改）
     · 宽不够左右留空、高不够上下留空，一律居中
     · 标题单行居中，太长用省略号
   ============================================ */
.side-thumb-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0.75rem;
  list-style: none;
}

/* 条目之间的点线分隔：与二级页「新上作品」一致（2026-11-05 加） */
.side-thumb-list li + li {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px dotted #ddd;
}

.side-thumb-list a {
  display: block;
}

.side-thumb-list img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;                     /* 框高 = 宽的 2/3，图片在里面等比缩放 */
  object-fit: contain;                     /* 完整显示整图，不裁切 */
  object-position: center;                 /* 左右或上下的留白都居中分布 */
  border: 1px solid var(--color-border-gray-light);
  background-color: #f6f6f6;               /* 留白处的底色 */
  transition: border-color 0.2s ease;
}

.side-thumb-list a:hover img {
  border-color: var(--color-primary);
}

/* 缩略图标题：单行居中，短标题自然左右留空，过长用省略号（2026-11-03 改） */
.side-thumb-list span {
  display: block;
  margin-top: 0.375rem;
  padding: 0 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-medium);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.side-thumb-list a:hover span {
  color: var(--color-primary);
}


/* ============================================
   8. 文字链接列表（老站 .side-text 常见基础介绍）
   ============================================ */
.side-text-list {
  padding: 0.375rem 0;
  list-style: none;
}

.side-text-list li + li {
  border-top: 1px solid #f2f2f2;
}

.side-text-list a {
  display: block;
  position: relative;
  padding: 0.5rem 0.875rem 0.5rem 1.75rem;    /* 八条小标题整体右移，左边留空 */
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-medium);
  /* 单行超长就省略号，避免右栏被顶歪 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

/* 每条前面的小箭头（用 › 字符，不额外加载图标字体） */
.side-text-list a::before {
  content: '›';
  position: absolute;
  left: 1.125rem;                             /* 箭头随文字一起右移 */
  color: #bbb;
  transition: color 0.2s ease;
}

.side-text-list a:hover {
  color: var(--color-primary);
}

.side-text-list a:hover::before {
  color: var(--color-primary);
}