/*!
 * 首页「项目案例」区块（Project Cases） v1.0.16
 *
 * 布局：
 * - 顶部：副标题 / 主标题（居中）
 * - 中部：横向分类 tab（激活态主题色 + 下划线 + 可选 ↗ 外链小箭头）
 * - 下部：大卡片（左侧封面图占 ~50%、右侧文字 + CTA），同分类多条案例时右下角带 ‹ 1/N › 切换
 *
 * v1.0.1 关键变更：
 * - stage 改为「固定高度」（桌面 480px / 平板 400px），所有 panel-group + card 都
 *   absolute 撑满 stage。切换 tab / 切换案例时高度永远不变，不再因为「文字短的卡」
 *   把整个区块和页脚顶得跳来跳去。
 * - 手机端（≤720px）保持自适应：单列堆叠场景下固定高度会压挤内容，所以这里回退
 *   到「激活卡 relative 撑开 panel」的模式，切 tab 高度允许变化。
 *
 * v1.0.2：Grid 固定高度 + 大图固有尺寸时，子项默认 min-height:auto 会顶破布局链；
 * 为 panel-group / card / card-media 补 min-height:0（及 min-width:0），media 区 height:100%，
 * 图片 max-width:100%，使 cover + 百分比高度稳定贴合容器。
 *
 * v1.0.3：超宽拼贴/横幅封面在左栏用 cover + center 时会裁掉左侧主文案区；
 * 改为 object-position 左对齐，hover 缩放以左侧为 transform-origin，优先保住画面左侧信息。
 *
 * v1.0.4：封面改为 object-fit:contain（方案 A）——整图等比缩放装入媒体区，大则缩小、小则放大，
 * 不裁切；比例与容器不一致时由 .apap-pjc-card-media 背景色填边。去掉悬停 scale，避免 contain 时被裁切。
 *
 * v1.0.5：左侧媒体区统一固定为 16:9 画幅（aspect-ratio），桌面/平板在固定行高内垂直居中；
 * 与 16:9 封面贴合，contain 时留白更少。
 *
 * v1.0.6：.apap-pjc-panel-group.is-active 内左栏 16:9 按舞台行高铺满（height:100% + aspect-ratio 推宽），
 * justify-self 居中、卡片 overflow 裁切两侧；封面图改 cover 填满 16:9 框。≤720px 仍用宽 100% + contain。
 *
 * v1.0.7：v1.0.6 的「按行高把 16:9 撑宽」会让媒体块宽于第一列栅格，叠在右侧文字上；删除该规则，
 * 16:9 框严格内接到「列宽 × 行高」内（max-width/max-height 双 100%）。整体放宽放大：inner 1280→1440，
 * stage 480→520 / 1024 断点 400→460；标题/正文/CTA/卡片内边距同步放大；右栏 z-index 略高，避免叠字。
 *
 * v1.0.8：让「整个左栏 = 16:9」并被封面图覆盖（参考用户给的目标图）。
 * 关键：stage 行高用 calc 锁定为「inner 宽 × 第一列宽因子 × 9/16」，与第一列实际宽度自然吻合 →
 * 媒体区 100% × 100% 即铺满左栏，img 用 cover；上传 16:9 封面（如 1672×941）几乎不裁切。
 *
 * v1.0.9：将封面图改回 object-fit:contain。左栏仍是 16:9 形状；16:9 封面与 cover 视觉一致，
 * 但任何非 16:9 图也保证完整可见，不再担心被任何裁切。比例不一致时由媒体区背景色填边。
 *
 * v1.0.10：双兜底「左栏 = 16:9」。stage 改用 aspect-ratio（不再依赖 calc 高度，受缓存影响小）；
 * .apap-pjc-card-media 自身也强制 aspect-ratio:16/9 + max-height:100%。任意比例图都能自动 contain，
 * 16:9 图无空白；非 16:9 图小空白由媒体区浅灰背景填，不会因为图比例而破坏布局。
 *
 * v1.0.11：彻底解决「卡片图四周露白/露浅灰」的问题。
 * 1) 删除 .apap-pjc-card-media 的 aspect-ratio + align-self:center —— 之前在「width:100%
 *    + aspect-ratio:16/9 + max-height:100%」三者打架时，会算出比单元格略矮的高度，
 *    再被 align-self:center 居中，导致媒体区上下露出卡片白色底（看起来就是图片有空白）。
 * 2) 媒体区直接 height:100% 铺满左栏单元格（左栏因 stage aspect-ratio 设计本身就接近 16:9）。
 * 3) 图片改回 object-fit:cover —— 16:9 图与 16:9 框完全等价无裁切；非 16:9 图轻度裁切
 *    边缘，但永不再露背景。这样就保证封面图始终铺满左栏。
 * 4) 推荐：项目案例封面统一上传 16:9（如 1600×900 / 1920×1080），cover 模式下视觉无任何裁切。
 *
 * v1.0.12：图片填充模式可在后台切换。<section class="apap-pjc" data-img-fit="...">
 *   - cover         （默认）：裁剪填满，最干净；非 16:9 图边缘微量裁切
 *   - contain       ：完整显示，空白处用浅灰底色 (#e7eef6)
 *   - contain_dark  ：完整显示，空白处用深色底色 (#0f1d2e，与卡片标题色一致)
 *   - contain_blur  ：完整显示，空白处用同张图模糊放大填充（视频网站做法，不裁不留白）
 * contain_blur 模式下模板会在 .apap-pjc-card-media 内额外渲染 .apap-pjc-card-media-bg 元素，
 * 用 CSS 变量 --apap-pjc-bg 携带封面图 URL 作为模糊背景层。
 *
 * v1.0.13：修复 contain 系列模式下「图片靠左上对齐 + 右下大块露白」的问题。
 * 原因：.apap-pjc-card-media 是 grid item，img 用 width/height:100% 时 height:100% 在某些
 * 浏览器/grid 配置下会解析失败，img 落回图片自身的 natural 尺寸（块级默认左上对齐），
 * 导致 contain + object-position:center 的居中规则根本没参与生效（因为 img 元素本身就比
 * 容器小）。改用 position:absolute + inset:0 强制 img 与 card-media 严格同尺寸，与父
 * grid 高度算法解耦，object-fit/object-position 才能正常工作。占位元素同步处理。
 *
 * v1.0.14：修复「图片上方一条白色横条 + 底部一行内容被裁」的不对称居中问题。
 * 真因比 v1.0.13 想的更深一层：是 .apap-pjc-card 这个 grid 容器没设 grid-template-rows，
 * 默认 auto = max(子项内容高度) ≈ card-body 实际文字高度（约 350px），而 card 自己因
 * absolute+inset:0 被强制等于 stage 高度（约 414px），两者不一致 → row 比 card 矮 ~64px
 * → card-media 跟着 row 撑不满 card → card 顶部多出空白条 → 图片 cover 在矮 card-media
 * 里又截掉了底部一行内容。
 * 修复：给 .apap-pjc-card 加 grid-template-rows:1fr，让单行撑满 card 高度。手机端单列
 * 堆叠覆盖回 grid-template-rows:auto auto 各按自身高度。
 *
 * v1.0.15：v1.0.14 还不够。grid item 默认 min-height:auto，card-body 文字内容总高
 * （padding 64×2 + 标题 30 + 描述 6 行 188 + gap×3 + CTA ≈ 437-463px）超过 stage 414px
 * 时，会反过来把 row 撑大到内容高 → card-media 也跟着拉高（实测 463px）→ 16:9 图
 * cover 后底部一行被裁、上方露白条。
 * 修复双管齐下：
 *   1) grid-template-rows 用 minmax(0, 1fr) 而不是 1fr，强制 row 不超过 stage 分配的高度
 *   2) .apap-pjc-card-body 显式 min-height:0 + overflow:hidden，让文字内容服从 row 高度
 *      限制；描述已用 line-clamp:6 限行，CTA/title 固定，视觉上不会丢关键信息
 *
 * v1.0.16：新增桌面端 hover 微交互。手机端 (hover:hover false) 完全无效。
 *   - 整卡阴影加深，模拟轻微"浮起"感
 *   - cover 模式封面图 scale(1.04) 缓推（不裁切扩大边缘）
 *   - contain_blur 模式背景模糊层 scale 加大，呼吸感更强
 *   - 标题字色变主题色
 *   - CTA 箭头圆圈直接变实心 + 间距拉宽，整卡都成"按钮"
 *   - 所有 transition 都进了 prefers-reduced-motion 重置
 */

.apap-pjc {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #f1f6fb 0%, #ffffff 75%);
    color: #0f1d2e;
    padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 88px);
}

.apap-pjc-inner {
    width: min(1440px, calc(100% - 32px));
    margin-inline: auto;
}

/* ---------- 顶部标题 ---------- */
.apap-pjc-header {
    text-align: center;
    margin-bottom: clamp(24px, 3vw, 36px);
}

.apap-pjc-sub {
    margin: 0 0 8px;
    font-size: clamp(12px, 0.9vw, 13px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--apap-color-accent, #014098);
}

.apap-pjc-heading {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 700;
    line-height: 1.25;
    color: #0f1d2e;
    position: relative;
    display: inline-block;
}

/* 标题下方的小装饰短线（可选样式） */
.apap-pjc-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--apap-color-accent, #014098);
}

/* ---------- 分类 tab 行 ---------- */
.apap-pjc-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(8px, 1.5vw, 24px);
    margin: clamp(28px, 4vw, 44px) auto clamp(32px, 4vw, 48px);
    padding: 0 8px;
    max-width: 100%;
}

.apap-pjc-tab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 8px 4px 12px;
    margin: 0;
    cursor: pointer;
    font: inherit;
    font-size: clamp(14px, 1.05vw, 16px);
    font-weight: 500;
    color: #5b6878;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: color 0.2s ease;
}

.apap-pjc-tab:hover {
    color: var(--apap-color-accent, #014098);
}

.apap-pjc-tab:focus-visible {
    outline: 2px solid var(--apap-color-accent, #014098);
    outline-offset: 4px;
    border-radius: 2px;
}

.apap-pjc-tab.is-active {
    color: var(--apap-color-accent, #014098);
    font-weight: 600;
}

/* 激活态下方的下划线 */
.apap-pjc-tab::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--apap-color-accent, #014098);
    transition: transform 0.25s ease;
    transform-origin: center;
}

.apap-pjc-tab.is-active::after {
    transform: translateX(-50%) scaleX(1);
}

.apap-pjc-tab-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.apap-pjc-tab-link:hover {
    background: rgba(1, 64, 152, 0.1);
    transform: translate(1px, -1px);
}

/* ---------- 案例舞台（卡片容器） ----------
 * v1.0.1：stage 固定高度，所有 panel-group / card 都 absolute 撑满 stage。
 * 切换 tab / 切换案例时高度永远不变 → 页脚位置稳定，不再"跳"。
 * 手机端（≤720px）回退为自适应模式，避免单列堆叠场景下内容被压挤。 */
.apap-pjc-stage {
    position: relative;
    /* 用 aspect-ratio 让 stage 高度跟随宽度自动算出，使得「第一列宽 × 9/16 = stage 高」。
     * 列比 1.05fr:1fr → stage 比例 = (1 / 0.5122) × (16/9) ≈ 3.47。 */
    aspect-ratio: 3.47 / 1;
    /* 极宽屏下避免高度过分增长（≥ ~1472px 视口时锁定上限） */
    max-height: 414px;
}

.apap-pjc-panel-group {
    position: absolute;
    inset: 0;
    min-height: 0;
    min-width: 0;
}

.apap-pjc-panel-group[hidden] {
    display: none;
}

/* 案例卡片：左图右文 */
.apap-pjc-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 38px rgba(15, 29, 46, 0.10), 0 2px 8px rgba(15, 29, 46, 0.05);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    /* row 必须 minmax(0, 1fr) 而不是 1fr。
     * 因为 grid item 默认 min-height: auto，card-body 内容高（padding 64×2 + 标题 +
     * 描述 6 行 + CTA ≈ 437-463px）会大于 stage 高 (414px)，把 row 强行撑大，
     * 导致 card-media 跟着变高 → 16:9 图 cover 后底部一行被裁、上方露白条。
     * minmax(0, 1fr) 允许 row 最小 0，让内容服从 stage 高度限制。 */
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    position: absolute;
    inset: 0;
    min-height: 0;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.35s ease,
        box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

.apap-pjc-card.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.apap-pjc-card-media {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: #e7eef6;
    min-height: 0;
    min-width: 0;
    /* 直接铺满左栏单元格（stage 设计上左栏即接近 16:9） */
    width: 100%;
    height: 100%;
    align-self: stretch;
    justify-self: stretch;
}

/* 模糊背景层：仅 contain_blur 模式下模板会输出此元素 */
.apap-pjc-card-media-bg {
    position: absolute;
    inset: -8%; /* 略放大避免模糊后边缘透出底色 */
    z-index: 0;
    background-image: var(--apap-pjc-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(24px) saturate(1.05);
    transform: scale(1.12);
    transform-origin: center;
    pointer-events: none;
    /* 半透明深色遮罩，弱化背景花纹 */
    box-shadow: inset 0 0 0 9999px rgba(15, 29, 46, 0.18);
    /* hover 时背景模糊层有呼吸感缩放 */
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.apap-pjc-card-media img {
    /* absolute + inset:0 强制 img 与 card-media 严格同尺寸，与父 grid 高度算法解耦。
     * 此前用 width/height:100% 在 grid item 上 height:100% 会被某些浏览器解析失败，
     * img 落回 natural 尺寸 → 在 card-media 内左上对齐 + 右下露白。 */
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    /* 默认 cover：16:9 封面与左栏完全贴合无空白；非 16:9 图轻度裁切边缘但绝不露底色 */
    object-fit: cover;
    object-position: center;
    /* hover 缓推用 */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- 后台可切换的图片填充模式（默认 / 缺省 = cover，与上方一致） ---- */

/* contain：完整显示，浅灰底色填白 */
.apap-pjc[data-img-fit="contain"] .apap-pjc-card-media {
    background: #e7eef6;
}
.apap-pjc[data-img-fit="contain"] .apap-pjc-card-media img {
    object-fit: contain;
}

/* contain_dark：完整显示，深色底色填白 */
.apap-pjc[data-img-fit="contain_dark"] .apap-pjc-card-media {
    background: #0f1d2e;
}
.apap-pjc[data-img-fit="contain_dark"] .apap-pjc-card-media img {
    object-fit: contain;
}

/* contain_blur：完整显示，同图模糊放大背景填白（不裁不留白） */
.apap-pjc[data-img-fit="contain_blur"] .apap-pjc-card-media {
    background: #0f1d2e; /* 没图或图加载前的兜底色，与暗模糊层协调 */
}
.apap-pjc[data-img-fit="contain_blur"] .apap-pjc-card-media img {
    object-fit: contain;
}

.apap-pjc-card-media-placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #c9d6e5, #e7eef6);
}

.apap-pjc-card-body {
    position: relative;
    z-index: 1;
    padding: clamp(32px, 3.8vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(16px, 1.6vw, 26px);
    min-width: 0;
    /* 必须加 min-height:0 + overflow:hidden，否则 grid item 默认 min-height:auto
     * 会让 card-body 把整个 row 撑大到内容高度（往往 > stage 414px），
     * 进而把左侧 card-media 也拉高，破坏 16:9 比例。
     * 描述部分已经用 -webkit-line-clamp:6 限行，CTA/title 固定，所以这里隐藏多余高度
     * 不会丢关键信息。 */
    min-height: 0;
    overflow: hidden;
}

.apap-pjc-card-title {
    margin: 0;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.3;
    color: #0f1d2e;
    transition: color 0.25s ease;
}

.apap-pjc-card-desc {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.85;
    color: #4f5d6f;
    /* 限制最大行数（避免长描述把卡片撑得太高） */
    display: -webkit-box;
    -webkit-line-clamp: 6;
            line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.apap-pjc-card-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px 10px 0;
    color: var(--apap-color-accent, #014098);
    font-size: clamp(15px, 1.1vw, 16px);
    font-weight: 500;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
    margin-top: clamp(4px, 0.6vw, 8px);
}

.apap-pjc-card-cta:hover {
    gap: 14px;
}

.apap-pjc-card-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(1, 64, 152, 0.12);
    color: var(--apap-color-accent, #014098);
    font-size: 14px;
    line-height: 1;
    transition: background 0.2s ease;
}

.apap-pjc-card-cta:hover .apap-pjc-card-cta-arrow {
    background: var(--apap-color-accent, #014098);
    color: #fff;
}

.apap-pjc-card-cta.is-disabled {
    color: #94a3b8;
    cursor: default;
    pointer-events: none;
}

.apap-pjc-card-cta.is-disabled .apap-pjc-card-cta-arrow {
    background: rgba(148, 163, 184, 0.18);
    color: #94a3b8;
}

/* ---------- 同分类内 ‹ 1/N › 切换 ---------- */
.apap-pjc-nav {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(15, 29, 46, 0.12);
    z-index: 2;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.apap-pjc-nav-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--apap-color-accent, #014098);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease;
}

.apap-pjc-nav-btn:hover {
    background: var(--apap-color-accent, #014098);
    color: #fff;
}

.apap-pjc-nav-btn:focus-visible {
    outline: 2px solid var(--apap-color-accent, #014098);
    outline-offset: 2px;
}

.apap-pjc-nav-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
    color: var(--apap-color-accent, #014098);
}

.apap-pjc-nav-counter {
    font-size: 13px;
    color: #4f5d6f;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: center;
}

/* ---------- 桌面 hover 微交互 ---------- */
/* hover:hover 媒体查询确保只在真有指针的设备上触发，手机/触屏完全无效 */
@media (hover: hover) {
    /* 整卡阴影加深，模拟轻微"浮起" */
    .apap-pjc-card.is-active:hover {
        box-shadow:
            0 22px 60px rgba(15, 29, 46, 0.16),
            0 4px 14px rgba(15, 29, 46, 0.08);
    }

    /* cover 模式：封面图缓慢推近。
     * 默认（无 data-img-fit）等同 cover，所以也包含 :not([data-img-fit])。 */
    .apap-pjc:not([data-img-fit]) .apap-pjc-card.is-active:hover .apap-pjc-card-media img,
    .apap-pjc[data-img-fit="cover"] .apap-pjc-card.is-active:hover .apap-pjc-card-media img {
        transform: scale(1.04);
    }

    /* contain / contain_dark / contain_blur 模式：前景图保持完整不裁切，hover 不缩放它，
     * 改为给 contain_blur 的背景模糊层加大 scale 形成呼吸感。 */
    .apap-pjc[data-img-fit="contain_blur"] .apap-pjc-card.is-active:hover .apap-pjc-card-media-bg {
        transform: scale(1.18);
    }

    /* 标题字色变主题色 */
    .apap-pjc-card.is-active:hover .apap-pjc-card-title {
        color: var(--apap-color-accent, #014098);
    }

    /* CTA：箭头圆圈直接变实心填充 + 文字间距拉宽，整张卡感觉就是个按钮 */
    .apap-pjc-card.is-active:hover .apap-pjc-card-cta:not(.is-disabled) {
        gap: 14px;
    }
    .apap-pjc-card.is-active:hover .apap-pjc-card-cta:not(.is-disabled) .apap-pjc-card-cta-arrow {
        background: var(--apap-color-accent, #014098);
        color: #fff;
    }
}

/* ---------- 响应式 ---------- */

/* 平板：列比改为 1:1，stage 比例同步：(1/0.5) × (16/9) = 32/9 → 左栏仍是 16:9 */
@media (max-width: 1024px) {
    .apap-pjc-stage {
        aspect-ratio: 32 / 9;
        max-height: none;
    }
    .apap-pjc-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* 手机：上图下文，单列堆叠；stage 取消固定高度，让激活卡撑开高度 */
@media (max-width: 720px) {
    .apap-pjc-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        gap: 18px;
    }
    .apap-pjc-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }
    /* stage / panel-group 都改回自适应，激活卡用 relative 撑开高度 */
    .apap-pjc-stage {
        height: auto;
        min-height: 0;
    }
    .apap-pjc-panel-group {
        position: relative;
        inset: auto;
    }
    .apap-pjc-card.is-active {
        position: relative;
        inset: auto;
    }
    .apap-pjc-card {
        grid-template-columns: 1fr;
        /* 手机端单列堆叠：媒体行 + 文字行各按自身高度，不再 1fr 撑满 */
        grid-template-rows: auto auto;
    }
    .apap-pjc-card-media {
        /* 手机端卡片为自适应高度（无固定父高度），用 aspect-ratio 显式给媒体区 16:9 画幅 */
        height: auto;
        aspect-ratio: 16 / 9;
        align-self: stretch;
        justify-self: stretch;
    }
    .apap-pjc-card-body {
        padding: 22px 20px 28px;
    }
    .apap-pjc-card-desc {
        -webkit-line-clamp: 8;
                line-clamp: 8;
    }
    .apap-pjc-nav {
        right: 12px;
        bottom: 12px;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .apap-pjc-card,
    .apap-pjc-card-media img,
    .apap-pjc-card-media-bg,
    .apap-pjc-card-title,
    .apap-pjc-tab::after,
    .apap-pjc-card-cta,
    .apap-pjc-card-cta-arrow {
        transition: none !important;
    }
    /* hover 状态下也不做 transform/box-shadow 变化（仅保留颜色变化做反馈） */
    .apap-pjc-card.is-active:hover {
        box-shadow: 0 12px 38px rgba(15, 29, 46, 0.10), 0 2px 8px rgba(15, 29, 46, 0.05);
    }
    .apap-pjc-card.is-active:hover .apap-pjc-card-media img,
    .apap-pjc-card.is-active:hover .apap-pjc-card-media-bg {
        transform: none;
    }
}