/* 公司部分业绩 - 马赛克拼贴式照片墙（优化版） */
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "t1 t2 t3 t8"
    "t5 t6 t7 t8"
    "t4 t6 t7 t8";
  grid-auto-rows: 205px; /* 进一步稍微增大图片尺寸 */
  gap: 10px; /* 更紧凑的间距 */
}

/* 卡片样式与入场动画初始状态 */
.tile {
  background: #fff;
  border: 1px solid #ece4d3;
  border-radius: 12px;
  overflow: hidden;
  position: relative; /* 使说明可覆盖在图片上 */
  transition: transform 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
  opacity: 0; /* 入场前隐藏 */
  transform: translateY(12px) scale(0.985);
}
.tile.in {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.10); }

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; opacity: 1; transform: none; }
  .tile.in { transition: none; }
}

/* 区域映射 */
.tile.t1 { grid-area: t1; }
.tile.t2 { grid-area: t2; }
.tile.t3 { grid-area: t3; }
.tile.t4 { grid-area: t4; }
.tile.t5 { grid-area: t5; }
.tile.t6 { grid-area: t6; }
.tile.t7 { grid-area: t7; }
.tile.t8 { grid-area: t8; }

/* 媒体容器与图片 */
.media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f8fafc; }
.media-img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }

/* 比例辅助：在较小屏幕下保证稳定比例；桌面端由网格行高控制视觉大小 */
.ratio-landscape { aspect-ratio: 4 / 3; }
.ratio-portrait { aspect-ratio: 3 / 4; }
.ratio-square { aspect-ratio: 1 / 1; }

/* 说明改为图片底部遮罩，默认隐藏，鼠标移入显示 */
.tile-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.45;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.65) 100%);
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.22s ease;
}
.tile:hover .tile-caption,
.tile:focus-within .tile-caption { opacity: 1; }

/* 响应式布局：根据屏宽调整拼贴结构与行高 */
@media (max-width: 1200px) {
  .mosaic-grid { grid-auto-rows: 185px; }
}

@media (max-width: 992px) {
  .mosaic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "t1 t2 t8"
      "t3 t6 t8"
      "t5 t7 t8"
      "t4 t6 t7";
    grid-auto-rows: 175px;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .mosaic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "t1 t2"
      "t3 t8"
      "t5 t8"
      "t6 t7"
      "t4 t7";
    grid-auto-rows: 165px;
    gap: 10px;
  }
  .tile-caption { font-size: 0.88rem; padding: 7px 9px; }
}

/* 轻量灯箱样式（点击图片放大预览） */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.lightbox.show { display: flex; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
}
.lightbox-image {
  position: relative;
  max-width: min(92vw, 1200px);
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 9px;
  background: rgba(255,255,255,0.85);
  color: #111827;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.lightbox-close:hover { background: #fff; }