/* ===========================================================
   县站 PC 端响应式通用层 v1.4  (2026-09-15)
   v1.4 变更：PC 端把原本固定在底部的导航条移到页面顶部（移动端保持底部）。
   作用：让所有页面在 PC/平板（≥768px）显示为居中的正常宽屏版面，
        不再是 420px 手机壳或全屏拉伸。移动端（<768px）完全保持原样。
   注入方式：每个 HTML 在 </head> 前引入 <link rel="stylesheet" href="/xianzhan/pc.css">
   说明：各页面自身有 @media(min-width:768px){body{max-width:420px!important}}
        手机壳规则且也用了 !important，因此 pc.css 必须使用更高 specificity
        的复合选择器（html>body / html .bottom-nav 等）才能覆盖。
   =========================================================== */

@media (min-width: 768px) {

  /* 页面整体：居中 1080px 宽、白底、浅色外框，像正常 PC 网站 */
  html { background: #eaeef3; }
  html > body {
    max-width: 1080px !important;
    margin: 0 auto !important;
    background: #fff !important;
    box-shadow: 0 0 36px rgba(0,0,0,.08);
    min-height: 100vh;
    position: relative;
  }

  /* 顶部站点名栏 / 顶部栏 / 头部：随容器居中
     （不再吸顶，避免滚动时与顶部导航条重叠） */
  .site-title-bar, .top-bar, .header {
    max-width: 1080px !important;
    margin: 0 auto !important;
    position: relative;
    z-index: 60;
  }
  .site-title-bar { border-radius: 0 !important; }

  /* 统计行 /  tab 导航 / 页面标题：居中限宽 */
  .stats-row, .tab-nav, .job-tabs, .tab-bar, .page-title {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .page-title { text-align: center; font-size: 20px; margin-top: 14px !important; margin-bottom: 14px !important; }

  /* 顶部 tab 导航横向铺开、圆角胶囊 */
  .tab-nav { display: flex !important; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 8px; }
  .tab-nav a { padding: 8px 18px; border-radius: 20px; background: #f2f4f7; color: #333; }
  .tab-nav a.active { background: #ff6a00; color: #fff; }

  /* ===== PC 端：把原本固定在底部的导航条移到页面顶部 =====
     移动端(<768px)保持底部不变（下面的规则都写在 PC 媒体查询里） */
  /* 含导航的页面，顶部留出导航条高度，避免内容被盖住 */
  html > body:has(.bottom-nav) { padding-top: 56px !important; }

  /* 导航条：固定在页面最顶部，宽度与内容区对齐（1080px 居中） */
  html .bottom-nav {
    position: fixed !important;
    top: 0 !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: 100% !important;
    max-width: 1080px !important;
    height: 56px !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #ececec !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
    background: #fff !important;
    padding: 0 !important;
    z-index: 300 !important;
  }

  /* 导航项：PC 端一行横排（图标 + 文字并排） */
  html .bottom-nav a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 100% !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #666 !important;
    text-align: center !important;
  }
  html .bottom-nav a.active { color: #e63946 !important; font-weight: 600 !important; }
  html .bottom-nav a:hover { color: #e63946 !important; }
  html .bottom-nav .icon {
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: inline-block !important;
  }

  /* 详情页/酒店等底部固定操作条：PC 端与内容同宽居中 */
  html .bottom-call-bar,
  html .hotel-book-bar {
    width: 100% !important;
    max-width: 1080px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
  /* 单按钮拨打条不要太宽，保持胶囊型 */
  html .bottom-call-bar .call-btn {
    max-width: 560px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* 景点/内容详情底部的操作栏（收藏/分享/电话等） */
  html .action-bar {
    width: 100% !important;
    max-width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
  }

  /* 悬浮分享/客服球：限定在内容区右侧，别贴到视口边缘 */
  html .float-share {
    right: calc(50% - 500px) !important;
    margin-right: 0 !important;
  }

  /* 其它底部固定操作条（点餐购物车 / 提交 / 发布等）：PC 端与内容同宽居中 */
  html .bottom-bar,
  html .cart-bar,
  html .submit-bar,
  html .submit-fixed {
    width: 100% !important;
    max-width: 1080px !important;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }

  /* 返回顶部按钮：PC 端贴在内容区右边缘内侧（窄屏时退回贴视口边） */
  html #backTop {
    right: max(16px, calc(50% - 524px)) !important;
    left: auto !important;
  }

  /* 通用内容块（卡片/分区/表单组）限宽居中，避免拉伸 */
  .card, .section, .form-section, .generic-section, .form-group,
  .section-title, .card-header, .card-fields {
    max-width: 880px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .section-title { margin-top: 18px !important; margin-bottom: 10px !important; }

  /* 表单输入在 PC 端字号舒适 */
  .form-input, input[type=text], input[type=password], textarea, .textarea-content {
    font-size: 15px !important;
    max-width: 880px;
  }

  /* 列表/网格容器：PC 端自动多列（卡片流） */
  .post-list, .grid, .card-list, .mod-list, #feed, .feed, .list, .fav-list, .order-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    max-width: 1040px !important;
    margin: 16px auto !important;
    padding: 0 16px;
  }
  .post-card, .mod, .card, .order-item, .fav-item { width: auto !important; margin: 0 !important; }

  /* 弹层（底部弹出/对话框）在 PC 端居中显示 */
  .action-sheet, .report-sheet, .chat-box, .img-preview {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 560px !important;
    margin: 0 !important;
  }

  /* 下拉刷新提示：PC 无手势，直接隐藏（内容靠初始加载渲染） */
  .ptr { display: none !important; }

  /* 统计卡片：PC 端横向铺开 */
  .stats-row { display: flex !important; gap: 12px; flex-wrap: wrap; justify-content: center; }
  .stat-card, .stat-item { flex: 1 1 200px; max-width: 240px; }

  /* 通用按钮不要太窄 */
  .btn, .btn-primary, .btn-submit, .submit-btn, .btn-sm { min-width: 140px; }

  /* 图片上传网格限宽居中 */
  .img-upload-grid, .img-upload-section { max-width: 880px; margin: 0 auto; }

  /* 文本段落留白舒适 */
  p, .content, .desc, .detail, .article { line-height: 1.7; }

  /* ===== 首页 / 列表页 精修 ===== */
  /* 顶部栏：PC 端横向 flex 居中，搜索框限宽 */
  .top-bar { display: flex !important; align-items: center; gap: 10px; max-width: 1040px !important; margin: 0 auto !important; padding: 8px 16px; }
  .top-search-box { flex: 1; max-width: 520px; margin: 0 auto; }
  .hotline-label, .hotline-num { white-space: nowrap; }
  /* 导航九宫格：PC 端多列网格居中 */
  .nav-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; gap: 14px !important; max-width: 880px; margin: 16px auto !important; padding: 0 16px; }
  /* 轮播/横幅：PC 端宽屏圆角 */
  .banner, .swiper, .carousel, .slide-wrap, #banner, .banner-box {
    max-width: 1040px !important; margin: 12px auto !important; border-radius: 12px; overflow: hidden;
  }
  /* 列表页搜索栏：PC 端居中限宽 */
  .search-box, .search-bar { max-width: 880px; margin: 12px auto !important; }
  .job-tabs { display: flex !important; flex-wrap: wrap; gap: 6px; justify-content: center; }
  .job-tab { padding: 6px 14px; border-radius: 16px; background: #f2f4f7; }
  .job-tab.active { background: #ff6a00; color: #fff; }
  /* 详情页作者栏：PC 端横向铺开 */
  .author-bar { display: flex !important; align-items: center; gap: 12px; max-width: 880px; margin: 14px auto !important; }
}