/* ============================================
   三列文章 article.css（仅首页）
   来源：老站 G:\1\index.html 底部 .waia / .columns
         书画介绍 introduction / 广告常识 knowledge / 装裱基础 basic
         每列：标题 + 英文 + "查看更多" + 配图 + 8 条文章链接
   现代写法：
     · 三列用 CSS Grid，≥992px 三列并排，768–991px 两列，手机单列
     · 卡片等高（flex 纵向 + 链接区 flex:1），整行底边对齐
     · 原来的"查看更多"文字链接改成右上角「MORE + 红色圆形箭头」，
       与全站 MORE 按钮统一视觉语言，但不占整行高度
   ============================================ */

/* ---------- 1. 板块外层 ----------
   2026-10-24：借鉴老站 .waia 的 bg1.jpg（993×59）底部横向平铺背景，
   用 ::before 通栏铺满视口宽度，白底之上在底部重复铺一条装饰边，
   与 works-section / plaque-section 的通栏背景做法保持一致。
   2026-10-24 第 2 轮：去掉 ::before 上的白色背景底色（background-color:#fff），
   让板块底部的 bg1.jpg 通栏背景自然显示出来，整栏不显得"一块白板" */
.article-section {
  position: relative;
  isolation: isolate;
  margin-top: 1.5rem;
  padding: 1.25rem 0 1.75rem;
  container-type: inline-size;
}

.article-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-image: url("../images/bg1.jpg");
  background-repeat: repeat-x;
  background-position: bottom;
  z-index: -1;
}

.article-grid {
  display: grid;
  grid-template-columns: 1fr;              /* 手机：1 列 */
  /* 2026-10-25 第 4 轮：间距改为"随屏宽流式变大"（不是固定值）。
     992px 刚变三列时版心只有约 843px，间距必须收住才能放下标题；
     屏越宽，间距按 5.5cqw 继续放大，最高 8rem。
     实际每段间距：992px≈30px / 1200px≈37px / 1400px≈38px /
     1600px≈46px / 1920px≈58px，全程单调递增。 */
  gap: clamp(1rem, 5.5cqw - 1rem, 8rem);
  width: 100%;
  /* 2026-10-23 第 3 轮：取消左右内边距，
     首列（书画介绍）贴齐版心左边、末列（装裱基础）贴齐版心右边，
     相当于一个左浮动、一个右浮动，三栏整体拉开。 */
}

/* ---------- 2. 单列卡片 ----------
   2026-10-23 第 2 轮：去掉 .article-card 的 border:1px solid #e5e5e5（外框）。
     用户说"去掉框"，指的就是卡片四周那一圈灰色细边，标题下方的红色装饰分隔线保留。
   2026-10-24 第 2 轮：去掉卡片白色背景底色，让板块底部通栏背景自然透出来 */
.article-card {
  display: flex;
  flex-direction: column;
  /* border: 1px solid #e5e5e5;  已去掉 */
}

/* 标题行：中文标题 + 英文，右侧 MORE
   2026-10-23 第 3 轮：下方红线保留，另加 左/右/上 三边 1px 细线，
   让标题成为一个三边描边 + 底部红线的小方框 */
.article-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  /* 2026-10-24 第 3 轮：头部内边距再缩小一档，整栏更紧凑，栏目整体变小 */
  padding: clamp(0.5rem, 1.2cqw, 0.85rem) clamp(0.6rem, 1.4cqw, 1rem);
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-bottom: 2px solid var(--color-primary); /* 下方红线保留，三列统一 */
}

.article-head h2 {
  display: flex;                           /* 中文与英文排在一排（2026-10-23 改） */
  align-items: baseline;                   /* 英文底边对齐中文底边 */
  gap: 1.1rem;                             /* 中英间距 1~1.2rem，取中间值 */
  font-size: clamp(1rem, 0.86rem + 0.45cqw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-dark);
}

.article-head h2 em {
  margin: 0;
  font-size: 0.68em;
  font-weight: normal;
  color: #999;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 右上角 MORE：文字 + 红色圆形箭头，悬停时箭头向右微移 */
.article-more {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4em;
  font-size: clamp(0.7rem, 0.66rem + 0.16cqw, 0.8rem);
  color: #999;
  letter-spacing: 0.06em;
  transition: color 0.25s ease;
}

.article-more i {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  font-size: 0.85em;
  color: #fff;
  background-color: var(--color-primary);
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.article-more:hover,
.article-more:focus-visible {
  color: var(--color-primary);
}

.article-more:hover i,
.article-more:focus-visible i {
  transform: translateX(2px);
}

/* 配图（老站 sylmta / sylmtb / sylmtc，400×170）
   2026-10-24 第 3 轮：图片与标题栏之间不留间距（margin-top:0），图片齐上紧贴标题红线 */
.article-photo {
  margin-top: 0;
}

.article-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 170;
  object-fit: cover;
}

/* ---------- 3. 文章链接列表 ----------
   2026-10-24 第 3 轮：
     · 五行标题文字下方都要有细虚线（每行都有 border-bottom）
     · 图标（::before）左对齐：把 .article-links 的 padding-left 设为 0，
       让图标 left:0 正好落在卡片左边缘，与上方配图左边缘对齐。
       文字仍由 <a> 的 padding-left:1.25rem 留白。 */
.article-links {
  display: flex;
  flex: 1;                                 /* 吃掉剩余高度，三列底边对齐 */
  flex-direction: column;
  /* 2026-10-24 第 3 轮：左右内边距归零，让菱形图标与上方配图左边缘对齐 */
  padding: 0.15rem 0 0.6rem;
  list-style: none;
}

.article-links li {
  position: relative;
  border-bottom: 1px dashed #ececec;       /* 每行下方细虚线，包括最后一行 */
}

.article-links a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.62em 0 0.62em 1.25rem;        /* 左侧留白给菱形图标 */
  font-size: var(--font-size-caption);      /* 全站统一图片标题字号（见 base.css 令牌） */
  line-height: 1.45;
  color: #555;
  transition: color 0.2s ease;
}

/* 菱形小图标（老站 .cub1 的 icon2.png）：绝对定位在最左边，保证左对齐 */
.article-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  background-image: url("../images/article/icon2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.article-links a span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.article-links a:hover,
.article-links a:focus-visible {
  color: var(--color-primary);
}

/* ---------- 4. 断点 ---------- */
@media (min-width: 768px) {
  .article-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .article-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================
   2026-10-25：992-1279px「刚变三列」时标题行放不下
   992px 时版心只有约 843px，三列每列约 261px，
   「书画介绍 + introduction + MORE」这一行略超宽，
   "书画介绍"会被挤成两行，标题栏多占一排。
   只在本区间把标题栏内边距、中英间距、英文副标题略微收紧，
   腾出约 40px，标题恢复一行；间距本身仍按上面的流式公式随屏宽变大。
   ============================================ */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .article-head {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .article-head h2 {
    gap: 0.5rem;
  }

  .article-head h2 em {
    font-size: 0.56em;
  }
}