/* ============================================================
   首页移动端适配样式
   - 仅在 @media (max-width: 800px) 下生效，PC 端（>800px）零影响
   - 尺寸单位使用 rem：由 flexible.js 设置根字号
     html { font-size: 100 * (clientWidth / 375) px }
     即 1rem = 100px（设计稿宽度 375px），px -> rem 直接除以 100
   - 只覆盖 index_spanish.css 中的固定宽/固定高/绝对定位布局
   - part1/part2 只显示中间卡（JS 轮播交互继续生效）；
     part3/part4 平铺静态卡片（图片+文字+链接）；
     part5 由左右浮动改为上下堆叠
   - 顶栏工具与抽屉菜单（header_mobile.js 注入）：
     PC（>800px）由下方规则强制隐藏，媒体查询内逐一显式恢复 display
   ============================================================ */

/* PC（>800px）默认隐藏移动端注入组件（元素仅由 JS 在移动端注入，此处兜底；
   注意：mask 不能用 !important，否则移动端 .active 展开会被压制） */
.mobile-header-tools,
.mobile-nav-toggle,
.mobile-search-btn,
.mobile-nav-drawer,
.mobile-drawer-close {
    display: none !important;
}

.mobile-nav-mask {
    display: none;
}

@media screen and (max-width: 800px) {

    /* ---------- 全局 ---------- */
    body {
        min-width: 100%;
    }

    .center {
        width: 100%;
        box-sizing: border-box;
        padding: 0 0.16rem;
    }

    /* ---------- 头部 ---------- */
    .head {
        height: auto;
        padding-bottom: 0.28rem;
        background-size: cover;
    }

    .head .center {
        height: auto;
    }

    /* 顶栏：logo + 搜索图标/汉堡按钮，通栏半透明黑条（工具由 header_mobile.js 注入） */
    .head .logos {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 0.64rem !important;
        /* 左右负 margin 抵消 .center 的 padding，形成通栏 */
        margin: 0 -0.16rem 0.28rem !important;
        padding: 0 0.16rem !important;
        background: rgba(0, 0, 0, 0.35) !important;
        box-sizing: border-box !important;
    }

    /* flex 布局下清掉 clearfix 伪元素，避免占据 flex 槽位 */
    .head .logos::before,
    .head .logos::after {
        display: none !important;
    }

    .head .logos .logo {
        width: 2.18rem !important;
        height: 0.24rem !important;
        margin: 0 !important;
    }

    /* 移动端不需要语言切换入口 */
    .head .logos .state {
        display: none;
    }

    /* PC 原生导航条 + 搜索框隐藏，改由抽屉承载 */
    .head .nav-search {
        display: none !important;
    }

    /* 顶部工具区（搜索图标 + 汉堡按钮） */
    .mobile-header-tools {
        display: flex !important;
        align-items: center !important;
    }

    .mobile-search-btn {
        display: block !important;
        width: 0.28rem;
        height: 0.28rem;
        margin-right: 0.12rem;
        background: url(//r1.visitbeijing.com.cn/images/20210525143623/648bb022f5fad4df774e1671cdb2bcbc.png) no-repeat center;
        background-size: contain;
        cursor: pointer;
    }

    /* 汉堡按钮（三条白线，展开时动画变 ✕） */
    .mobile-nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        width: 0.28rem;
        height: 0.24rem;
        cursor: pointer;
        padding: 0.02rem 0;
        z-index: 10002;
    }

    .mobile-nav-toggle span {
        display: block;
        width: 100%;
        height: 0.03rem;
        background-color: #ffffff;
        border-radius: 0.02rem;
        transition: all 0.3s ease;
    }

    .mobile-nav-toggle.open span:nth-child(1) {
        transform: rotate(45deg) translate(0.05rem, 0.06rem);
    }

    .mobile-nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-nav-toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translate(0.05rem, -0.06rem);
    }

    .mobile-nav-toggle.open span{
        display: none;
    }

    /* 抽屉遮罩 */
    .mobile-nav-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9998;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-nav-mask.active {
        display: block;
        opacity: 1;
    }

    /* 抽屉侧滑栏（右侧滑入） */
    .mobile-nav-drawer {
        display: block !important;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 3.2rem;
        height: 100vh;
        background: #ffffff;
        z-index: 100000;
        transition: right 0.3s ease;
        box-shadow: -0.04rem 0 0.2rem rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        padding: 0.6rem 0.2rem 0.4rem;
        box-sizing: border-box;
    }

    .mobile-nav-drawer.active {
        right: 0;
    }

    /* 抽屉右上角关闭按钮 (✕) */
    .mobile-drawer-close {
        display: flex !important;
        position: absolute;
        top: 0.16rem;
        right: 0.16rem;
        width: 0.32rem;
        height: 0.32rem;
        font-size: 0.18rem;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        border-radius: 50%;
        background: #ae69c4;
        z-index: 10;
        transition: all 0.2s ease;
        align-items: center;
        justify-content: center;
        user-select: none;

    }

    .mobile-drawer-close:hover,
    .mobile-drawer-close:active {
        background: #8B4AA0;
        color: #ffffff;
    }

    /* 抽屉顶部搜索栏 */
    .mobile-nav-drawer .mobile-search-box {
        display: flex;
        align-items: center;
        margin-bottom: 0.2rem;
        border: 1px solid #ddd;
        border-radius: 0.2rem;
        overflow: hidden;
        padding: 0.04rem 0.12rem;
        background: #d6d3cf;
    }

    .mobile-nav-drawer .mobile-search-box input {
        border: none;
        background: transparent;
        flex: 1;
        height: 0.32rem;
        /* 375 屏下 0.16rem = 16px，避免 iOS 聚焦时自动放大页面 */
        font-size: 0.16rem;
        outline: none;
        color: #333;
    }

    /* 抽屉搜索框 placeholder 颜色：统一覆盖首页 styles_sp.css 的紫色和子页面 PC CSS 的黑色 */
    .mobile-nav-drawer .mobile-search-box input::placeholder,
    .mobile-nav-drawer .mobile-search-box input::-webkit-input-placeholder,
    .mobile-nav-drawer .mobile-search-box input::-moz-placeholder,
    .mobile-nav-drawer .mobile-search-box input:-moz-placeholder,
    .mobile-nav-drawer .mobile-search-box input:-ms-input-placeholder {
        color: #999 !important;
    }

    .mobile-nav-drawer .mobile-search-box .search-go {
        width: 0.24rem;
        height: 0.24rem;
        background: url(//r1.visitbeijing.com.cn/images/20200924201927/2eda5c1782d629d8ea7a479246661930.png) no-repeat center;
        background-size: contain;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* 抽屉导航列表（本站导航无子级，平铺；主题色取首页紫） */
    .mobile-nav-drawer .nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-nav-drawer .nav-list > li {
        border-bottom: 1px solid #f0f0f0;
    }

    .mobile-nav-drawer .nav-list > li .nav-item-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.14rem 0.05rem;
        font-size: 0.16rem;
        color: #8B4AA0;
        font-weight: bold;
        text-decoration: none;
        font-family: Arial, sans-serif;
    }

    .mobile-nav-drawer .nav-list > li .nav-item-title a {
        color: #8B4AA0;
        flex: 1;
    }

    .head .big_tit {
        margin-top: 0.36rem;
        width: 100%;
    }

    .head .big_tit h2 {
        font-size: 0.26rem;
        line-height: 0.32rem;
        max-height: none;
    }

    .head .big_tit h2:before {
        top: 0.17rem;
        height: 0.13rem;
    }

    .head .big_tit p {
        width: 100%;
        font-size: 0.13rem;
        line-height: 0.21rem;
        max-height: none;
    }

    /* 数据栏：4 列改 2x2 */
    .head .datas {
        position: static;
        margin-top: 0.28rem;
        left: 0;
    }

    .head .datas ul {
        width: 100%;
        height: auto;
        flex-wrap: wrap;
        border-radius: 0.12rem;
    }

    .head .datas ul li {
        flex: 0 0 50%;
        height: auto;
        padding: 0.12rem 0;
    }

    .head .datas ul li span {
        font-size: 0.24rem;
        line-height: 0.3rem;
        margin-top: 0;
    }

    .head .datas ul li::after {
        display: none;
    }

    /* ---------- part1 不容错过：移动端只显示中间卡（JS 轮播交互继续生效） ---------- */
    .box .part1 {
        height: auto;
        padding: 0.24rem 0 0.32rem;
        background-size: cover;
    }

    .box .part1 h3 {
        font-size: 0.2rem;
        margin-bottom: 0.18rem;
    }

    .box .part1 .Cooldog_container {
        width: calc(100% - 0.32rem);
        margin: 0 0.16rem;
        height: auto;
    }

    .box .part1 .Cooldog_content ul {
        display: block;
        padding: 0;
    }

    /* 默认隐藏全部卡，仅 .p4（中间）由 JS 轮换显示 */
    .box .part1 .Cooldog_container li {
        display: none;
    }

    .box .part1 .Cooldog_container li.p4 {
        display: block;
        position: relative !important;
        transform: none !important;
        width: 100%;
        height: 0;
        /* 与 PC 卡片比例 450/800 一致 */
        padding-bottom: 56.25%;
        border-width: 0.04rem;
        border-radius: 0.1rem;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0;
        z-index: auto !important;
        opacity: 1 !important;
    }

    .box .part1 .Cooldog_container li.p4 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .box .part1 .Cooldog_container li div {
        display: block !important;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.12rem 0.16rem;
        line-height: 0.22rem;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    }

    .box .part1 .Cooldog_container li div p {
        font-size: 0.15rem;
        color: #fff;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding-bottom: 0;
    }

    .box .part1 .Cooldog_container li::before {
        display: none !important;
    }

    /* 左右箭头：显示在卡片左右边缘 */
    .box .part1 .Cooldog_container .btn_left,
    .box .part1 .Cooldog_container .btn_right {
        display: block;
        width: 0.4rem;
        height: 0.4rem;
        top: 50%;
        margin-top: -0.2rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .box .part1 .Cooldog_container .btn_left {
        left: 0.08rem;
        right: auto;
    }

    .box .part1 .Cooldog_container .btn_right {
        right: 0.08rem;
        left: auto;
    }

    /* ---------- part2 美食：移动端只显示中间卡（JS 3D 轮播交互继续生效） ---------- */
    .box .part2 {
        height: auto;
        padding: 0.24rem 0 0.32rem;
        background-size: cover;
    }

    .box .part2 h3 {
        font-size: 0.2rem;
        margin-bottom: 0.18rem;
    }

    .box .part2 .contBox {
        width: calc(100% - 0.32rem);
        margin: 0 0.16rem;
        height: auto;
        perspective: none;
    }

    .box .part2 .contInner {
        width: 100%;
        height: auto;
        transform: none !important;
        transform-style: flat;
        display: block;
    }

    /* 默认隐藏全部 item，仅 .item1（中间）由 JS 轮换显示 */
    .box .part2 .contInner .item {
        display: none;
    }

    .box .part2 .contInner .item.item1 {
        display: block;
        position: relative !important;
        left: 0 !important;          /* 覆盖 PC 端 left:50%（与 margin:0 配合回到容器左缘） */
        right: auto !important;
        transform: none !important;
        opacity: 1 !important;
        background: none !important;
        width: 100% !important;
        height: 0;
        /* 与 PC 卡片比例 470/820 一致 */
        padding-bottom: 57.5%;
        border-width: 0.04rem !important;
        border-radius: 0.1rem;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0 !important;
        z-index: auto !important;
    }

    .box .part2 .contInner .item.item1 .pic {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
    }

    .box .part2 .contInner .item.item1 .pic img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .box .part2 .text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 1 !important;
        padding: 0.12rem 0.16rem;
        line-height: 0.22rem;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    }

    .box .part2 .text p {
        font-size: 0.15rem;
        color: #fff;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding-bottom: 0;
    }

    .box .part2 .contInner .item .mask {
        display: none !important;
    }

    /* 左右箭头 */
    .box .part2 .contInner .next,
    .box .part2 .contInner .prev {
        display: block;
        width: 0.4rem;
        height: 0.4rem;
        top: 50%;
        margin-top: -0.2rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transform: none;
        left: 0.08rem;
        right: auto;
        margin-left: 0;
    }

    .box .part2 .contInner .next {
        left: auto;
        right: 0.08rem;
    }

    /* ---------- part3 住宿：平铺 4 卡片（图片+文字+链接，纯静态） ---------- */
    .box .part3 {
        height: auto;
        padding: 0.24rem 0 0.32rem;
        background-size: cover;
    }

    .box .part3 h3 {
        font-size: 0.2rem;
        margin-bottom: 0.18rem;
    }

    /* PC 结构（缩略图 + 大图切换）整体隐藏 */
    .box .part3 .hotel {
        display: none;
    }

    /* 移动端平铺区块：2x2 网格 */
    .box .part3 .hotel-m {
        display: grid !important; /* 覆盖行内 display:none */
        grid-template-columns: repeat(2, 1fr);
        gap: 0.16rem;
        width: calc(100% - 0.32rem);
        margin: 0 0.16rem;
    }

    .box .part3 .hotel-m a {
        display: block;
        background: #fff;
        border-radius: 0.1rem;
        overflow: hidden;
    }

    .box .part3 .hotel-m a img {
        width: 100%;
        height: auto;
        display: block;
    }

    .box .part3 .hotel-m a p {
        font-size: 0.14rem;
        line-height: 0.2rem;
        color: #1F0D09;
        padding: 0.08rem 0.1rem 0.12rem;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    /* ---------- part4 老字号：平铺 4 卡片（图片+文字+链接，纯静态） ---------- */
    .box .part4 {
        height: auto;
        padding: 0.24rem 0 0.32rem;
        background-size: cover;
    }

    .box .part4 h3 {
        font-size: 0.2rem;
        margin-bottom: 0.18rem;
    }

    /* PC 端 115px 偏移在窄屏会溢出，复位 */
    .box .part4 h3:before {
        margin-left: 0;
    }

    .box .part4 .olds {
        width: calc(100% - 0.32rem);
        height: auto;
        margin: 0 0.16rem;
    }

    /* 2x2 网格平铺 */
    .box .part4 .olds .con-r {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.16rem;
        height: auto;
        overflow: visible;
        border-radius: 0;
    }

    .box .part4 .olds .con-r .r-con {
        float: none;
        width: 100% !important;
        height: auto;
        margin: 0;
        border-radius: 0.1rem;
    }

    /* 竖排标题条隐藏，直接展示 图片+文字+链接 */
    .box .part4 .olds .con-r .r-con .r-tit {
        display: none;
    }

    .box .part4 .olds .con-r .r-con .r-inner {
        position: relative;
        width: 100%;
        height: auto;
        margin-left: 0;
        display: block;
        border-radius: 0.1rem;
    }

    .box .part4 .olds .con-r .r-con .r-inner img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 0;
    }

    .box .part4 .olds .con-r .r-con .r-inner .text {
        padding: 0.1rem 0.12rem;
    }

    .box .part4 .olds .con-r .r-con .r-inner .text p {
        font-size: 0.14rem;
        line-height: 0.2rem;
        padding-bottom: 0;
    }

    /* ---------- part5 博物馆/商圈：左右浮动改上下堆叠 ---------- */
    .box .part5 {
        height: auto;
        overflow: visible;
        padding: 0.24rem 0.16rem 0.32rem;
        background-size: cover;
        text-align: center;
    }

    .box .part5 h3 {
        font-size: 0.2rem;
        margin-bottom: 0.14rem;
    }

    .box .part5 .museum {
        width: 100%;
    }

    .box .part5 .museum .box-l {
        float: none;
        width: 100%;
    }

    .box .part5 .museum .box-l .inner {
        float: none;
        width: 100%;
        margin: 0 0 0.24rem;
    }

    .box .part5 .museum .box-l .inner .pic {
        height: auto;
    }

    .box .part5 .museum .box-l .inner .pic img {
        height: auto;
        display: block;
    }

    .box .part5 .museum .box-l .inner h5 {
        font-size: 0.17rem;
        line-height: 0.24rem;
        margin-top: 0.08rem;
    }

    .box .part5 .museum .box-l .inner p {
        font-size: 0.13rem;
        line-height: 0.19rem;
        margin-top: 0.06rem;
    }

    .box .part5 .museum .box-r {
        float: none;
        width: 100%;
        margin-top: 0.08rem;
    }

    .box .part5 .museum .box-r .pic {
        height: auto;
    }

    .box .part5 .museum .box-r .pic img {
        height: auto;
        display: block;
    }

    .box .part5 .museum .box-r .pic .text {
        padding: 0.12rem 0.14rem;
    }

    .box .part5 .museum .box-r .pic .text p {
        font-size: 0.15rem;
        line-height: 0.2rem;
        padding-bottom: 0;
    }

    /* ---------- 底部 ---------- */
    .foot {
        height: auto;
        padding: 0.24rem 0.16rem;
        background-size: cover;
        line-height: 0.22rem;
        font-size: 0.12rem;
    }
    .foot span{
        display: block;
    }
}