/* ==========================================================
       PAGE 单页详情
       独立命名，避免被 YznCMS 默认样式覆盖
    ========================================================== */

    #cmsPageDetail {
        width: 100%;

        padding:
            0 0
            60px;

        box-sizing: border-box;
    }

    #cmsPageDetail,
    #cmsPageDetail * {
        box-sizing: border-box;
    }

    /* ==========================================================
       最大 1200px 居中内容区
    ========================================================== */

    #cmsPageDetail
    .cms-page-container {
        width: 100%;

        max-width: 1200px;

        margin:
            0 auto;
    }

    /* ==========================================================
       面包屑
       单独一整行，不放进正文卡片
    ========================================================== */

    #cmsPageDetail
    .cms-page-breadcrumb {
        width: 100%;

        margin:
            0 0
            18px;

        padding:
            0;

        border: none;

        border-radius: 5px;

        background: #ffffff;
    }

    #cmsPageDetail
    .cms-page-breadcrumb-list {
        display: flex;

        align-items: center;
        flex-wrap: wrap;

        min-height: 46px;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    #cmsPageDetail
    .cms-page-breadcrumb-list li {
        display: flex;

        align-items: center;

        min-width: 0;

        color: #9c8683;

        font-size: 13px;

        line-height: 1.6;
    }

    #cmsPageDetail
    .cms-page-breadcrumb-list
    li + li::before {
        content: "";

        flex:
            0 0 auto;

        width: 6px;
        height: 6px;

        margin:
            0 10px;

        border-top:
            1px solid #d8c8c3;

        border-right:
            1px solid #d8c8c3;

        transform:
            rotate(45deg);
    }

    #cmsPageDetail
    .cms-page-breadcrumb-list a {
        display: inline-flex;

        align-items: center;

        min-width: 0;

        color: #6b5553;

        text-decoration: none;

        transition:
            color .15s ease;
    }

    #cmsPageDetail
    .cms-page-breadcrumb-list a:hover {
        color: #331d1e;
    }

    #cmsPageDetail
    .cms-page-breadcrumb-home i {
        margin-right: 5px;

        font-size: 15px;
    }

    #cmsPageDetail
    .cms-page-breadcrumb-current {
        display: inline-block;

        max-width: 360px;

        overflow: hidden;

        color: #9c8683;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

    /* ==========================================================
       主布局

       最大 1200px 内：
       左侧内容 + 右侧 300px 侧栏
    ========================================================== */

    #cmsPageDetail
    .cms-page-layout {
        display: grid;

        grid-template-columns:
            minmax(
                0,
                1fr
            )
            300px;

        gap: 28px;

        align-items: start;

        width: 100%;
    }

    #cmsPageDetail
    .cms-page-main,
    #cmsPageDetail
    .cms-page-side {
        min-width: 0;
    }

    /* ==========================================================
       内容卡片
    ========================================================== */

    #cmsPageDetail
    .cms-page-paper {
        width: 100%;

        overflow: hidden;

        border: none;

        border-radius: 6px;

        background: #ffffff;

        box-shadow: none;
    }

    #cmsPageDetail
    .cms-page-paper-inner {
        width: 100%;

        padding:
            42px 0
            40px;
    }

    /* ==========================================================
       标题区域
       强制居中
    ========================================================== */

    #cmsPageDetail
    .cms-page-header {
        width: 100%;

        max-width: 100%;

        margin:
            0;

        text-align:
            center !important;
    }

    #cmsPageDetail
    .cms-page-title {
        display: block;

        width: 100%;

        margin:
            0 !important;

        padding:
            0 !important;

        color: #2b191a;

        font-size: 32px;
        font-weight: 600;

        line-height: 1.4;

        letter-spacing: -.3px;

        text-align:
            center !important;

        word-break: break-word;
    }

    /* ==========================================================
       发布时间 / 浏览数
       强制居中
    ========================================================== */

    #cmsPageDetail
    .cms-page-meta {
        display: flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        flex-wrap: wrap;

        gap:
            8px 20px;

        width: 100%;

        margin:
            16px auto 0 !important;

        padding:
            0 !important;

        list-style:
            none !important;

        text-align:
            center !important;
    }

    #cmsPageDetail
    .cms-page-meta li {
        display:
            inline-flex !important;

        align-items:
            center !important;

        float:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        color: #9c8683;

        font-size: 13px;

        line-height: 1.5;
    }

    #cmsPageDetail
    .cms-page-meta
    .post-icons {
        margin-right: 5px;

        color: #9c8683;

        font-size: 15px;
    }

    #cmsPageDetail
    .cms-page-meta-value {
        color: #6b5553;
    }

    #cmsPageDetail
    .cms-page-sr-only {
        position: absolute;

        width: 1px;
        height: 1px;

        margin: -1px;
        padding: 0;

        overflow: hidden;

        clip:
            rect(
                0,
                0,
                0,
                0
            );

        white-space: nowrap;

        border: 0;
    }

    /* ==========================================================
       正文

       阅读区域最大 780px，
       在内容卡片内继续居中。
    ========================================================== */

    #cmsPageDetail
    .cms-page-content {
        width: 100%;

        max-width: 100%;

        margin:
            28px 0 0;

        color: #4a3534;

        font-size: 16px;

        line-height: 1.95;

        word-break: break-word;

        overflow-wrap: anywhere;
    }

    #cmsPageDetail
    .cms-page-content p {
        margin:
            0 0 20px;
    }

    #cmsPageDetail
    .cms-page-content h1,
    #cmsPageDetail
    .cms-page-content h2,
    #cmsPageDetail
    .cms-page-content h3,
    #cmsPageDetail
    .cms-page-content h4,
    #cmsPageDetail
    .cms-page-content h5,
    #cmsPageDetail
    .cms-page-content h6 {
        margin:
            32px 0
            16px;

        color: #2b191a;

        font-weight: 600;

        line-height: 1.45;
    }

    #cmsPageDetail
    .cms-page-content h2 {
        font-size: 24px;
    }

    #cmsPageDetail
    .cms-page-content h3 {
        font-size: 20px;
    }

    #cmsPageDetail
    .cms-page-content h4 {
        font-size: 18px;
    }

    #cmsPageDetail
    .cms-page-content a {
        color: #331d1e;

        text-decoration: none;
    }

    #cmsPageDetail
    .cms-page-content img {
        display: block;

        max-width:
            100% !important;

        height:
            auto !important;

        margin:
            24px auto;
    }

    #cmsPageDetail
    .cms-page-content video {
        display: block;

        width: 100%;

        max-width: 100%;

        height: auto;

        margin:
            24px auto;
    }

    #cmsPageDetail
    .cms-page-content iframe {
        display: block;

        max-width: 100%;

        margin:
            24px auto;
    }

    #cmsPageDetail
    .cms-page-content blockquote {
        margin:
            24px 0;

        padding:
            14px 18px;

        border-left:
            3px solid #e3d6d4;

        background: #faf7f5;

        color: #6b5553;
    }

    #cmsPageDetail
    .cms-page-content ul,
    #cmsPageDetail
    .cms-page-content ol {
        margin:
            18px 0;

        padding-left: 24px;
    }

    #cmsPageDetail
    .cms-page-content li {
        margin:
            6px 0;
    }

    #cmsPageDetail
    .cms-page-content table {
        width:
            100% !important;

        max-width: 100%;

        margin:
            22px 0;

        border-collapse:
            collapse;
    }

    #cmsPageDetail
    .cms-page-content th,
    #cmsPageDetail
    .cms-page-content td {
        padding:
            10px 12px;

        border:
            1px solid #e8dcd8;
    }

    #cmsPageDetail
    .cms-page-content pre {
        max-width: 100%;

        margin:
            22px 0;

        padding:
            16px;

        overflow-x: auto;

        border-radius: 4px;

        background: #2b191a;

        color: #e8dcd8;

        white-space: pre;
    }

    #cmsPageDetail
    .cms-page-content > * {
        max-width: 100%;
    }

    /* ==========================================================
       内容分割线
    ========================================================== */

    #cmsPageDetail
    .cms-page-divider {
        width: 100%;
        max-width: 100%;
        height: 1px;
        margin: 28px 0 0;
        background: #eef1f5;
    }

    /* ==========================================================
       <= 1200
    ========================================================== */

    @media screen and (max-width: 1200px) {

        #cmsPageDetail {
            padding-left: 15px;
            padding-right: 15px;
        }

        #cmsPageDetail
        .cms-page-layout {
            grid-template-columns:
                minmax(
                    0,
                    1fr
                )
                280px;

            gap: 22px;
        }

    }

    /* ==========================================================
       <= 992
       单列：正文在上，侧栏在底部
    ========================================================== */

    @media screen and (max-width: 992px) {

        #cmsPageDetail {
            padding:
                0 15px
                46px;
        }

        #cmsPageDetail
        .cms-page-layout {
            grid-template-columns:
                minmax(
                    0,
                    1fr
                );

            gap: 22px;
        }

        #cmsPageDetail
        .cms-page-paper-inner {
            padding:
                34px 0
                32px;
        }

        #cmsPageDetail
        .cms-page-title {
            font-size: 28px;
        }

    }

    /* ==========================================================
       <= 768
    ========================================================== */

    @media screen and (max-width: 768px) {

        #cmsPageDetail {
            padding:
                0 15px
                38px;
        }

        #cmsPageDetail
        .cms-page-breadcrumb {
            margin-bottom: 12px;

            padding:
                0;

            border-radius: 4px;
        }

        #cmsPageDetail
        .cms-page-breadcrumb-list {
            min-height: 42px;
        }

        #cmsPageDetail
        .cms-page-breadcrumb-current {
            max-width: 160px;
        }

        #cmsPageDetail
        .cms-page-paper {
            border-radius: 4px;
        }

        #cmsPageDetail
        .cms-page-paper-inner {
            padding:
                26px 0;
        }

        #cmsPageDetail
        .cms-page-title {
            font-size: 24px;
        }

        #cmsPageDetail
        .cms-page-meta {
            gap:
                7px 14px;
        }

        #cmsPageDetail
        .cms-page-content {
            margin-top: 28px;

            font-size: 15px;

            line-height: 1.9;
        }

        #cmsPageDetail
        .cms-page-content h2 {
            font-size: 21px;
        }

        #cmsPageDetail
        .cms-page-content h3 {
            font-size: 19px;
        }
}

    /* ==========================================================
       <= 480
    ========================================================== */

    @media screen and (max-width: 480px) {

        #cmsPageDetail {
            padding:
                0 15px
                34px;
        }

        #cmsPageDetail
        .cms-page-breadcrumb {
            padding:
                0;
        }

        #cmsPageDetail
        .cms-page-breadcrumb-list {
            font-size: 12px;
        }

        #cmsPageDetail
        .cms-page-breadcrumb-list
        li + li::before {
            margin:
                0 7px;
        }

        #cmsPageDetail
        .cms-page-breadcrumb-current {
            max-width: 110px;
        }

        #cmsPageDetail
        .cms-page-paper-inner {
            padding:
                22px 0;
        }

        #cmsPageDetail
        .cms-page-title {
            font-size: 22px;
        }
}