/* ==========================================================================
   金华双龙风景旅游区 —— 手机端响应式修正补丁
   --------------------------------------------------------------------------
   目标：只修窄屏下的溢出、错位、遮挡与节奏失衡，不改桌面版式、不改配色字体。
   生效范围：三档媒体查询，≥1024px 无任何规则命中
             ≤ 1023.98px（63.999rem）排队二维码换行独立成行
             ≤  767.98px（47.999rem）手机端主体修正（第 0~15 节）
             ≤  480px   （30rem）      页头指标行只保留前两组
   挂载方式：在原样式表之后引入（<link rel="stylesheet" href="/css/mobile-fix.css">）
             顺序敏感：必须最后加载，理由与兜底方案见 HANDOFF.md 第 2 节
   注意事项：本站组件样式由 Astro 作用域属性选择器与多层 !important 叠加，
            个别声明需用 !important 才能稳定覆盖，已逐条注释原因。
   ========================================================================== */

@media (max-width: 47.999rem) {

  /* ------------------------------------------------------------------
     0. 全局兜底
     页面已有 overflow-x:hidden，但只是「藏起来」，内容仍被裁掉。
     这里保证任何残留超宽元素都不会撑破视口，同时给媒体与表格一个上限。
     ------------------------------------------------------------------ */
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  /* ------------------------------------------------------------------
     1. 页头指标行（实时客流 / 瞬时承载 / 最大承载 / 停车场）
     桌面是横向四栏，窄屏总宽约 640px，第 3、4 项直接被裁在屏幕外。
     改为单行横向滚动，信息全保留，不再被切。
     ------------------------------------------------------------------ */
  .site-header__top .site-header__utility {
    min-width: 0;
    gap: 8px;
  }

  .site-header__top .site-header__utility > ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    padding-right: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
  }

  .site-header__top .site-header__utility > ul::-webkit-scrollbar {
    display: none;
  }

  .site-header__top .site-header__utility > ul > li {
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
  }

  .site-header__top .site-header__utility svg {
    width: 14px;
    height: 14px;
  }

  /* 语言切换：窄屏**不再收起**（2026-11-09 业务方：手机右上角要能切语言）。
     这里只负责「从指标行里拿出来」——真正的定位/胶囊样式在 Header.astro 的
     ≤47.999rem 段里（那边 `display:flex !important` + `position:fixed`）。
     ⚠️ 这条不能改回 display:none：这个文件是 <head> 最后一个样式表，
        它一藏，Header 里那条就被盖住了。 */
  .site-header__top .site-header__lang {
    position: fixed;
    margin: 0;
  }

  /* ------------------------------------------------------------------
     2. 品牌区（双 logo + 分隔线）
     原站基础样式把「中国双龙」logo 和中间分隔线设为 display:none，
     要到 ≥768px 才恢复，于是手机上品牌区只剩「金华双龙」一个 logo；
     同时 max-width:63.999rem 里 justify-self:center 会把它拉到屏幕正中，
     与桌面「左对齐、双标并列」的品牌规范不一致。
     窄屏恢复两枚 logo 与分隔线，并改为左对齐。
     ------------------------------------------------------------------ */
  /* 注意：原站这条用的是 .site-header__top[data-astro-cid-x] .site-header__brand[data-astro-cid-x]
     （特异性 0-4-0 + !important），单类选择器压不住，故用 [class] 补足权重。 */
  .site-header__top[class] .site-header__brand[class] {
    justify-self: start !important;
    align-items: flex-start !important; /* 同 Header.astro：顶对齐 */
    gap: 0.5rem !important;
  }

  /* 高度对齐原站「单 logo 时 2.75rem」的视觉体量，两枚并排后不至于过小 */
  .site-header__lockup--china {
    display: block !important;
    height: 2.5rem !important;
  }

  .site-header__lockup--jinhua {
    /* 2026-11-07：换成旧站素材后按旧站比例 = 2.5rem × 1.129（旧站 金华山/中国双龙 = 79/70） */
    height: 2.82rem !important;
  }

  .site-header__brand-divider {
    display: block !important;
    height: 2rem !important;
    align-self: center;
  }

  /* ------------------------------------------------------------------
     3. 首屏
     aspect-ratio 1440/964 在 390px 下只有 261px 高，页头一压就只剩一条。
     给一个下限，避免小屏上主视觉被压扁（仍保持原有比例逻辑）。
     ------------------------------------------------------------------ */
  .hero {
    min-height: min(52vh, 420px);
  }

  /* 轮播点原本离底 10px，会被页脚外的内容贴住，抬一点更稳 */
  .hero__dots {
    bottom: 14px;
  }

  /* ------------------------------------------------------------------
     3.5 内页 banner
     .about-banner 固定 176px 高，而 1920×450 的图在 390px 宽下
     自然高度只有 91px，下方会空出 85px 白条（所有内页都有）。
     让图片填满 banner 即可，banner 高度不动。
     ------------------------------------------------------------------ */
  .about-banner {
    overflow: hidden;
  }

  /* banner 高度是 min-height，height:100% 无法解析，改用绝对定位铺满 */
  .about-banner__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* ------------------------------------------------------------------
     3.6 智能排队区块
     二维码在原站是 ul.queue__cards 里的第三个 li（桌面与两张卡同排）。
     窄屏容器只剩 334px，两张定宽 150px 的卡就基本占满，二维码被挤到
     第二行，还沿用卡片的 12px 间距，于是「两卡 + 二维码」像三块方块
     挤成一坨，主次不分。
     在手机上让两卡等分撑满；二维码独占一行的规则见文件末尾
     「排队区块：二维码独占一行」，手机与平板/横屏共用。
     ------------------------------------------------------------------ */
  /* 原站 .queue__cards / .queue__card 等均为 .类[data-astro-cid]（0-2-0），
     并带 !important 或位于更靠后的断点里；这里统一补 [class] 提升权重。 */

  /* 两卡各占一半，basis 用 calc 锁住，避免被压窄后给二维码腾出位置 */
  .queue[class] .queue__card[class] {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    width: auto;
  }

  .queue[class] .queue__card-img[class] {
    width: 100%;
  }

  /* ------------------------------------------------------------------
     4. 区块间距
     section-head--space-spacious 用的是桌面 120px 上边距，
     窄屏上变成 100~200px 的大片空白，页面像断掉。
     ------------------------------------------------------------------ */
  .section-head--space-spacious .section-head__title {
    margin: 48px 0 16px;
  }

  .section-head--loose .section-head__title {
    line-height: 1.25;
  }

  /* ------------------------------------------------------------------
     5. 环境监测（当前最严重的一处）
     内部是桌面绝对布局：两列指标 + 604px 定宽天气卡。
     窄屏下天气卡宽于视口、负氧离子数字跑到屏幕左侧之外。
     这里不改结构，只把内部布局改为可随容器收缩的纵向流。
     ------------------------------------------------------------------ */
  .eco {
    height: auto !important;
    padding: 26px 0 !important;
    margin-top: 40px !important;
  }

  .eco__inner {
    width: 100% !important;
    padding-inline: 16px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }

  .eco__metrics {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px 22px !important;
  }

  .eco__metric {
    min-width: 0;
    flex: 0 1 auto;
  }

  .eco__metric + .eco__metric {
    margin-left: 0 !important;
  }

  .eco__metric-icon {
    width: 38px !important;
    height: 38px !important;
    margin-right: 10px !important;
  }

  .eco__metric-label {
    font-size: 13px !important;
    white-space: nowrap;
  }

  .eco__metric-num {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  .eco__metric-value {
    margin-top: 2px !important;
    line-height: 1.1 !important;
  }

  .eco__metric-unit {
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* 天气卡：定宽 604 → 跟随容器 */
  .eco__weather {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  .eco__weather-body {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-top: 8px !important;
  }

  .eco__now {
    width: auto !important;
    height: auto !important;
    margin-left: 0 !important;
  }

  .eco__temp-value {
    font-size: 40px !important;
  }

  .eco__range,
  .eco__cond {
    white-space: normal;
  }

  /* 三个小格：等分，不再固定 104px */
  .eco__cells {
    width: 100% !important;
    height: auto !important;
    align-self: stretch !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .eco__cell {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 84px !important;
    margin-right: 0 !important;
    padding: 10px 6px !important;
  }

  .eco__cell-label {
    white-space: nowrap;
    font-size: 12px !important;
  }

  .eco__cell-value,
  .eco__cell-value--sm {
    font-size: 17px !important;
    white-space: nowrap !important;
  }

  /* ------------------------------------------------------------------
     6. 游玩推荐
     Tab 在窄屏被拉成 50% 高的色块；横条卡片贴边没有留白，右侧被硬切。
     ------------------------------------------------------------------ */
  .rec__tab {
    height: 46px !important;
    font-size: 15px !important;
  }

  .rec__strip-wrap {
    padding: 0 16px 16px !important;
  }

  .rec__strip {
    scroll-padding-inline: 0;
  }

  .rec__cards {
    gap: 10px !important;
  }

  /* 景点长文在窄屏占满两屏，收一下行数与字号 */
  .rec__desc p {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  /* ------------------------------------------------------------------
     7. 交通指南
     四张 228px 竖卡横排，窄屏只能露出两张半，且没有吸附感。
     保留横排，但加间距、贴边留白与滚动吸附。
     ------------------------------------------------------------------ */
  .transport__grid {
    gap: 12px !important;
    padding: 4px 0 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .transport__item {
    scroll-snap-align: start;
    flex: 0 0 auto !important;
  }

  .transport__img {
    width: 100% !important;
    height: auto !important;
  }

  /* ------------------------------------------------------------------
     8. 资讯列表
     时间轴竖线是按 101px 行高算的，窄屏行高变化后竖线与圆点对不上。
     ------------------------------------------------------------------ */
  .news__list::before {
    display: none;
  }

  .news__item {
    padding-left: 0;
  }

  .news__dot {
    margin-right: 10px;
  }

  /* 资讯正文/摘要块里由 JS 注入的内容没有类名，统一做容器约束 */
  .news__body,
  .news__body * {
    max-width: 100%;
  }

  .news__body img {
    height: auto;
  }

  /* ------------------------------------------------------------------
     9. 富文本兜底
     资讯里粘进过 7 列宽表（第 6、7 列直接被裁在屏幕外），
     无类名节点也会命中，所以用标签选择器。
     ------------------------------------------------------------------ */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
  }

  .article-body,
  .rich-text,
  .prose,
  .news__body {
    overflow-wrap: anywhere;
  }

  /* ------------------------------------------------------------------
     10. 内页：历史人物头像（/about/history）
     .figures 在 ≤1024px 是三列网格，390px 下每列只有约 103px；
     而 .figure__avatar 固定 7.5rem（120px），左右两列各溢出约 8.5px，
     被 body 的 overflow-x:clip 切掉，圆形头像两侧出现平口。
     让头像跟随列宽，保持正圆。
     ------------------------------------------------------------------ */
  .figures[class] .figure__avatar[class] {
    width: 100% !important;
    max-width: 7.5rem;
    height: auto !important;
    aspect-ratio: 1;
  }

  .figures[class] .figure__avatar[class] .figure__img[class] {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1;
    object-fit: cover;
  }

  /* ------------------------------------------------------------------
     11. 内页：手绘游线地图（/play/guide）
     #zoomable-div / .image-box 是固定 1200×450 的桌面画布，
     且站内没有拖拽脚本（只有 cursor:grab 样式，无 pointer/touch 监听），
     手机上只能看到画布左上角一小块，右侧被裁在屏幕外。
     窄屏改为按容器宽度等比缩放、完整显示。
     ------------------------------------------------------------------ */
  .gamingGuide[class] .image-container[class] {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    cursor: default;
  }

  .gamingGuide[class] .image-box[class] {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
  }

  /* 手绘图与叠加的游线 svg 都以容器宽度为准，靠 left/right:0 自动对齐 */
  .gamingGuide[class] .image-box[class] img,
  .gamingGuide[class] .image-box[class] svg {
    max-width: 100% !important;
  }

  /* 站点气泡的 left/top 是按 1200px 画布写死的像素值，站内也没有脚本在
     缩放时重算，缩小画布后必然错位并溢出到画布外。
     窄屏收起气泡，站点信息在下方游线列表里已有完整说明。 */
  .gamingGuide[class] .sat[class] {
    display: none !important;
  }

  /* ------------------------------------------------------------------
     12. 四宫格 tab：由「一排四个」改为「两列两行」
     原站这两组都是 flex:1 1 0 均分，390px 下每个只剩 77~80px：
       /about/history  「名人文化 / 红色文化 / 儒家文化 / 非遗文化」
                       24px 字 × 4 字 = 96px，被压成「名人文 / 化」
       /about/scenic   「来露营 / 来打卡 / 来徒步 / 来挑战」
                       20px 字 × 3 字 + 左右 padding 24px = 84px，右上角断字
     改为 2 列均分后每格 177px，标签单行放得下，也不用缩字号。
     ------------------------------------------------------------------ */
  .htabs[class] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .htab[class] {
    width: auto !important;
    height: 7.5rem !important;
  }

  /* 站内有一处 `.htab, .htab__label { font-size: 1.5rem !important }`，
     单类压不住，标签也一并覆盖 */
  .htab[class],
  .htab[class] .htab__label[class] {
    font-size: 1.25rem !important;
    line-height: 1.4;
  }

  .sc__tabs--play[class] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .sc__tab--play[class] {
    width: auto !important;
    min-width: 0 !important;
    height: 5.5rem !important;
    padding-inline: 0.5rem !important;
    font-size: 1.0625rem !important;
  }

  /* ------------------------------------------------------------------
     13. 游玩攻略：顶部三张 tab 图（/play/guide）
     三张是不同原始尺寸的 PNG（203×186 / 172×191 / 179×193），
     窄屏统一 width:33.33%，高度随各自比例走 → 分别 104 / 127 / 123px，
     三个一样宽却不一样高；加上站内窄屏把整排设为居中、间距只有 8px，
     图上文字又是顶到 PNG 边（原始素材就是齐边导出的），
     相邻两个 tab 的文字几乎贴在一起，看起来像溢出重叠。
     改为同高 96px、按比例定宽，两端对齐并把间距拉开。
     ------------------------------------------------------------------ */
  .right-top[class] {
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }

  .right-top[class] .right-top-t1[class] {
    width: auto !important;
    height: 6rem !important;
    max-width: 33% !important;
    object-fit: contain;
  }

  /* ------------------------------------------------------------------
     14. 导游预约：电话号码溢出绿条（/service/guide）
     .gd__item 160px − 左右 padding 32px = 卡片 128px；
     .gd__tel 左右 padding 各 10px，内容区只剩 108px；
     「0579-82593130」16px 等宽数字约 117px，加 16px 图标和 5px 间距
     共约 138px，右侧溢出 9px 被父级裁掉。
     缩到 13px 并收窄内边距，图标保留。
     ------------------------------------------------------------------ */
  .gd[class] .gd__tel[class] {
    padding: 0.6875rem 0.25rem;
  }

  .gd[class] .gd__tel-num[class] {
    margin-left: 0.25rem;
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
  }

  /* ------------------------------------------------------------------
     15. 餐饮美食 / 酒店住宿：卡片标题字号对齐其它列表页
     原来用 --text-3xl（28px / 行高 37px），比同层级列表大出一档：
       景点介绍 sc__spot-title 24px · 宝藏打卡 lz__title 22px
       本地特产 lc__title 23px
     统一到 22px，行高 1.55，字重与字体（Noto Serif SC 700）不变。
     ------------------------------------------------------------------ */
  .ht[class] .ht__title[class] {
    margin-bottom: 0.5rem !important;
    font-size: 1.375rem !important;
    line-height: 1.55 !important;
  }
}

/* --------------------------------------------------------------------
   超窄屏（≤ 480px）：页头指标行只保留前两组
   四组指标总宽约 620px，390px 下必然硬切，
   这里按优先级保留「实时客流」与「瞬时承载量」。
   -------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .site-header__top .site-header__utility > ul {
    mask-image: none;
    -webkit-mask-image: none;
    overflow: visible;
    gap: 16px;
  }

  .site-header__top .site-header__utility > ul > li:nth-child(n + 3) {
    display: none;
  }
}

/* --------------------------------------------------------------------
   排队区块：二维码独占一行（手机 + 平板/横屏共用）
   --------------------------------------------------------------------
   ≤767.98px：容器只剩 334px，两张 150px 卡占满，二维码挤到第二行且
   沿用 12px 卡片间距，视觉上像「第三张卡」；
   768–1023.98px：两张 200px 卡只占 400px，二维码被挤到同一行右侧、
   还比卡片低 24px，形成「两卡 + 二维码并排」。
   两种尺寸都让二维码换行独占、居中；白底圆改由图片自身绘制
   （二维码原图四角为纯白 #fff），避免 li 撑满整行后白圆变成胶囊形。
   -------------------------------------------------------------------- */
@media (max-width: 63.999rem) {
  .queue[class] .queue__cards[class] {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
  }

  .queue[class] .queue__qr[class] {
    flex: 0 0 100%;
    width: 100% !important;
    height: auto !important;
    background: transparent;
    border-radius: 0;
    margin: 4px 0 2px;
  }

  .queue[class] .queue__qr[class] .queue__qr-img[class] {
    width: 110px;
    height: 110px;
    border-radius: 50%;
  }
}