/* ============================================================================
   内容详情页版面
   ----------------------------------------------------------------------------
   路由 /{栏目Slug}/{InfoId}，见 docs/06-架构设计.md §3.3。

   颜色一律引用 variables.css 的变量，不写字面色值。
   ========================================================================= */

/* ── 页面头（与列表页同款，靠排版立层级） ─────────────────────────────── */

.page-head {
    padding-block: 48px 40px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-light);
}

.page-head__title {
    margin-top: 16px;
    font-size: 32px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.page-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: var(--text-faint);
    font-size: 13px;
}

.page-head__meta-sep {
    color: var(--border);
}

/* ── 面包屑（与列表页同款） ───────────────────────────────────────────── */

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--text-faint);
    font-size: 13px;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    margin-right: 8px;
    color: var(--border);
}

.breadcrumb__item a:hover {
    color: var(--brand);
}

.breadcrumb__item--current {
    color: var(--text-muted);
}

/* ── 正文 ──────────────────────────────────────────────────────────────── */

.detail-layout {
    padding-block: 56px 80px;
}

/* 正文不再限宽 —— 按业务方要求放开，占满容器宽度。
   （原先限 65ch 是常规做法：1920px 屏上一行能排 200 多字，读起来很难受。
   但正文里往往有大图和表格，限宽会把它们挤在中间一条，反而不如放开。
   排版交给内容自己控制。） */
.detail-body {
    /* 白卡片：正文不再直接压在背景雾化上（2026-10-21）。
       透明时富文本里自带白底的块（老帖从 Word 粘来的 <ul style="background:#fff">
       很常见）会变成「一块白浮在彩底上」，跟周围几百行的透明文字割裂得厉害。
       包成卡片后所有块共用一个底色，雾从卡片四周与卡片间的缝隙透出来。 */
    padding: 44px 48px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    font-size: 16px;
    line-height: 1.9;
    color: var(--text);
}

/* 老站正文的标签结构很脏（空 <section> 嵌套、Word 粘贴残留），
   这里只做「让脏结构不至于难看」的兜底，不做清洗 —— 清洗归 Step 15。 */

.detail-body :is(h1, h2, h3, h4, h5, h6) {
    margin-block: 1.6em 0.6em;
    font-size: 1.15em;
    line-height: 1.5;
}

.detail-body p {
    margin-block: 1em;
}

.detail-body img {
    max-width: 100%;
    height: auto;
    margin-block: 1.5em;
    margin-inline: auto;
    border-radius: var(--radius);
}

.detail-body a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.detail-body ul,
.detail-body ol {
    margin-block: 1em;
    padding-left: 1.6em;
    list-style: revert;
}

.detail-body li {
    margin-block: 0.4em;
}

.detail-body blockquote {
    margin-block: 1.5em;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--brand);
    color: var(--text-muted);
}

/* 表格：老站正文里的表格常带 inline 写死的宽高，这里只保证不撑破版心 */
.detail-body table {
    margin-block: 1.5em;
    font-size: 15px;
}

.detail-body :is(td, th) {
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    vertical-align: top;
}

.detail-body th {
    background: var(--bg-subtle);
    font-weight: 600;
}

/* 视频与 iframe 同样不能撑破版心 */
.detail-body :is(video, iframe) {
    max-width: 100%;
    margin-block: 1.5em;
    border-radius: var(--radius);
}

/* ── 一级单页栏目（/contact）───────────────────────────────────────────────
   这类正文只有几行联系方式 + 一张二维码，内容跟文字左边缘对齐才连成一条线；
   沿用长文的图片居中（margin-inline: auto）会把它甩到版心正中，跟上面几行断开。

   ⚠️ 只作用于单页栏目容器 —— 详情页与 /page/{slug} 的长文图片仍然居中。 */
.detail-layout--single .detail-body img {
    display: block;
    margin-inline: 0;
}

/* ── 上下篇 ────────────────────────────────────────────────────────────── */

.neighbors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 56px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--border-light);
}

.neighbor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 24px;
    background: var(--bg-subtle);
    border-radius: var(--radius);
    /* ⚠️ 必须为 0：flex/grid 子项默认 min-width: auto，长标题会把格子撑破 */
    min-width: 0;
    transition: background-color var(--transition);
}

.neighbor:hover {
    background: var(--brand-soft);
}

/* 只有一侧有相邻条目时，另一侧留空占位，保证「下一条」始终在右边 */
.neighbor--empty {
    background: none;
}

.neighbor--empty:hover {
    background: none;
}

.neighbor--next {
    text-align: right;
}

.neighbor__label {
    color: var(--text-faint);
    font-size: 12px;
    letter-spacing: 0.06em;
}

.neighbor__title {
    font-size: 15px;
    line-height: 1.6;
    transition: color var(--transition);
}

.neighbor:hover .neighbor__title {
    color: var(--brand);
}

/* ── 返回入口 ──────────────────────────────────────────────────────────── */

.detail-back {
    margin: 40px 0 0;
    text-align: center;
}

/* ── 响应式 ────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .page-head {
        padding-block: 32px 28px;
    }

    .page-head__title {
        font-size: 24px;
    }

    .detail-layout {
        padding-block: 40px 64px;
    }

    .detail-body {
        padding: 24px 20px;
        font-size: 15px;
        line-height: 1.85;
    }

    /* 手机上两栏太挤，改成上下堆叠 */
    .neighbors {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 40px;
    }

    /* 堆叠后「下一条」不再需要右对齐 */
    .neighbor--next {
        text-align: left;
    }

    /* 堆叠时占位块没有意义，直接不占高度 */
    .neighbor--empty {
        display: none;
    }
}