/* 移动端专用样式 - 修复版 */
@media (max-width: 991px) {
    /* 0. 防止任何元素溢出 */
    * {
        max-width: 100vw !important;
        box-sizing: border-box;
    }
    
    html {
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100% !important;
    }
    
    /* 1. 全局重置 */
    body {
        background-color: #ffffff !important;
        background-image: none !important;
        padding-top: 60px;
        overflow-x: hidden !important;
        overflow-y: auto !important; /* 确保只有body滚动 */
        height: auto !important; /* 覆盖min-vh-100 */
        min-height: 100vh !important; /* 保持最小高度 */
        width: 100vw !important; /* 确保宽度不超出 */
        max-width: 100% !important;
    }
    
    /* 移除flex容器可能导致的问题 */
    body.d-flex {
        display: block !important;
    }
    
    .mobile-wrapper {
        overflow: visible !important; /* 完全移除overflow */
        width: 100% !important;
        max-width: 100vw !important;
        min-height: auto;
        box-sizing: border-box;
    }
    
    /* 确保主内容区不创建滚动上下文 */
    main {
        overflow: visible !important;
        height: auto !important;
        flex: none !important; /* 移除flex-grow */
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* 移除所有可能创建独立滚动的容器 */
    .mobile-section {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }
    
    /* 确保所有图片和容器不溢出 */
    .mobile-section img,
    .mobile-section .position-absolute {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    /* 2. 移动端 Header 样式 */
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px; /* 约 3.5rem */
        background-color: #FEEAB8; /* 淡黄色 */
        z-index: 1050;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        overflow-x: auto; /* 防止内容过多溢出 */
        white-space: nowrap;
    }

    .mobile-header::-webkit-scrollbar {
        display: none; /* 隐藏滚动条 */
    }

    .mobile-logo-link img {
        height: 60px;
        width: auto;
    }

    .mobile-nav-links {
        gap: 0; /* 移除间距，改用 padding 控制 */
        height: 100%; /* 占满高度 */
    }

    .mobile-nav-item {
        color: #2c3e50;
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        padding: 0 10px; /* 减小左右内边距 */
        display: flex;
        align-items: center; /* 垂直居中 */
        height: 100%; /* 占满高度 */
        /* 指定黑体优先 */
        font-family: "Heiti SC", "SimHei", "Microsoft YaHei", "PingFang SC", sans-serif !important;
        letter-spacing: 0.3px;
    }

    .mobile-nav-item:hover, .mobile-nav-item:active {
        color: #D32F2F; /* 激活色 */
    }
    
    .mobile-nav-item.active {
        background-color: #FCD080; /* 深黄色高亮背景 */
        font-weight: bold;
    }

    /* 3. 顶部 Banner */
    .mobile-banner-img {
        width: 100%;
        display: block;
        margin-top: 0;
        margin-bottom: 20px;
    }

    #mobileHeroCarousel .carousel-item img {
        height: 240px; /* 统一高度，根据需求调整 */
        object-fit: cover; /* 裁剪填充，保持比例不拉伸 */
        width: 100%;
        display: block;
    }

    /* 移动端轮播指示器改为圆点 */
    #mobileHeroCarousel .carousel-indicators {
        margin-bottom: 0.5rem; /* 稍微向上提一点 */
    }

    #mobileHeroCarousel .carousel-indicators button {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        margin: 0 4px !important;
        background-color: #fff;
        opacity: 0.5;
        border: none;
        flex: 0 0 auto; /* 防止被压缩 */
    }

    #mobileHeroCarousel .carousel-indicators button.active {
        opacity: 1;
        background-color: #fff;
    }

    /* 4. 通用标题 */
    .mobile-section-title {
        text-align: center;
        margin: 30px 0 30px; /* 调整上下间距，视觉一致 */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 0;
    }
    
    .mobile-section-title img {
        height: 28px; /* 增大云朵 (原20px) */
        width: auto;
    }
    
    .mobile-section-title span {
        font-size: 1.4rem; /* 增大文字 (原1.1rem) */
        font-weight: bold;
        color: #333;
        /* 指定黑体 */
        font-family: "Heiti SC", "SimHei", "Microsoft YaHei", sans-serif;
        letter-spacing: 1px;
    }

    /* 5. 活动背景意义 - 纯背景图全宽布局 */
    .mobile-activity-section {
        padding: 0 15px 30px;
    }

    .mobile-activity-layout {
        display: block;
        overflow: hidden;
        background-image: url('../images/mobile/group-decoration.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-top: 20px;
    }


    .mobile-activity-right {
        width: 100%; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 30px; 
        min-height: 320px; 
    }

    .mobile-subtitle-img {
        width: 30%;
        display: block;
        margin: 0 0 20px auto; /* 靠右对齐 */
    }

    .mobile-meaning-text {
        font-size: 0.8rem;
        line-height: 1.6;
        color: #333;
        text-align: justify;
        font-family: "Heiti SC", "SimHei", sans-serif;
        
        width: 55%; /* 限制宽度只占右侧 */
        margin-left: auto; /* 靠右对齐 */
    }
    /* 6. 主办方介绍 */
    .mobile-organizer-section {
        padding: 0 15px 40px;
        background: #fff; 
        margin-bottom: 0;
    }

    .mobile-organizer-text {
        padding: 0 20px;
    }

    .mobile-organizer-text p {
        font-family: "Heiti SC", "SimHei", sans-serif;
        text-indent: 2em;
        text-align: justify;
        margin-bottom: 1rem;
        color: #555;
        font-size: 0.85rem;
        line-height: 1.8;
    }

    .mobile-organizer-logo {
        height: 50px;
        width: auto;
        display: block;
        margin: 0 auto 20px;
    }

    .mobile-organizer-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin: 20px 0;
    }

    .mobile-organizer-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #F9F7F0;
        padding: 10px;
        border-radius: 8px;
    }

    .mobile-organizer-item img {
        height: 20px;
        width: auto;
        margin-bottom: 5px;
    }
    
    .mobile-organizer-item strong {
        font-size: 1rem;
        color: #D32F2F;
        font-weight: bold;
    }
    
    .mobile-organizer-item p {
        font-size: 0.8rem;
        color: #666;
        margin: 0;
    }

    /* 7. 底部报名区域 */
    .mobile-footer-section {
        position: relative;
        width: 100% !important;
        max-width: 100vw !important;
        background-color: #4A7C85;
        background-image: url('../images/mobile/background.png');
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        padding: 40px 15px 60px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .mobile-footer-bg {
        display: none; 
    }

    .mobile-footer-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile-slogan-img {
        width: 80%;
        max-width: 300px;
        margin-bottom: 30px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }

    .mobile-highlight-box {
        position: relative;
        width: 100%;
        max-width: 320px;
        margin-bottom: 30px;
        background-image: url('../images/mobile/highlight-card-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 50px 30px 40px;
    }
    
    .mobile-highlight-bg {
        display: none;
    }
    
    .mobile-highlight-list {
        position: relative;
        width: 100%;
        text-align: center;
    }
    
    .mobile-highlight-item {
        font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", "SimHei", sans-serif !important;
    }

    .highlight-card-title {
        font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", "SimHei", sans-serif !important;
    }
    
    .mobile-highlight-icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .mobile-btn-container {
        width: 100%;
        max-width: 320px;
        display: flex;
        gap: 20px;
        margin-top: 10px;
        margin-bottom: 60px; /* 增加与页脚区域的距离 */
        padding: 0 10px;
    }

    .mobile-action-btn {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        background: linear-gradient(180deg, #FFF5D6 0%, #FFD568 100%);
        border-radius: 25px;
        color: #5D2E18; /* 深棕色文字 */
        font-size: 1.15rem;
        font-weight: bold;
        text-decoration: none;
        box-shadow: 0 4px 8px rgba(139, 69, 19, 0.2);
        letter-spacing: 2px;
        border: 1px solid #FFE082;
        transition: transform 0.1s;
    }
    
    .mobile-action-btn:active {
        transform: scale(0.98);
        box-shadow: 0 2px 4px rgba(139, 69, 19, 0.2);
    }
    
    /* 移除旧的img样式 */
    /* .mobile-action-btn img { ... } */

    /* 8. 页脚 */
    .mobile-footer-info {
        background: #FDFBF5;
        padding: 30px 15px;
        text-align: center;
    }

    .mobile-qr-container {
        display: flex;
        justify-content: space-around;
        margin-bottom: 30px;
    }

    .mobile-qr-box {
        width: 80px;
        text-align: center;
    }
    
    .mobile-qr-box img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 5px;
        border: 1px solid #eee;
    }
    
    .mobile-qr-box p {
        font-size: 0.7rem;
        color: #666;
    }

    .mobile-contact-list {
        text-align: left;
        background: #fff;
        padding: 15px;
        border-radius: 8px;
        display: block;
    }
    
    .mobile-contact-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 0.8rem;
        color: #666;
    }
    
    .mobile-contact-icon {
        width: 14px;
        margin-right: 8px;
    }

    /* 新增统计数据样式 */
    .mobile-stats-num {
        font-size: 1.2rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
        font-family: "Heiti SC", "SimHei", sans-serif;
        line-height: 1;
    }

    .mobile-stats-num .small-unit {
        font-size: 0.8rem;
        font-weight: normal;
        margin-left: 1px;
    }

    .mobile-stats-label-box {
        background-color: #FFD568; /* 设计图中的黄色背景 */
        color: #555;
        font-size: 0.75rem;
        padding: 3px 6px;
        display: inline-block;
        min-width: 50px;
        line-height: 1.4;
    }
}

/* ============================================ */
/* 针对360px及以下超小屏幕的额外优化 */
/* ============================================ */
@media (max-width: 360px) {
    /* 头部导航 - 缩小字体和间距 */
    .mobile-nav-item {
        font-size: 12px !important;
        padding: 0 8px !important;
        letter-spacing: 0.2px;
    }
    
    /* 标题 - 稍微缩小 */
    .mobile-section-title span {
        font-size: 1.25rem !important;
    }
    
    .mobile-section-title img {
        height: 24px !important;
    }
    
    /* 活动背景意义 - 调整内边距 */
    .mobile-activity-right {
        padding: 15px 20px !important;
        min-height: 300px !important;
    }
    
    .mobile-subtitle-img {
        width: 35% !important;
    }
    
    .mobile-meaning-text {
        font-size: 0.75rem !important;
        width: 58% !important;
    }
    
    /* 主办方数据 - 优化显示 */
    .row.g-2.text-center.mb-3 .col-3 {
        padding: 0 2px !important;
    }
    
    .row.g-2.text-center.mb-3 .fw-bold {
        font-size: 0.85rem !important;
        margin-bottom: 8px !important;
    }
    
    .row.g-2.text-center.mb-3 .px-2 {
        font-size: 0.65rem !important;
        padding: 2px 4px !important;
    }
    
    /* 活动亮点卡片 - 缩小字体 */
    .highlight-card-title {
        font-size: 1.15rem !important;
        margin-bottom: 10px !important;
    }
    
    .mobile-highlight-item {
        margin-bottom: 8px !important;
        font-size: 0.85rem !important;
    }
    
    .mobile-highlight-item .fw-bold {
        font-size: 0.85rem !important;
    }
    
    .mobile-highlight-item .text-secondary {
        font-size: 0.7rem !important;
    }
    
    .mobile-highlight-item img {
        width: 12px !important;
    }
    
    /* 报名按钮 - 稍微缩小 */
    .mobile-action-btn {
        height: 45px !important;
        font-size: 1rem !important;
        letter-spacing: 1.5px !important;
        border-radius: 22.5px !important;
    }
    
    .mobile-btn-container {
        gap: 15px !important;
        padding: 0 5px !important;
    }
    
    /* 标语图片 */
    .mobile-slogan-img {
        width: 85% !important;
        max-width: 280px !important;
    }
    
    /* 亮点卡片容器 */
    .mobile-highlight-box {
        max-width: 300px !important;
        padding: 45px 25px 35px !important;
    }
    
    /* 二维码 - 缩小 */
    .mobile-qr-box {
        width: 70px !important;
    }
    
    .mobile-qr-box p {
        font-size: 0.65rem !important;
    }
    
    /* 联系方式 */
    .mobile-contact-item {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
    }
    
    .mobile-contact-icon {
        width: 12px !important;
        margin-right: 6px !important;
    }
    
    /* 主办方文字 */
    .mobile-organizer-text p {
        font-size: 0.8rem !important;
        line-height: 1.7 !important;
    }
    
    /* 轮播图高度 */
    #mobileHeroCarousel .carousel-item img {
        height: 220px !important;
    }
}