/* ============================================================
   量子河洛官网 —— 「入驻使用」合作方式弹窗
   ============================================================
   用途：点击导航「入驻使用」后展示 4 种合作方式卡片
        （SaaS 订阅 / OEM 贴牌 / ODM 定制研发 / 私有化部署）
   依赖：website.css 中的设计令牌（--jade-*、--gold-*、--glass、--radius-*）
   说明：独立文件，避免污染 website.css 主样式表；7 个页面共用
   ============================================================ */

/* ---------- 遮罩层 ---------- */
.join-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(6, 10, 9, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}
.join-modal-mask.is-open {
  display: flex;
}
.join-modal-mask.is-visible {
  opacity: 1;
}

/* ---------- 面板 ---------- */
.join-modal {
  position: relative;
  width: 100%;
  max-width: 1080px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: var(--sp-7) var(--sp-6) var(--sp-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-jade);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(47,162,132,0.16) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.025) 100%),
    var(--ink-700);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(14px) scale(.985);
  transition: transform .26s cubic-bezier(.22, .8, .3, 1);
}
.join-modal-mask.is-visible .join-modal {
  transform: translateY(0) scale(1);
}

/* ---------- 关闭按钮 ---------- */
.join-modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.join-modal-close:hover,
.join-modal-close:focus-visible {
  background: rgba(79, 184, 154, 0.16);
  border-color: var(--border-jade);
  color: var(--text-1);
}

/* ---------- 头部 ---------- */
.join-modal-head {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.join-modal-tag {
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: var(--sp-3);
  border-radius: 100px;
  border: 1px solid rgba(79, 184, 154, 0.45);
  background: rgba(47, 162, 132, 0.12);
  color: var(--jade-300);
  font-size: 12px;
  letter-spacing: 1px;
}
.join-modal-title {
  font-family: "Noto Serif SC", serif;
  font-size: 26px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 1px;
  margin-bottom: var(--sp-2);
}
.join-modal-sub {
  font-size: 14px;
  color: var(--text-2);
}

/* ---------- 卡片网格 ---------- */
.join-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.join-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-glass);
  background: var(--glass);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.join-card:hover,
.join-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--border-jade);
  background: var(--glass-hover);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(79, 184, 154, 0.16);
  outline: none;
}
/* 卡片内的文本 span 需转为块级，保证纵向布局生效。
   注意：不要写成 .join-card > span 这种通配形式——它的权重 (0,1,1) 高于
   .join-card-icon / .join-card-hls / .join-card-cta (0,1,0)，
   会把它们的 display 覆盖成 block，导致图标无法居中、标签与 CTA 丢失 flex 布局。 */
.join-card-name,
.join-card-tagline,
.join-card-audience { display: block; }
/* 右上角角标：最快上线 / 自有品牌 / 深度定制 / 数据主权 */
.join-card-badge {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--gold-300);
  background: rgba(231, 190, 115, 0.12);
  border: 1px solid rgba(231, 190, 115, 0.32);
  white-space: nowrap;
}
/* 图标块：定宽定高 + flex 双向居中，
   左右/上下留白 = (--join-icon-box - --join-icon-glyph) / 2，四边等距 */
.join-card-icon {
  --join-icon-box: 42px;    /* 图标底色块边长 */
  --join-icon-glyph: 22px;  /* 图标本身边长 */
  width: var(--join-icon-box);
  height: var(--join-icon-box);
  flex: 0 0 auto;           /* 不随卡片宽度拉伸或压缩 */
  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  line-height: 0;           /* 消除行高造成的基线偏移 */
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--grad-main);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(47, 162, 132, 0.32);
}
/* 图标为线性 SVG：固定尺寸，线宽随尺寸缩放，保证 4 张卡片视觉重量一致 */
.join-card-icon svg {
  display: block;           /* 去掉 inline 元素的行盒间隙 */
  flex: none;
  width: var(--join-icon-glyph);
  height: var(--join-icon-glyph);
}
.join-card-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 6px;
}
.join-card-tagline {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  min-height: 42px;
  margin-bottom: var(--sp-4);
}
/* 适用对象 */
.join-card-audience {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--border-glass);
  margin-bottom: var(--sp-3);
}
.join-card-audience b {
  display: block;
  margin-bottom: 2px;
  color: var(--jade-300);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .5px;
}
/* 核心亮点 */
.join-card-hls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.join-card-hls span {
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--jade-200);
  background: rgba(47, 162, 132, 0.12);
  border: 1px solid rgba(79, 184, 154, 0.2);
  white-space: nowrap;
}
/* 卡片底部行动按钮
   注意：父级 .join-card 本身是 <button>，HTML 不允许 button 嵌套 button，
   因此这里保持 <span> 元素、只赋予按钮外观；点击由父级卡片统一处理。
   视觉沿用站内 .btn-ghost 的金色描边风格，保持设计语言一致。 */
.join-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: center;              /* 在卡片内水平居中（交叉轴居中） */
  margin: var(--sp-4) 0 0;         /* 上下留白，左右交给 align-self 居中 */
  padding: 8px 20px;
  border-radius: 100px;            /* 胶囊形，呼应站内按钮圆角 */
  border: 1px solid rgba(231, 190, 115, 0.42);
  background: rgba(231, 190, 115, 0.08);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gold-300);
  white-space: nowrap;             /* 窄卡片下不折行 */
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
/* 整张卡片就是一个按钮，因此悬停态跟随卡片 hover/focus 联动 */
.join-card:hover .join-card-cta,
.join-card:focus-visible .join-card-cta {
  background: rgba(231, 190, 115, 0.16);
  border-color: rgba(231, 190, 115, 0.7);
  color: var(--gold-200);
}
.join-card-cta svg {
  flex: none;
  transition: transform .2s ease;
}
.join-card:hover .join-card-cta svg,
.join-card:focus-visible .join-card-cta svg {
  transform: translateX(3px);
}

/* ---------- 底部：已有账号直接登录 ---------- */
.join-modal-foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-glass);
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
}
.join-modal-foot a {
  color: var(--gold-300);
  font-weight: 500;
  margin-left: 4px;
}
.join-modal-foot a:hover {
  color: var(--gold-200);
}

/* ---------- 响应式：平板 2 列，手机 1 列 ---------- */
@media (max-width: 900px) {
  .join-cards { grid-template-columns: repeat(2, 1fr); }
  .join-modal { padding: var(--sp-6) var(--sp-5) var(--sp-4); }
  .join-modal-title { font-size: 22px; }
}
@media (max-width: 600px) {
  .join-modal-mask { padding: var(--sp-3); align-items: flex-start; }
  .join-modal {
    max-height: calc(100vh - 32px);
    margin-top: var(--sp-3);
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
  }
  .join-cards { grid-template-columns: 1fr; }
  /* 窄屏下图标块与图标同步缩小，留白比例不变，仍保持四边等距 */
  .join-card-icon { --join-icon-box: 38px; --join-icon-glyph: 20px; }
  .join-card-tagline { min-height: 0; }
  .join-modal-title { font-size: 20px; }
}

/* ---------- 无障碍：减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .join-modal-mask,
  .join-modal,
  .join-card,
  .join-card-cta svg {
    transition: none !important;
  }
  .join-modal { transform: none; }
  .join-card:hover { transform: none; }
}

/* ---------- 弹窗打开时锁定页面滚动 ---------- */
body.join-modal-open {
  overflow: hidden;
}