/* ==========================================================
   Photography Lightbox CSS — Backlog #84, 2026-09-15
   ------------------------------------------------------------
   解耦自 life-photography.css (原 L345-L915 lightbox 相关段)。

   内容:
   - Lightbox 导航按钮 (原 Section 5, L345-L390)
   - Lightbox 防下载 (.image-lightbox-img, 从 L545-L555 拆出)
   - Lightbox Caption (原 L645-L682 caption 修复 + L832-L850 响应式)
   - Lightbox EXIF 信息栏 (原 L684-L826, 含 1024/768/480 响应式)
   - Live Photo (原 L852-L915)

   保留在 life-photography.css:
   - .photo-card / .photo-card img 防下载 (gallery 卡片共用)
   - .photo-watermark* 缩略图水印
   - .photo-card__caption-* 中英对照

   加载顺序 (index.html):
     <link rel="stylesheet" href="life-photography.css">
     <link rel="stylesheet" href="life-photography-lightbox.css">
   ========================================================== */


/* ==========================================================
   1. 灯箱导航 (Lightbox Nav Buttons) — 原 Section 5, L345-L390
   ------------------------------------------------------------
   复用 .image-lightbox 样式 (portfolio-preview.css L80-98)
   仅加 .image-lightbox-prev / .image-lightbox-next 按钮
   ========================================================== */
.image-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(252, 245, 230, 0.12);
    color: #f7f1e1;
    border: 1px solid rgba(252, 245, 230, 0.3);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    font-family: 'Cinzel', 'Times New Roman', serif;
    padding: 0;
    padding-bottom: 4px;  /* 微调视觉居中 */
}

.image-lightbox-nav:hover {
    background: rgba(252, 245, 230, 0.25);
    border-color: rgba(252, 245, 230, 0.6);
    transform: translateY(-50%) scale(1.08);
}

.image-lightbox-prev {
    left: 32px;
}

.image-lightbox-next {
    right: 32px;
}

.image-lightbox-nav:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}


/* ==========================================================
   2. Lightbox 大图 (从 L545-L555 拆出 .image-lightbox-img)
   ------------------------------------------------------------
   原选择器 .photo-card, .photo-lightbox__img-wrap, .image-lightbox-img
   现在 .photo-card / .photo-lightbox__img-wrap 留在主 CSS (gallery 卡片共用),
   .image-lightbox-img 在这里独立定义
   ========================================================== */
.image-lightbox-img {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    pointer-events: auto;  /* [Backlog #82c] 覆盖父级 #content-wrapper 的 none */
}


/* ==========================================================
   3. 大图水印 — 原 L601-L606
   ------------------------------------------------------------
   [Backlog #81 v3] 不再单独加水印, 直接用 caption 当水印
   caption 改纯英文 1 行 (跟缩略图水印格式同款, 加 index/total)
   ========================================================== */
.image-lightbox__watermark {
    display: none;  /* 隐藏旧居中大字水印 */
}


/* ==========================================================
   4. Lightbox Caption — 原 L645-L682
   ------------------------------------------------------------
   [Backlog #81 v5, 2026-09-13] lightbox caption 强制 fixed + 居中
   Bug 修复: 之前用 position: absolute 依赖 .image-lightbox 父级定位,
   跟 .image-lightbox 的 padding 40px 冲突, 实际渲染到左下角
   (用户截图反馈 "这个描述不是正下方而是左下方").
   修复: position: fixed 直接相对 viewport, left/right 0, text-align: center.
   ========================================================== */
.image-lightbox-caption {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-align: center !important;
    padding: 10px 20px;
    color: rgba(247, 241, 225, 0.95);
    text-shadow: 0 1px 3px rgba(10, 31, 36, 0.7);
    position: fixed !important;  /* 直接相对 viewport, 绕过 lightbox padding */
    left: 0 !important;
    right: 0 !important;
    bottom: 24px !important;
    transform: none !important;  /* 覆盖 portfolio-preview.css 的 translateX(-50%) */
    background: transparent;
    z-index: 99999998;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;  /* 单行不折行 */
    margin: 0 auto;  /* block 居中兜底 */
    width: 100%;
    box-sizing: border-box;
}
.image-lightbox-caption__en {
    font-weight: 600;
    letter-spacing: 0.12em;
}
.image-lightbox-caption__idx {
    margin-left: 12px;
    opacity: 0.7;
    font-size: 12px;
    font-weight: 500;
}


/* ==========================================================
   5. Lightbox EXIF 信息栏 — 原 L684-L826
   ------------------------------------------------------------
   [Backlog #81 v19, 2026-09-14] 自动从照片 EXIF 读取 5 字段 (相机/光圈/快门/ISO/焦距)
   宽屏布局: 右下角边缘空白区 (避开图片, 不再覆盖图)
   窄屏布局: 顶部居中浮动条 (单行紧凑, 让图居中显示)
   [v15] 初版: 居中覆盖图; [v19] 改为右下角 + 字号缩小
   JS (life-photography-lightbox.js) 根据图片 bbox 智能定位
   ========================================================== */
.image-lightbox-exif {
    position: fixed !important;
    /* 宽屏默认右下角 (JS 会根据图片 bbox 动态调整) */
    right: 28px !important;
    bottom: 88px !important;  /* 在 caption (bottom: 30px) 上方 */
    left: auto !important;
    top: auto !important;
    transform: none !important;
    background: rgba(10, 31, 36, 0.78);
    border: 1px solid rgba(247, 241, 225, 0.16);
    border-radius: 6px;
    padding: 9px 13px;
    color: rgba(247, 241, 225, 0.92);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
    /* [v19] 字号整体缩小: base 10px (原 11.5px) */
    font-size: 10px;
    line-height: 1.45;
    z-index: 99999997;
    user-select: none;
    pointer-events: none;
    max-width: 200px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
}
.image-lightbox-exif__grid {
    display: flex;
    flex-direction: column;
    gap: 3px;  /* 单列紧凑 */
}
.image-lightbox-exif__row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}
.image-lightbox-exif__label {
    color: rgba(247, 241, 225, 0.5);
    /* [v19] label 缩小: 9px (原 10.5px) */
    font-size: 9px;
    text-align: right;
    white-space: nowrap;
    min-width: 26px;
    letter-spacing: 0.04em;
}
.image-lightbox-exif__value {
    color: rgba(247, 241, 225, 0.95);
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* [v19] value 缩小: 10px (原 11.5px) */
    font-size: 10px;
    max-width: 150px;
}
.image-lightbox-exif__loading,
.image-lightbox-exif__empty {
    color: rgba(247, 241, 225, 0.5);
    font-size: 9.5px;
    font-style: italic;
    text-align: center;
    padding: 2px 0;
    white-space: normal;
    line-height: 1.4;
}

/* 中屏 (≤1024px) — 改为顶部居中浮动条, 不覆盖图 */
@media (max-width: 1024px) {
    .image-lightbox-exif {
        right: auto !important;
        left: 50% !important;
        bottom: auto !important;
        top: 16px !important;
        transform: translateX(-50%) !important;
        max-width: min(520px, calc(100vw - 80px));  /* 留出 close 按钮 (right: 30px) */
        padding: 7px 14px;
        font-size: 9.5px;
    }
    .image-lightbox-exif__grid {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 14px;  /* 行 4 / 列 14, 让 5 项尽量单行 */
        justify-content: center;
    }
    .image-lightbox-exif__row {
        gap: 5px;
    }
    .image-lightbox-exif__label {
        font-size: 8.5px;
    }
    .image-lightbox-exif__value {
        font-size: 9.5px;
        max-width: 140px;
    }
}

/* 窄屏 (≤768px) — 顶部条更紧凑 */
@media (max-width: 768px) {
    .image-lightbox-exif {
        top: 12px !important;
        max-width: calc(100vw - 72px);
        padding: 6px 12px;
        font-size: 9px;
    }
    .image-lightbox-exif__grid {
        gap: 3px 10px;
    }
    .image-lightbox-exif__label {
        font-size: 8px;
    }
    .image-lightbox-exif__value {
        font-size: 9px;
        max-width: 110px;
    }
}

/* 极窄 (≤480px) — 字号再缩, 允许换行 */
@media (max-width: 480px) {
    .image-lightbox-exif {
        top: 10px !important;
        max-width: calc(100vw - 56px);
        padding: 5px 10px;
    }
    .image-lightbox-exif__grid {
        gap: 3px 8px;
    }
    .image-lightbox-exif__label {
        font-size: 7.5px;
    }
    .image-lightbox-exif__value {
        font-size: 8.5px;
        max-width: 90px;
    }
    .image-lightbox-exif__loading,
    .image-lightbox-exif__empty {
        font-size: 8.5px;
    }
}


/* ==========================================================
   6. Caption 响应式 — 原 L832-L850 拆 caption 部分
   ------------------------------------------------------------
   原 Section 8 5 段响应式 (水印 + caption 字号) 中 caption 移到此处,
   .photo-watermark__line 留在主 CSS (gallery 缩略图水印)
   ========================================================== */
@media (max-width: 1024px) {
    .image-lightbox-caption { font-size: 13px; }
}
@media (max-width: 768px) {
    .image-lightbox-caption { font-size: 12px; padding: 10px 56px; }
    .image-lightbox-caption__idx { font-size: 11px; margin-left: 8px; }
}
@media (max-width: 480px) {
    .image-lightbox-caption { font-size: 11px; padding: 8px 52px; }
    .image-lightbox-caption__idx { font-size: 10px; }
}
@media (max-width: 360px) {
    .image-lightbox-caption { font-size: 10px; padding: 7px 50px; }
    .image-lightbox-caption__idx { font-size: 9px; }
}


/* ==========================================================
   7. Live Photo (iPhone HEIC + MOV) — Backlog #84, 2026-09-15 / Backlog #86 v2, 2026-09-16
   ------------------------------------------------------------
   - [Backlog #86 v2] 静态图不再用 HEIC (删了) / JPG (用户原话"应加载 MOV 而不是转 JPG").
     Live Photo entry 默认显示 MOV 视频本身 (muted autoplay loop), 这是 Live Photo 的灵魂.
   - img (JPG 静态图) 作为 poster / video 加载中 fallback, 加载完成后被 video 覆盖.
   - 长按 photoLightboxImg → unmute video + play() (用声音 + 重头播放, 跟 iOS Live Photo 体验一致).
   - 松开/移出 → 回到 muted loop 默认状态.
   - LIVE 红点角标永远可见 (提示用户"这是活的")
   ========================================================== */
.image-lightbox-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 100000001;        /* 高于 photoLightboxImg (100000000) + photoLightboxExif (99999997) */
    pointer-events: none;       /* 不接收事件, 让 img 接收 mousedown/touchstart */
    opacity: 1;                 /* [Backlog #86 v2] 默认显示视频, 不再 opacity: 0 等长按 */
    transition: opacity 0.2s ease;
    background: transparent;
}
.image-lightbox-video.is-playing { opacity: 1; }   /* 兼容旧代码 */

.image-lightbox-live-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 100000002;        /* 高于 video overlay */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 12px;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    user-select: none;
}
.image-lightbox-live-badge[hidden] { display: none; }
.image-lightbox-live-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.6);
    animation: live-badge-pulse 1.5s ease-in-out infinite;
}
.image-lightbox-live-badge__label {
    text-transform: uppercase;
    opacity: 0.92;
}
@keyframes live-badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.85); }
}
@media (max-width: 768px) {
    .image-lightbox-live-badge { font-size: 10px; padding: 3px 8px; }
    .image-lightbox-live-badge__dot { width: 7px; height: 7px; }
}