/* 社群引导卡（join_cards）· 前台样式
   类名统一 jc- 前缀（已全站 grep 确认空闲）；
   颜色：文字色随封面主题（亮蓝=白字），其余一律走核心 CSS 变量。 */

/* 右侧栏：封面横幅组，无外层卡片/标题行 */
.jc-side {
    margin-bottom: 14px;
}

.jc-side .jc-card + .jc-card {
    margin-top: 12px;
}

/* 卡片 = 封面铺满；比例锁 800/352，与内置封面源图一致 → 任何列宽下都不裁切 */
.jc-card {
    position: relative;
    display: block;
    aspect-ratio: 800 / 352;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    background: var(--ac-soft) center / cover no-repeat;
    box-shadow: 0 1px 2px rgba(20, 30, 60, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.jc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(20, 30, 60, .12);
}

.jc-card:focus-visible {
    outline: 3px solid var(--ac);
    outline-offset: 2px;
}

/* 文本层：左侧 60% 是安全区，右侧留给封面视觉与二维码 */
.jc-tx {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 60%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.jc-title {
    display: block;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jc-badge {
    align-self: flex-start;
    font-family: var(--sans);
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

.jc-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.jc-chev {
    font-style: normal;
    font-size: 15px;
    line-height: 1;
}

/* 侧栏横幅：更紧凑的字号与文字安全区 */
.jc-side .jc-tx {
    left: 14px;
    max-width: 58%;
}

.jc-side .jc-title {
    font-size: 18px;
}

.jc-side .jc-badge {
    font-size: 9.5px;
}

.jc-side .jc-sub {
    font-size: 11px;
}

.jc-side .jc-chev {
    font-size: 13px;
}

/* —— 亮蓝主题（a1 码块 / a2 气泡）：白字 —— */
.jc-t-a1 .jc-title,
.jc-t-a2 .jc-title { color: #fff; text-shadow: 0 1px 2px rgba(6, 40, 80, .18); }
.jc-t-a1 .jc-sub,
.jc-t-a2 .jc-sub { color: rgba(255, 255, 255, .94); }
.jc-t-a1 .jc-badge,
.jc-t-a2 .jc-badge { background: rgba(255, 255, 255, .24); color: #fff; }

/* —— 二维码：按内置封面源图（800×352）坐标百分比定位，随卡片等比缩放 —— */
.jc-qr {
    position: absolute;
    z-index: 2;
    aspect-ratio: 1;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    pointer-events: none;
}

.jc-qr img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* a1：整块白色扫码占位区（源图 210×210 @ 566,71）；a2 气泡为纯文字卡，不渲染二维码 */
.jc-t-a1 .jc-qr {
    left: 70.75%;
    top: 20.17%;
    width: 26.25%;
    border-radius: 14%;
}

@media (max-width: 720px) {
    .jc-side .jc-tx {
        left: 14px;
        max-width: 62%;
    }
    .jc-side .jc-title {
        font-size: 19px;
    }
    .jc-side .jc-sub {
        font-size: 11.5px;
    }
}