/* ============================================================================
   长荡湖 H5 App 化全局样式  mobile-app.css
   仅在移动端 (max-width:768px) 生效；PC 端(≥769px)完全不加载本文件中的规则。
   本文件为“全局基座”：App 顶栏 / 抽屉 / 底部 Tab / 安全区 / 栅格 / 卡片 /
   表单 / 表格 / 通用排版。模块专属样式在 public/css/mobile/<module>.css。
   加载顺序在 site.css 之后，故同级选择器以本文件为准。
   ============================================================================ */

/* PC 端默认隐藏的移动端专属元素（≥769px） */
.h5-search-btn { display: none; }
/* 沉浸式页（酒店/餐饮/预订/园区等隐藏全局 .site-header 的页面）注入的移动导航 */
.h5-cdh-actions, .h5-cdh-drawer, .h5-cdh-mask { display: none; }

@media (max-width: 768px) {
    :root {
        --h5-tab-h: 56px;                 /* 底部 Tab 栏高度（不含安全区） */
        --h5-header-h: 52px;              /* 移动端顶栏高度 */
        --h5-pad: 16px;                  /* 页面左右安全边距 */
        --h5-radius: 14px;
        --h5-safe-b: env(safe-area-inset-bottom, 0px);
    }

    /* ---------- 1. 基础安全 ---------- */
    * { -webkit-tap-highlight-color: rgba(0, 180, 198, .12); }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    html, body { overflow-x: hidden; max-width: 100%; }
    body {
        background: var(--c-bg, #F2F8F9);
        padding-bottom: calc(var(--h5-tab-h) + var(--h5-safe-b));
        -webkit-overflow-scrolling: touch;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    body.drawer-open { overflow: hidden; }
    /* 抽屉打开时隐藏底部浮动操作条（避免与抽屉/Tab 栏叠放），Tab 栏常驻保留 */
    body.drawer-open .detail-actionbar, body.drawer-open .bottom-action-bar,
    body.drawer-open .buy-bar, body.drawer-open .booking-bar { visibility: hidden; }
    .container { width: 100%; max-width: 100%; padding-left: var(--h5-pad); padding-right: var(--h5-pad); }
    img, video, svg, iframe, canvas { max-width: 100%; }
    img { height: auto; }
    iframe { width: 100%; }
    /* 超长英文/链接不撑破布局 */
    p, li, h1, h2, h3, h4, h5, h6, span, a, td, th, div { overflow-wrap: break-word; word-break: break-word; }
    .main-content { min-height: 60vh; }

    /* 显隐工具 */
    .h5-hide { display: none !important; }
    .h5-show { display: block !important; }
    .h5-show-flex { display: flex !important; }

    /* ---------- 2. App 顶栏 ---------- */
    .site-header { height: var(--h5-header-h); }
    .site-header .header-inner { padding: 0 12px; gap: 8px; height: var(--h5-header-h); }
    .logo { gap: 6px; }
    .logo-icon { width: 28px; height: 28px; }
    .logo-text { font-size: 19px; letter-spacing: .5px; }
    /* 移动端隐藏 PC 搜索框与登录文字按钮，改用图标 */
    .header-search { display: none !important; }
    .header-actions { gap: 4px; }
    .header-actions .btn { display: none; }
    .user-name, .user-avatar-btn .chevron { display: none; }
    .user-avatar-btn { padding: 0; }
    .user-avatar { width: 32px; height: 32px; }

    /* 顶栏移动端搜索图标 */
    .h5-search-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 50%;
        color: var(--c-dark, #0B1B2B); font-size: 21px; flex-shrink: 0;
    }
    .h5-search-btn:active { background: var(--c-primary-bg, #E8F7F9); }

    /* 汉堡按钮 */
    .mobile-toggle {
        display: flex; z-index: 1002; width: 40px; height: 40px;
        align-items: center; justify-content: center; flex-shrink: 0;
    }
    .mobile-toggle span { width: 22px; height: 2.5px; }
    .mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-toggle.active span:nth-child(2) { opacity: 0; }
    .mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ---------- 3. 移动抽屉菜单 ---------- */
    .main-nav {
        position: fixed; top: var(--h5-header-h); left: 0; right: 0; bottom: 0;
        background: var(--c-white, #fff);
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        padding: 8px 12px calc(var(--h5-tab-h) + var(--h5-safe-b) + 12px);
        gap: 2px; overflow-y: auto;
        transform: translateX(100%);
        transition: transform .28s ease;
        z-index: 1001; box-shadow: none;
    }
    .main-nav.show { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .main-nav .nav-link {
        width: 100%; padding: 14px 12px; font-size: 16px; font-weight: 500;
        display: flex; align-items: center; gap: 12px; border-radius: 12px;
        color: var(--c-text, #2D3A45);
    }
    .main-nav .nav-link:active { background: var(--c-primary-bg, #E8F7F9); }
    .main-nav .nav-link::before {
        content: ""; width: 6px; height: 6px; border-radius: 50%;
        background: var(--c-primary, #00B4C6); opacity: 0; flex-shrink: 0;
    }
    .main-nav .nav-link:active::before { opacity: 1; }
    .h5-drawer-mask {
        position: fixed; inset: var(--h5-header-h) 0 0 0; background: rgba(11, 27, 43, .45);
        z-index: 1000; opacity: 0; visibility: hidden; transition: opacity .25s ease;
    }
    .h5-drawer-mask.show { opacity: 1; visibility: visible; }

    /* ---------- 4. 底部 Tab 栏（5 Tab） ---------- */
    .h5-tabbar {
        display: flex;
        position: fixed; bottom: 0; left: 0; right: 0;
        height: calc(var(--h5-tab-h) + var(--h5-safe-b));
        padding-bottom: var(--h5-safe-b);
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--c-border, #E0E8EA);
        box-shadow: 0 -2px 18px rgba(9, 40, 54, .07);
        z-index: 1200;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    .h5-tabbar .tab-item {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; color: var(--c-gray-light, #8899A6);
        font-size: 11px; line-height: 1; text-decoration: none;
        min-height: var(--h5-tab-h); padding: 4px 0;
        -webkit-tap-highlight-color: transparent;
    }
    .h5-tabbar .tab-item .tab-icon { font-size: 22px; line-height: 1; transition: transform .15s ease; }
    .h5-tabbar .tab-item:active .tab-icon { transform: scale(1.12); }
    .h5-tabbar .tab-item.active { color: var(--c-primary-dark, #00707E); font-weight: 700; }
    .h5-tabbar .tab-item.active .tab-icon { color: var(--c-primary, #00B4C6); }

    /* ---------- 5. 回到顶部 / Cookie 条 ---------- */
    .back-to-top {
        right: 14px;
        bottom: calc(var(--h5-tab-h) + var(--h5-safe-b) + 16px);
        width: 42px; height: 42px;
    }
    .cookie-consent {
        left: 12px; right: 12px; bottom: calc(var(--h5-tab-h) + var(--h5-safe-b) + 10px);
        margin: 0; max-width: none;
    }
    .cookie-consent-inner { flex-direction: column; gap: 10px; padding: 14px; }
    .cookie-consent-actions { width: 100%; }
    .cookie-consent-actions .btn { width: 100%; }

    /* ---------- 6. H5 页脚精简（只留备案版权） ---------- */
    .mag-footer { padding: 22px 16px calc(20px + var(--h5-safe-b)); }
    .mag-footer-top { display: none !important; }
    .mag-footer-bottom { padding-top: 0; font-size: 11px; line-height: 1.8; }

    /* ---------- 7. 通用栅格 → 1 / 2 列 ---------- */
    .card-grid-2, .card-grid-3, .card-grid-4,
    .grid-2, .grid-3, .grid-4,
    .home-channels .channel-grid,
    .destination-grid, .goods-grid, .goods-list,
    .lodging-grid, .hotel-grid, .restaurant-grid,
    .event-grid, .guide-grid, .article-grid,
    .coupon-grid, .ticket-grid, .spot-grid, .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    /* 宽列表型内容强制单列 */
    .list-grid, .media-list, .news-list, .info-list,
    .card-list, .detail-list, .booking-list {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .home-two-col, .two-col, .two-columns, .sidebar-layout,
    .content-sidebar, .main-with-sidebar {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    /* 通用 flex 行自动换行 */
    .flex-row, .toolbar, .filter-bar, .action-bar, .btn-group {
        flex-wrap: wrap; gap: 8px;
    }
    .row { margin-left: 0; margin-right: 0; }
    .row > [class*="col-"] { padding-left: 0; padding-right: 0; }

    /* ---------- 8. 卡片 ---------- */
    .card, .info-card, .item-card, .panel-card, .base-card,
    .goods-card, .product-card, .hotel-card, .restaurant-card,
    .event-card, .guide-card, .article-card, .destination-card,
    .coupon-card, .ticket-card, .spot-card, .service-card, .lodging-card {
        border-radius: var(--h5-radius) !important;
        break-inside: avoid;
    }
    /* 去除 PC 端 hover 浮起在触屏上的残留 */
    .card:active, [class*="-card"]:active { transform: scale(.985); }
    [class*="-card"] { transition: transform .12s ease; }

    /* ---------- 9. 区块 / 标题 / 排版 ---------- */
    .home-section, .section, .page-section, .list-section { padding: 28px 0 !important; }
    .section-title, .block-title { font-size: 20px !important; }
    .section-head, .section-header { flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    h1 { font-size: 24px; line-height: 1.3; }
    h2 { font-size: 20px; line-height: 1.35; }
    h3 { font-size: 17px; line-height: 1.4; }
    .page-title, .page-header h1 { font-size: 22px; }
    .text-sm, .muted { font-size: 13px; }

    /* ---------- 10. 按钮与触控区 ---------- */
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
           border-radius: 10px; font-size: 15px; padding: 11px 20px; line-height: 1.2; }
    .btn-sm { min-height: 38px; padding: 8px 14px; font-size: 14px; }
    .btn-lg { min-height: 50px; font-size: 16px; }
    .btn-block { display: flex; width: 100%; }
    /* 可点图标热区 ≥ 40px */
    .icon-btn, .icon-action, .action-icon, .like-btn, .fav-btn, .share-btn {
        min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
    }
    a, button, .nav-link, .tab-item, .filter-item, .chip, .cat-item, .pagination a { touch-action: manipulation; }

    /* ---------- 11. 表单 ---------- */
    input[type="text"], input[type="search"], input[type="tel"], input[type="number"],
    input[type="email"], input[type="password"], input[type="date"], input[type="time"],
    input[type="datetime-local"], textarea, select {
        font-size: 16px !important;            /* 防 iOS 聚焦缩放 */
        max-width: 100%;
        min-height: 44px;
        border-radius: 10px;
    }
    textarea { min-height: 96px; padding: 12px; }
    .form-group, .form-item, .field { margin-bottom: 16px; }
    .form-row, .form-inline, .form-grid {
        flex-direction: column !important; gap: 0; align-items: stretch !important;
    }
    .form-row > * { width: 100%; }
    .form-actions { flex-direction: column; gap: 10px; }
    .form-actions .btn { width: 100%; }
    .auth-card, .form-card { padding: 22px 18px !important; }
    label, .form-label { font-size: 14px; }

    /* ---------- 12. 表格（JS 已包裹 .h5-table-scroll） ---------- */
    .h5-table-scroll {
        width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
        margin: 12px 0; border: 1px solid var(--c-border, #E0E8EA); border-radius: 12px;
    }
    .h5-table-scroll > table { min-width: 480px; margin: 0; border: 0; }
    .h5-table-scroll > table th, .h5-table-scroll > table td { white-space: nowrap; }
    /* 兜底：未包裹的表格本身可横滑 */
    .main-content table { max-width: 100%; }
    .main-content table:not(.h5-table-scroll > table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ---------- 13. 通用筛选 / 分类 chip 吸顶 ---------- */
    .h5-sticky {
        position: sticky; top: var(--h5-header-h); z-index: 900;
        background: var(--c-bg, #F2F8F9); padding: 10px 0;
    }
    .chips, .chip-row, .filter-chips, .category-tabs, .cat-tabs, .segmented {
        display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px;
        -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none;
    }
    .chips::-webkit-scrollbar, .chip-row::-webkit-scrollbar, .filter-chips::-webkit-scrollbar,
    .category-tabs::-webkit-scrollbar, .cat-tabs::-webkit-scrollbar, .segmented::-webkit-scrollbar { display: none; }
    .chip, .filter-item, .cat-item, .category-tab {
        flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center;
        padding: 8px 16px; border-radius: 999px; font-size: 14px; white-space: nowrap;
        background: var(--c-white, #fff); border: 1px solid var(--c-border, #E0E8EA);
        color: var(--c-text, #2D3A45);
    }
    .chip.active, .filter-item.active, .cat-item.active, .category-tab.active {
        background: var(--c-primary, #00B4C6); color: #fff; border-color: var(--c-primary, #00B4C6);
    }

    /* ---------- 14. 分页 ---------- */
    .pagination { flex-wrap: wrap; justify-content: center; gap: 6px; }
    .pagination a, .pagination span {
        min-width: 38px; min-height: 38px; padding: 8px 10px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 8px; font-size: 14px;
    }

    /* ---------- 15. 面包屑 ---------- */
    .breadcrumb-wrap, .breadcrumb {
        overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
        font-size: 12px; padding: 8px 16px;
    }
    .breadcrumb-wrap::-webkit-scrollbar { display: none; }

    /* ---------- 16. 浮动客服/购买按钮不越界 ---------- */
    .gc-btn, .float-btn, .fixed-action { max-width: 46vw; }

    /* ---------- 17. 弹窗 / 抽屉类 ---------- */
    .modal-dialog, .dialog-box { max-width: calc(100vw - 32px); margin: 16px auto; }
    .modal-content, .dialog-content { max-height: 86vh; overflow-y: auto; border-radius: 16px; }

    /* ---------- 18. 详情页通用 ---------- */
    .detail-header, .detail-cover img, .detail-cover { border-radius: 0 0 var(--h5-radius) var(--h5-radius); }
    .detail-body, .article-body, .guide-body, .content-body { font-size: 15.5px; line-height: 1.85; }
    .detail-body img, .article-body img, .guide-body img, .content-body img {
        border-radius: 10px; margin: 14px auto; height: auto;
    }
    .detail-body pre, .article-body pre, .content-body pre {
        white-space: pre-wrap; word-break: break-word; overflow-x: auto;
    }
    /* 详情底部操作条（下单/收藏/分享），避开 Tab 栏 */
    .detail-actionbar, .bottom-action-bar, .buy-bar, .booking-bar {
        position: fixed; left: 0; right: 0;
        bottom: calc(var(--h5-tab-h) + var(--h5-safe-b));
        z-index: 1050;
    }
    body.has-detail-actionbar { padding-bottom: calc(var(--h5-tab-h) + var(--h5-safe-b) + 64px); }

    /* ---------- 19. 骨架屏 ---------- */
    .skeleton { border-radius: 10px; }

    /* ---------- 20. 防止悬浮/绝对定位卡片在移动端重叠 ----------
       各模块常见“上浮卡片”在移动端取消负 margin，回归正常流，避免压住 hero 文案 */
    [class*="-search-card"], [class*="hero-search"], [class*="search-panel"] { margin-top: 0 !important; }
    .pull-up, .card-pull-up, .float-panel, [class*="overlay-card"] {
        position: static !important; transform: none !important;
        margin: 12px 0 !important; width: 100%;
    }

    /* ---------- 21. 通栏媒体不溢出 ---------- */
    .banner, .hero-banner, .cover-img, .cover-image { max-width: 100%; }
    .hero-banner img, .cover-img img, .cover-image img { width: 100%; object-fit: cover; }

    /* ---------- 22. 沉浸式页移动导航（.site-header 被隐藏、仅有 .cdh-nav 的页面） ----------
       由 mobile-app.js 注入：右侧搜索 + 汉堡，点击展开与其它页面一致的 7 栏目抽屉。 */
    .h5-cdh-actions {
        display: flex; align-items: center; gap: 4px; margin-left: 8px;
        flex-shrink: 0;
    }
    .h5-cdh-icon {
        width: 40px; height: 40px; border: none; background: transparent;
        display: inline-flex; align-items: center; justify-content: center;
        color: #fff; border-radius: 50%; padding: 0;
    }
    .h5-cdh-icon i { font-size: 22px; line-height: 1; }
    .h5-cdh-icon:active { background: rgba(255, 255, 255, .16); }
    .h5-cdh-menu { flex-direction: column; }
    .h5-cdh-menu span {
        display: block; width: 22px; height: 2.5px; background: #fff;
        border-radius: 2px; margin: 2.5px 0;
    }
    /* 抽屉复用 .main-nav 的视觉；沉浸式页从屏幕顶开始 */
    .h5-cdh-drawer {
        display: flex;
        flex-direction: column;
        top: 0;
        z-index: 1003;
    }
    .h5-cdh-drawer .h5-cdh-drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 14px 12px; font-weight: 700; color: var(--c-dark, #0B1B2B);
    }
    .h5-cdh-drawer .h5-cdh-drawer-close {
        width: 36px; height: 36px; border: none; background: var(--c-bg, #F2F8F9);
        border-radius: 50%; font-size: 20px; color: var(--c-dark, #0B1B2B);
        display: inline-flex; align-items: center; justify-content: center;
    }
    .h5-cdh-mask {
        display: block;
        position: fixed; inset: 0; background: rgba(11, 27, 43, .45);
        z-index: 1002; opacity: 0; visibility: hidden;
        transition: opacity .25s ease;
    }
    .h5-cdh-mask.show { opacity: 1; visibility: visible; }
    /* 当沉浸式页 .cdh-nav 为透明时，保证白色图标可见 */
    .cdh-nav { flex-wrap: nowrap; }
    .cdh-nav .cdh-nav-btn { white-space: nowrap; padding: 8px 16px; }
}

/* ============================================================================
   超窄屏 (≤380px，iPhone SE 等) 进一步收紧
   ============================================================================ */
@media (max-width: 380px) {
    :root { --h5-pad: 12px; }
    .h5-tabbar .tab-item { font-size: 10px; }
    .h5-tabbar .tab-item .tab-icon { font-size: 21px; }
    .logo-text { font-size: 17px; }
    h1 { font-size: 22px; }
    .card-grid-2, .card-grid-3, .card-grid-4,
    .grid-2, .grid-3, .grid-4,
    .home-channels .channel-grid,
    .goods-grid, .goods-list, .lodging-grid, .hotel-grid,
    .restaurant-grid, .event-grid, .guide-grid, .article-grid,
    .coupon-grid, .ticket-grid, .spot-grid, .service-grid, .destination-grid {
        gap: 10px !important;
    }
}


/* ============================================================================
   H5: 所有栏目hero不展示背景图，只展示背景色
   ============================================================================ */
@media (max-width: 768px) {
    /* 隐藏所有hero背景图元素（*-bg / *-slide / *-slides）及hero容器内联背景图 */
    [class*="hero-bg"],
    [class*="hero-slide"],
    [class*="hero-slides"],
    [class*="hero"][style*="url("] {
        background-image: none !important;
    }
    /* 例外：湖韵专题列表页渐变色hero背景保留（非图片，属背景色范畴） */
    .hy-hero-bg {
        background-image: linear-gradient(135deg,#123B2F 0%,#1F6F5C 45%,#2FA893 100%) !important;
    }
}