/* ============================================================
   诗词详情页样式（仅本页面使用，公共样式见 style.css）
   ============================================================ */

/* ---------- 诗词卡片 ---------- */
.poem-detail {
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 36px 40px;
    box-shadow: var(--shadow-soft);
}

/* ---------- 标题与元信息 ---------- */
.poem-title {
    font-family: var(--serif-font);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 3px;
    text-align: center;
    color: var(--heading-color);
}

.poem-meta {
    text-align: center;
    margin: 14px 0 8px;
    font-size: 16px;
    color: var(--text-secondary);
}

.poem-meta a,
.poem-meta span {
    margin: 0 6px;
}

/* ---------- 分类标签 ---------- */
.poem-labels {
    text-align: center;
    margin-bottom: 18px;
}

.poem-labels a {
    display: inline-block;
    margin: 3px 4px;
    padding: 4px 14px;
    font-size: 14px;
    color: var(--accent-color);
    background: var(--bg-color);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
}

.poem-labels a:hover {
    color: var(--accent-deep);
    background: var(--accent-soft);
    border-color: var(--accent-color);
    text-decoration: none;
}

/* ---------- 左侧悬浮目录（锚点导航） ---------- */
html {
    scroll-behavior: smooth;
}

.anchor-nav {
    position: fixed;
    /* 与正文列顶部对齐，滚动时固定在页面左侧留白区 */
    top: 120px;
    left: 10px;
    left: max(10px, calc((100vw - 1200px) / 2 - 152px));
    z-index: 100;
    width: 142px;
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(38, 35, 28, .08);
    overflow: hidden;
}

.anchor-nav.is-hidden {
    display: none;
}

.anchor-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--serif-font);
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--heading-color);
}

.anchor-toggle {
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    font-family: var(--sans-font);
    font-size: 13px;
    color: var(--text-muted);
}

.anchor-toggle:hover {
    color: var(--accent-deep);
}

.anchor-nav-list {
    list-style: none;
    padding: 8px 0;
    max-height: 62vh;
    overflow-y: auto;
}

.anchor-nav-list li a {
    display: block;
    padding: 7px 14px;
    font-size: 14px;
    color: var(--text-secondary);
    border-left: 3px solid transparent;
}

.anchor-nav-list li a:hover,
.anchor-nav-list li a.active {
    color: var(--accent-deep);
    background: var(--accent-soft);
    border-left-color: var(--accent-color);
    text-decoration: none;
}

/* 收起后的小标签 */
.anchor-tab {
    display: none;
    position: fixed;
    top: 120px;
    left: 10px;
    left: max(10px, calc((100vw - 1200px) / 2 - 45px));
    z-index: 100;
    padding: 12px 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(38, 35, 28, .08);
    cursor: pointer;
    writing-mode: vertical-rl;
    letter-spacing: 4px;
    font-family: var(--serif-font);
    font-size: 14px;
    color: var(--text-secondary);
}

.anchor-tab.is-show {
    display: block;
}

.anchor-tab:hover {
    color: var(--accent-deep);
    border-color: var(--accent-color);
}

/* ---------- 内容模块 ---------- */
.poem-module {
    margin-bottom: 30px;
}

.poem-module:last-child {
    margin-bottom: 0;
}

.poem-module h2 {
    font-family: var(--serif-font);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--heading-color);
    padding-left: 14px;
    border-left: 4px solid var(--accent-color);
    margin-bottom: 16px;
}

/* 锚点定位时预留少量留白 */
.poem-module[id] {
    scroll-margin-top: 20px;
}


/* ---------- 诗词正文（居中诗体排版） ---------- */
.poem-body {
    text-align: center;
    font-family: var(--serif-font);
    font-size: 23px;
    line-height: 2.3;
    letter-spacing: 1px;
    color: var(--heading-color);
    margin-top: 6px;
}

/* ---------- 全诗拼音（一字一格，拼音在汉字上方） ---------- */
.pinyin-content {
    color: var(--text-color);
    word-break: break-word;
}

.pinyin-content .py-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 8px;
}

.pinyin-content .py-char {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 1.9em;
    white-space: nowrap;
}

.pinyin-content .py-char .py {
    min-height: 20px;
    font-family: var(--sans-font);
    font-size: 12px;
    line-height: 20px;
    color: var(--text-muted);
}

.pinyin-content .py-char .hz {
    font-family: var(--serif-font);
    font-size: 19px;
    line-height: 1.4;
    color: var(--text-color);
}

/* 解析失败时的兜底行 */
.pinyin-content .py-plain {
    margin-bottom: 6px;
    text-align: center;
    font-size: 16px;
    line-height: 2.1;
}

.pinyin-content img {
    max-width: 100%;
    height: auto;
}

/* ---------- 视频模块（内容为数据库字段，可能是播放器标签或内嵌代码） ---------- */
.poem-video {
    max-width: 860px;
    margin: 0 auto;
}

.poem-video video,
.poem-video iframe,
.poem-video embed {
    display: block;
    width: 100%;
    /* 统一按 16:9 自适应，避免不同来源尺寸不一 */
    aspect-ratio: 16 / 9;
    height: auto;
    max-width: 100%;
    border: 0;
    border-radius: 8px;
    background: #000;
    /* 非 16:9 片源不变形，留黑边 */
    object-fit: contain;
}

/* 站内播放器：关闭 iOS 全屏播放时的默认样式干扰 */
.poem-video .poem-video-player {
    outline: none;
}

/* ---------- 视频封面（默认不加载视频，点击后才注入播放器） ---------- */
.pv-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 0;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 8px;
    /* 古风底：墨色渐变打底 */
    background: linear-gradient(160deg, var(--color-ink-soft) 0%, var(--color-ink) 100%);
    cursor: pointer;
    overflow: hidden;
}

/* 中间极淡的赭石光晕（用不透明度控制，保持色值只走变量） */
.pv-cover::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(circle at 50% 46%, var(--color-crimson) 0%, transparent 62%);
    opacity: .3;
}

.pv-cover:hover::before {
    opacity: .42;
}

/* 有封面图（image 字段）：图片铺满 + 墨色蒙层，保证播放按钮与文案清晰 */
.pv-cover.has-img {
    background-image: var(--pv-cover);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pv-cover.has-img::before {
    background: var(--color-ink);
    opacity: .42;
}

.pv-cover.has-img:hover::before {
    opacity: .32;
}

/* 播放三角 */
.pv-play {
    position: relative;
    z-index: 1;
    display: block;
    width: 66px;
    height: 66px;
    border: 1px solid var(--color-beige);
    border-radius: 50%;
}

.pv-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--color-cream);
}

.pv-tip {
    position: relative;
    z-index: 1;
    font-family: var(--serif-font);
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--color-beige);
}

/* ---------- 通用文本模块（译文 / 背景 / 赏析 / 解读 / 评论） ---------- */
.module-text {
    font-size: 17px;
    line-height: 2.1;
    color: var(--text-color);
}

.module-text p {
    text-indent: 2em;
    margin-bottom: 12px;
}

/* ---------- 作者简介 ---------- */
.poet-info p strong {
    font-family: var(--serif-font);
    font-size: 18px;
    color: var(--heading-color);
}

/* ---------- 响应式：移动端 ---------- */
@media (max-width: 768px) {
    .poem-detail {
        padding: 22px 16px;
    }

    .poem-title {
        font-size: 25px;
        letter-spacing: 2px;
    }

    .poem-body {
        font-size: 20px;
    }

    .poem-module h2 {
        font-size: 19px;
    }

    .module-text {
        font-size: 16px;
    }

    /* 手机端视频：满宽显示，圆角收小 */
    .poem-video video,
    .poem-video iframe,
    .poem-video embed {
        border-radius: 6px;
    }

    .pv-cover {
        border-radius: 6px;
        gap: 10px;
    }

    .pv-play {
        width: 54px;
        height: 54px;
    }

    .pv-play::after {
        border-width: 9px 0 9px 15px;
    }

    .pv-tip {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .pinyin-content .py-char {
        min-width: 1.7em;
    }

    .pinyin-content .py-char .hz {
        font-size: 17px;
    }

    .pinyin-content .py-char .py {
        min-height: 18px;
        font-size: 11px;
        line-height: 18px;
    }

    /* 手机端目录改到右侧 */
    .anchor-nav,
    .anchor-tab {
        left: auto;
        right: 10px;
    }

    .anchor-nav {
        width: 132px;
    }

    .anchor-nav-list li a {
        padding: 6px 12px;
        font-size: 13px;
    }
}