/* ============================================================================
   COMPONENT: GALLERY GRID
   Description: 经典的响应式卡片网格，用于作品展示。
   Dependencies: design-tokens.css
   Structure: BEM (Block__Element--Modifier)
   ============================================================================ */

/* 1. COMPONENT TOKENS (Local Scope)
   ------------------------------------------------------------------
   定义网格的物理属性，方便局部调整
   ------------------------------------------------------------------
*/
:root {
  /* [布局] 每一列的最小宽度。
     当屏幕空间不足以容纳这个宽度时，网格会自动换行。
     280px ~ 320px 是展示摄影作品的黄金尺寸。
  */
  --grid-item-min-width: 320px;
  
  /* [间距] 卡片之间的缝隙 */
  --grid-gap: var(--space-md); /* 默认为中号间距 */

  /* [图片] 统一长宽比 */
  /* 4/3 适合建筑图 (稳重)，3/2 适合摄影 (单反标准)，1/1 适合 Instagram 风格 */
  --card-aspect-ratio: 3 / 2;
  
  /* [交互] 悬停时的缩放比例 */
  --card-hover-scale: 1.03;
}


/* 2. BLOCK: THE GRID CONTAINER
   ------------------------------------------------------------------
*/
.gallery-grid {
  display: grid;
  
  /* [核心算法]
     repeat(auto-fill, ...): 自动计算一行能塞下多少个。
     minmax(min, 1fr): 保证不小于最小值，剩余空间平均分配 (1fr)。
  */
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-min-width), 1fr));
  
  gap: var(--grid-gap);
  
  /* 确保容器本身有适当的上下留白 */
  padding-bottom: var(--space-xl);
}


/* 3. ELEMENT: THE CARD
   ------------------------------------------------------------------
*/
.gallery-card {
  /* 这是一个语义化的 article 容器 */
  position: relative;
  display: flex;
  flex-direction: column;
  
  /* 消除默认样式 */
  margin: 0;
}

/* 链接包裹层：让整个卡片可点击 */
.gallery-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
  
  /* 开启 3D 加速以优化即将到来的 transform 动画 */
  will-change: transform;
}


/* 4. ELEMENT: MEDIA WRAPPER (Image)
   ------------------------------------------------------------------
   使用 figure 标签包裹图片，控制比例和溢出
   ------------------------------------------------------------------
*/
.gallery-card__media {
  margin: 0;
  overflow: hidden; /* 关键：裁剪放大的图片 */
  background-color: #f0f0f0; /* 图片加载前的占位底色 */
  
  /* [现代 CSS] 强制统一比例 */
  aspect-ratio: var(--card-aspect-ratio);
  
  /* 简单的圆角，如果设计需要的话 */
  /* border-radius: var(--radius-sm); */
}

.gallery-card__image {
  display: block;
  width: 100%;
  height: 100%;
  
  /* [关键] 保持图片比例，自动裁剪居中 (类似 background-size: cover) */
  object-fit: cover;
  
  /* 动画过渡：只对 transform 和 opacity 做过渡，性能最佳 */
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover Effect: 图片缓慢放大 */
.gallery-card__link:hover .gallery-card__image {
  transform: scale(var(--card-hover-scale));
}


/* 5. ELEMENT: INFO (Text below image)
   ------------------------------------------------------------------
*/
.gallery-card__info {
  padding-top: var(--space-sm);
  
  /* 简单的 Flex 用于对齐标题和元数据(可选) */
  display: flex;
  flex-direction: column;
  gap: 4px; /* 标题和副标题靠得近一点 */
}

.gallery-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--color-text-main);
  margin: 0;
  
  /* 文字溢出省略号 (防止标题过长破坏对齐) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-card__category {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted); /* 使用灰色 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hover Effect: 标题颜色变化 (可选) */
.gallery-card__link:hover .gallery-card__title {
  color: var(--color-primary); /* 或者 var(--menu-accent-color) */
  transition: color 0.3s ease;
}