/* 回忆地图 · 样式 — iPad 专属覆盖（依赖 js/theme-and-fullscreen.js 给 <html> 加上的 is-ipad 类，必须最后加载） */

/* 回忆详情页：iPad 用滑动切换图片，不显示左右箭头（触屏的“悬停”会让箭头一直显示） */
html.is-ipad .carousel-nav-btn {
    display: none !important;
}

/* 回忆详情卡片：iPad 上缩小，并给左右“上一个/下一个回忆”箭头留出位置。
   （原来卡片宽 96vw，箭头定位在卡片外侧 45px 处，会被挤出屏幕。）
   注意：竖版照片的宽度由 js/app/08-detail-lightbox.js 计算，数值需与此处一致。 */
@media (min-width: 769px) {
    html.is-ipad #detail-overlay .modal-content-box,
    html.is-ipad #detail-nav-wrapper .modal-content-box {
        width: min(1100px, calc(100vw - 200px)) !important;
        max-width: calc(100vw - 200px) !important;
        height: min(78vh, 760px) !important;
        max-height: 760px !important;
    }

    html.is-ipad #detail-nav-wrapper {
        width: min(1100px, calc(100vw - 200px)) !important;
        max-width: calc(100vw - 200px) !important;
    }

    /* 右侧文字列：横屏 400px，竖屏 340px（原 480px） */
    html.is-ipad #detail-content {
        flex: 0 0 400px !important;
        width: 400px !important;
        min-width: 400px !important;
        max-width: 400px !important;
    }

    /* 箭头离卡片近一些：间距 20px + 按钮 52px，两侧共需约 72px，小于留出的 100px */
    html.is-ipad #nav-prev-detail {
        right: calc(100% + 20px) !important;
    }

    html.is-ipad #nav-next-detail {
        left: calc(100% + 20px) !important;
    }
}

@media (min-width: 769px) and (orientation: portrait) {
    html.is-ipad #detail-content {
        flex-basis: 340px !important;
        width: 340px !important;
        min-width: 340px !important;
        max-width: 340px !important;
    }
}

/* ============================================================
   图片浏览器「沉浸模式」（仅 iPad）
   点击图片或空白处 → 底部注释、左右切换按钮、计数、顶部渐变一起淡出，
   图片撑满屏幕；再点一下恢复。
   开关由 js/app/15-ipad-immersive.js 给浏览器根节点加/去掉 .ipad-immersive 类。

   涉及两个浏览器：
     #wx-lightbox               回忆详情 / 国家画廊（有计数 + 左右按钮 + 底部注释）
     #gallery-lightbox-overlay  时光画廊（有「从此图播放」+ 左右按钮 + 底部注释）

   关闭按钮 ✕ 在沉浸模式下保留：想退出时不用先点一下唤出界面。
   如果想让 ✕ 也一起隐藏，把下面第 2 节的选择器里加上
   .wx-lightbox-close 和 #gl-header 即可。
   ============================================================ */

/* ---- 0. 点按基础：iOS Safari 只会对“可点击”的元素派发 click，
        cursor:pointer 会被子元素继承，是公认的兜底写法；顺便去掉点按时的灰色高亮 ---- */
html.is-ipad #wx-lightbox,
html.is-ipad #gallery-lightbox-overlay {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ---- 1. 淡入淡出过渡（常态就要写，这样“出现”和“消失”两个方向都有动画）。
        行内样式里原有的 transition 需要 !important 才能覆盖 ---- */
html.is-ipad #wx-lightbox-memory-caption,
html.is-ipad #wx-gallery-caption,
html.is-ipad #wx-lightbox-index,
html.is-ipad #wx-lb-play,
html.is-ipad .wx-lb-nav-btn,
html.is-ipad #gl-caption,
html.is-ipad #gl-prev,
html.is-ipad #gl-next,
html.is-ipad #gl-counter {
    transition: opacity 0.25s ease, background 0.2s ease !important;
}

/* ---- 2. 沉浸时隐藏：注释 / 计数 / 左右按钮（以及「从此图播放」）。
        pointer-events:none 很关键——隐藏的注释不能再吃点击，否则点到它会误跳进回忆详情；
        !important 用来盖过捏合缩放代码写在元素上的行内 opacity / pointer-events ---- */
html.is-ipad #wx-lightbox.ipad-immersive #wx-lightbox-memory-caption,
html.is-ipad #wx-lightbox.ipad-immersive #wx-gallery-caption,
html.is-ipad #wx-lightbox.ipad-immersive #wx-lightbox-index,
html.is-ipad #wx-lightbox.ipad-immersive #wx-lb-play,
html.is-ipad #wx-lightbox.ipad-immersive .wx-lb-nav-btn,
html.is-ipad #gallery-lightbox-overlay.ipad-immersive #gl-caption,
html.is-ipad #gallery-lightbox-overlay.ipad-immersive #gl-prev,
html.is-ipad #gallery-lightbox-overlay.ipad-immersive #gl-next,
html.is-ipad #gallery-lightbox-overlay.ipad-immersive #gl-counter {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---- 3. 顶部渐变遮罩一起淡出。
        渐变背景本身无法做过渡，所以把它搬到 ::before 上，对 opacity 做过渡 ---- */
html.is-ipad .wx-lightbox-header,
html.is-ipad #gl-header {
    background: none !important;
}

html.is-ipad .wx-lightbox-header::before,
html.is-ipad #gl-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    transition: opacity 0.25s ease;
}

html.is-ipad #wx-lightbox.ipad-immersive .wx-lightbox-header::before,
html.is-ipad #gallery-lightbox-overlay.ipad-immersive #gl-header::before {
    opacity: 0;
}

/* 渐变没了，✕ 压在亮色图片上可能看不清：给它加一圈柔和的阴影 */
html.is-ipad #wx-lightbox.ipad-immersive .wx-lightbox-header,
html.is-ipad #gallery-lightbox-overlay.ipad-immersive #gl-header {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

/* ---- 4. 图片撑满屏幕。
        原来图片为注释让位：被上移（margin-bottom）并限制了最大高度。沉浸时全部还原。
        图片上的 margin-bottom / max-height 是 JS 写的行内样式，这里需要 !important ---- */

/* 回忆详情点开的大图 */
html.is-ipad #wx-lightbox .wx-slide-item img {
    transition: max-height 0.3s ease, margin-bottom 0.3s ease;
}

html.is-ipad #wx-lightbox.ipad-immersive .wx-slide-item img {
    max-height: 100% !important;
    margin-bottom: 0 !important;
}

html.is-ipad #wx-lightbox.ipad-immersive #wx-lightbox-slider {
    padding-bottom: 0 !important;
}

/* 国家画廊点开的大图：为注释预留的底部空间在 .wx-slide-item 上 */
html.is-ipad #wx-lightbox.has-gallery-caption .wx-slide-item {
    transition: padding-bottom 0.3s ease;
}

html.is-ipad #wx-lightbox.has-gallery-caption.ipad-immersive .wx-slide-item {
    padding-bottom: 0 !important;
}

/* 时光画廊大图 */
html.is-ipad .gl-slide-item img {
    transition: margin-bottom 0.3s ease;
}

html.is-ipad #gallery-lightbox-overlay.ipad-immersive .gl-slide-item img {
    margin-bottom: 0 !important;
}

/* ============================================================
   画册图片浏览器的「自动播放」按钮（仅 iPad）
   原来在顶部栏居中，会压在图片上；iPad 改放右下角，和底部注释同一行。
   按钮由 js/app/14-gallery-lightbox-patches.js 直接挂在 #wx-lightbox 下。
   沉浸模式 / 捏合放大时的淡出见上面第 2 节和 08-detail-lightbox.js。
   ============================================================ */
html.is-ipad #wx-lightbox > #wx-lb-play {
    position: fixed;
    right: 28px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 62px);
    z-index: 100011;               /* 比底部注释（100010）高，否则点不到 */
    padding: 10px 18px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* 注释右侧给按钮让位，长标题的省略号会在按钮之前出现，不会被盖住 */
html.is-ipad #wx-gallery-caption {
    padding-right: 190px;
}

/* ============================================================
   筛选弹窗（#filter-panel-desktop）：iPad 上从屏幕正中间弹出
   原因：
   ① 居中规则在 14-apple-modals.css 的 @media (min-width: 769px) 里，iPad 竖屏（744 / 768px）
      不命中，弹窗落在 01-base.css 的左下角位置；
   ② 原来的 popIn 动画带 translateY(10px)，且和居中的 transform 互相覆盖。
   做法：iPad 上无条件居中（不依赖宽度媒体查询），位置只用 transform 固定居中，
   弹出动画改用独立的 scale / opacity，不再动 transform，所以不会出现「先在角落再跳到中间」。
   ============================================================ */
html.is-ipad #filter-panel-desktop {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;
    width: min(500px, 92vw) !important;
    max-height: 70vh !important;
    z-index: 5000 !important;
    animation: ipadFilterPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both !important;
}

@keyframes ipadFilterPop {
    from { opacity: 0; scale: 0.92; }
    to   { opacity: 1; scale: 1; }
}