/* ============================================================
   家家有约官网 · 邀约页桥接层  site-bridge.css
   ------------------------------------------------------------
   维护方：官网侧。本文件由 nginx 在 /invite/ 目录下自动注入，
   ★ 不修改邀约系统的任何源文件，对方更新覆盖时本样式不丢失。

   做三件事：
     1) 桌面自适应：邀约页整页被包在 .phone（max-width:480px）里，
        桌面打开是一条窄屏。这里在宽屏下同步放宽 .phone/.topbar/
        .bar/.sheet 四处的宽度上限——它们原本都配套 margin:0 auto，
        所以无需重排任何内容，布局自动成立。
     2) 悬浮导航条样式（结构由 site-bridge.js 生成）。
     3) 官网外壳 Shell：顶部官网主导航 + 面包屑 + 底部官网页脚，
        让这一页看起来是官网里的一页（解决「跳过去太突兀」）。

   ★ 重要：本文件【不使用任何 CSS 变量】，全部写字面色值。
     邀约页自身定义了 --paper/--ink/--line/--gold 等同名变量，
     若引入官网 style.css 会互相覆盖，故此处刻意全部字面化并加
     jjy-sh- / jjy-bridge 作用域前缀，双方互不影响。
   ============================================================ */

/* ── 1. 桌面自适应：≥700px 放宽承载宽度 ───────────────────── */
@media (min-width: 700px){
  :root{ --gut: 58px; }

  body{
    background:#EEE7DB;
    font-size:16px;
  }

  /* ★ 四处必须同步，否则固定定位元素（顶栏/底部CTA/弹层）会错位
     ★ 用 min(上限, 视口宽-留白) 而不是写死上限：视口只有 800 多像素时
        （例如开着开发者工具、半屏窗口、小笔记本）也不会溢出横向滚动 */
  .phone,
  .topbar,
  .bar,
  .sheet{
    max-width:min(900px, calc(100vw - 72px)) !important;
  }

  .phone{ box-shadow:0 14px 50px rgba(27,24,21,.16); }

  /* 章节留白随屏幕放大 */
  .sec{ padding:70px 0; }

  /* 「你会学到」五点：桌面两栏，避免一条长边无谓拉长 */
  .learn{
    columns:2;
    column-gap:46px;
  }
  .learn > li{
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    page-break-inside:avoid;
  }
}

/* 更宽的桌面：再放一档，但不无限拉宽，保证行长可读 */
@media (min-width: 1200px){
  .phone,
  .topbar,
  .bar,
  .sheet{
    max-width:min(1020px, calc(100vw - 160px)) !important;
  }
  .sec{ padding:78px 0; }
}

/* ── 2. 悬浮导航条（结构由 JS 生成）──────────────────────── */
.jjy-bridge{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:120;                 /* 高于邀约页自身的 sheet(90)/mask(80) */
  display:flex;
  align-items:center;
  gap:8px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",
              "Microsoft YaHei","Hiragino Sans GB",sans-serif;
}
.jjy-bridge[data-hidden="1"]{
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
}
.jjy-bridge a,
.jjy-bridge button{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:40px;
  padding:0 16px;
  border:0;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  line-height:1;
  letter-spacing:.08em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(27,24,21,.18);
  transition:transform .18s cubic-bezier(.22,.61,.36,1),
             box-shadow .18s cubic-bezier(.22,.61,.36,1),
             opacity .18s linear;
}
.jjy-bridge .jjy-back{
  background:rgba(255,255,255,.95);
  color:#2C4738;
  box-shadow:0 6px 18px rgba(27,24,21,.16),
             inset 0 0 0 1px rgba(44,71,56,.2);
}
.jjy-bridge .jjy-home{
  background:#2C4738;
  color:#F3EBD9;
}
.jjy-bridge .jjy-top{
  background:rgba(255,255,255,.95);
  color:#463F39;
  box-shadow:0 6px 18px rgba(27,24,21,.16),
             inset 0 0 0 1px rgba(27,24,21,.14);
}
.jjy-bridge a:hover,
.jjy-bridge button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(27,24,21,.24);
}
.jjy-bridge a:focus-visible,
.jjy-bridge button:focus-visible{
  outline:2px solid #B08D2A;
  outline-offset:2px;
}

/* 小屏：贴边、收窄 */
@media (max-width: 520px){
  .jjy-bridge{ left:10px; }
  .jjy-bridge a,
  .jjy-bridge button{
    height:36px;
    padding:0 13px;
    font-size:12px;
  }
}

/* 打印时不出现 */
@media print{
  .jjy-bridge{ display:none !important; }
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce){
  .jjy-bridge a,
  .jjy-bridge button{
    transition:none;
  }
}


/* ══════════════════════════════════════════════════════════
   3. 官网外壳 Shell
   ----------------------------------------------------------
   断点策略（落地页优先，不牺牲转化）：
     >=900px  完整外壳 = 官网主导航 + 面包屑条 + 底部官网页脚
     <900px   轻量外壳 = 仅面包屑条（保留手机原生落地页体验）
   面包屑条在所有屏宽都常驻顶部，明确提供「返回上一页 / 官网首页」，
   解决原本须滚动之后才出现一条返回的问题。

   ★ 本段全部写字面色值，不使用任何 CSS 变量：邀约页自身定义了
     --paper/--ink/--line/--gold 等同名变量，若套用官网 style.css
     会互相覆盖；故此处刻意字面化并统一 jjy-sh- 前缀，双方互不影响。
   ══════════════════════════════════════════════════════════ */

/* ── 3.1 面包屑条（所有屏宽常驻顶部）──────────────────────── */
#jjyShCrumb{
  position:fixed;
  top:0; left:0; right:0;
  z-index:159;
  height:46px;
  display:flex;
  align-items:center;
  background:rgba(244,238,227,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(27,24,21,.10);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",
              "Microsoft YaHei",sans-serif;
  font-size:13px;
  color:#463F39;
  box-sizing:border-box;
}
#jjyShCrumb *{ box-sizing:border-box; }
#jjyShCrumb .jjy-sh-cw{
  max-width:1020px;
  width:100%;
  margin:0 auto;
  padding:0 22px;
  display:flex;
  align-items:center;
  gap:10px;
}
#jjyShCrumb a,
#jjyShCrumb button{
  -webkit-appearance:none;
  appearance:none;
  border:0;
  background:none;
  font:inherit;
  color:#463F39;
  text-decoration:none;
  cursor:pointer;
  padding:0;
  transition:color .25s cubic-bezier(.22,.61,.36,1);
}
#jjyShCrumb a:hover{ color:#9C2B2B; }
#jjyShCrumb .jjy-sh-sep{ color:#A2968C; font-size:12px; }
#jjyShCrumb .jjy-sh-cur{ color:#1B1815; font-weight:600; }

#jjyShCrumb .jjy-sh-acts{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
#jjyShCrumb .jjy-sh-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:32px;
  padding:0 14px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.06em;
  white-space:nowrap;
  transition:background .25s cubic-bezier(.22,.61,.36,1),
             transform .25s cubic-bezier(.22,.61,.36,1);
}
#jjyShCrumb .jjy-sh-back{
  color:#1B1815;
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(27,24,21,.14);
}
#jjyShCrumb .jjy-sh-back:hover{
  background:#fff;
  color:#9C2B2B;
  transform:translateY(-1px);
}
#jjyShCrumb .jjy-sh-home{
  color:#fff;
  background:#9C2B2B;
}
#jjyShCrumb .jjy-sh-home:hover{
  background:#7E2020;
  transform:translateY(-1px);
}

/* 外壳占位：由 JS 给 body 加 class 后生效 */
body.jjy-sh-on{ padding-top:46px; }

/* ── 3.2 官网主导航（>=900px 出现）────────────────────────── */
#jjyShNav{
  display:none;
  position:fixed;
  top:0; left:0; right:0;
  z-index:160;
  height:72px;
  align-items:center;
  background:#FBF7EF;
  box-shadow:0 1px 0 rgba(27,24,21,.10);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",
              "Microsoft YaHei",sans-serif;
  box-sizing:border-box;
  transition:height .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
#jjyShNav *{ box-sizing:border-box; }
#jjyShNav.jjy-sh-scrolled{
  height:62px;
  box-shadow:0 1px 0 rgba(27,24,21,.10),0 6px 22px rgba(27,24,21,.06);
}
#jjyShNav .jjy-sh-w{
  max-width:1220px;
  width:100%;
  margin:0 auto;
  padding:0 44px;
  display:flex;
  align-items:center;
  gap:18px;
}
#jjyShNav .jjy-sh-brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  text-decoration:none;
}
#jjyShNav .jjy-sh-brand img{
  height:40px;
  width:auto;
  display:block;
  transition:height .35s cubic-bezier(.22,.61,.36,1);
}
#jjyShNav.jjy-sh-scrolled .jjy-sh-brand img{ height:36px; }
#jjyShNav .jjy-sh-t{
  font-size:17px;
  font-weight:700;
  letter-spacing:.04em;
  color:#1B1815;
  line-height:1.25;
}
#jjyShNav .jjy-sh-t small{
  display:block;
  font-family:Georgia,"Songti SC",STSong,serif;
  font-size:9.5px;
  letter-spacing:.22em;
  color:#A2968C;
  font-weight:400;
}
#jjyShNav .jjy-sh-menu{
  display:flex;
  gap:2px;
  margin-left:auto;
  flex-wrap:nowrap;
}
#jjyShNav .jjy-sh-menu a{
  position:relative;
  padding:9px 11px;
  font-size:14px;
  color:#463F39;
  border-radius:8px;
  white-space:nowrap;
  text-decoration:none;
  transition:color .25s cubic-bezier(.22,.61,.36,1),
             background .25s cubic-bezier(.22,.61,.36,1);
}
#jjyShNav .jjy-sh-menu a:hover{
  color:#9C2B2B;
  background:rgba(156,43,43,.06);
}
#jjyShNav .jjy-sh-menu a.jjy-sh-cur{ color:#9C2B2B; font-weight:600; }
#jjyShNav .jjy-sh-menu a.jjy-sh-cur::after{
  content:"";
  position:absolute;
  left:11px; right:11px; bottom:3px;
  height:2px;
  background:#9C2B2B;
  border-radius:2px;
}
#jjyShNav .jjy-sh-navcta{
  flex:0 0 auto;
  margin-left:14px;
  padding:10px 22px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  background:#9C2B2B;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  transition:background .25s cubic-bezier(.22,.61,.36,1),
             transform .25s cubic-bezier(.22,.61,.36,1);
}
#jjyShNav .jjy-sh-navcta:hover{
  background:#7E2020;
  transform:translateY(-1px);
}

/* ── 3.3 底部官网页脚（>=900px 出现）──────────────────────── */
#jjyShFoot{
  display:none;
  background:#100E0A;
  color:#F2EADB;
  padding:64px 0 30px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",
              "Microsoft YaHei",sans-serif;
  font-size:14px;
  line-height:2;
  box-sizing:border-box;
}
#jjyShFoot *{ box-sizing:border-box; }
#jjyShFoot .jjy-sh-w{
  max-width:1220px;
  margin:0 auto;
  padding:0 44px;
}
#jjyShFoot .jjy-sh-fgrid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:44px;
}
#jjyShFoot h5{
  font-size:13px;
  letter-spacing:.16em;
  color:#fff;
  margin:0 0 18px;
  font-weight:600;
}
#jjyShFoot p,
#jjyShFoot li{
  font-size:14px;
  color:rgba(242,234,219,.62);
  line-height:2;
  margin:0;
}
#jjyShFoot ul{ margin:0; padding:0; list-style:none; }
#jjyShFoot ul a{
  color:rgba(242,234,219,.84);
  border-bottom:1px solid rgba(242,234,219,.16);
  text-decoration:none;
}
#jjyShFoot ul a:hover{ color:#fff; border-bottom-color:#C9A94E; }
#jjyShFoot a:hover{ color:#fff; }
#jjyShFoot .jjy-sh-fb img{
  height:46px;
  width:auto;
  filter:brightness(0) invert(1);
  opacity:.92;
}
#jjyShFoot .jjy-sh-fb h5{ margin-top:16px; }
#jjyShFoot .jjy-sh-fb p{ margin-top:14px; font-size:13.5px; max-width:34ch; }
#jjyShFoot .jjy-sh-creed{ color:rgba(242,234,219,.80); letter-spacing:.1em; }
#jjyShFoot .jjy-sh-promise{ margin-top:8px; color:rgba(242,234,219,.55); }
#jjyShFoot .jjy-sh-bottom{
  margin-top:44px;
  padding-top:24px;
  border-top:1px solid rgba(242,234,219,.13);
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  justify-content:space-between;
  font-size:12.5px;
  color:rgba(242,234,219,.50);
}
#jjyShFoot .jjy-sh-bottom a{
  color:rgba(242,234,219,.65);
  text-decoration:none;
}
#jjyShFoot .jjy-sh-bottom a:hover{ color:#fff; }
#jjyShFoot .jjy-sh-note{
  border-top:0;
  margin-top:10px;
  padding-top:0;
  font-size:12px;
  line-height:1.9;
  color:rgba(242,234,219,.42);
}

/* ── 3.4 断点：何时亮出完整外壳 ───────────────────────────── */
/* ★ 门槛定在 768px 而不是 900px：很多人是半屏窗口、小笔记本、
   或开着开发者工具（视口被吃掉 200~300px），900 的门槛会让人以为没生效 */
@media (min-width: 768px){
  #jjyShNav{ display:flex; }
  #jjyShFoot{ display:block; }
  /* 层级：导航在最顶 (top:0)，面包屑作为二级条贴在导航之下 (72px) */
  #jjyShCrumb{ top:72px; }
  /* 滚动后导航收窄到 62px，面包屑跟着贴上去 */
  #jjyShNav.jjy-sh-scrolled ~ #jjyShCrumb{ top:62px; }

  body.jjy-sh-on{ padding-top:118px; }   /* 46 面包屑 + 72 导航 */

  .phone{
    margin:26px auto 56px !important;
    border-radius:6px;
    box-shadow:0 18px 60px rgba(27,24,21,.20) !important;
  }
  .topbar{ top:118px !important; }
}

/* 700~767px：只有面包屑条，工具条让到它下面 */
@media (min-width: 700px) and (max-width: 767px){
  .topbar{ top:46px !important; }
}

/* 700~1000px：页脚四栏太挤，降为两栏 */
@media (min-width: 700px) and (max-width: 1000px){
  #jjyShFoot .jjy-sh-fgrid{ grid-template-columns:1fr 1fr; gap:30px; }
  #jjyShNav .jjy-sh-w{ padding:0 22px; gap:12px; }
  #jjyShNav .jjy-sh-menu a{ padding:8px 8px; font-size:13.5px; }
  #jjyShFoot .jjy-sh-w{ padding:0 24px; }
}

/* 小屏：面包屑条收紧 */
@media (max-width: 520px){
  #jjyShCrumb{ height:44px; font-size:12.5px; }
  #jjyShCrumb .jjy-sh-cw{ padding:0 14px; gap:7px; }
  #jjyShCrumb .jjy-sh-btn{ height:30px; padding:0 11px; font-size:12px; }
  body.jjy-sh-on{ padding-top:44px; }
  .topbar{ top:44px !important; }
}

/* 底部 CTA 条在页脚进入视口时收起，避免压住页脚（由 JS 打标） */
.bar[data-jjy-foot="1"]{
  opacity:0;
  pointer-events:none;
}

/* 打印：外壳不参与 */
@media print{
  #jjyShNav,
  #jjyShCrumb,
  #jjyShFoot{ display:none !important; }
  body.jjy-sh-on{ padding-top:0 !important; }
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce){
  #jjyShNav,
  #jjyShNav .jjy-sh-brand img,
  #jjyShNav .jjy-sh-menu a,
  #jjyShNav .jjy-sh-navcta,
  #jjyShCrumb a,
  #jjyShCrumb .jjy-sh-btn{ transition:none; }
}

/* ── 诊断面板（仅 URL 带 ?diag=1 时出现）─────────────────── */
#jjyDiag{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:9999;
  width:min(560px, calc(100vw - 32px));
  max-height:84vh;
  overflow:auto;
  background:#fff;
  border:1px solid rgba(27,24,21,.16);
  border-radius:14px;
  box-shadow:0 24px 70px rgba(27,24,21,.28);
  padding:22px 24px 18px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",
              "Courier New",monospace,sans-serif;
  font-size:13px;
  line-height:1.9;
  color:#1B1815;
  box-sizing:border-box;
}
#jjyDiag *{ box-sizing:border-box; }
#jjyDiag h4{
  margin:0 0 4px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
}
#jjyDiag .jjy-dg-sub{
  margin:0 0 14px;
  font-size:12px;
  color:#7A6F66;
}
#jjyDiag table{ width:100%; border-collapse:collapse; }
#jjyDiag td{
  padding:6px 0;
  border-bottom:1px solid rgba(27,24,21,.08);
  vertical-align:top;
}
#jjyDiag td:first-child{ width:44%; color:#7A6F66; }
#jjyDiag td:last-child{ font-family:"Courier New",monospace; font-weight:600; }
#jjyDiag .jjy-dg-ok{ color:#3B6D11; }
#jjyDiag .jjy-dg-no{ color:#A32D2D; }
#jjyDiag .jjy-dg-warn{ color:#854F0B; }
#jjyDiag .jjy-dg-foot{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(27,24,21,.10);
  font-size:12px;
  color:#7A6F66;
  line-height:1.8;
}
#jjyDiag .jjy-dg-close{
  position:absolute;
  right:14px;
  top:12px;
  width:28px;
  height:28px;
  border:1px solid rgba(27,24,21,.16);
  border-radius:8px;
  background:none;
  cursor:pointer;
  font-size:15px;
  line-height:1;
  color:#463F39;
}

/* ── 4. 邀约页内部：把被拉宽后显得畸形的元素收回可读宽度 ───── */
@media (min-width: 700px){
  /* 「一键导航到会场」所在的地图卡：整页放宽到 900px 后这条按钮会拉成一根
     横杠（看着像进度条），这里把它收窄并居中，变成一张正常的信息卡 */
  .mapcard{ max-width:560px; margin-left:auto; margin-right:auto; }
}