/* =====================================================================
   正文里的媒体：音频播放器 + 视频尺寸
   =====================================================================

   这份 CSS 被**两处**加载，保证编辑器里看到的和发布后完全一致：

     · 前台：view/index/common/header.html 里的 <link>
     · 编辑器：admin.js 里设 UEDITOR_CONFIG.iframeCssUrl，
       由 UEditor 注入到编辑区的 iframe 里

   所以这里只用「外壳自身的类名」选择器（.jc-audio* / .jc-article-content video），
   不依赖任何前台页面的上下文；颜色用前台定义的 CSS 变量，
   在编辑器 iframe 里取不到时会自动回退到写死的默认值。

   音频外壳结构（由 audio-player.js 生成）：

       ┌──────────────────────────────────────────┐
       │ ┌──────┐  文件名              0:00/0:03   │
       │ │  ▶   │  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬  │
       │ └──────┘                                  │
       └──────────────────────────────────────────┘

   即：方形外框、播放键（方块）跨两行居左、文件名与时间在第一行、
   进度条紧贴文件名下方并与它左对齐。
   ===================================================================== */

/*
 * 正文视频铺满正文宽度。
 *
 * UEditor 插视频时会写死 width="420" height="280"（见 edui-video-video），
 * 结果视频只有 420px 宽、比正文窄一大截。这里用 CSS 盖掉：
 * 宽度 100%、高度按比例自适应；max-height 兜住竖屏视频，免得一屏放不下。
 */
.jc-article-content video,
.jc-reader-content video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 78vh;
    margin: 1.2em 0;
    border-radius: 10px;
    background: #0b1120;   /* 视频还没加载时是个浅色空白，给深底更自然 */
    object-fit: contain;
}

.jc-audio {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px 14px;
    margin: 1.2em 0;
    padding: 14px 16px;
    background: var(--c-card, #fff);
    border: 1px solid var(--c-border, #e5e9f2);
    border-radius: 4px;                 /* 方形外框，只留一点点圆角 */
    box-shadow: var(--shadow, 0 2px 10px rgba(15, 23, 42, .05));
    transition: border-color .18s, box-shadow .18s;
}
.jc-audio:hover { box-shadow: var(--shadow-hover, 0 6px 20px rgba(15, 23, 42, .1)); }
.jc-audio.is-error { border-color: #fecaca; background: #fff7f7; }

.jc-audio audio { display: none; }

/* 播放键：占满左侧两行，垂直居中 */
.jc-audio-play {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 6px;                 /* 方形按钮，和方框呼应 */
    background: var(--c-primary, #2563eb);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .18s;
}
.jc-audio-play:hover { background: var(--c-primary-dark, #1d4ed8); }
.jc-audio-play:disabled { background: var(--c-text-light, #94a3b8); cursor: not-allowed; }

/* 播放/暂停图标用 CSS 画，不额外请求图片 */
.jc-audio-glyph {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}
.jc-audio.is-playing .jc-audio-glyph {
    width: 15px;
    height: 18px;
    border: 0;
    margin-left: 0;
    background: linear-gradient(to right, #fff 0 5px, transparent 5px 10px, #fff 10px 15px);
}

/* 第一行：文件名（左） + 时间（右，同一格里靠右对齐） */
.jc-audio-label {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    max-width: calc(100% - 110px);      /* 给右侧时间留位置 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    color: var(--c-text, #2b3447);
}
.jc-audio-time {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    font-size: 12.5px;
    color: var(--c-text-sub, #6b7280);
    font-variant-numeric: tabular-nums;
}
.jc-audio-time b { color: var(--c-primary, #2563eb); font-weight: 600; }
.jc-audio-time i { margin: 0 3px; font-style: normal; color: var(--c-text-light, #94a3b8); }

/* 第二行：进度条，与文件名左对齐、铺满右侧 */
.jc-audio-middle {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    display: block;
}
.jc-audio-range {
    display: block;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    /*
     * 已播放的那一段也要跟着变色。
     *
     * range 的轨道没法直接「填色」，所以用一层线性渐变画：
     *   --jc-progress 之前的区间是主题色，之后是灰底。
     * 这个变量由 audio-player.js 在 timeupdate / 拖动时更新。
     */
    --jc-progress: 0%;
    background: linear-gradient(
        to right,
        var(--c-primary, #2563eb) 0 var(--jc-progress),
        var(--c-border, #e5e9f2) var(--jc-progress) 100%
    );
    cursor: pointer;
}
.jc-audio-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background: var(--c-primary, #2563eb);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
    transition: transform .14s;
}
.jc-audio-range:hover::-webkit-slider-thumb { transform: scale(1.15); }
.jc-audio-range::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background: var(--c-primary, #2563eb);
}
.jc-audio-range::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--c-border, #e5e9f2);
}
/* Firefox 有原生的「已播放段」伪元素，比渐变更省事 */
.jc-audio-range::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--c-primary, #2563eb);
}

@media (max-width: 560px) {
    .jc-audio { gap: 8px 12px; padding: 12px; }
    .jc-audio-play { width: 48px; height: 48px; }
    .jc-audio-label { max-width: calc(100% - 96px); font-size: 13px; }
}