:root {
  --gap: 14px;   /* 图片间距 */
  --cols: 4;     /* 默认四列；媒体查询里可改成 3/2 */
  --radius: 12px;
}

/* 四列可换行网格（Flex 方案） */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
  margin: 0 auto;
  padding: 8px 12px 24px;
}

/* 单项：默认占父容器 1/var(--cols) 宽 */
.gallery-item {
  position: relative;
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: flex-basis .66s cubic-bezier(.22,.61,.36,1),
              transform  .66s cubic-bezier(.22,.61,.36,1),
              box-shadow .48s ease;
  will-change: flex-basis, transform;
  background: #f6f8fa;
  display: flex;
  flex-direction: column; /* 图片在上，标题在下 */
}
.gallery-item img {
  width: 100%; 
  height: 100%; 
  display: block; 
  object-fit: cover;
}

/* 放大 = 横跨两列（公式对 4/3/2 列都正确）*/
.gallery-item.expanded {
  /* 2 列宽 = (200% - (cols - 2) * gap) / cols */
  flex: 0 0 calc((200% - (var(--cols) - 2) * var(--gap)) / var(--cols));
  transform: translateZ(0) scale(1.015);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  z-index: 2;
}

/* 标题浮层 */
.gallery-item .info {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 10px 12px; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent 60%);
  opacity: 1; color: #fff; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* 响应式列数 */
body { padding-top: calc(var(--navbar-height) + 16px); }
@media (max-width: 1024px) { 
  :root { --cols: 2; } 
  body {
    padding-bottom: calc(var(--navbar-height) + 20px);
}
}

/* 无动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .gallery-item { transition: none; }
}