/* ==========================================================================
   支持组件样式 · 公众号关注入口
   依赖 assets/css/style.css 的设计令牌。可单独引入到任何页面。

   ⚠️ 2026-09-27：右栏原来是 180×180 的**收款码**方框，现在是公众号的
      「扫码 + 搜一搜」传播图 —— 那是一张 1024×374 的**横图**（约 2.74:1），
      塞不进方框。所以右栏改成「宽度受限、高度自适应」的横版容器（见 .sup__qr），
      并且不再需要衬白底（传播图自己带底色）。
   ========================================================================== */

.sup {
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--c-surface);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: var(--sp-5) var(--sp-6);
  align-items: center;
}

.sup__head { min-width: 0; }

.sup__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-text);
}

.sup__body {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--c-text-dim);
  max-width: 42ch;
}

.sup__note {
  margin: 0;
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--c-text-dim);
  padding: var(--sp-4);
  border-radius: var(--r);
  background: var(--c-bg-subtle);
  border: 1px dashed var(--c-border-hi);
}

.sup__chips {
  margin: 0;
  grid-column: 1 / -1;
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.sup__chip {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-mono);
  color: var(--c-text-faint);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: .2rem .65rem;
}

/* ---------- 公众号传播图（扫码 + 搜一搜，横图） ---------- */
.sup__qr {
  margin: 0;
  width: 100%;
  max-width: 400px;
  justify-self: end;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
}
.sup__qr img { display: block; width: 100%; height: auto; }

.sup__qr--empty {
  border-style: dashed;
  padding: var(--sp-4);
  text-align: center;
}
.sup__qr--empty p {
  margin: 0;
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--c-text-faint);
}
.sup__qr--empty code {
  font-family: var(--font-mono);
  color: var(--c-accent);
  word-break: break-all;
}

@media (max-width: 640px) {
  .sup {
    grid-template-columns: 1fr;
    padding: var(--sp-5);
  }
  .sup__qr { justify-self: stretch; max-width: none; }
}

@media print {
  .sup__qr { display: none; }
}