/* 照片墙专用样式 - 复用主项目设计系统 */

/* 瀑布流布局 */
.masonry-grid {
  position: relative;
  margin-top: calc(var(--space-xl) * 2);
}

/* 照片卡片 - 真正瀑布流布局 */
.photo-item {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-slow);
  cursor: pointer;

  /* Spotlight效果变量 - 复用卡片聚光灯 */
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: rgba(255, 255, 255, 0.12);
  --spotlight-secondary: rgba(100, 255, 218, 0.06);
}

/* 浅色模式聚光灯效果 */
[data-theme="light"] .photo-item {
  --spotlight-color: rgba(255, 255, 255, 0.6);
  --spotlight-secondary: rgba(248, 250, 252, 0.4);
  --spotlight-tertiary: rgba(241, 245, 249, 0.2);
  --spotlight-accent: rgba(129, 140, 248, 0.08);
}

/* 深色模式聚光灯效果 */
[data-theme="dark"] .photo-item {
  --spotlight-color: rgba(255, 255, 255, 0.15);
  --spotlight-secondary: rgba(248, 250, 252, 0.1);
  --spotlight-tertiary: rgba(241, 245, 249, 0.06);
  --spotlight-accent: rgba(129, 140, 248, 0.08);
}

/* Spotlight效果伪元素 */
.photo-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y),
      var(--spotlight-color) 0%,
      var(--spotlight-secondary) 40%,
      transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

/* 浅色模式多层聚光灯效果 */
[data-theme="light"] .photo-item::before {
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y),
      var(--spotlight-color) 0%,
      var(--spotlight-secondary) 25%,
      var(--spotlight-tertiary) 50%,
      var(--spotlight-accent) 65%,
      transparent 80%);
}

.photo-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255, 255, 255, 0.2);
}

.photo-item:hover::before {
  opacity: 0.8;
}

/* 照片图片 - 保持原始比例 */
.photo-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-slow), opacity 0.3s ease;
}

/* 缩略图加载状态 */
.photo-image[data-original] {
  filter: contrast(1.1) saturate(1.1);
}

.photo-item:hover .photo-image {
  transform: scale(1.02);
}

/* 照片信息 */
.photo-caption {
  padding: var(--space-lg);
  position: relative;
  z-index: 2;
}

.photo-date {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--font-medium);
}



/* 照片弹窗 */
.photo-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.photo-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
}

.modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--border-light);
}

/* 统一的按钮样式 - 桌面端和移动端复用 */
.modal-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-base);
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.modal-close svg {
  width: 24px;
  height: 24px;
  color: white;
}

.modal-image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

#modalImage {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.modal-navigation {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  pointer-events: none;
}

.nav-btn {
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  pointer-events: all;
}

.nav-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.nav-btn svg {
  width: 24px;
  height: 24px;
  color: white;
}

.modal-info {
  padding: var(--space-lg);
  border-top: 1px solid var(--border-light);
  background: var(--card);
}

.photo-info {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

/* 加载完成提示 */
.load-end-message {
  text-align: center;
  margin-top: calc(var(--space-xl) * 2);
  padding: var(--space-xl);
}

.load-end-message p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

/* 移动端优化 - 全屏体验 */
@media (max-width: 768px) {
  .modal-content {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
  }

  .modal-overlay {
    background: rgba(0, 0, 0, 0.95);
  }

  #modalImage {
    max-height: 85vh;
    max-width: 95vw;
    object-fit: contain;
  }

  .modal-image-container {
    flex: 1;
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-close {
    top: var(--space-md);
    right: var(--space-md);
  }

  .modal-navigation {
    padding: 0 var(--space-md);
  }

  .modal-info {
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .photo-info {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-base);
  }
}

/* 平板端优化 */
@media (min-width: 769px) and (max-width: 1024px) {
  .modal-content {
    max-width: 95vw;
    max-height: 95vh;
  }

  #modalImage {
    max-height: 75vh;
  }

  .modal-close,
  .nav-btn {
    width: 44px;
    height: 44px;
  }

  .modal-close svg,
  .nav-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* 加载动画 */
.photo-item.loading {
  opacity: 0;
  transform: translateY(20px);
}

.photo-item.loaded {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {

  .photo-item,
  .photo-modal,
  .modal-close,
  .nav-btn {
    transition: none !important;
  }

  .photo-item:hover {
    transform: none !important;
  }

  .photo-item:hover .photo-image {
    transform: none !important;
  }
}