/*
  此文件为移动端适配补丁，通过覆盖原有样式来保证页面在 iOS 与安卓设备上的显示效果。

  使用方式：在原有 styles.css 之后引入本文件，例如：
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="styles_mobile.css">

  主要改动：
  1. 隐藏横向滚动条，防止页面横向溢出。
  2. 图片、视频默认不超过容器宽度，保证纵横比。
  3. 修正宽度为 100vw 以及负 margin 导致的横向偏移问题，确保在小屏幕上占据整行且居中。
  4. 针对导航、Intro 区域、图片滚动条等元素调整内边距和间距，使其在移动端更加紧凑。
*/

/* 避免横向滚动 */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 所有图片和视频限制宽度 */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 背景图片和视频不受宽度限制 */
.shared-parallax-bg img,
.shared-parallax-bg video,
.intro-gap__video-media {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* 小屏幕布局优化 */
@media (max-width: 768px) {
    /* 移动端导航下拉菜单增加上间距，避免与滚动条重合 */
    .nav__dropdown {
        padding-top: 24px;
    }
    
    .nav__dropdown li:first-child {
        margin-top: 80px !important;
    }
    
    /* 移动端语言选择器优化 */
    .lang__dropdown li + li {
        margin-top: 12px;
    }
    
    .lang__dropdown li:first-child {
        margin-top: 12px;
    }
    
    .lang__option {
        font-size: 0.8rem;
    }
    
    /* 去除全屏组件的负 margin 和宽度限制 */
    .intro-gap,
    #home,
    .image-scroll-container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    /* 调整 Intro 区域视频高度，使标题不会被遮挡 */
    .intro-gap {
        min-height: 70vh;
        padding-top: 20vh;
        padding-bottom: 10vh;
    }
    /* 缩小滚动图片容器的高度和圆角，图片间距更紧凑 */
    .image-scroll-container {
        height: clamp(180px, 25vh, 280px);
        border-radius: 12px;
    }
    .scroll-image-item {
        width: clamp(180px, 32vw, 240px);
        margin-right: 16px;
    }
    /* 调整文字区域的内边距 */
    .home-content {
        margin: 0;
        padding: 0 12px;
    }
    .home-intro {
        font-size: 0.95rem;
    }
    /* 移动端显示滚动文字条 */
    .text-marquee {
        display: flex !important;
    }
}

@media (max-width: 480px) {
    /* 进一步缩减内边距以适应超小屏幕 */
    .image-scroll-container {
        height: clamp(160px, 22vh, 220px);
        border-radius: 8px;
    }
    .scroll-image-item {
        width: clamp(160px, 40vw, 220px);
        margin-right: 12px;
    }
    .home-content {
        padding: 0 10px;
    }
    .intro-gap {
        padding-top: 25vh;
        padding-bottom: 8vh;
    }
    
    /* 移动端职业发展卡片二维码调整 */
    .program-qr__image {
        width: min(100px, 100%);
    }
    
    .program-qr__caption {
        font-size: 0.7rem;
    }
}

/* 移动端横屏优化 - 确保背景正确显示 */
@media (max-width: 768px) and (orientation: landscape) {
    .shared-parallax-bg {
        position: fixed !important;
        width: 100vw !important;
        height: 100vh !important;
    }
    
    .shared-parallax-bg img {
        width: 100vw !important;
        height: 100vh !important;
        object-fit: cover !important;
    }
}

/* 移动端竖屏优化 - 确保背景正确显示 */
@media (max-width: 768px) and (orientation: portrait) {
    .shared-parallax-bg {
        position: fixed !important;
        width: 100vw !important;
        height: 100vh !important;
    }
    
    .shared-parallax-bg img {
        width: 100vw !important;
        height: 100vh !important;
        object-fit: cover !important;
    }
}