/* ============================================================
   ds-components.css — design-system-v1 第3层：可复用结构组件
   不绑定任何品牌：颜色一律 var() 引用（令牌层或站点品牌层）。
   加载顺序：ds-tokens → ds-motion → ds-components → 站点品牌层之后可覆盖。
   ============================================================ */

/* ---------- 1. 等宽小标签（Heboo pre 风格精髓：mono 小字 ↔ 巨型标题对比） ---------- */
.ds-label {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-label-size);
  letter-spacing: var(--ds-label-tracking);
  text-transform: uppercase;
  color: var(--ds-label-color);
}
.ds-label::before { content: "/ "; opacity: .6; }  /* 杂志感斜杠前缀；不要可覆盖：.ds-label.no-slash::before{content:""} */

/* ---------- 2. meta 行（序号 + 分隔 + mono 小字，作品/服务条目的元信息） ---------- */
.ds-meta-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-label-size);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ds-label-color);
}
.ds-meta-row .ds-meta-sep { flex: 1; border-top: 1px solid currentColor; opacity: .25; transform: translateY(-3px); }
.ds-meta-row .ds-meta-no { opacity: .55; }

/* ---------- 3. FAQ 手风琴强化（叠加在原生 details 上，零 JS 折叠） ---------- */
.ds-faq-item summary {
  display: flex;
  align-items: baseline;
  gap: 18px;
  cursor: pointer;
  list-style: none;
}
.ds-faq-item summary::-webkit-details-marker { display: none; }
.ds-faq-item .ds-faq-no {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-label-size);
  color: var(--ds-gold);
  min-width: 2.2em;
}
.ds-faq-item .ds-faq-toggle {
  margin-left: auto;
  font-family: var(--ds-font-mono);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform .25s var(--ds-ease-out);
  flex-shrink: 0;
}
.ds-faq-item[open] .ds-faq-toggle { transform: rotate(45deg); }  /* + → × */
.ds-faq-item .ds-faq-cat {
  display: block;
  font-family: var(--ds-font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .5;
  margin-top: 4px;
}

/* ---------- 4. 圆形旋转 badge（SVG textPath 环形字，角落记忆点） ---------- */
.ds-badge-circle {
  position: relative;
  width: 128px;
  height: 128px;
  display: block;
}
.ds-badge-circle svg { width: 100%; height: 100%; overflow: visible; }
.ds-badge-circle text {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  fill: currentColor;
}
.ds-badge-circle .ds-badge-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* ---------- 5. 超大版权区 CTA（页脚巨型文字链接，clamp 全自适应） ---------- */
.ds-giant-cta {
  display: block;
  text-align: center;
  font-family: var(--ds-serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 7rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  padding: clamp(48px, 8vw, 110px) 20px;
  text-decoration: none;
  transition: color .3s var(--ds-ease-out);
}
.ds-giant-cta:hover { text-decoration: none; }
.ds-giant-cta .ds-giant-arrow { display: inline-block; transition: transform .3s var(--ds-ease-out); }
.ds-giant-cta:hover .ds-giant-arrow { transform: translateX(.35em); }

/* ---------- 6. 悬停文案光标（eq.js cursor 模块的样式侧） ---------- */
.ds-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--ds-green);
  color: #fff;
  font-family: var(--ds-font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  transform: translate(-50%, -50%);
}
body.ds-cursor-on .ds-cursor { display: flex; }
body.ds-cursor-on [data-cursor] { cursor: none; }

/* ---------- 7. <768px 组件降级 ---------- */
@media (max-width: 767.98px) {
  .ds-badge-circle { width: 72px; height: 72px; }
  .ds-badge-circle text { font-size: 15px; letter-spacing: 4px; }
  .ds-badge-circle .ds-badge-center { font-size: .85rem; }
  .ds-giant-cta { font-size: clamp(1.9rem, 8.5vw, 3rem); }
  .ds-cursor { display: none !important; }
  .ds-meta-row { flex-wrap: wrap; gap: 8px; }
}