/* ============================================
   书画作品 works.css（仅首页）
   来源：老站 G:\1\index.html「书画作品」栏目
   内容：10 幅竖幅作品（220×495）+ 2 幅横幅作品（640×229）
   标题：复用 home.css 的 .title-section 大标题样式 ——
        "书画"二字红色、"作品"继承正文色、
        英文 CALLIGRAPHY WORKS 为灰色（与"我们的服务"一致）
   布局：手机优先，全程按比例自适应，不用任何像素上限
        · <480px   竖幅 2 列、横幅通栏上下堆叠
        · ≥480px   竖幅 3 列；横幅与第 10 个竖幅同一行、靠右占 2 列宽上下堆叠
                   （space-evenly 保证横幅上/中/下间距相等）
        · ≥992px   竖幅 4 列；横幅恢复通栏 + 两列并排
        · ≥1400px  竖幅 5 列；横幅仍两列并排
        2026-10-25：原 .works-wide 独立列表合并进 .works-list，
                   用 .works-wide-stack（横幅容器）+.works-wide-card（单张横幅）
                   实现 480-991px 时横幅与末位竖幅同行、靠右堆叠
        横向间距按"份"分配（1 份 = 3cqw = 板块宽度的 3%）：
              左右留白各 2 份、相邻两列之间各 1 份，
              即 2 + 1 + 1 + 1 + 1 + 2 = 8 份间距，列宽平分剩下的空间。
              左右留白永远是列距的 2 倍，所以大屏上两边不会显得贴边
        纵向：行距用容器查询单位 cqw（1cqw = 本板块宽度的 1%），
              行距也跟着版心等比缩放，大屏小屏观感一致
        标题字号：一条 clamp + cqw 流式公式从 13px 连续过渡到 16px，
              拉屏宽时不再忽大忽小（断点上没有字号台阶）
        版本：2026-10-21 去掉 1316px 像素上限，改为纯比例自适应；
              2026-10-21 横向间距改为 2:1:1:1:1:2 份；
              2026-10-21 列数断点改为 480/992/1400，字号改流式；
              2026-10-25 横幅合并进 works-list，480-991px 横幅靠右堆叠
              2026-10-25 横幅容器去外框/白底；横幅标题层 3.4em→2.2em，
                         堆叠时上下间距随之变大（480px 约 24px）
              2026-10-25 ≥992px 横幅容器 margin-top 改 0：row-gap 已撑出行距，
                         再加 margin-top 导致横幅行上方间距比竖幅行多一倍
              图片原始尺寸 竖幅 220×495 / 横幅 640×229
   断点：本板块竖幅列数用 480 / 992 / 1400（480 为小屏补充断点，
        其余断点全站统一：768 / 992 / 1200 / 1400）
   ============================================ */


/* ============================================
   1. 板块外层（老站 .calligraphy-class 的浅灰底）
   container-type: inline-size —— 把整个板块声明为"宽度容器"，
   供下方列表的 row-gap 使用 cqw（1cqw = 本板块内容宽度的 1%）。
   注意：cqw 写在"容器自己"的属性上无效（会退回视口宽），
   所以容器只能设在板块上、由子元素（列表）来用

   2026-10-24 第 2 轮：背景图 shufa1.jpg 不再用 ::before 铺 100vw 整屏，
     而是直接写在板块上（板块宽度 = container 版心宽度），
     背景图随 container 断点等比缩放，不再超出版心铺到视口两侧。
   ============================================ */
.works-section {
  position: relative;
  isolation: isolate;
  /* 2026-10-24：与上方人物介绍板块的行距改小（1.5rem→0.625rem），
     和人物介绍与它上方板块的行距（profile-section margin-top:0.625rem）一致 */
  margin-top: 0.625rem;
  padding: 1.25rem 0 1.75rem;             /* 上下留出呼吸间距，避免标题贴边 */
  container-type: inline-size;
  background-color: #f8f8f8;
  background-image: url("../images/shufa1.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}


/* ============================================
   2. 作品列表（竖幅 + 横幅共用）
      末行不足一整行时由 justify-content:center 自动居中
      横向按份分配：
        列表左右内边距各 6cqw（= 2 份，1 份 = 3cqw）
        列距 column-gap 3cqw（= 1 份）
        列宽 = 剩下的宽度 ÷ 列数（flex-basis 的 100% 是列表"内容区"宽度）
        所以左右留白 : 列距恒为 2 : 1，任何屏宽比例一致
      纵向行距：百分比 row-gap 在高度自适应的 flex 容器里会被算成 0（无效），
               改用 cqw —— 行距 = 板块宽度的 3.5%，
               随版心一起放大缩小；clamp 只兜住极小屏与超宽屏两端
   ============================================ */
.works-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 3cqw;                        /* 1 份：列距 = 板块宽度的 3% */
  row-gap: clamp(0.75rem, 3.5cqw, 3.25rem);/* 行距 = 板块宽度的 3.5%，两端兜底 */
  width: 100%;
  padding: 0 6cqw;                         /* 2 份：左右留白 = 列距的 2 倍 */
  list-style: none;
}

.works-list > li,
.works-wide-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #ccc;                  /* 老站 .shuframe 的白底细灰框 */
  overflow: hidden;
}

/* 竖幅：手机 2 列（2 列之间 1 个列距）
   :not(.works-wide-stack) 排除横幅容器，让横幅单独走自己的宽度规则 */
.works-list > li:not(.works-wide-stack) {
  flex: 0 0 calc((100% - 3cqw) / 2);       /* 定宽占位，禁止被内容撑开或收缩 */
}

/* 横幅容器：默认通栏（手机），内部两张卡片上下堆叠
   2026-10-25：选择器必须写成 .works-list > li.works-wide-stack
   —— 共享规则 .works-list > li（0,1,1）的优先级高于单个类（0,1,0），
   否则这里的 border:0 / flex-direction:row 全部会被它压掉：
   边框去不掉、大屏也仍是一张横图占满五列。 */
.works-list > li.works-wide-stack {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 3.5cqw, 3.25rem);    /* 两张卡片之间的间距 = 行距 */
  margin-top: clamp(0.75rem, 3.5cqw, 3.25rem); /* 与上方竖幅组隔开，同行距比例 */
  border: 0;                               /* 去掉继承来的外框细线 */
  background-color: transparent;            /* 容器被拉伸到 V10 高度，白底会填满卡片间隙，
                                              置透明后间隙露出板块灰底，不再像一张大白卡 */
}

.works-wide-card {
  width: 100%;
}

.works-list img,
.works-wide-card img {
  display: block;
  width: 100%;                             /* 随卡片宽度伸缩，高度按原图比例自动 */
  height: auto;
}


/* ============================================
   3. 作品标题
      固定两行高度，单行标题也垂直居中，整排卡片底边对齐
   ============================================ */
.work-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.4em;                           /* 两行文字 + 上下内距，高度按字号等比 */
  margin: 0;
  padding: 0 0.3rem;
  font-size: var(--font-size-caption);      /* 全站统一图片标题字号（见 base.css 令牌） */
  line-height: 1.45;
  font-weight: normal;
  color: #333;                             /* 老站 h3 颜色 */
  text-align: center;
  overflow: hidden;
}

/* 超过两行才截断并显示省略号 */
.work-title span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 横幅卡片的标题层：只留一行的高度
   2026-10-25：横幅标题都很短（"一山飞峙大江边"/"山水画图"），
   沿用竖幅的 3.4em（两行）会空出大半截白，视觉上文字层偏高。
   压到 2.2em ≈ 一行文字(1.45) + 上下内距，
   省下的高度在 480-991px 的上下堆叠里会转成更大的卡片间距
   （space-evenly 三等分剩余空间，剩余越多间距越大） */
.works-wide-card .work-title {
  height: 2.2em;
}


/* ============================================
   4. MORE 按钮
      已抽到全站通用组件 styles/more.css（.more-btn），
      书画作品与后续各栏目共用同一个按钮，避免重复写样式
   ============================================ */


/* ============================================
   5. ≥480px：竖幅 3 列 + 横幅靠右占两列上下排列
      竖幅：3 列共 2 个列距 → 每列 (100% - 2 × 3cqw) ÷ 3
      横幅：与第 10 个竖幅(V10)同一行，靠右占 2 列宽，
            两张卡片上下堆叠，justify-content:space-evenly 保证上/中/下间距相等
            宽度 = 2 列 + 1 个列距 = 2×(100%-6cqw)/3 + 3cqw = 66.667% - 1cqw
      间距为什么小屏偏少 / 768 以上合适：
            本行高度由 V10 竖幅（220×495 的高卡片）撑开，横幅容器被拉伸到同高，
            两张横幅卡片的"图片+标题"是固定内容，剩余高度再被 space-evenly 三等分。
            V10 高度随屏宽线性增长，而横幅卡片的固定部分（两行标题、边框）不随宽度变，
           所以 480-767px 剩余很少（每段仅 13px 左右）；768 起版心变宽、剩余变多，
            到 991px 约 49px，看起来就"合适"了。
            2026-10-25：横幅标题层从 3.4em 压到 2.2em，两张卡片共省约 35px，
            直接变成上下间距 → 480px 处每段约 24px、767px 处约 42px，
            全区间平滑递增，不再出现 480 太挤、768 突然变松的落差。
   ============================================ */
@media (min-width: 480px) {
  .works-list > li:not(.works-wide-stack) {
    flex: 0 0 calc((100% - 6cqw) / 3);
  }

  .works-list > li.works-wide-stack {
    flex: 0 0 calc(66.6667% - 1cqw);       /* 占右侧两列宽（含 V10 与横幅间的 1 个列距） */
    margin-top: 0;                         /* 与 V10 同一行，取消手机端的上间距 */
    gap: 0;                                /* 间距交由 space-evenly 分配，保证上/中/下相等 */
    justify-content: space-evenly;         /* 卡片前 / 卡片间 / 卡片后 三段间距完全相等 */
  }
}


/* ============================================
   6. ≥768px：竖幅仍 3 列，横幅仍靠右上下排列（不变）
      原此处是 .works-wide 切两列，现横幅在 480-991px 始终靠右堆叠，故留空
   ============================================ */


/* ============================================
   7. ≥992px：竖幅 4 列，横幅恢复通栏 + 两列并排
      4 列共 3 个列距 → 每列 (100% - 3 × 3cqw) ÷ 4
   ============================================ */
@media (min-width: 992px) {
  .works-list > li:not(.works-wide-stack) {
    flex: 0 0 calc((100% - 9cqw) / 4);
  }

  .works-list > li.works-wide-stack {
    flex: 0 0 100%;                        /* 横幅通栏另起一行 */
    /* 2026-10-25：margin-top 必须置 0。
       .works-list 已有 row-gap（= 行距），横幅另起一行时 row-gap
       已自动撑出与上方竖幅行的间距；再写 margin-top 就会"行距 + 上外边距"
       叠加，横幅行与竖幅行之间就比竖幅行之间多一倍间距。
       ≥1400px 未覆盖此属性，所以这里设 0 两个断点都生效。 */
    margin-top: 0;
    flex-direction: row;                   /* 两卡片左右并排 */
    gap: 3cqw;                             /* 两卡片之间 = 1 个列距 */
    justify-content: center;               /* 两卡片整体居中 */
  }

  .works-wide-card {
    flex: 0 0 calc((100% - 3cqw) / 2);     /* 每张占一半（减 1 个列距） */
    width: auto;                           /* 覆盖手机端的 width:100% */
  }
}


/* ============================================
   8. ≥1200px：板块底部多留一点空间
   ============================================ */
@media (min-width: 1200px) {
  .works-section {
    padding-bottom: 1.875rem;
  }
}


/* ============================================
   9. ≥1400px：竖幅 5 列（还原老站 5+5+2 的排布）
      5 列共 4 个列距 → 每列 (100% - 4 × 3cqw) ÷ 5
      横幅仍为两列并排（沿用 ≥992px 的规则，无需改动）
   ============================================ */
@media (min-width: 1400px) {
  .works-list > li:not(.works-wide-stack) {
    flex: 0 0 calc((100% - 12cqw) / 5);
  }
}