/* ============================================
   通用 MORE 按钮 more.css
   用途：首页每个栏目的"查看更多"统一用它（推荐业务 / 广告业务 /
        绣画作品 / 画匾展示 / 三列文章 等）
   来源：1:1 对齐 chankao .intro1-more
        原站位于 G:\chankao\template\pc\skin\css\css.css:1628
          .intro1-more        { width: calc(10rem + 3vw); font-size: calc(1.2rem + 0.2vw) }
          .intro1-more a span { flex: 1; background: #000; 左侧圆角 }
          .intro1-more a i    { width: calc(3rem + 0.5vw); background: #d21126; 右侧圆角 }
          :hover 时 span 铺满、i 的 width 变 0
   换算：原站 html 根字号 62.5%（1rem = 10px），本站 1rem = 16px，
        所以原站的 rem 系数 × 10 ÷ 16 = ×0.625 即"像素完全相等"
        （3rem+0.5vw → 1.875rem+0.5vw 等），vw 部分原样保留
   箭头：直接用本站图标字体 ax-iconfont（字形 \e60f = ax-icon-right）
   结构：
     <div class="more-btn">
       <a href="javascript:;"><span>MORE</span><i class="ax-iconfont ax-icon-right" aria-hidden="true"></i></a>
     </div>
   ============================================ */
.more-btn {
  width: calc(6.25rem + 3vw);               /* = 原站 10rem + 3vw（1rem=10px） */
  margin: 2.25rem auto 0;                  /* 与上方内容的间距（原 1.5rem 偏挤，加到 36px） */
  font-size: calc(0.75rem + 0.2vw);         /* = 原站 1.2rem + 0.2vw，1920px 屏约 15.8px */
  overflow: hidden;                          /* 配合圆角：把两个直角子块整体裁成圆角按钮，
                                                悬停时把收窄后的箭头字形一起裁掉 */
  border-radius: 5px;                        /* 圆角统一由容器负责（子块不设圆角）：
                                                黑/红两块始终直角相拼，任何时刻接缝都是完整直线，
                                                不会在悬停动画中于接缝上方露出缺口 */
  text-align: center;
}

.more-btn a {
  display: flex;
  line-height: calc(1.625rem + 0.2vw);       /* = 原站 body 的 2.6rem + 0.2vw，
                                                按钮高度与老站一致（1920px 屏 37.7px） */
  color: #fff;
  text-decoration: none;
}

/* 左侧 MORE 文字块（直角，圆角由容器裁剪） */
.more-btn a span {
  flex: 1;                                  /* 占满剩余宽度（红块收窄后自动铺开） */
  padding: calc(0.125rem + 0.1vw) 0;        /* = 原站 0.2rem + 0.1vw */
  background-color: #000;                   /* 原站 --word-color-1 */
  transition: all 0.45s ease-in-out;
}

/* 右侧红色箭头块（直角，圆角由容器裁剪） */
.more-btn a i {
  flex: 0 0 auto;                           /* 不放大也不收缩，宽度完全由 width 决定 */
  width: calc(1.875rem + 0.5vw);            /* = 原站 3rem + 0.5vw，1920px 屏约 39.6px */
  padding: calc(0.125rem + 0.1vw) 0;
  font-size: inherit;                       /* 压过 ax.css 里 .ax-iconfont 的 0.88rem 默认值 */
  line-height: inherit;                     /* 与左侧文字块同高，两块并排不出现高低差 */
  background-color: var(--color-primary);   /* #d21126，原站 --word-color-3 */
  overflow: hidden;
  transition: all 0.45s ease-in-out;
}

/* 悬停 / 键盘聚焦：黑块向右铺满（红块宽度归零）
   i 用 width 控制（flex-basis:auto 时 width 即基准尺寸），
   span 用 flex:1 自动吃掉空出来的宽度，所以只改 i 的 width 就够 */
.more-btn a:hover i,
.more-btn a:focus-visible i {
  width: 0;
}