/**
 * 平潭历史页（/history/）样式
 *
 * 由 haitan-pages 插件提供，仅在 page-history.php 模板下加载（句柄 haitan-pages-history）。
 * 约定（与 islands.css、culture.css、meishi.css 等保持一致）：
 *   - 所有选择器都挂在 .pt-history-page 下（<main> 上的根命名空间），不覆盖 JustNews 全局样式
 *   - 不复用主题的 .container / .row / .card 等通用类
 *   - 不引入任何第三方 CSS 框架，字体不写死、继承站点 body
 *   - 页面本身零 JS
 *
 * 设计目标：现代海岛历史 —— 白色内容卡 + 浅色背景 + 圆角 + 清晰层级，移动端优先。
 * 主色沿用站点蓝，另加一组暖陶色（clay）做「历史」的辨识度。
 * 刻意不做成历史博物馆网站的厚重风格：不要仿古纹理、不要卷轴、不要大面积深色。
 *
 * 目录：
 *   1. 变量与基础
 *   2. 容器与分区
 *   3. Hero
 *   4. 通用元件（按钮 / 提示 / 空态）
 *   5. 阶段概览
 *   6. 历史时间轴（本页核心）
 *   7. 关键词主题卡片
 *   8. 今天的平潭，从哪里走来？
 *   9. 历史留下的文化
 *  10. 历史发生在这些岛屿上
 *  11. 历史故事（筛选条 + 文章卡）
 *  12. 在平潭，看历史留下的地方
 *  13. 从历史走进今天的平潭
 *  14. 认识平潭
 *  15. 海坛AI
 *  16. 后台正文
 *  17. 响应式
 */

/* ------------------------------------------------------------------ 1. 变量 */

.pt-history-page {
    --hst-blue: #1684d8;
    --hst-blue-deep: #0d6aa8;
    --hst-clay: #b5834f;
    --hst-clay-deep: #8f6136;
    --hst-clay-soft: #fbf5ec;
    --hst-ink: #16324a;
    --hst-text: #46647a;
    --hst-muted: #7d97a9;
    --hst-line: #e4eef6;
    --hst-line-soft: #eef5fa;
    --hst-surface: #ffffff;
    --hst-surface-soft: #f5faff;
    --hst-tag-bg: #edf6fd;
    --hst-tag-ink: #2c6a94;
    --hst-radius-l: 14px;
    --hst-radius-m: 10px;
    --hst-radius-s: 8px;

    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    padding-bottom: 24px;
    color: var(--hst-text);
    background: var(--hst-surface-soft);
}

.pt-history-page,
.pt-history-page *,
.pt-history-page *::before,
.pt-history-page *::after {
    box-sizing: border-box;
}

.pt-history-page img {
    max-width: 100%;
}

/* 长标题、长描述允许在必要时断行，避免撑破栅格 */
.pt-history-page .hst-hero-title,
.pt-history-page .hst-hero-sub,
.pt-history-page .hst-hero-lead,
.pt-history-page .hst-title,
.pt-history-page .hst-desc,
.pt-history-page .hst-stage-title,
.pt-history-page .hst-stage-desc,
.pt-history-page .hst-node-title,
.pt-history-page .hst-node-desc,
.pt-history-page .hst-node-note,
.pt-history-page .hst-topic-name,
.pt-history-page .hst-topic-desc,
.pt-history-page .hst-why-q,
.pt-history-page .hst-why-a,
.pt-history-page .hst-culture-title,
.pt-history-page .hst-culture-desc,
.pt-history-page .hst-island-name,
.pt-history-page .hst-island-desc,
.pt-history-page .hst-story-title,
.pt-history-page .hst-place-name,
.pt-history-page .hst-place-desc,
.pt-history-page .hst-place-addr,
.pt-history-page .hst-travel-title,
.pt-history-page .hst-travel-desc,
.pt-history-page .hst-know-desc,
.pt-history-page .hst-ai-desc {
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- 2. 容器与分区 */

.pt-history-page .hst-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 15px;
}

/*
 * 面包屑并入 Hero 内容容器：与标题左对齐、上下留白收紧，不再生成主题 .wrap 的独立全宽色带。
 * 主题关了面包屑时不加 .hst-hero-with-breadcrumb，Hero 恢复自身默认内边距。
 */
.pt-history-page .hst-hero.hst-hero-with-breadcrumb {
    padding-top: 20px;
}

.pt-history-page .hst-breadcrumb {
    margin: 0 0 16px;
    text-align: left;
}

.pt-history-page .hst-breadcrumb .breadcrumb {
    margin: 0;
}

@media (min-width: 768px) {
    .pt-history-page .hst-hero.hst-hero-with-breadcrumb {
        padding-top: 22px;
    }
}

.pt-history-page .hst-section {
    padding: 30px 0 0;
}

.pt-history-page .hst-section[id] {
    scroll-margin-top: 124px;
}

/* 时间轴节点也是锚点目标（阶段概览 / 关键词卡片会跳过来） */
.pt-history-page .hst-node[id] {
    scroll-margin-top: 124px;
}

.pt-history-page .hst-head {
    margin: 0 0 14px;
}

/* 蓝色竖条标题，与站点 JustNews 的小节标题风格保持一致 */
.pt-history-page .hst-title {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--hst-ink);
}

.pt-history-page .hst-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 17px;
    margin-right: 9px;
    vertical-align: -2px;
    background: var(--hst-blue);
    border-radius: 2px;
}

.pt-history-page .hst-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--hst-muted);
}

.pt-history-page .hst-section-action {
    margin: 16px 0 0;
    text-align: center;
}

/* -------------------------------------------------------------- 3. Hero */

.pt-history-page .hst-hero {
    position: relative;
    padding: 32px 0 28px;
    overflow: hidden;
    background:
        radial-gradient(120% 150% at 8% 0%, var(--hst-clay-soft) 0%, rgba(251, 245, 236, 0) 55%),
        linear-gradient(180deg, #ffffff 0%, var(--hst-surface-soft) 100%);
    border-bottom: 1px solid var(--hst-line-soft);
}

.pt-history-page .hst-hero-inner {
    position: relative;
    z-index: 1;
}

.pt-history-page .hst-hero-kicker {
    margin: 0 0 8px;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--hst-clay-deep);
}

.pt-history-page .hst-hero-title {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hst-ink);
}

.pt-history-page .hst-hero-sub {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--hst-blue-deep);
}

.pt-history-page .hst-hero-lead {
    margin: 0;
    max-width: 660px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--hst-text);
}

.pt-history-page .hst-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
}

/* -------------------------------------------------------- 4. 通用元件 */

.pt-history-page .hst-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.pt-history-page .hst-btn-primary {
    color: #fff;
    background: var(--hst-blue);
}

.pt-history-page .hst-btn-primary:hover {
    color: #fff;
    background: var(--hst-blue-deep);
}

.pt-history-page .hst-btn-ghost {
    color: var(--hst-blue-deep);
    background: #fff;
    border-color: var(--hst-line);
}

.pt-history-page .hst-btn-ghost:hover {
    color: var(--hst-blue-deep);
    background: #f4fbff;
    border-color: #b9dcf5;
}

.pt-history-page .hst-note {
    margin: 16px 0 0;
    padding: 11px 13px;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--hst-muted);
    background: #f7fbfe;
    border: 1px dashed var(--hst-line);
    border-radius: var(--hst-radius-s);
}

.pt-history-page .hst-empty {
    padding: 24px 18px;
    text-align: center;
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
}

.pt-history-page .hst-empty-text {
    margin: 0;
    font-size: 14px;
    color: var(--hst-muted);
}

.pt-history-page .hst-empty-action {
    margin: 14px 0 0;
}

.pt-history-page .hst-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

/* ------------------------------------------------------ 5. 阶段概览 */

.pt-history-page .hst-stage-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 20px;
    text-decoration: none;
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
    box-shadow: 0 2px 10px rgba(22, 50, 74, .04);
    transition: border-color .18s ease, transform .18s ease;
}

.pt-history-page .hst-stage-card:hover {
    border-color: #b9dcf5;
    transform: translateY(-2px);
}

.pt-history-page .hst-stage-no {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--hst-clay);
}

.pt-history-page .hst-stage-span {
    margin: 6px 0 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--hst-muted);
}

.pt-history-page .hst-stage-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--hst-ink);
}

.pt-history-page .hst-stage-desc {
    margin: 0 0 14px;
    flex: 1 1 auto;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--hst-text);
}

.pt-history-page .hst-stage-more {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: var(--hst-blue-deep);
}

/* ------------------------------------------------ 6. 历史时间轴（核心） */

/*
 * 结构：每个节点是一行 grid，三块内容 —— 时期 / 轨道 / 正文。
 * 移动端：轨道 + 正文两列，时期压在正文上方（grid-template-areas 换一下就行）。
 * 桌面端：时期 150px + 轨道 26px + 正文。
 *
 * 竖线画在轨道里（.hst-node-rail::before），向下多出 16px 补上节点间距，
 * 保证整条线是连的；最后一个节点只画到圆点位置，不留尾巴。
 */
.pt-history-page .hst-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt-history-page .hst-node {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas:
        "rail time"
        "rail body";
    padding-bottom: 16px;
}

.pt-history-page .hst-node-time {
    grid-area: time;
    display: flex;
    flex-direction: column;
    padding: 0 0 8px;
}

.pt-history-page .hst-node-period {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hst-clay-deep);
}

.pt-history-page .hst-node-span {
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--hst-muted);
}

.pt-history-page .hst-node-rail {
    grid-area: rail;
    position: relative;
}

.pt-history-page .hst-node-rail::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -16px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--hst-line);
}

.pt-history-page .hst-node:last-child .hst-node-rail::before {
    bottom: auto;
    height: 22px;
}

.pt-history-page .hst-node-dot {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: #fff;
    border: 3px solid var(--hst-blue);
    border-radius: 50%;
}

.pt-history-page .hst-node:first-child .hst-node-dot {
    border-color: var(--hst-clay);
}

.pt-history-page .hst-node-body {
    grid-area: body;
    padding: 15px 16px 17px;
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
    box-shadow: 0 2px 10px rgba(22, 50, 74, .04);
}

.pt-history-page .hst-node-title {
    margin: 0 0 8px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--hst-ink);
}

.pt-history-page .hst-node-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--hst-text);
}

.pt-history-page .hst-node-note {
    margin: 10px 0 0;
    padding: 9px 11px;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--hst-clay-deep);
    background: var(--hst-clay-soft);
    border-left: 3px solid #e0c8a8;
    border-radius: 0 var(--hst-radius-s) var(--hst-radius-s) 0;
}

.pt-history-page .hst-node-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 11px 0 0;
    padding: 0;
    list-style: none;
}

.pt-history-page .hst-node-tags li {
    padding: 2px 9px;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--hst-tag-ink);
    background: var(--hst-tag-bg);
    border-radius: 999px;
}

/* -------------------------------------------------- 7. 关键词主题卡片 */

.pt-history-page .hst-topic-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 20px;
    text-decoration: none;
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
    box-shadow: 0 2px 10px rgba(22, 50, 74, .04);
    transition: border-color .18s ease, transform .18s ease;
}

.pt-history-page .hst-topic-card:hover {
    border-color: #b9dcf5;
    transform: translateY(-2px);
}

/* 当前筛选中的主题：暖陶色描边，和 /culture/ 的「你在这里」同款语义 */
.pt-history-page .hst-topic-active {
    background: var(--hst-clay-soft);
    border-color: #e0c8a8;
}

.pt-history-page .hst-topic-emoji {
    font-size: 26px;
    line-height: 1;
}

.pt-history-page .hst-topic-name {
    margin: 10px 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--hst-ink);
}

.pt-history-page .hst-topic-keywords {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--hst-clay-deep);
}

.pt-history-page .hst-topic-desc {
    margin: 0 0 14px;
    flex: 1 1 auto;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--hst-text);
}

.pt-history-page .hst-topic-more {
    align-self: flex-start;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hst-blue-deep);
    background: var(--hst-tag-bg);
    border-radius: 999px;
}

/* ------------------------------------------ 8. 今天的平潭，从哪里走来？ */

.pt-history-page .hst-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.pt-history-page .hst-chain-item {
    position: relative;
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--hst-blue-deep);
    background: #fff;
    border: 1px solid var(--hst-line);
    border-radius: 999px;
}

.pt-history-page .hst-chain-item::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: -9px;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--hst-muted);
}

.pt-history-page .hst-chain-item:last-child::after {
    content: none;
}

.pt-history-page .hst-why-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 20px;
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
    box-shadow: 0 2px 10px rgba(22, 50, 74, .04);
}

.pt-history-page .hst-why-emoji {
    font-size: 24px;
    line-height: 1;
}

.pt-history-page .hst-why-q {
    margin: 10px 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--hst-ink);
}

.pt-history-page .hst-why-a {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--hst-text);
}

/* -------------------------------------------------- 9. 历史留下的文化 */

.pt-history-page .hst-culture-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
    box-shadow: 0 2px 10px rgba(22, 50, 74, .04);
}

.pt-history-page .hst-culture-emoji {
    font-size: 22px;
    line-height: 1;
}

.pt-history-page .hst-culture-title {
    margin: 10px 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hst-ink);
}

.pt-history-page .hst-culture-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--hst-text);
}

/* ------------------------------------------ 10. 历史发生在这些岛屿上 */

.pt-history-page .hst-island-card {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 20px;
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
    box-shadow: 0 2px 10px rgba(22, 50, 74, .04);
}

.pt-history-page .hst-island-emoji {
    font-size: 24px;
    line-height: 1;
}

.pt-history-page .hst-island-name {
    margin: 10px 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--hst-ink);
}

.pt-history-page .hst-island-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--hst-text);
}

/* ---------------------------------------------- 11. 平潭历史故事 */

.pt-history-page .hst-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.pt-history-page .hst-filter-chip {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--hst-blue-deep);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--hst-line);
    border-radius: 999px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.pt-history-page .hst-filter-chip:hover {
    border-color: #b9dcf5;
}

.pt-history-page .hst-filter-chip.is-active {
    color: #fff;
    background: var(--hst-blue);
    border-color: var(--hst-blue);
}

.pt-history-page .hst-story-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
    box-shadow: 0 2px 10px rgba(22, 50, 74, .04);
    transition: border-color .18s ease, transform .18s ease;
}

.pt-history-page .hst-story-card:hover {
    border-color: #b9dcf5;
    transform: translateY(-2px);
}

.pt-history-page .hst-story-media {
    position: relative;
    display: block;
    padding-top: 62.5%;
    overflow: hidden;
    background: var(--hst-line-soft);
}

.pt-history-page .hst-story-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pt-history-page .hst-story-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: linear-gradient(135deg, #f0e2cf 0%, #dcc4a4 100%);
}

.pt-history-page .hst-story-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 13px 14px 15px;
}

.pt-history-page .hst-story-cat {
    align-self: flex-start;
    margin-bottom: 6px;
    padding: 2px 8px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--hst-tag-ink);
    background: var(--hst-tag-bg);
    border-radius: 999px;
}

.pt-history-page .hst-story-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--hst-ink);
}

.pt-history-page .hst-story-date {
    margin-top: auto;
    padding-top: 10px;
    font-size: 12px;
    color: var(--hst-muted);
}

/* ------------------------------------ 12. 在平潭，看历史留下的地方 */

.pt-history-page .hst-place-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
    box-shadow: 0 2px 10px rgba(22, 50, 74, .04);
    transition: border-color .18s ease, transform .18s ease;
}

.pt-history-page a.hst-place-card:hover {
    border-color: #b9dcf5;
    transform: translateY(-2px);
}

.pt-history-page .hst-place-media {
    position: relative;
    display: block;
    padding-top: 56%;
    overflow: hidden;
    background: var(--hst-line-soft);
}

.pt-history-page .hst-place-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pt-history-page .hst-place-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: linear-gradient(135deg, #dcecf7 0%, #b3d4e9 100%);
}

.pt-history-page .hst-place-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 14px 15px 16px;
}

.pt-history-page .hst-place-name {
    margin: 0 0 8px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--hst-ink);
}

.pt-history-page .hst-place-desc {
    margin: 0 0 10px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--hst-text);
}

.pt-history-page .hst-place-addr {
    margin-top: auto;
    font-size: 12px;
    line-height: 1.6;
    color: var(--hst-muted);
}

/* -------------------------------------- 13. 从历史走进今天的平潭 */

.pt-history-page .hst-travel-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    text-decoration: none;
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
    box-shadow: 0 2px 10px rgba(22, 50, 74, .04);
    transition: border-color .18s ease, transform .18s ease;
}

.pt-history-page .hst-travel-card:hover {
    border-color: #b9dcf5;
    transform: translateY(-2px);
}

.pt-history-page .hst-travel-emoji {
    font-size: 22px;
    line-height: 1;
}

.pt-history-page .hst-travel-title {
    margin: 10px 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hst-ink);
}

.pt-history-page .hst-travel-desc {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--hst-text);
}

.pt-history-page .hst-travel-more {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--hst-blue-deep);
}

/* --------------------------------------------------- 14. 认识平潭 */

.pt-history-page .hst-know-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    text-decoration: none;
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
    box-shadow: 0 2px 10px rgba(22, 50, 74, .04);
    transition: border-color .18s ease, transform .18s ease;
}

.pt-history-page a.hst-know-card:hover {
    border-color: #b9dcf5;
    transform: translateY(-2px);
}

/* 当前页那张不做成链接：用暖陶色描边标出「你在这里」 */
.pt-history-page .hst-know-current {
    background: var(--hst-clay-soft);
    border-color: #e0c8a8;
    box-shadow: none;
}

.pt-history-page .hst-know-no {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--hst-muted);
}

.pt-history-page .hst-know-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--hst-ink);
}

.pt-history-page .hst-know-desc {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--hst-text);
}

.pt-history-page .hst-know-label {
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--hst-blue-deep);
}

/* ------------------------------------------------------ 15. 海坛AI */

.pt-history-page .hst-ai {
    padding: 30px 0 0;
}

.pt-history-page .hst-ai-card {
    padding: 24px 18px;
    text-align: center;
    background:
        radial-gradient(120% 160% at 100% 0%, var(--hst-clay-soft) 0%, rgba(251, 245, 236, 0) 60%),
        #fff;
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
    box-shadow: 0 2px 10px rgba(22, 50, 74, .04);
}

.pt-history-page .hst-ai-kicker {
    margin: 0 0 8px;
    font-size: 12.5px;
    letter-spacing: .08em;
    color: var(--hst-clay-deep);
}

.pt-history-page .hst-ai-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--hst-ink);
}

.pt-history-page .hst-ai-desc {
    margin: 0 auto 14px;
    max-width: 560px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--hst-text);
}

.pt-history-page .hst-ai-questions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.pt-history-page .hst-ai-questions li {
    padding: 6px 13px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--hst-tag-ink);
    background: var(--hst-tag-bg);
    border-radius: 999px;
}

.pt-history-page .hst-ai-action {
    margin: 0;
}

/* --------------------------------------------------- 16. 后台正文 */

.pt-history-page .hst-content {
    padding: 20px 18px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--hst-text);
    background: var(--hst-surface);
    border: 1px solid var(--hst-line);
    border-radius: var(--hst-radius-l);
}

.pt-history-page .hst-content h2,
.pt-history-page .hst-content h3 {
    color: var(--hst-ink);
}

/* ------------------------------------------------------- 17. 响应式 */

@media (max-width: 767px) {
    /* 移动端吸顶栈总高 110px（top-news 60 + header 50） */
    .pt-history-page .hst-section[id],
    .pt-history-page .hst-node[id] {
        scroll-margin-top: 110px;
    }
}

@media (min-width: 560px) {
    .pt-history-page .hst-grid-stages,
    .pt-history-page .hst-grid-topics,
    .pt-history-page .hst-grid-today,
    .pt-history-page .hst-grid-culture,
    .pt-history-page .hst-grid-islands,
    .pt-history-page .hst-grid-stories,
    .pt-history-page .hst-grid-places,
    .pt-history-page .hst-grid-travel,
    .pt-history-page .hst-grid-know {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .pt-history-page .hst-hero {
        padding: 46px 0 40px;
    }

    .pt-history-page .hst-hero-title {
        font-size: 34px;
    }

    .pt-history-page .hst-section,
    .pt-history-page .hst-ai {
        padding: 38px 0 0;
    }

    .pt-history-page .hst-title {
        font-size: 23px;
    }

    /* 时间轴：时期单独成列，正文回到右侧 */
    .pt-history-page .hst-node {
        grid-template-columns: 150px 26px minmax(0, 1fr);
        grid-template-areas: "time rail body";
        padding-bottom: 20px;
    }

    .pt-history-page .hst-node-time {
        align-items: flex-end;
        padding: 14px 4px 0 0;
        text-align: right;
    }

    .pt-history-page .hst-node-rail::before {
        bottom: -20px;
    }

    .pt-history-page .hst-node-body {
        padding: 17px 20px 19px;
    }

    .pt-history-page .hst-node-title {
        font-size: 18px;
    }

    .pt-history-page .hst-node-desc {
        font-size: 14px;
    }

    .pt-history-page .hst-ai-card {
        padding: 32px 26px;
    }

    .pt-history-page .hst-ai-title {
        font-size: 23px;
    }
}

@media (min-width: 900px) {
    .pt-history-page .hst-grid-stages,
    .pt-history-page .hst-grid-topics,
    .pt-history-page .hst-grid-islands,
    .pt-history-page .hst-grid-stories,
    .pt-history-page .hst-grid-travel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .pt-history-page .hst-grid-culture,
    .pt-history-page .hst-grid-know {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}