/* =============================================
   project-detail-07 页面样式
   响应式断点：
   - XXL: ≥1920px (大屏显示器)
   - XL:  1440-1919px (笔记本/桌面)
   - LG:  1024-1439px (小平板横屏)
   - MD:  768-1023px (平板竖屏)
   - SM:  <768px (手机)
   ============================================= */

.page-07 {
    background: #000000;
    font-family: 'Inter', Arial, sans-serif;
}
.page-07 .nav-link {
    color: #ffffff !important;
}
.page-07 .brand-text {
    color: #ffffff;
}
.page-07 .video-section {
    padding: 0 clamp(15px, 2.08vw, 30px) 0;
}
.page-07 .content-title {
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.page-07 .nav-link:hover,
.page-07 .nav-link.active,
.page-07 .nav-link:focus,
.page-07 .nav-link:focus-visible {
    color: #0066ff !important;
}

/* ===== 元数据区域 ===== */
.meta-left {
    font-family: 'FZChaoCuHei-M10S', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 25px;
}
.meta-right {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 800;
    line-height: 150%;
    letter-spacing: 0.06em;
    display: flex;
    gap: clamp(50px, 9.1vw, 131px);
}

/* ===== 全屏图片 ===== */
.page-07 .image-fullscreen {
    padding: 0 clamp(15px, 2.08vw, 30px) clamp(15px, 2.08vw, 30px);
    width: 100%;
    box-sizing: border-box;
    background: #D4D4D4;
    position: relative;
    z-index: 2;
}

/* ===== 视频叠加层通用 ===== */
.video-overlay-right {
    position: absolute;
    z-index: 10;
}
.video-overlay-right .overlay-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-overlay-center {
    position: absolute;
    overflow: visible;
    pointer-events: auto;
    z-index: 10;
}
.video-overlay-center .overlay-video {
    pointer-events: auto;
}
.overlay-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== 视频位置 — 使用 % 相对于背景图，自动适配所有屏幕 ===== */
/* left/width 用 % 值，分母为 Figma 设计稿中图片宽度 1860px */
/* top/height 用 % 值，分母为 Figma 设计稿中图片高度 1046px */
/* 采用 % 定位方案，在所有视口宽度下精确对齐 */

/* video-pos-1: Figma left=1269, top=61, w=520, h=924 */
.page-07 .video-pos-1 {
    left: 68.226%;             /* 1269/1860 */
    top: 5.832%;               /* 61/1046 */
    width: 27.957%;            /* 520/1860 */
    height: 88.337%;           /* 924/1046 */
    z-index: 10;
}

/* video-pos-2: Figma left=636, top=60, w=520, h=924 */
.page-07 .video-pos-2 {
    left: 34.194%;             /* 636/1860 */
    top: 5.736%;               /* 60/1046 */
    width: 27.957%;            /* 520/1860 */
    height: 88.337%;           /* 924/1046 */
    z-index: 10;
}

/* video-pos-3: Figma left=1187, top=52, w=530, h=942 */
.page-07 .video-pos-3 {
    left: 63.817%;             /* 1187/1860 */
    top: 4.971%;               /* 52/1046 */
    width: 28.495%;            /* 530/1860 */
    height: 90.057%;           /* 942/1046 */
    z-index: 10;
}

/* video-pos-4: Figma left=1187, top=52, w=530, h=942 */
.page-07 .video-pos-4 {
    left: 63.817%;             /* 1187/1860 */
    top: 4.971%;               /* 52/1046 */
    width: 28.495%;            /* 530/1860 */
    height: 90.057%;           /* 942/1046 */
    z-index: 10;
}

/* video-pos-5: Figma left=1291, top=121, w=450, h=800 */
.page-07 .video-pos-5 {
    left: 69.409%;             /* 1291/1860 */
    top: 11.568%;              /* 121/1046 */
    width: 24.194%;            /* 450/1860 */
    height: 76.482%;           /* 800/1046 */
    z-index: 10;
}

/* video-pos-6: Figma left=1197, top=36, w=603, h=956 */
/* 四边各放大 ~2px 出血，消除子像素舍入导致的橙色漏边 */
.page-07 .video-pos-6 {
    left: 64.247%;             /* (1197-2)/1860 */
    top: 3.250%;               /* (36-2)/1046 */
    width: 32.634%;            /* (603+4)/1860 */
    height: 91.779%;           /* (956+4)/1046 */
    object-fit: cover;
    z-index: 10;
}

/* video-pos-7: Figma left=729, top=101, w=496, h=881 */
.page-07 .video-pos-7 {
    left: 39.194%;             /* 729/1860 */
    top: 9.656%;               /* 101/1046 */
    width: 26.667%;            /* 496/1860 */
    height: 84.226%;           /* 881/1046 */
    z-index: 10;
}

/* video-pos-8: Figma left=688, top=78, w=524, h=931 */
.page-07 .video-pos-8 {
    left: 36.989%;             /* 688/1860 */
    top: 7.457%;               /* 78/1046 */
    width: 28.172%;            /* 524/1860 */
    height: 89.006%;           /* 931/1046 */
    z-index: 10;
}

/* xgplayer 容器撑满父级 */
.page-07 .video-overlay-right .xgplayer-container,
.page-07 .video-overlay-center .xgplayer-container {
    width: 100%;
}
.page-07 .video-overlay-right .xgplayer-container video,
.page-07 .video-overlay-center .xgplayer-container video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ===== 隐藏视频控件 ===== */
.image-fullscreen .overlay-video::-webkit-media-controls-fullscreen-button,
.image-fullscreen .overlay-video::-webkit-media-controls-playback-rate-button,
.image-fullscreen .overlay-video::-webkit-media-controls-picture-in-picture-button,
.image-fullscreen .overlay-video::-webkit-media-controls-overlay-enclosure,
.image-fullscreen .overlay-video::-webkit-media-controls-overflow-button,
.image-fullscreen .overlay-video::-webkit-media-controls-overflow-button-list,
.image-fullscreen .overlay-video::-webkit-media-controls-overflow-button-menu,
.image-fullscreen .overlay-video::-webkit-media-controls-end-hints {
    display: none !important;
}

/* =============================================
   响应式 — 大屏显示器 (≥1920px)
   视频使用 %/vw 自动缩放，无需单独覆盖
   ============================================= */