/* ============================================
   绣画作品 embroidery.css（仅首页）
   来源：老站 G:\1\index.html「绣画作品」.xiuhua
   2026-10-24 第 3 轮：四档响应式错位布局，竖图完整显示不裁切。
         12 张图 = 9 张横图（380×170）+ 3 张竖图（124×170）
         HTML 顺序：大,大,大,小,小,大,大,大,大,大,大,小
         横图(大) grid-column 跨多列、竖图(小) 跨 1 列，由 grid-auto-flow 自动排布：
           · <468px（手机）  ：1 列，全部通栏
           · 468–767px       ：4 列网格，大跨2、小跨1 → 视觉 2 列
               大大 / 大小小 / 大大 / 大大 / 大大 / 小
           · 768–991px（中屏）：6 列网格，大跨2、小跨1 → 视觉 3 列
               大大大 / 小小大大 / 大大大 / 大小（后空）
           · ≥992px（大屏）   ：10 列网格，大跨3、小跨1 → 视觉 4 列
               大大大小 / 小大大大 / 大大大小
         横图用 aspect-ratio 380/170 确定行高，竖图 flex:1 占满同行高度，
         所有图片 object-fit:contain 完整显示、不裁切。
   ============================================ */

/* ---------- 1. 板块外层 ---------- */
.embroidery-section {
  margin-top: 1.5rem;
  padding: 1.25rem 0 1.75rem;
  background-color: #fff;
}

/* ---------- 2. 网格（手机：1 列） ---------- */
.embroidery-list {
  display: grid;
  grid-template-columns: 1fr;
  /* 2026-10-24：列再窄、间距再宽。gap 拉大后 1fr 栏目自动收窄，
     用 clamp/cqw 流式缩放，大屏间距更舒展 */
  column-gap: clamp(1.5rem, 3.5cqw, 2.75rem);
  row-gap:    clamp(1.75rem, 4cqw, 3.25rem);
  width: 100%;
  list-style: none;
  container-type: inline-size;
  align-items: stretch;                    /* 同行卡片等高 */
}

/* ---------- 3. 通用卡片结构 ---------- */
.embroidery-list > li {
  display: flex;
  flex-direction: column;
}

.embroidery-list > li > a {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* 图片盒子：居中显示 */
.emb-img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 图片：等比缩放完整显示，绝不裁切
   2026-10-24：把 max-width/max-height 改为 width/height:100%，
   让图片填满 .emb-img 容器。之前只有 max-* 时，图片被天然尺寸封顶，
   1900px+ 大屏上容器越来越大、图片却不再放大，框与图之间出现越拉越宽的空白。
   现在图片随容器等比缩放（object-fit:contain 保证不变形不裁切）。 */
.embroidery-list img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

/* ---------- 4. 横图：用 380/170 比例确定图片区高度（决定整行高度） ---------- */
.embroidery-list .is-wide .emb-img {
  aspect-ratio: 380 / 170;
}

/* ---------- 5. 竖图：图片区 flex:1 占满与横图等高的空间 ---------- */
.embroidery-list .is-narrow .emb-img {
  flex: 1;
}

/* ---------- 6. 标题：固定两行高度，整排底边对齐 ---------- */
.embroidery-list h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1em;
  padding: 0.3em 0.5em;
  font-size: var(--font-size-caption);      /* 全站统一图片标题字号（见 base.css 令牌） */
  font-weight: normal;
  line-height: 1.4;
  color: #333;
  text-align: center;
}

.embroidery-list h3 span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---------- 7. 悬停 ---------- */
.embroidery-list > li > a:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.embroidery-list a:hover img {
  transform: scale(1.03);
}

/* ============================================
   8. 响应式断点（核心：大跨多列、小跨 1 列）
   ============================================ */

/* ≥468px：4 列网格，大跨 2、小跨 1 → 视觉 2 列
   行序：大大 / 大小小 / 大大 / 大大 / 大大 / 小 */
@media (min-width: 468px) {
  .embroidery-list {
    grid-template-columns: repeat(4, 1fr);
  }
  .embroidery-list .is-wide  { grid-column: span 2; }
  .embroidery-list .is-narrow { grid-column: span 1; }
}

/* ≥768px：6 列网格，大跨 2、小跨 1 → 视觉 3 列
   行序：大大大 / 小小大大 / 大大大 / 大小（后空） */
@media (min-width: 768px) {
  .embroidery-list {
    grid-template-columns: repeat(6, 1fr);
  }
  .embroidery-list .is-wide  { grid-column: span 2; }
  .embroidery-list .is-narrow { grid-column: span 1; }
}

/* ≥992px：10 列网格，大跨 3、小跨 1 → 视觉 4 列
   行序：大大大小 / 小大大大 / 大大大小 */
@media (min-width: 992px) {
  .embroidery-list {
    grid-template-columns: repeat(10, 1fr);
  }
  .embroidery-list .is-wide  { grid-column: span 3; }
  .embroidery-list .is-narrow { grid-column: span 1; }
}