/* 字体引入 */
@font-face {
    font-family: 'FZLTHJW';
    src: url('../../resources/fonts/FZLTHJW-subset.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

/* 重置所有视频元素的默认样式 */
video {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    display: block !important;
}

/* 覆盖 common.css 中的 overflow: hidden，恢复页面滚动 */
html {
    overflow-y: auto;
    overflow-x: hidden;
}

body.have-fun-page {
    background-color: #D4D4D4;
    font-family: 'Inter', sans-serif;
    overflow-y: auto;
}

.navbar {
    background-color: #D4D4D4 !important;
    z-index: 100;
    padding-bottom: 13px !important;
    border-bottom: 2px solid #000000;
}

.nav-link:hover {
    color: #85A266 !important;
}

.nav-link.active {
    color: #85A266 !important;
}

.nav-link:focus,
.nav-link:focus-visible,
.nav-link:hover:focus,
.nav-link:hover:focus-visible {
    color: #85A266 !important;
    outline: none;
}

.have-fun-container {
    position: relative;
    width: 100%;
}

/* Intro Section */
.intro-section {
    width: 100%;
    padding-top: clamp(50px, 6.153vw, 120px);
}

.intro-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Cover Section */
.cover-section {
    width: calc(100% - 4.167vw);
    margin-left: 2.083vw;
    margin-right: 2.083vw;
}

.cover-wrapper {
    position: relative;
    width: 100%;
    display: block;
}

.cover-image {
    width: 100%;
    height: auto;
    display: block;
}

.cover-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cover-video {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 100% !important;
    object-fit: cover;
    display: block;
    max-width: none;
    min-width: 100%;
}

/* Images Section */
.images-section {
    width: calc(100% - 4.167vw);
    margin-left: 2.083vw;
    margin-right: 2.083vw;
}

.image-item {
    position: relative;
    width: 100%;
}

.image-item .item-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Video overlay container - 参考 project-detail-07 */
.video-overlay-right {
    position: absolute;
    z-index: 10;
}

.video-overlay-right .overlay-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 视频位置样式 */
/* left/width 用 % 相对于.image-item（与背景图等比对齐），分母为 Figma 图片宽度 1860px */
/* padding-top 用 vw：公式 = (Figma偏移px / Figma图高979px) * (1860 / 1440) * 100，考虑图片缩放比 */
.video-pos-1,
.video-pos-3,
.video-pos-4,
.video-pos-5,
.video-pos-6 {
    left: 12.796%;             /* 238/1860 */
    top: 0;
    padding: 3.143vw 0 0 0;    /* 61/979 * 1860/1440 * (1380/1440)/(1/1440) */
    width: 34.839%;            /* 648/1860 */
    z-index: 10;
}

.video-pos-1 .xgplayer-container,
.video-pos-3 .xgplayer-container,
.video-pos-4 .xgplayer-container,
.video-pos-5 .xgplayer-container,
.video-pos-6 .xgplayer-container {
    width: 100%;
}

.video-pos-1 .xgplayer-container video,
.video-pos-3 .xgplayer-container video,
.video-pos-4 .xgplayer-container video,
.video-pos-5 .xgplayer-container video,
.video-pos-6 .xgplayer-container video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.video-pos-2 {
    left: 2.742%;              /* 51/1860 */
    top: 0;
    padding: 7.677vw 0 0 0;    /* 149/979 * 1860/1440 * (1380/1440)/(1/1440) */
    width: 55.000%;            /* 1023/1860 */
    z-index: 10;
}

.video-pos-2 .xgplayer-container {
    width: 100%;
}

.video-pos-2 .xgplayer-container video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.video-pos-7 {
    left: 64.355%;              /* 1197/1860 */
    top: 0;
    padding: 1.855vw 0 0 0;     /* 36/1860 * 95.833 */
    width: 32.419%;             /* 603/1860 */
    z-index: 10;
}

.video-pos-7 .xgplayer-container {
    width: 100%;
}

.video-pos-7 .xgplayer-container video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Gap of 9px between specific images */
.image-item-gap-9 {
    margin-bottom: 0.625vw;
}

/* Gap of 80px between image 13 and 14 */
.image-item-gap-80 {
    margin-bottom: 5.556vw;
}

/* Last image item with bottom margin */
.image-item-last {
    margin-bottom: 4.167vw;
}