/* ============================================
   画匾展示 plaque.css（仅首页）
   来源：老站 G:\1\index.html「画匾展示」.huabian
         老站 6 张 400×190 横幅画匾，float 左右交错拼成两行
   现代写法：CSS Grid 等分排列
         手机 1 列 / ≥480px 2 列 / ≥992px 3 列（3 列 × 2 行）
         不再用 float 和左右交错类名，顺序自然、任何屏宽都不会错位
   ============================================ */

/* ---------- 1. 板块外层 ---------- */
.plaque-section {
  position: relative;
  isolation: isolate;
  margin-top: 1.5rem;
  padding: 1.25rem 0 1.75rem;
  container-type: inline-size;
}

/* 背景色铺满视口宽度（两侧不留白），内容仍对齐版心 */
.plaque-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: #f8f8f8;
  z-index: -1;
}

/* ---------- 2. 网格 ---------- */
.plaque-list {
  display: grid;
  grid-template-columns: 1fr;              /* 手机：1 列 */
  /* 2026-10-24：栏目再小、间距再宽。gap 继续加大，1fr 栏目随之收窄，
     用 clamp/cqw 流式缩放 */
  column-gap: clamp(2.75rem, 5cqw, 4.5rem);
  row-gap:    clamp(3rem, 5.5cqw, 4.75rem);
  width: 100%;                             /* 铺满容器（2026-10-23 由 96% 改回） */
  list-style: none;
}

/* ---------- 3. 单张卡片 ---------- */
.plaque-list a {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.plaque-list img {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 190;                 /* 原图比例，统一画幅 */
  object-fit: cover;
  transition: transform 0.4s ease;
}

.plaque-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;
}

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

/* 悬停：边框变红、图片轻微放大 */
.plaque-list a:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

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

/* ---------- 4. 断点 ----------
   2026-10-24：2 列由 480 提前到 468，3 列由 992 提前到 768，
   让画匾在中等屏宽就能铺成 3 列 */
@media (min-width: 468px) {
  .plaque-list { grid-template-columns: repeat(2, 1fr); }
}

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