/* Mobile-Specific Optimizations */

/* 移动端网格优化 */
@media (max-width: 768px) {
  /* 更紧凑的间距 */
  .work-grid {
    gap: var(--grid-gap-mobile);
  }

  /* 更快的动画 */
  .work-image {
    transition: opacity var(--duration-mobile-normal) var(--easing-default);
  }

  /* 优化触摸区域 */
  .work-item {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  /* 移动端灯箱优化 */
  .lightbox-image {
    transition: opacity var(--duration-mobile-normal) var(--easing-default),
                transform var(--duration-mobile-normal) var(--easing-default);
  }

  /* 移动端图片信息 */
  .lightbox-info {
    padding: var(--spacing-md);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-lg);
    max-width: 90%;
  }

  .lightbox-title {
    font-size: var(--font-size-lg);
  }

  .lightbox-meta {
    font-size: var(--font-size-xs);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .lightbox-meta span::after {
    display: none;
  }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
  .lightbox-info {
    bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .lightbox-title {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xs);
  }

  .lightbox-meta {
    font-size: var(--font-size-xs);
  }

  .lightbox-mobile-nav {
    height: 56px;
  }

  .nav-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }
}

/* 小屏手机优化 (< 375px) */
@media (max-width: 375px) {
  .work-grid {
    gap: 8px;
  }

  .lightbox-title {
    font-size: var(--font-size-base);
  }

  .nav-counter {
    font-size: var(--font-size-xs);
    min-width: 50px;
  }
}

/* 大屏手机优化 (> 414px) */
@media (min-width: 415px) and (max-width: 768px) {
  .work-grid {
    gap: 16px;
  }
}

/* 触摸设备通用优化 */
@media (hover: none) and (pointer: coarse) {
  /* 禁用所有hover效果 */
  .work-item:hover .work-image {
    transform: none;
  }

  .work-item:hover::before {
    opacity: 0;
  }

  /* 增加触摸区域 */
  .work-item {
    min-height: 200px;
  }

  /* 禁用文本选择 */
  body {
    -webkit-user-select: none;
    user-select: none;
  }

  /* 允许输入框选择 */
  input,
  textarea {
    -webkit-user-select: text;
    user-select: text;
  }

  /* 优化滚动 */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* 刘海屏和异形屏适配 */
@supports (padding-top: env(safe-area-inset-top)) {
  .site-header {
    padding-top: var(--safe-area-inset-top);
    height: calc(var(--header-height-mobile) + var(--safe-area-inset-top));
  }

  .lightbox-mobile-nav {
    padding-bottom: max(var(--safe-area-inset-bottom), var(--spacing-md));
  }
}

/* 阻止下拉刷新（仅在灯箱打开时） */
.lightbox.active {
  overscroll-behavior: contain;
}

/* 灯箱打开时禁止body滚动 */
body.lightbox-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* 移动端图片拖动提示 */
.lightbox-drag-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-mobile-fast) var(--easing-default);
}

.lightbox-drag-indicator.visible {
  opacity: 0.5;
}

/* 下拉关闭视觉反馈 */
.lightbox-content.dragging {
  transition: transform var(--duration-mobile-fast) var(--easing-default);
}

/* 性能优化：强制硬件加速 */
.lightbox-image,
.lightbox-overlay,
.lightbox-mobile-nav,
.nav-btn {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 禁用双击缩放（部分浏览器） */
.lightbox-image-container,
.work-item {
  touch-action: manipulation;
}

.lightbox-image {
  touch-action: none; /* 灯箱图片需要自定义手势 */
}