/* ==========================================================================
   课程详情族 · 页头件样式（DetailHeaderWidget v2 · hero 白卡 + 统计带 + 页签）
   --------------------------------------------------------------------------
   落点：web/static/portal/course-header.css（details / discuss / evaluate 三页共用）
   P2-1 重设计 v2（2026-10-12 用户口径：参考学银在线课程页截图重新设计，参考不照抄）：
     吸收 = 灰底白卡（6px 圆角 + 柔影）/ hero 左媒体右信息栏 / 逐行事实行 /
            彩色大数字统计带 / 2px 下划线高亮页签 / 渐变主按钮；
     不照抄 = 配色走门户 token（学银蓝 → --c-primary*，随四主题换肤）/ 容器 1200（非 1280 定宽）/
              栅格 flex·grid（非 float 老式布局）。
   ⚠ 本件**不依赖** bootstrap / layer / SuperSlide / 旧共享 CSS（用户硬性禁令）。
   ========================================================================== */

/* 页面底色：discuss/evaluate 两页仍引旧 common-style.css 的
   `body{background:#f6f6f6 !important}`，同权 !important 后者胜 ⇒ 保留 !important；
   details 页无旧 CSS，本行即门户 --c-bg。 */
body{ background-color: var(--c-bg, #f6f8fb) !important; }

/* ── 容器（与门户正文列同宽：1200 + gutter 24）── */
.cd{
    width:100%;
    max-width:var(--layout-container-max, 1200px);
    margin:0 auto;
    padding:0 var(--layout-gutter, 24px);
    box-sizing:border-box;
}

/* ── 面包屑 ── */
.cd__crumb{
    display:flex;
    align-items:center;
    gap:var(--sp-1, 4px);
    font-size:var(--fs-xs, 12px);
    color:var(--c-text-tertiary, #999);
    padding:var(--sp-4, 16px) 0 var(--sp-3, 12px);
}
.cd__crumb i{ font-style:normal; opacity:.5; }
.cd__crumb a{ color:var(--c-text-tertiary, #999); }
.cd__crumb a:hover{ color:var(--c-primary-text); }

/* ==========================================================================
   ① hero 白卡：左媒体（16:9）+ 右信息栏
   ========================================================================== */
.cd-hero{
    display:grid;
    grid-template-columns:minmax(0, 55fr) minmax(0, 45fr);
    gap:var(--sp-6, 32px);
    padding:var(--sp-5, 24px);
    background-color:var(--c-surface, #fff);
    border-radius:var(--radius-sm, 6px);
    box-shadow:var(--shadow-card);
    box-sizing:border-box;
}
.cd-hero__media{
    position:relative;
    aspect-ratio:16/9;
    border-radius:var(--radius-sm, 6px);
    overflow:hidden;
    background:linear-gradient(135deg, #101827, #16233a);
}
.cd-hero__media video,
.cd-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.cd-hero__info{ min-width:0; display:flex; flex-direction:column; }
.cd-hero__title{
    font-size:var(--fs-xl, 22px);
    line-height:1.5;
    font-weight:var(--fw-bold, 700);
    color:var(--c-text, #333);
    margin:0;
}
/* 收藏（collect.js 切 collected/uncollect 类：实心 + 星标色） */
.cd__fav{
    display:inline-flex;
    align-items:center;
    gap:5px;
    vertical-align:middle;
    margin-left:var(--sp-2, 8px);
    font-size:var(--fs-xs, 12px);
    font-style:normal;
    font-weight:var(--fw-normal, 400);
    color:var(--c-text-tertiary, #999);
    border:1px solid var(--c-border-strong, #ccc);
    border-radius:var(--radius-pill, 999px);
    padding:4px 12px;
    cursor:pointer;
    transition:color var(--dur-fast, .14s) var(--ease-out, ease),
                border-color var(--dur-fast, .14s) var(--ease-out, ease),
                background-color var(--dur-fast, .14s) var(--ease-out, ease);
}
.cd__fav:hover{
    color:var(--c-primary-text);
    border-color:var(--c-primary-border);
    background-color:var(--c-primary-softer);
}
.cd__fav.collected{ color:var(--c-star, #f89b38); border-color:var(--c-star, #f89b38); }
.cd__fav.collected svg{ fill:currentColor; }

/* 逐行事实行（标签 + 值同行；照参考页 dd 排法） */
.cd-hero__facts{
    margin:var(--sp-4, 16px) 0 0;
    padding:0;
    border-top:1px solid var(--c-divider, #eee);
}
.cd-hero__fact{
    display:flex;
    align-items:baseline;
    gap:var(--sp-3, 12px);
    padding:9px 0;
    font-size:var(--fs-sm, 14px);
    border-bottom:1px dashed var(--c-divider, #eee);
}
.cd-hero__fact:last-child{ border-bottom:0; }
.cd-hero__fact dt{
    flex:0 0 5.2em;
    color:var(--c-text-tertiary, #999);
    white-space:nowrap;
}
.cd-hero__fact dd{
    flex:1;
    min-width:0;
    margin:0;
    color:var(--c-text, #333);
    font-weight:var(--fw-medium, 500);
    font-variant-numeric:tabular-nums;
    word-break:break-word;
}
/* 教学进度状态点 */
.cd__status{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-weight:var(--fw-medium, 500);
    color:var(--c-success, #15803d);
}
.cd__status::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}
.cd__status.is-off{ color:var(--c-text-tertiary, #999); }

/* 底部价格 + 唯一主行动（贴底） */
.cd-hero__buy{ margin-top:auto; padding-top:var(--sp-4, 16px); }
.cd__cta{ display:flex; align-items:center; gap:var(--sp-3, 12px); flex-wrap:wrap; }
.cd__price{ font-size:var(--fs-sm, 14px); color:var(--c-text-tertiary, #999); }
.cd__price em{
    font-style:normal;
    font-size:var(--fs-xl, 22px);
    font-weight:var(--fw-bold, 700);
    color:var(--c-primary-text);
    font-variant-numeric:tabular-nums;
}
.cd__price__tip{ margin-left:4px; font-size:var(--fs-xs, 12px); }

/* 按钮（门户 ui-btn 同值复刻；作用域 .cd —— 门户壳不引 components.css，
   list.css 那份锁在 .ph 下，本件不在 .ph 内） */
.cd .ui-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:40px;
    padding:0 var(--sp-6, 32px);
    border-radius:var(--radius-sm, 6px);
    font-size:var(--fs-sm, 14px);
    font-weight:var(--fw-semibold, 600);
    text-decoration:none;
    cursor:pointer;
    border:1px solid transparent;
    transition:background-color var(--dur-fast, .14s) var(--ease-out, ease),
                transform var(--dur-fast, .14s) var(--ease-out, ease);
}
.cd .ui-btn--primary{
    background-color:var(--c-primary-solid, var(--c-primary));
    background-image:linear-gradient(135deg,
        color-mix(in srgb, var(--c-primary-solid) 72%, #fff) 0%,
        var(--c-primary-solid) 62%);
    color:var(--c-on-primary, #fff);
    box-shadow:var(--shadow-sm);
}
.cd .ui-btn--primary:hover{ background-image:none; background-color:var(--c-primary-hover); }
.cd .ui-btn--primary:active{ transform:scale(.985); }
.cd .ui-btn--off{
    background-color:var(--c-border-strong, #ccc);
    color:var(--c-text-tertiary, #999);
    cursor:not-allowed;
    box-shadow:none;
}
.cd .ui-btn--ghost{
    background-color:transparent;
    border-color:var(--c-primary-border);
    color:var(--c-primary-text);
}
.cd .ui-btn--ghost:hover{ background-color:var(--c-primary-softer); }

/* ==========================================================================
   ② 统计带：白卡一行，彩色大数字（不同指标不同色，保证可读性）
   ========================================================================== */
.cd-stats{
    display:flex;
    margin-top:var(--sp-4, 16px);
    padding:var(--sp-5, 24px) 0;
    background-color:var(--c-surface, #fff);
    border-radius:var(--radius-sm, 6px);
    box-shadow:var(--shadow-card);
}
.cd-stats__item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--sp-1, 4px);
    border-left:1px solid var(--c-divider, #eee);
}
.cd-stats__item:first-child{ border-left:0; }
.cd-stats__item b{
    font-size:34px;
    line-height:1.15;
    font-weight:var(--fw-bold, 700);
    font-variant-numeric:tabular-nums;
    letter-spacing:-.01em;
}
.cd-stats__item em{ font-style:normal; font-size:var(--fs-sm, 14px); color:var(--c-text-secondary, #666); }
.cd-stats__item b.c1{ color:var(--c-primary); }
.cd-stats__item b.c2{ color:var(--c-success, #15803d); }
.cd-stats__item b.c3{ color:var(--c-star, #f89b38); }

/* ==========================================================================
   ③ 页签（主页 / 讨论区 / 评价）：2px 下划线高亮当前项
   ========================================================================== */
.cd-tabs{
    display:flex;
    gap:var(--sp-6, 32px);
    margin-top:var(--sp-4, 16px);
    padding:0 var(--sp-5, 24px);
    background-color:var(--c-surface, #fff);
    border-radius:var(--radius-sm, 6px);
    box-shadow:var(--shadow-card);
    border-bottom:1px solid var(--c-divider, #eee);
    overflow-x:auto;
}
.cd-tabs a{
    flex:none;
    display:inline-block;
    padding:var(--sp-4, 16px) 2px 14px;
    font-size:var(--fs-lg, 16px);
    color:var(--c-text, #333);
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    white-space:nowrap;
    transition:color var(--dur-fast, .14s) var(--ease-out, ease);
}
.cd-tabs a:hover{ color:var(--c-primary-text); }
.cd-tabs a.is-on{
    color:var(--c-primary-text);
    font-weight:var(--fw-medium, 500);
    border-bottom-color:var(--c-primary);
}

/* ── 件自带 toast（替代 layer.msg；报名/收藏反馈）── */
.cd__toast{
    position:fixed;
    left:50%;
    top:72px;
    transform:translateX(-50%);
    z-index:var(--z-overlay, 1050);
    max-width:80vw;
    padding:10px 22px;
    border-radius:var(--radius-md, 12px);
    background-color:rgba(16,24,40,.88);
    color:#fff;
    font-size:var(--fs-sm, 14px);
    box-shadow:var(--shadow-md);
    opacity:0;
    animation:cd-toast-in .22s var(--ease-out, ease) forwards;
}
.cd__toast.is-out{ animation:none; opacity:0; transition:opacity .3s ease; }
@keyframes cd-toast-in{ from{ opacity:0; transform:translate(-50%,-6px); } to{ opacity:1; transform:translate(-50%,0); } }

/* ── 响应式 ──
   ⚠ 断点取 900（与 `portal/chrome.css` 页头折叠同一档）：容器上限 1200 + gutter 24，
   993px 视口内容区 945px，两栏（55/45）仍可读 ⇒ 只有真正窄屏才堆叠。 */
@media (max-width:900px){
    .cd-hero{ grid-template-columns:1fr; gap:var(--sp-5, 24px); }
}
@media (max-width:640px){
    .cd-hero{ padding:var(--sp-4, 16px); }
    .cd-hero__title{ font-size:var(--fs-lg, 16px); }
    .cd__cta .ui-btn{ flex:1; }
    .cd-stats{ flex-wrap:wrap; gap:var(--sp-4, 16px) 0; }
    .cd-stats__item b{ font-size:26px; }
    .cd-tabs{ gap:var(--sp-5, 24px); }
    .cd-tabs a{ font-size:var(--fs-base, 14px); }
}