/* 首页活动卡片（转介绍活动 P1，10-14；10-15 改成整条背景图）：前台首页和后台「活动文案」预览共用这一份。
   有背景图：图铺满整张卡片，标题、副标题、按钮压在上面，电脑端从左往右加深色渐变，手机端从下往上。
   没有背景图：退回纯色卡片。手机端样式前台按屏幕宽度生效，后台预览用 .hc-m / .hc-d 强制。 */
.v2-campaign { position: relative; display: flex; align-items: stretch; min-height: 200px; margin: 16px 0; border-radius: var(--v2-r-md, 16px); background: var(--v2-surface, #1b1b1d); border: 1px solid var(--v2-line, #2c2c30); overflow: hidden; transition: box-shadow .25s, border-color .25s; }
.v2-campaign:hover { border-color: var(--v2-accent, #ff7a1a); box-shadow: 0 0 0 4px var(--v2-accent-soft, #ff7a1a26), 0 12px 32px #ff7a1a22; }
.v2-cc-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px 28px; }
.v2-cc-copy h2 { margin: 0; font-size: 24px; line-height: 1.3; color: var(--v2-text, #f2f2f2); }
.v2-cc-copy p { margin: 0; color: var(--v2-muted, #a0a0a8); font-size: 14px; line-height: 1.6; }
.v2-cc-copy .btn { align-self: flex-start; margin-top: 6px; }

/* 整条背景图：电脑端 1200×180（图 2400×360） */
.v2-campaign.has-bg { min-height: 0; height: 180px; background: #111; }
.hc-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.hc-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.v2-campaign.has-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .56) 30%, rgba(0, 0, 0, .16) 55%, rgba(0, 0, 0, 0) 70%); }
.v2-campaign.has-bg .v2-cc-copy { position: relative; z-index: 2; max-width: 46%; gap: 8px; padding: 20px 32px; } /* 和设计规范「左侧约 40% 是文字区」对齐，长标题不压到中间的主视觉 */
.v2-campaign.has-bg .v2-cc-copy h2, .v2-campaign.has-bg .v2-cc-copy p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.v2-campaign.has-bg .v2-cc-copy h2 { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.v2-campaign.has-bg .v2-cc-copy p { color: rgba(255, 255, 255, .86); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
/* 电脑端卡片高度固定 180：标题 22px 最多两行、副标题一行，各项不被压缩（两行标题 + 副标题 + 按钮正好放下） */
.v2-campaign.has-bg:not(.hc-m) .v2-cc-copy > * { flex-shrink: 0; }
.v2-campaign.has-bg:not(.hc-m) .v2-cc-copy h2 { font-size: 22px; }
.v2-campaign.has-bg:not(.hc-m) .v2-cc-copy p { -webkit-line-clamp: 1; }

/* 手机端（约 343×190；图 1080×600，或电脑端图按「手机端显示位置」裁切）。下面两段内容相同：前台按屏幕宽度、后台预览按 .hc-m */
@media (max-width: 600px) {
  .v2-campaign:not(.hc-d) { flex-direction: column-reverse; min-height: 0; }
  .v2-campaign:not(.hc-d) .v2-cc-copy { padding: 16px; }
  .v2-campaign:not(.hc-d) .v2-cc-copy h2 { font-size: 19px; }
  .v2-campaign.has-bg:not(.hc-d) { height: auto; min-height: 190px; flex-direction: column; justify-content: flex-end; }
  .v2-campaign.has-bg:not(.hc-d)::after { background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .6) 45%, rgba(0, 0, 0, .12) 85%, rgba(0, 0, 0, .05) 100%); }
  .v2-campaign.has-bg:not(.hc-d) .v2-cc-copy { max-width: none; flex: none; justify-content: flex-end; gap: 6px; padding: 16px; }
  .v2-campaign.has-bg:not(.hc-d) .hc-bg img { object-position: var(--hc-mpos, 50% 50%); }
  .v2-campaign.has-bg:not(.hc-d) .v2-cc-copy h2 { font-size: 19px; }
  .v2-campaign.has-bg:not(.hc-d) .v2-cc-copy p { -webkit-line-clamp: 2; }
}
.v2-campaign.hc-m { flex-direction: column-reverse; min-height: 0; }
.v2-campaign.hc-m .v2-cc-copy { padding: 16px; }
.v2-campaign.hc-m .v2-cc-copy h2 { font-size: 19px; }
.v2-campaign.has-bg.hc-m { height: auto; min-height: 190px; flex-direction: column; justify-content: flex-end; }
.v2-campaign.has-bg.hc-m::after { background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .6) 45%, rgba(0, 0, 0, .12) 85%, rgba(0, 0, 0, .05) 100%); }
.v2-campaign.has-bg.hc-m .v2-cc-copy { max-width: none; flex: none; justify-content: flex-end; gap: 6px; padding: 16px; }
.v2-campaign.has-bg.hc-m .hc-bg img { object-position: var(--hc-mpos, 50% 50%); }