/* ==========================================================================
   门户首页「实验中心」推荐区块（`app\widgets\lab\LabCenterShowWidget` 自带样式）
   落点：web/static/widgets/css/portal_lab_show.css
   由件在 `run()` 里经 `BaseWidget::$cssFiles` 注册 ⇒ 手机 / 主题模板单独调用时也自带样式。

   ── 设计口径 ──
   与列表页的三列小卡（`.ph-lab`）**故意不同**：首页只展示一到两个 ⇒ 每一格都要"够看"，
   所以用**横向大卡**（16:9 大封面 + 加大的标题 + 3 行简介）。
   但**层级语言不变**（与 `.ph-lab` / `.ph-course` / `.ph-hot` 同一套，`portal/list.css` 有明确口径）：
   字号 / 色阶 / 一条细线分层，**不用盒子分层** —— 不加白底、不加边框、不加阴影。
   （首页页面底是 `--c-bg` #f6f8fb，卡片浮在上面靠图片与字号成立。）
   ========================================================================== */

.ph-labshow {
    display: grid;
    /* `auto-fit` + 320px 下限：**1 个占满、2 个并排、窄屏自动一列** —— 个数由面板定，
       布局不用跟着改（站长把 `number` 从 2 改成 1 时版式自然收成一张通栏卡）。 */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-6, 32px) var(--sp-5, 24px);
}

/* ── 卡片：参考 `xnfz-demo` 的「底部渐变蒙层大卡」（2026-10-10 用户口径"课程和实训中心模块
   参考下这个页面上的设计"）──
   照搬 demo 三处：① 封面**满宽铺满整卡**；② 文字（名称 / 简介 / 数据）**叠在封面底部**、
   白字浮在渐变蒙层上（demo 的 `.cap`）；③ 等级徽章改叠**封面左上角**（原先占正文一行）。
   ⚠ 与旧版（封面在上、文字在图下、无底无边）**故意不同**：那是"不用盒子分层"的老口径，
     2026-10-09 用户已裁决首页这类**展示型**页面要加装饰，这里按 demo 再推进一步。
   ⚠ 配色仍走门户 token（demo 的 teal / amber **不搬**）；品牌色在深色蒙层上读不出来
     ⇒ 蒙层里一律白字（`.ph-labshow__exp` 原来那枚主色也要改白，见下）。 */
.ph-labshow__i {
    position: relative;
    display: block;
    min-width: 0;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;                 /* 封面满宽 ⇒ 圆角必须由**卡**来裁 */
    border: 1px solid var(--c-border-soft);
    color: inherit;
    background-color: var(--c-surface-2);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-fast, .14s) var(--ease-out, ease),
                box-shadow var(--dur-fast, .14s) var(--ease-out, ease),
                border-color var(--dur-fast, .14s) var(--ease-out, ease);
}
.ph-labshow__i:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-primary-border);
}

/* 封面：16:9 满宽（无自己的圆角/描边 —— 卡已裁）；hover 轻微放大（图在框内放大，溢出被卡裁掉） */
.ph-labshow__cover {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--c-surface-2);
}
.ph-labshow__cover > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow, .5s) var(--ease-out, ease);
}
.ph-labshow__i:hover .ph-labshow__cover > img { transform: scale(1.03); }

/* 等级徽章：贴封面左上角（与 `.ph-hot__chip` 同一手法：半透明白底 + 品牌字 + 一层背景虚化） */
.ph-labshow__tag {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: var(--radius-sm, 6px);
    background-color: color-mix(in srgb, var(--c-surface) 88%, transparent);
    color: var(--c-primary-text);
    font-size: 12px;
    font-weight: var(--fw-semibold, 600);
    line-height: 1.5;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* 底部蒙层（demo 的 `.cap`）：渐变自底向上淡出。
   ⚠ 上内边距 44px 是给渐变留过渡区的 —— 只写 20px 会让最长的那行字压在渐变端点上，
     看着"字下面突然黑了一块"。 */
.ph-labshow__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 44px 20px 20px;
    background: linear-gradient(to top,
        rgba(10, 18, 30, .88) 0%,
        rgba(10, 18, 30, .62) 48%,
        rgba(10, 18, 30, 0) 100%);
    color: #fff;
}

/* 旧版正文容器的兜底：首页模板已改叠图，**主题模板**（仓库外）若仍在用则不至于没样式 */
.ph-labshow__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2, 8px);
    min-width: 0;
    padding-top: var(--sp-3, 12px);
}

/* ① 名称：蒙层里的"重"（18px —— demo 的 `.cap h3` 就是这个值） */
.ph-labshow__name {
    font-size: 18px;
    font-weight: var(--fw-semibold, 600);
    line-height: 1.4;
    color: #fff;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* ② 简介：**一行省略**（demo 的 `.cap p` 是一句短语；门户的 `descript` 可长达上百字，
   给多行会把封面糊住 ⇒ 只留一行，看不清的在详情页看） */
.ph-labshow__d {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ③ 数据行：白字小字。
   ⚠ **不能再用品牌色**：主色 #0f63eb 压在深色蒙层上几乎读不出来（旧版是图下白底，主色没问题）。 */
.ph-labshow__m {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1, 4px) var(--sp-3, 12px);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    font-variant-numeric: tabular-nums;
}
.ph-labshow__exp,
.ph-labshow__views { display: inline-flex; align-items: center; gap: 4px; }
/* 实验数：蒙层里略提一档亮度（对应旧版"全卡唯一的亮"），但仍是白字系 */
.ph-labshow__exp { color: rgba(255, 255, 255, .95); font-weight: var(--fw-medium, 500); }
/* ⚠ `fill: none; stroke: currentColor` 不能省：sprite 里的符号都是**描边路径**，
   漏掉就会被浏览器按默认 `fill:#000` 填成实心黑块（白字蒙层上尤其刺眼）。 */
.ph-labshow__ico {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ph-labshow__college {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 窄屏：一列（`auto-fit` 的 320px 下限在 375 视口里本来就只排得下一列，这里只是收紧间距）
   ⚠ 蒙层必须跟着收：窄屏封面只有约 180px 高，实测 375 下旧参数会占到 **135px（73%）** ——
     等于把封面糊掉大半，图白给了。收紧内边距 + 收起简介行（信息在详情页看）。 */
@media (max-width: 640px) {
    .ph-labshow { gap: var(--sp-5, 24px); }
    .ph-labshow__cap { padding: 32px 16px 14px; gap: 2px; }
    .ph-labshow__d { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ph-labshow__cover > img,
    .ph-labshow__name,
    .ph-labshow__i { transition: none !important; }
    .ph-labshow__i:hover { transform: none; }
}