/* ==========================================================================
   折叠（手风琴）组件 —— 全站唯一实现（2026-10-21 老杨定规）
   --------------------------------------------------------------------------
   🔴 规矩：凡是要折叠的东西，一律用这个文件里的样式 + 这套 DOM 结构：
        <div class="faq-list" data-faq="closed">
          <details class="faq"><summary>问题<span class="faq-ar"></span></summary>
            <div class="faq-a">答案</div>
          </details>
        </div>
      禁止在页面 <style> 里再抄一份（历史上 buddy / cost / blog/pitfalls / compare
      四个手写页各抄了一份，改一处漏三处，2026-10-21 全部收编到这里）。
      需要新折叠形态先改本文件，不要在页面里另写。
   --------------------------------------------------------------------------
   引入方式：
     · 全站页面：css/style.css 顶部 @import 本文件，页面不用额外处理；
     · 自带整套内联样式的独立页（compare / buddy / cost / blog/pitfalls）：
       直接 <link rel="stylesheet" href="../css/faq.css">，只拿折叠这一段，
       不引 style.css —— 那几页的 .card / .tags / .pick 与全站同名不同义，
       整份引进来会把卡片阴影、标签间距带歪（2026-10-21 实测过）。
   ========================================================================== */

/* ===== FAQ 手风琴（2026-10-20 老杨定：全站统一这一种形态）=====
   🔴 唯一标准（2026-10-20 晚 老杨二次确认「就这个样式，以后所有地方都统一」）：
      无卡片；行间只用 1px #e5e7eb 下边线；summary 左右内边距 2px、上下 13px；
      字号 14.5px / 字重 600 / 颜色 #0f172a / 行高 1.6；箭头 15px 折线、#64748b，
      展开旋转 180° 并变主色 var(--brand)；答案 13.6px / 1.85 / #374151；
      手机（≤640）summary 14px、上下 12px，答案 13.2px。
      样板页：/ph/cost/ 的「常见问题」。任何页面自写 FAQ 样式前先照抄这段，
      不要再做卡片式、不要再改字重和间距 —— 2026-10-20 之前 buddy 页就是自己写了一套，
      结果两页三个样。=
   对齐的样板：无卡片、纯列表、右侧折线箭头、默认第一条开、点开一条其它全关。
   结构：.faq-list[data-faq] > details.faq > summary(问题 + .faq-ar) + .faq-a(答案)
   行为在 js/faq-accordion.js（互斥 / 默认第一条 / hash 命中自动展开）。
   无 JS 时原生 details 仍能手动开合 —— HTML 里只给第一条写 open，降级可用。
   覆盖范围：qa 集群、首页、学校详情页、费用测算器、AI 顾问、避坑指南、结伴情报板。 */
/* 🔴 变量必须带兜底值：buddy / cost 这两个页面没有定义 --line 与 --brand，
   var() 无兜底时整条声明会被判无效 —— 2026-10-21 收编时实测，FAQ 之间的
   分隔线整片消失，就是这条 var(--line) 在无变量页面上失效导致的。 */
.faq-list .faq { border-bottom: 1px solid var(--line, #e3e8ef); }
.faq-list .faq:last-child { border-bottom: 0; }
.faq-list .faq > summary {
  display: flex; align-items: flex-start; gap: 10px;
  /* 右侧 2px 改 0：箭头落在区块内容边线上，跟同一列的折叠模块对齐（2026-10-22 老杨） */
  padding: 13px 0; cursor: pointer; list-style: none;
  /* 🔴 行高必须写成整像素 24px，不能写 1.6（2026-10-22 老杨：箭头大小看着不一样）。
     1.6 × 14.5px = 23.2px，每多一行就累加 0.2px 的小数，箭头所在的 y 坐标因此永远踩在
     半个像素上，抗锯齿一档深一档浅 —— 屏幕上就是「有的箭头粗、有的细」，实测暗像素
     31 与 22 交替，五个一循环。写成 24px 后每行高度是整数，同一列所有箭头相位一致。
     ⚠️ 以后调字号要连行高一起调，保持整数。 */
  font-size: 14.5px; font-weight: 600; color: #0f172a; line-height: 24px;
}
.faq-list .faq > summary::-webkit-details-marker { display: none; }
/* 标准 ::marker 里的那个小三角：-webkit-details-marker 只管 Blink/WebKit，
   Firefox 走这条。原先只有 buddy/cost/pitfalls 三页内联副本写了，全局漏了
   （2026-10-21 收编内联样式时补上，否则统一后 Firefox 会冒出三角）。 */
.faq-list .faq > summary::marker { content: ""; }
.faq-list .faq > summary:hover { color: var(--brand, #0e7490); }
.faq-list .faq > summary > h3 { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; flex: 1 1 auto; }
/* ===== 折叠箭头（全站唯一画法，2026-10-21 老杨定）=====
   形状：一条 10px 横杠 + 一根斜切竖线，看着像一个斜向的「7」；打开时整盒旋转 180°，颜色同步变主题色。
   🔴 凡是要折叠的地方一律用这里画：FAQ 手风琴用 .faq-ar，
   轻量折叠（<details class="fold">、模块折叠 .foldmod、手机端两个开关）用 .fold-ar。
   两者共用下面这套形状与伪元素，改形状只改这里；页面里禁止再画三角、禁止用 ▾ ▴ 字符。
   🔴 2026-10-21 定案：老杨看过 V 形等其他画法后明确「这个 7 挺好的」，形状不再动。
   以后谁觉得它像 7、想改成 V 或三角，先问老杨 —— 这是被认可的一版。 */
.faq-ar, .fold-ar {
  position: relative; flex: none; width: 15px; height: 15px;
  /* 🔴 视觉补偿：纯几何居中不等于视觉居中 —— 这个折线标记上半部是一条满宽横杠、
     下半部只有一根细竖线，字形重心天生偏上约 2px。逐档对比 0 / 1.5 / 3 / 4.5px 后取 1.5px。
     用 top（布局偏移）而不是 margin：margin 会参与 flex 居中的计算，top 不会，且不影响 transform 旋转。 */
  top: 1.5px;
  color: #64748b; transition: transform .18s ease, color .18s ease;
}
/* FAQ 里要贴右边缘：有 h3 时 h3 带 flex:1 已占满、auto 归零；裸文本时 auto 吃掉剩余空间 */
.faq-ar { margin: 5px 0 0 auto; }
/* 轻量折叠里箭头紧跟文字，不占剩余宽度，也不带 SUMMARY 那 5px 上边距 */
.fold-ar { flex: 0 0 auto; margin: 0; }
/* 🔴 绘制区必须落在 15px 盒子的正中心（2.75–12.25px，中心 7.5px）：
   原先是 top:6px + 8px 高（6–14px，中心 10px），盒子中心 7.5px，本身就偏下 2.5px；
   更麻烦的是展开时整盒 rotate(180deg) 绕中心翻转，绘制区被翻到 1–9px，直接偏上 5px ——
   收起那条对齐了，展开的那条必定歪。改成居中后，无论收展，笔画中心都在盒中心。 */
.faq-ar::before, .faq-ar::after,
.fold-ar::before, .fold-ar::after { content: ""; position: absolute; background: currentColor; }
.faq-ar::before, .fold-ar::before { right: 0; top: 2.75px; width: 10px; height: 1.5px; }
.faq-ar::after, .fold-ar::after { right: 0; top: 2.75px; width: 1.5px; height: 8px; transform: skewX(-22deg); transform-origin: top right; }
/* 展开态：整盒翻转 180°，字形重心跟着翻到下方，所以收起时那 1.5px 的视觉补偿要撤掉，否则会偏下。
   details[open] 覆盖 .fold / .foldmod，.is-open 覆盖手机端两个开关。 */
.faq-list .faq[open] > summary > .faq-ar,
details[open] > summary > .fold-ar,
.is-open .fold-ar { transform: rotate(180deg); color: var(--brand, #0e7490); top: 0; }
.faq-list .faq > summary:hover > .faq-ar { color: var(--brand, #0e7490); }
.faq-a { padding: 0 2px 14px; font-size: 13.6px; line-height: 1.85; color: #374151; }
.faq-a > :first-child { margin-top: 0; }
.faq-a > :last-child { margin-bottom: 0; }
.faq-a p { margin: 0 0 8px; }
.faq-a a { color: #1d4ed8; }
/* 老结构兜底：历史页面里答案直接是 <p> 而不是 .faq-a 包裹的，也按同一口径排 */
.faq-list .faq > p { margin: 0 2px 12px; font-size: 13.6px; line-height: 1.85; color: #374151; }
@media (max-width: 640px) {
  /* 🔴 右内边距 2px → 0（2026-10-22 老杨：手机端箭头没排整齐）。
     桌面端已经把 13px 2px 改成 13px 0，手机这条媒体查询漏改，于是窄屏上
     FAQ 的箭头比同页「先看这 9 所」「4 周全包」这些折叠块往左偏 2px，
     一屏里箭头分成 452 / 454 两档。这里与桌面口径对齐，全部落在内容边线上。 */
  .faq-list .faq > summary { font-size: 14px; padding: 12px 0; line-height: 22px; }
  .faq-a { font-size: 13.2px; }
}

/* ===== 阅读型变体（.faq-list--read，2026-10-22）=====
   用途：问答知识库（/ph/qa/*）这类「长文检索页」——一次要扫十几二十条问题、
   答案里有段落和列表，密度比首页卡片里的 FAQ 更高一档。
   🔴 这不是第二套组件：形态与上面完全一致（无卡片、1px 分隔线、右侧同一个 .faq-ar 箭头、
      行为都走 js/faq-accordion.js），只调密度，让长答案读起来不挤。
      想加新形态先改这里，页面里仍然不许另写一份。
   用法：<div class="faq-list faq-list--read" data-faq="multi">
   行为："multi" = 默认全收起、可同时展开多条（检索页要比对问题，互斥会把刚看的收掉）。 */
.faq-list--read .faq > summary {
  font-size: 16px; font-weight: 500; color: var(--ink, #1f2733);
  /* 右内边距 0：箭头落在区块内容边线上，与同一页「关于这组问答」等折叠卡对齐
     （2026-10-22 老杨：箭头没排整齐）。列表容器本身已有左右内边距，这里不用再垫。 */
  padding: 14px 0 14px 16px; min-height: 48px; align-items: center; gap: 12px;
}
.faq-list--read .faq > summary > .faq-ar { margin-top: 0; }
.faq-list--read .faq-a {
  padding: 0 16px 16px; font-size: 15px; line-height: 1.6; color: var(--muted, #6b7785);
}
.faq-list--read .faq-a p { margin: 0 0 8px; }
.faq-list--read .faq-a ul,
.faq-list--read .faq-a ol { margin: 8px 0; padding-left: 22px; }
.faq-list--read .faq-a li { margin: 4px 0; }
/* 长答案里的对比表：手机上不许撑破屏幕，改成横向滚动的小字号紧凑表 */
.faq-list--read .faq-a table { display: block; overflow-x: auto; white-space: nowrap; font-size: 13.5px; }
@media (max-width: 640px) {
  .faq-list--read .faq > summary { font-size: 16px; padding: 13px 0 13px 12px; }
  .faq-list--read .faq-a { font-size: 16px; padding: 0 12px 14px; }
}

/* ===== 问答检索页顶部：导语 + 分类标签组 + 全展开按钮（2026-10-22）=====
   全部用全站色变量，不新增色号；标签组横向可滚动，手机上不换行挤成一坨。 */
.qa-lead { font-size: 13.5px; color: var(--muted, #6b7785); line-height: 1.75; margin: 0 0 18px; }
/* 「整理于…｜共 N 问」和「全部展开」同一行两端对齐：按钮钉在右上角，不跟标签抢行 */
.qa-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.qa-meta .updated { margin: 0; }
.qa-tags { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 0 4px; margin: 0 0 24px; scrollbar-width: none; }
.qa-tags::-webkit-scrollbar { display: none; }
.qa-tag {
  flex: none; font: inherit; font-size: 13px; line-height: 1.5; cursor: pointer;
  padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line, #e3e8ef);
  background: #fff; color: var(--muted, #6b7785); white-space: nowrap;
}
.qa-tag:hover { border-color: var(--brand, #0e7490); color: var(--brand, #0e7490); }
.qa-tag[aria-pressed="true"] { background: var(--brand, #0e7490); border-color: var(--brand, #0e7490); color: #fff; }
.qa-toggleall {
  flex: none; font: inherit; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--line, #e3e8ef); border-radius: 8px;
  padding: 4px 11px; color: var(--brand, #0e7490); background: #fff;
}
.qa-toggleall:hover { border-color: var(--brand, #0e7490); }
.qa-empty { font-size: 14px; color: var(--muted, #6b7785); padding: 28px 0; text-align: center; }

/* ===== 手机端分节折叠（.secfold，2026-10-21 老杨）=====
   用途：一张卡片里堆了好几段参考信息（费用页的城市表 / 优惠 / 隐性费用 / 签证 / 行前提醒），
   手机上默认收起，只留标题；桌面端一律展开，不做折叠。
   结构：<details class="secfold" open><summary><h2 class="sec">标题</h2><span class="fold-ar"></span></summary>
          <div class="secfold-b">内容</div></details>
   🔴 HTML 里写 open（无 JS 也能看到内容），页面底部一段脚本按断点同步：
      桌面 open=true、手机 open=false。桌面端箭头直接隐藏，看着与普通标题一样。
   🔴 箭头仍由上面 .fold-ar 提供，页面里不许另画。 */
details.secfold > summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none;
}
details.secfold > summary::-webkit-details-marker { display: none; }
details.secfold > summary::marker { content: ""; }
details.secfold > summary > h2,
details.secfold > summary > h3,
details.secfold > summary > b { flex: 1 1 auto; margin: 0; }
/* 展开内容与标题的间距（2026-10-23 从生成器 CITY_CSS / qa 页内联副本收编进来） */
details.secfold > summary + .secfold-b,
details.secfold .secfold-b { margin-top: 9px; }
/* 桌面：不折叠 —— 箭头隐藏，标题恢复原来的块级观感 */
@media (min-width: 701px) {
  details.secfold > summary { display: block; cursor: default; pointer-events: none; }
  details.secfold > summary > .fold-ar { display: none; }
}
/* 摘要里带副行（.sf-hero：标题 + 一句结论，如费用页顶部的价格区间）
   手机上标题一行、副行一行，箭头跟第一行右侧；桌面仍是普通块级标题。 */
details.secfold > summary > .sf-big { display: block; }

/* 手机：收起时标题下方不留空档（标题自带 margin-bottom 会顶出一条空行） */
@media (max-width: 700px) {
  details.secfold > summary > h2,
  details.secfold > summary > h3,
  details.secfold > summary > b { margin-bottom: 0; }
  details.secfold[open] > summary { margin-bottom: 10px; }

  /* 摘要带副行时改成块级 + 箭头钉右上角：标题与结论各占一行，宽度全给文字 */
  details.secfold.sf-hero > summary { display: block; position: relative; padding-right: 26px; }
  details.secfold.sf-hero > summary > h2 { font-size: 15px; }
  details.secfold.sf-hero > summary > .fold-ar { position: absolute; right: 0; top: 4px; margin: 0; }
  details.secfold.sf-hero[open] > summary > .sf-big { margin-bottom: 2px; }
}