/* ============================================================================
   瑞游旅行 · 页面 UI 优化层
   ----------------------------------------------------------------------------
   本文件在 </head> 之前引入，因此位于各页内联样式之后，可同权重覆盖。
   只做版式、间距、层级、状态与响应式优化；不改任何文案、图片与信息结构。
   只使用语义令牌，不写死颜色（主题切换自动跟随）。

   目录
     B-1 正文测量宽度     长行过长是中文长文最大的可读性损耗
     B-2 中文行高与段落节奏
     B-3 标题层级
     B-4 侧栏阅读导航
     B-5 响应式断点       修复窄屏双栏不折叠导致的内容裁切
     B-6 交互状态与可访问性
   ============================================================================ */

/* ===========================================================================
   B-1 正文测量宽度
   改前：首屏摘要 max-width:1008px，16px 字号下一行约 63 个汉字
         （中文舒适阅读区间为 25–40 字）
   改后：用 em 做测量单位 —— 汉字是方形字身，1em ≈ 1 个汉字宽度
   =========================================================================== */
.hero h1,
.hero-band h1 {
  max-width: 18em;      /* 40px 字号 → 约 720px，一行约 18 字 */
}
.hero-answer {
  max-width: 35em;      /* 16px 字号 → 约 560px，一行约 35 字 */
}
.hero-copy p {
  max-width: 35em;
}

/* 正文列本身保持 760px 上限，但给一个更贴近阅读节奏的上限 */
@media (min-width: 992px) {
  .main-grid {
    grid-template-columns: 200px minmax(0, 720px);
  }
}

/* ===========================================================================
   B-2 中文行高与段落节奏
   改前：body 行高 1.6、article p 段间距 14px（约 0.875em）
   改后：正文行高 1.85，段间距 1em —— 中文无词间空格，需要更松的行距
   =========================================================================== */
article p {
  line-height: 1.85;
  margin: 1em 0;
}
article li {
  line-height: 1.8;
}
article {
  padding-top: 40px;
}
.body-section {
  padding: 44px 0;
}
.body-section:first-child {
  padding-top: 0;
}

/* 结论块 / 提示块：与正文节奏对齐 */
.conclusion-block p,
.answer-notice p,
.risk-notice p,
.citation-list p {
  margin: 0.8em 0;
}
.conclusion-block p:first-child,
.answer-notice p:first-child,
.risk-notice p:first-child,
.citation-list p:first-child {
  margin-top: 0;
}
.conclusion-block p:last-child,
.answer-notice p:last-child,
.risk-notice p:last-child,
.citation-list p:last-child {
  margin-bottom: 0;
}

/* ===========================================================================
   B-3 标题层级
   改前：正文 16px / h3 19px / h2 30px —— h3 只比正文大 3px，层级几乎不可辨
   改后：加大 h3 字号与上下间距，并给正文区 h3 一条品牌色引导条
   =========================================================================== */
article h3 {
  font-size: 21px;
  line-height: 1.5;
  margin: 30px 0 12px;
}
.body-section > h3:first-child {
  margin-top: 0;
}
/* 正文段落里的 h3 用引导条强化层级；卡片内 h3 保持干净 */
.body-section > h3 {
  padding-left: 13px;
  border-left: 3px solid var(--color-brand);
}
.inner-card h3 {
  font-size: 19px;
  margin: 0 0 10px;
  padding-left: 0;
  border-left: 0;
}
article h2 {
  margin: 0 0 20px;
}
.body-section > h2 {
  margin: 0 0 22px;
}

/* ===========================================================================
   B-4 侧栏阅读导航
   改前：13px 字号、7px 行距、无当前位置反馈、sticky 顶部 18px 会被悬浮导航压住
   =========================================================================== */
.toc {
  font-size: 14px;
  top: 80px;
}
.toc strong {
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.toc a {
  margin: 9px 0;
  line-height: 1.5;
  color: var(--color-text-secondary);
  transition: color 0.15s ease;
}
.toc a:hover,
.toc a:focus-visible {
  color: var(--color-brand);
}
.toc a.is-current {
  color: var(--color-brand);
  font-weight: 500;
  position: relative;
}
.toc a.is-current::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 0.35em;
  bottom: 0.35em;
  width: 2px;
  background: var(--color-brand);
  border-radius: 2px;
}

/* ===========================================================================
   B-5 响应式断点
   改前：仅有 max-width:767px 一档，且未处理 .main-grid —— 200px 侧栏 + 48px 间隙
         在窄屏把正文挤出视口，产生整页横向溢出，标题与正文被右侧裁切
   改后：992px 以下折叠为单栏，侧栏降级为顶部目录
   =========================================================================== */
@media (max-width: 991px) {
  .main-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-bottom: 64px;
  }
  .toc {
    position: static;
    top: auto;
    border-left: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 0 0 16px;
    margin-bottom: 26px;
  }
  .toc a {
    display: inline-block;
    margin: 6px 14px 6px 0;
  }
  .toc a.is-current::before {
    display: none;
  }
}

/* 平板区间：正文列收窄 + 深色带内边距下调 */
@media (min-width: 768px) and (max-width: 991px) {
  .shell,
  .container-page {
    width: min(100% - 48px, 1200px);
  }
  .hero {
    padding: 40px 0 48px;
  }
  .body-section {
    padding: 40px 0;
  }
}

/* 小屏：标题与首屏节奏进一步压缩 */
@media (max-width: 575px) {
  .hero-band h1,
  .hero h1 {
    font-size: 26px;
    max-width: none;
  }
  .hero-answer,
  .hero-copy p {
    max-width: none;
    font-size: 15px;
    line-height: 1.8;
  }
  .hero {
    padding: 26px 0 34px;
  }
  .body-section {
    padding: 32px 0;
  }
  article h2 {
    font-size: 22px;
  }
  article h3 {
    font-size: 19px;
  }
  article p {
    line-height: 1.8;
  }
}

/* 表格在窄屏内横向滚动，不撑破布局 */
.md-table-wrap,
article table {
  max-width: 100%;
}
article img,
.inner-card img {
  max-width: 100%;
  height: auto;
}

/* ===========================================================================
   B-6 交互状态与可访问性
   改前：.action-button / .service-button 定义了 border 却无 focus 样式，
         键盘用户看不到焦点位置
   =========================================================================== */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.action-button:focus-visible,
.service-button:focus-visible,
.nav__burger:focus-visible,
.drawer__close:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 按钮家族统一过渡，按压不位移布局 */
.btn,
.action-button,
.service-button {
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
}

/* 服务区按钮由 <button> 改为 <a> 后需要自身具备盒模型 */
a.service-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}
a.service-button:hover {
  border-color: var(--color-brand-soft);
  color: var(--color-brand-soft);
}

/* 备案号链接：跟随页脚文字颜色，hover 时以细下划线提示可点 */
a.icp-link,
a.icp-link:visited {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
a.icp-link:hover,
a.icp-link:focus-visible {
  color: inherit;
  border-bottom-color: currentColor;
}

/* --- 面包屑分隔符 ---
   页面里已有字面分隔符（如「首页 / 定制服务 / 家庭亲子」），
   而旧规则又在第一个分段前生成一个 "/"，叠加后出现「首页 // 定制服务」。
   这里取消首段前的生成分隔符；段间分隔符保持原样。 */
.crumb > span:first-of-type::before {
  content: none;
}

/* --- 首页「旅行定制师」区块：图片高度 ---
   左栏宽约 546px，原样式只给了 min-height:450px 而没设上限，
   竖构图照片按原始比例会撑到约 660px，而右栏文案仅约 320px，
   加上 align-items:center 后右栏下方空出 200+px。
   这里给定高度上限，配合已有的 object-fit:cover 裁切，使两栏高度接近。 */
.home-redesigned .expert-feature__media img {
  height: 440px;
  min-height: 0;
  max-height: 440px;
}

/* --- 首页首屏：底部留白 ---
   原 padding 为 92px 0 76px（上大下小），内容在框内被推高；
   再叠加 min-height:560px 的垂直居中，首屏看起来重心偏上、下方空出一截。
   改为上下对称，并把 min-height 收到与内容相称的高度。 */
.home-redesigned .hero {
  min-height: 480px;
}
.home-redesigned .hero-grid {
  padding: 84px 0;
}
@media (max-width: 850px) {
  .home-redesigned .hero {
    min-height: 420px;
  }
  .home-redesigned .hero-grid {
    padding: 64px 0;
  }
}
@media (max-width: 575px) {
  .home-redesigned .hero-grid {
    padding: 52px 0;
  }
}

/* --- 首页「服务说明」三张卡片底部不等高 ---
   卡片分别是「先确认你需要什么服务 / 费用与变化 / 有问题怎样反馈」，
   右侧两张的正文更长，卡片被撑高，而网格未拉伸其余卡片，
   导致三张卡底部的 4px 色条参差不齐。
   让网格项等高拉伸，卡片内部用 flex 把色条压到底部。 */
.home-redesigned .trust-grid {
  align-items: stretch;
}
.home-redesigned .trust-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* --- 首页案例卡片：左侧图片上方留白 ---
   实测（1440px 宽）：
     .case-showcase     top=1749  h=517   padding=40px 0px 0px
     .case-showcase__image div  top=1790  h=475
   卡片自身有 padding-top:40px，左右下均为 0 —— 这就是图片上方 40px 空白的来源
   （右侧文案列因为自带 padding:38px，看起来不明显）。
   取消这个单边内距，让图片与文案列都从卡片顶边开始。

   同时：图片列需确保与文案列等高（原 img 的 height:100% 在网格拉伸父级下
   百分比高度不可靠），改用绝对定位填满容器。 */
.home-redesigned .case-showcase {
  padding: 0;
}
.home-redesigned .case-showcase__image {
  position: relative;
  min-height: 100%;
}
.home-redesigned .case-showcase__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 991px) {
  .home-redesigned .case-showcase__image {
    position: static;
    min-height: 0;
  }
  .home-redesigned .case-showcase__image img {
    position: static;
    height: auto;
    min-height: 300px;
    aspect-ratio: 16 / 10;
  }
}

/* --- 目的地中心页：筛选区标题对齐 ---
   该页「按你的旅行偏好筛选目的地」区块用了 .section-head--center（居中），
   而同页下方的「热门目的地推荐」以及站内其他栏目页的区块标题都是左对齐。
   同一页两种对齐方式造成节奏断裂，这里统一为左对齐。 */
.filter .section-head--center,
.filter .section-head {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.filter .section-head--center p,
.filter .section-head p {
  margin-left: 0;
  margin-right: 0;
  max-width: 560px;
}
/* 标题左对齐后，搜索框必须同步左对齐，否则「左标题 + 中搜索框」更不协调 */
.filter .filter__search {
  margin-left: 0;
  margin-right: auto;
  max-width: 560px;
}
.filter .filter__search input {
  width: 100%;
}
/* 「清除全部筛选」原为 text-align:right，落在第三列下方，
   容易被误读为「最后选旅行主题」的附属控件。改为与标题、搜索框同一左基准。 */
.filter .filter__clear {
  text-align: left;
  margin-top: 24px;
}

/* --- 中心页首屏：两栏高度平衡 ---
   实测（目的地中心页）：左栏 .hero__panel h=459px，右栏 .hero__visual h=285px，
   相差 174px；配合 align-items:center，右栏上下各空 87px。
   改为等高拉伸，并让右栏的三步流程在高度内均匀分布，
   使第一步与左栏顶部、最后一步与左栏底部对齐。 */
.hero__grid {
  align-items: stretch;
}
.hero__visual {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* --- 目的地卡片：图片上方 40px 空白 ---
   实测（1440px 宽）：
     .dest-card   top=1276  h=537   padding = 40px 0px 0px   border=1px
     .dest-card__img  top=1317  h=219   padding=0  margin=0
   卡片自身有 padding-top:40px、左右下均为 0 —— 这就是图片上方空白的来源。
   与首页 .case-showcase 的写法完全一致（同一处历史遗留模式）。
   取消该单边上内距，让图片从卡片顶边开始。
   注：卡片右上角的 .dest-card__hot 徽标是绝对定位（top:10px），
   不受此改动影响，仍会叠在图片右上角。 */
.dest-card {
  padding-top: 0;
}

/* --- 目的地中心页：「从目的地判断，到真正开始出发」区块底色 ---
   曾尝试把近黑 #1A1A18 改为深蓝 #042C53，但下方 .cta-band 本身就是深蓝，
   改完两段连成一片、分界消失。说明原近黑是有意与相邻深蓝形成深浅对比。
   故保持原样（不覆盖），此结论记录于此以免重复尝试。 */

/* --- 目的地中心页：区块之间的视觉分界 ---
   实测（1440px 宽）该页 7 个 section 的背景：
     1 .hero              rgb(4,44,83)      深蓝
     2 .section.filter    rgb(241,239,232)  暖米
     3 .section           rgba(0,0,0,0)     ← 透明
     4 .section           rgba(0,0,0,0)     ← 透明
     5 .section           rgba(0,0,0,0)     ← 透明
     6 .section.link-section  rgb(26,26,24) 近黑
     7 .section.cta-band  rgb(8,43,75)      深蓝
   第 3、4、5 区共 2383px 没有任何自身底色，全部露出页面底色，
   加上 .filter 的暖米色与页面底色接近，中段约 2800px 是一片平色。

   按站内既有规律（guides 分类页）补上「白 / 暖米」交替：
     nth-of-type 的序号基于 <section> 在同级中的位置，
     位置 3/5 取白、位置 4 取暖米，正好形成交替。
   用 :not() 排除已自带底色的 .filter / .link-section / .cta-band。 */
.section:nth-of-type(odd):not(.filter):not(.link-section):not(.cta-band) {
  background: var(--color-surface-card);
}
.section:nth-of-type(even):not(.filter):not(.link-section):not(.cta-band) {
  /* 原用 --color-surface-muted(#F1EFE8)，与白色对比仅 1.15:1，分界过弱。
     改用 --color-border-subtle(#E5E3DC)，与白色对比提升到 1.36:1。 */
  background: var(--color-border-subtle);
}
@media (max-width: 991px) {
  .home-redesigned .expert-feature__media img {
    height: 340px;
    max-height: 340px;
  }
}
@media (max-width: 575px) {
  .home-redesigned .expert-feature__media img {
    height: 260px;
    max-height: 260px;
  }
}

/* --- 浅色底上的弱化文字：达到 WCAG AA 4.5:1 ---
   --color-text-muted(#888780) 与 --color-text-subtle(#B4B2A9) 是双用途令牌，
   在深色底上表现良好，但在浅色底上只有 3.37:1 / 2.13:1。
   这里只对「确定位于浅色底」的引用点做覆盖，不修改令牌本身，
   因此深色页脚（由 .footer__brand / .footer__legal 等更高优先级选择器控制）不受影响。
   #6E6C67 实测：页面底 #F8F7F4 = 4.90:1，卡片 #FFFFFF = 5.24:1 */
.brand__sub,
.brand-sub,
.brand small,
.day-note,
.overview-card small,
.hero__flow-node small,
.hero-node small,
.service-node small,
.scenes .case-card__tag,
.all-case-card__tag,
.all-cases .case-card__tag,
.qa-card__link--soon,
.drawer__link svg,
.links span {
  color: #6E6C67;
}
/* 深色页脚里的备案号保持足够对比度 */
.footer a.icp-link {
  color: var(--color-text-footer-muted);
}
.footer a.icp-link:hover,
.footer a.icp-link:focus-visible {
  color: var(--color-text-footer);
}


/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 说明：此处刻意不为 <img> 添加 height:auto 之类规则。
   页面已按用途为不同图片设定了明确高度（如案例图 250/280px），
   通用规则会以更高权重覆盖它们，反而破坏版式。
   图片交付优化通过 HTML 侧的 loading/decoding 属性完成。 */