/* ==========================================================================
   产品学院弹层  academy-modal.css
   零依赖、零构建。类名前缀 .academy-modal*，不污染官网 2021 版式样式。

   背景（为什么需要它）：/community/ 与 /community/developer/ 子导航里的
   「产品学院」原本是个死链（href 被压成了 /community/），点它等于刷新当前页。
   改成当前页弹层后：就地展开 21 条视频的视频墙，点任意一条当场播放。

   视频与封面都不落地到本站，全部引用总部地址：
     封面 https://www.263.net/u/cms/...
     视频 https://webvideo.263.net/...

   为什么用弹层而不是直接把 21 条视频搬进 /community/ 页面：
     · /community/ 本身是「最新发布」的资讯流，塞进 21 条视频会把主列表冲掉；
     · 用户要的是「点产品学院 → 看视频」，弹层是最短路径，也不改动原页面版式。
   ========================================================================== */

.academy-modal {
    position: fixed;
    inset: 0;
    z-index: 99993;              /* 与试用(99990)/登录(99995)弹层错开，互不遮挡 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    -webkit-overflow-scrolling: touch;
}

.academy-modal[hidden] { display: none; }

/* ---- 遮罩 ---- */
.academy-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(9, 20, 44, .58);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: ac-mask-in .22s ease-out both;
}

@keyframes ac-mask-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- 对话框 ---- */
.academy-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 980px;
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 70px -12px rgba(8, 30, 74, .45), 0 2px 8px rgba(8, 30, 74, .10);
    overflow: hidden;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    box-sizing: border-box;
    animation: ac-dialog-in .28s cubic-bezier(.16, .84, .44, 1) both;
}

.academy-modal__dialog *,
.academy-modal__dialog *::before,
.academy-modal__dialog *::after { box-sizing: border-box; }

@keyframes ac-dialog-in {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 顶栏 ---- */
.academy-modal__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 14px 0 18px;
    border-bottom: 1px solid #eef1f6;
    background: linear-gradient(180deg, #fafcff, #f4f7fc);
}

.academy-modal__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, #1677ff, #4f9dff);
    color: #fff;
    box-shadow: 0 3px 10px rgba(22, 119, 255, .32);
}

.academy-modal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #16233c;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 「返回列表」：只在播放视图出现 */
.academy-modal__back {
    margin-left: 6px;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 30px;
    padding: 0 12px 0 8px;
    border: 1px solid #dde5f0;
    border-radius: 15px;
    background: #fff;
    color: #4a5a72;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
}

.academy-modal__back:hover { background: #f2f7ff; border-color: #b9d3fb; color: #1677ff; }
.academy-modal__back[hidden] { display: none; }

.academy-modal__close {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #7b8798;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.academy-modal__close:hover { background: #eef2f8; color: #16233c; }

.academy-modal__back:focus-visible,
.academy-modal__close:focus-visible,
.academy-modal__card:focus-visible {
    outline: 2px solid #1677ff;
    outline-offset: 2px;
}

/* ---- 主体 ---- */
.academy-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 20px 20px;
    background: #fbfcfe;
    -webkit-overflow-scrolling: touch;
}

.academy-modal__body--player { padding: 16px 20px 20px; }

.academy-modal__body[hidden] { display: none; }

/* ---- 视频墙 ---- */
.academy-modal__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.academy-modal__card {
    display: block;
    padding: 0;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: transform .2s cubic-bezier(.16, .84, .44, 1),
                box-shadow .2s, border-color .2s;
}

.academy-modal__card:hover {
    transform: translateY(-3px);
    border-color: #bcd6fb;
    box-shadow: 0 12px 26px -10px rgba(22, 119, 255, .34);
}

.academy-modal__thumb {
    position: relative;
    display: block;              /* 卡片是 <button>，内部只能是 phrasing content，靠 display 撑版式 */
    aspect-ratio: 16 / 9;
    background: #eef2f8 linear-gradient(135deg, #eaf1fb, #f6f9ff);
    overflow: hidden;
}

.academy-modal__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.academy-modal__card:hover .academy-modal__thumb img { transform: scale(1.04); }

/* 播放按钮覆盖层 */
.academy-modal__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(6, 18, 40, 0) 40%, rgba(6, 18, 40, .42));
}

.academy-modal__play i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1677ff;
    box-shadow: 0 6px 18px -4px rgba(6, 18, 40, .5);
    transition: transform .2s, background .2s;
}

.academy-modal__card:hover .academy-modal__play i {
    transform: scale(1.1);
    background: #fff;
}

.academy-modal__play svg { margin-left: 2px; }

.academy-modal__name {
    display: -webkit-box;         /* 两行截断必须靠 -webkit-box，别被 display:block 覆盖掉 */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 10px 12px 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #22314c;
}

.academy-modal__card:hover .academy-modal__name { color: #1677ff; }

/* ---- 播放器 ---- */
.academy-modal__player video {
    display: block;
    width: 100%;
    max-height: calc(100vh - 230px);
    background: #0b1220;
    border-radius: 12px;
    box-shadow: 0 18px 40px -18px rgba(8, 30, 74, .55);
}

.academy-modal__pname {
    margin: 12px 2px 0;
    font-size: 15px;
    font-weight: 600;
    color: #16233c;
}

.academy-modal__pmeta {
    margin: 4px 2px 0;
    font-size: 12.5px;
    color: #8593a6;
}

.academy-modal__pmeta a { color: #1677ff; text-decoration: none; }
.academy-modal__pmeta a:hover { text-decoration: underline; }

/* ---- 空态 / 失败态 ---- */
.academy-modal__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 56px 20px;
    color: #8593a6;
    font-size: 13.5px;
    text-align: center;
}

.academy-modal__empty a { color: #1677ff; }

/* ---- 底栏 ---- */
.academy-modal__foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border-top: 1px solid #eef1f6;
    background: #fafbfe;
    font-size: 12.5px;
    color: #8593a6;
}

.academy-modal__srclink {
    margin-left: auto;
    flex: none;
    color: #1677ff;
    text-decoration: none;
    white-space: nowrap;
}

.academy-modal__srclink:hover { text-decoration: underline; }

/* 滚动锁（与 .login-lock 同机制，各弹层拆开以免互相解锁） */
body.academy-lock { overflow: hidden; }

/* ---- 响应式 ---- */
@media (max-width: 900px) {
    .academy-modal__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 640px) {
    .academy-modal { padding: 0; }

    .academy-modal__dialog {
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        animation: ac-drawer-in .26s cubic-bezier(.16, .84, .44, 1) both;
    }

    @keyframes ac-drawer-in {
        from { opacity: 0; transform: translateY(26px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .academy-modal__head { padding: 0 10px 0 14px; }
    .academy-modal__body { padding: 14px 14px 16px; }
    .academy-modal__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .academy-modal__name { font-size: 12.5px; padding: 8px 10px 10px; }
    .academy-modal__play i { width: 36px; height: 36px; }
    .academy-modal__foot { font-size: 12px; padding: 10px 14px; }
    .academy-modal__srclink { display: none; }
}

@media (max-width: 380px) {
    .academy-modal__list { grid-template-columns: minmax(0, 1fr); }
}

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    .academy-modal__mask,
    .academy-modal__dialog { animation: none; }
    .academy-modal__card,
    .academy-modal__thumb img { transition: none; }
}