/* ==========================================================
   内页统一版式层
   栏目页 / 列表页 / 详情页
   与首页同一套语言：衬线 + 品牌棕 + 细线分隔
   本文件需在各页面自身样式之后引入
========================================================== */

#cmsChannelPage,
#cmsListPage,
#cmsContentDetail {
    --ink: #331d1e;
    --ink-2: #6b5553;
    --ink-3: #9c8683;
    --line: #e8dcd8;
    --soft: #faf7f5;

    width: 100%;

    padding: 0;

    background: #ffffff;

    color: var(--ink);

    font-family: inherit;
}

/* ==========================================================
   页面头部（栏目页）
========================================================== */

#cmsChannelPage .cms-page-head {
    padding: 64px 0 26px;

    border-bottom: 1px solid var(--line);
}

#cmsChannelPage .cms-page-head-en {
    font-size: 11px;

    letter-spacing: .32em;

    text-transform: uppercase;

    color: var(--ink-3);
}

#cmsChannelPage .cms-page-head-title {
    margin-top: 14px;

    font-size: 34px;

    font-weight: 500;

    letter-spacing: .14em;

    line-height: 1.4;

    color: var(--ink);
}

#cmsChannelPage .cms-page-head-desc {
    max-width: 720px;

    margin-top: 16px;

    font-size: 13px;

    line-height: 2;

    color: var(--ink-2);
}

/* ==========================================================
   子栏目入口导航
========================================================== */

#cmsChannelPage .cms-cat-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0 40px;

    margin-top: 44px;

    border-top: 1px solid var(--line);
}

#cmsChannelPage .cms-cat-nav-item {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 24px 0;

    border-bottom: 1px solid var(--line);

    color: var(--ink);

    transition:
        padding-left .22s ease,
        color .22s ease;
}

#cmsChannelPage .cms-cat-nav-no {
    font-size: 12px;

    letter-spacing: .16em;

    color: var(--ink-3);
}

#cmsChannelPage .cms-cat-nav-name {
    font-size: 16px;

    letter-spacing: .1em;
}

#cmsChannelPage .cms-cat-nav-arrow {
    position: relative;

    width: 24px;
    height: 1px;

    margin-left: auto;

    background: currentColor;

    opacity: .3;

    transition:
        width .22s ease,
        opacity .22s ease;
}

#cmsChannelPage .cms-cat-nav-arrow::after {
    content: "";
    position: absolute;

    top: -3px;
    right: 0;

    width: 6px;
    height: 6px;

    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;

    transform: rotate(45deg);
}

#cmsChannelPage .cms-cat-nav-item:hover {
    padding-left: 10px;

    color: #7a5b58;
}

#cmsChannelPage .cms-cat-nav-item:hover .cms-cat-nav-arrow {
    width: 32px;

    opacity: 1;
}

/* 空状态 */

#cmsChannelPage .cms-page-empty {
    margin-top: 44px;
    padding: 80px 0;

    border-top: 1px solid var(--line);

    text-align: center;

    font-size: 13px;

    letter-spacing: .14em;

    color: var(--ink-3);
}

/* ==========================================================
   容器
========================================================== */

#cmsChannelPage .cms-channel-container {
    width: calc(100% - 40px);
    max-width: 1200px;

    margin: 0 auto;
    padding: 0 0 96px;
}

/* ==========================================================
   频道页：顶部推荐
========================================================== */

#cmsChannelPage .cms-channel-featured {
    gap: 24px;

    margin: 40px 0 0;
}

#cmsChannelPage .cms-channel-carousel,
#cmsChannelPage .cms-channel-feature-card {
    height: 420px;

    border-radius: 0;

    background: #f2e9e5;
}

#cmsChannelPage .cms-channel-side-grid {
    gap: 24px;
}

#cmsChannelPage .cms-channel-side-card {
    border-radius: 0;
}

#cmsChannelPage .cms-channel-side-thumb {
    background: #f2e9e5;
}

#cmsChannelPage .cms-channel-feature-thumb,
#cmsChannelPage .cms-channel-side-thumb {
    border-radius: 0;
}

#cmsChannelPage .cms-channel-feature-thumb font,
#cmsChannelPage .cms-channel-side-thumb font,
#cmsChannelPage .cms-channel-first-thumb font,
#cmsListPage .cms-list-thumb font {
    color: transparent;
}

#cmsChannelPage .cms-channel-feature-mask {
    background:
        linear-gradient(0deg,
            rgba(26, 15, 15, .78) 0%,
            rgba(26, 15, 15, .28) 46%,
            rgba(26, 15, 15, 0) 78%);
}

#cmsChannelPage .cms-channel-feature-content {
    padding: 0 40px 36px;

    color: #ffffff;
}

#cmsChannelPage .cms-channel-feature-category {
    display: inline-block;

    padding: 0;

    border: 0;

    border-radius: 0;

    background: transparent;

    color: rgba(255, 255, 255, .72);

    font-size: 11px;

    letter-spacing: .3em;

    text-transform: uppercase;
}

#cmsChannelPage .cms-channel-feature-title {
    margin-top: 14px;

    font-size: 28px;

    font-weight: 500;

    letter-spacing: .1em;

    line-height: 1.5;

    color: #ffffff;
}

#cmsChannelPage .cms-channel-feature-desc {
    max-width: 620px;

    margin-top: 12px;

    font-size: 13px;

    line-height: 1.9;

    color: rgba(255, 255, 255, .8);
}

#cmsChannelPage .cms-channel-side-mask {
    background:
        linear-gradient(0deg,
            rgba(26, 15, 15, .76) 0%,
            rgba(26, 15, 15, .16) 60%,
            rgba(26, 15, 15, 0) 100%);
}

#cmsChannelPage .cms-channel-side-title {
    bottom: 18px;
    left: 20px;
    right: 20px;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: .08em;

    line-height: 1.6;

    color: #ffffff;
}

/* ==========================================================
   频道页：栏目分组
========================================================== */

#cmsChannelPage .cms-channel-sections {
    margin-top: 64px;
}

#cmsChannelPage .cms-channel-section {
    margin-bottom: 56px;
    padding: 0;
}

#cmsChannelPage .cms-channel-section-header {
    align-items: flex-end;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--line);
}

#cmsChannelPage .cms-channel-section-title {
    font-size: 22px;

    font-weight: 500;

    letter-spacing: .12em;

    color: var(--ink);
}

#cmsChannelPage .cms-channel-section-title::before {
    content: none;
}

#cmsChannelPage .cms-channel-more {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--ink-2);

    font-size: 13px;

    letter-spacing: .14em;
}

#cmsChannelPage .cms-channel-more:hover {
    color: var(--ink);
}

#cmsChannelPage .cms-channel-list {
    display: block;

    margin: 0;
    padding: 0;
}

#cmsChannelPage .cms-channel-first {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);

    gap: 32px;

    padding: 28px 0;

    border-bottom: 1px solid var(--line);
}

#cmsChannelPage .cms-channel-first-thumb {
    aspect-ratio: 4 / 3;

    height: auto;

    background: #f2e9e5;
}

#cmsChannelPage .cms-channel-first-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

#cmsChannelPage .cms-channel-first-title {
    font-size: 20px;

    font-weight: 500;

    letter-spacing: .06em;

    line-height: 1.6;
}

#cmsChannelPage .cms-channel-first-meta,
#cmsChannelPage .cms-channel-normal-date {
    font-size: 12px;

    letter-spacing: .12em;

    color: var(--ink-3);
}

#cmsChannelPage .cms-channel-first-desc {
    margin-top: 12px;

    font-size: 13px;

    line-height: 1.9;

    color: var(--ink-2);
}

#cmsChannelPage .cms-channel-normal {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding: 16px 0;

    border-bottom: 1px solid var(--line);
}

#cmsChannelPage .cms-channel-normal-link {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    font-size: 15px;

    letter-spacing: .04em;

    color: var(--ink);

    transition: color .2s ease;
}

#cmsChannelPage .cms-channel-normal-link i {
    font-size: 16px;

    color: var(--ink-3);
}

#cmsChannelPage .cms-channel-normal-link:hover {
    color: #7a5b58;
}

/* ==========================================================
   列表页
========================================================== */

#cmsListPage .cms-list-container {
    width: calc(100% - 40px);
    max-width: 1200px;

    margin: 0 auto;
    padding: 0 0 96px;
}

#cmsListPage .cms-list-banner {
    align-items: flex-start;

    min-height: 0;

    margin: 0;
    padding: 64px 0 26px;

    border-bottom: 1px solid var(--line);

    background: transparent;

    text-align: left;
}

#cmsListPage .cms-list-banner-en {
    margin-bottom: 14px;

    font-size: 11px;

    letter-spacing: .32em;

    text-transform: uppercase;

    color: var(--ink-3);
}

#cmsListPage .cms-list-banner-title {
    font-size: 34px;

    font-weight: 500;

    letter-spacing: .14em;

    line-height: 1.4;

    color: var(--ink);
}

#cmsListPage .cms-list-banner-desc {
    max-width: 720px;

    margin-top: 16px;

    font-size: 13px;

    line-height: 2;

    color: var(--ink-2);
}

#cmsListPage .cms-list-layout {
    gap: 48px;

    margin-top: 42px;
}

#cmsListPage .cms-list-header {
    align-items: flex-end;

    padding-bottom: 18px;

    border-bottom: 1px solid var(--line);
}

#cmsListPage .cms-list-heading {
    font-size: 22px;

    font-weight: 500;

    letter-spacing: .12em;

    color: var(--ink);
}

#cmsListPage .cms-list-order {
    gap: 18px;
}

#cmsListPage .cms-list-order a {
    min-height: 0;

    padding: 0 0 4px;

    border: 0;

    border-radius: 0;

    background: transparent;

    color: var(--ink-3);

    font-size: 13px;

    letter-spacing: .1em;
}

#cmsListPage .cms-list-order a:hover {
    background: transparent;

    color: var(--ink-2);
}

#cmsListPage .cms-list-order a.active {
    background: transparent;

    color: var(--ink);

    border-bottom: 1px solid var(--ink);
}

#cmsListPage .cms-list-item {
    grid-template-columns: 260px minmax(0, 1fr);

    gap: 32px;

    padding: 28px 0;

    border-bottom: 1px solid var(--line);
}

#cmsListPage .cms-list-thumb {
    height: auto;

    aspect-ratio: 4 / 3;

    border-radius: 0;

    background: #f2e9e5;
}

#cmsListPage .cms-list-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

#cmsListPage .cms-list-title a {
    font-size: 20px;

    font-weight: 500;

    letter-spacing: .06em;

    line-height: 1.6;

    color: var(--ink);
}

#cmsListPage .cms-list-title a:hover {
    color: #7a5b58;
}

#cmsListPage .cms-list-meta {
    margin-top: 12px;

    font-size: 12px;

    letter-spacing: .1em;

    color: var(--ink-3);
}

#cmsListPage .cms-list-meta-category {
    color: var(--ink-2);
}

#cmsListPage .cms-list-desc {
    margin-top: 12px;

    font-size: 13px;

    line-height: 1.9;

    color: var(--ink-2);
}

#cmsListPage .cms-list-more {
    padding-top: 38px;
}

#cmsListPage .cms-list-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 168px;
    height: 46px;

    padding: 0 32px;

    border: 1px solid var(--ink);

    border-radius: 0;

    background: transparent;

    color: var(--ink);

    font-size: 14px;

    letter-spacing: .14em;

    transition:
        background-color .2s ease,
        color .2s ease;
}

#cmsListPage .cms-list-more-btn:hover {
    background: var(--ink);

    color: #ffffff;
}

#cmsListPage .cms-list-more-btn.is-disabled {
    border-color: var(--line);

    color: var(--ink-3);
}

/* ==========================================================
   详情页
========================================================== */

#cmsContentDetail .cms-content-container {
    width: calc(100% - 40px);
    max-width: 1200px;

    margin: 0 auto;
    padding: 40px 0 96px;
}

#cmsContentDetail .cms-content-breadcrumb {
    margin-bottom: 34px;

    font-size: 12px;

    letter-spacing: .1em;

    color: var(--ink-3);
}

#cmsContentDetail .cms-content-breadcrumb-list a {
    color: var(--ink-3);
}

#cmsContentDetail .cms-content-breadcrumb-list a:hover {
    color: var(--ink);
}

#cmsContentDetail .cms-content-article-inner {
    padding: 0;
}

#cmsContentDetail .cms-content-title {
    font-size: 36px;

    font-weight: 500;

    letter-spacing: .08em;

    line-height: 1.5;

    color: var(--ink);
}

#cmsContentDetail .cms-content-meta {
    margin-top: 20px;

    font-size: 12px;

    letter-spacing: .1em;

    color: var(--ink-3);
}

#cmsContentDetail .cms-content-divider {
    height: 1px;

    margin: 28px 0 34px;

    background: var(--line);
}

#cmsContentDetail .cms-content-body {
    font-size: 16px;

    line-height: 2.1;

    letter-spacing: .02em;

    color: #3f2d2c;
}

#cmsContentDetail .cms-content-body p {
    margin: 0 0 24px;
}

#cmsContentDetail .cms-content-body h2 {
    margin: 44px 0 20px;

    padding-left: 16px;

    border-left: 3px solid var(--ink);

    font-size: 24px;

    font-weight: 500;

    letter-spacing: .08em;

    line-height: 1.5;

    color: var(--ink);
}

#cmsContentDetail .cms-content-body h3 {
    margin: 34px 0 16px;

    font-size: 19px;

    font-weight: 500;

    letter-spacing: .06em;

    color: var(--ink);
}

#cmsContentDetail .cms-content-body h4 {
    margin: 28px 0 14px;

    font-size: 17px;

    font-weight: 500;

    color: var(--ink);
}

#cmsContentDetail .cms-content-body img {
    border-radius: 0;
}

#cmsContentDetail .cms-content-body blockquote {
    margin: 32px 0;

    padding: 22px 26px;

    border-left: 3px solid var(--ink);

    background: var(--soft);

    color: var(--ink-2);
}

#cmsContentDetail .cms-content-prev-next {
    gap: 0;

    margin-top: 56px;

    border-top: 1px solid var(--line);
}

#cmsContentDetail .cms-content-prev-next-item {
    padding: 22px 0;
}

#cmsContentDetail .cms-content-prev-next-label {
    font-size: 12px;

    letter-spacing: .14em;

    color: var(--ink-3);
}

#cmsContentDetail .cms-content-prev-next-title {
    margin-top: 8px;

    font-size: 15px;

    letter-spacing: .04em;

    color: var(--ink);
}

/* ==========================================================
   单页（关于 / 联系 / 形象 / 招商）标题排版对齐
========================================================== */

.about-page [class*="section-title"],
.contact-page [class*="section-title"],
.profile-page [class*="section-title"],
#hhJoinPage [class*="section-title"] {
    font-weight: 500;

    letter-spacing: .12em;
}

.about-page [class*="section-en"],
.profile-page [class*="section-en"],
.contact-page [class*="section-label"] {
    font-size: 11px;

    letter-spacing: .3em;

    text-transform: uppercase;

    color: #9c8683;
}

/* ==========================================================
   响应式
========================================================== */

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

    #cmsChannelPage .cms-page-head,
    #cmsListPage .cms-list-banner {
        padding: 52px 0 22px;
    }

    #cmsChannelPage .cms-page-head-title,
    #cmsListPage .cms-list-banner-title {
        font-size: 28px;
    }

    #cmsChannelPage .cms-channel-featured {
        grid-template-columns: minmax(0, 1fr);

        gap: 18px;
    }

    #cmsChannelPage .cms-channel-carousel,
    #cmsChannelPage .cms-channel-feature-card {
        height: 340px;
    }

    #cmsChannelPage .cms-channel-side-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #cmsChannelPage .cms-channel-container,
    #cmsListPage .cms-list-container,
    #cmsContentDetail .cms-content-container {
        padding-bottom: 64px;
    }

    #cmsChannelPage .cms-channel-first {
        grid-template-columns: 240px minmax(0, 1fr);

        gap: 24px;
    }

    #cmsListPage .cms-list-item {
        grid-template-columns: 200px minmax(0, 1fr);

        gap: 24px;
    }

    #cmsContentDetail .cms-content-title {
        font-size: 28px;
    }

    #cmsContentDetail .cms-content-layout {
        grid-template-columns: minmax(0, 1fr);
    }

}

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

    #cmsChannelPage .cms-channel-container,
    #cmsListPage .cms-list-container,
    #cmsContentDetail .cms-content-container {
        width: calc(100% - 32px);
    }

    #cmsChannelPage .cms-page-head-title,
    #cmsListPage .cms-list-banner-title {
        font-size: 24px;
    }

    #cmsChannelPage .cms-channel-carousel,
    #cmsChannelPage .cms-channel-feature-card {
        height: 260px;
    }

    #cmsChannelPage .cms-channel-feature-content {
        padding: 0 20px 22px;
    }

    #cmsChannelPage .cms-channel-feature-title {
        font-size: 20px;
    }

    #cmsChannelPage .cms-channel-feature-desc {
        display: none;
    }

    #cmsChannelPage .cms-channel-first {
        grid-template-columns: minmax(0, 1fr);

        gap: 16px;
    }

    #cmsChannelPage .cms-channel-sections {
        margin-top: 44px;
    }

    #cmsChannelPage .cms-channel-section {
        margin-bottom: 40px;
    }

    #cmsListPage .cms-list-item {
        grid-template-columns: 132px minmax(0, 1fr);

        gap: 16px;

        padding: 20px 0;
    }

    #cmsListPage .cms-list-title a {
        font-size: 16px;
    }

    #cmsListPage .cms-list-desc {
        -webkit-line-clamp: 2;
    }

    #cmsContentDetail .cms-content-container {
        padding: 28px 0 56px;
    }

    #cmsContentDetail .cms-content-title {
        font-size: 23px;
    }

    #cmsContentDetail .cms-content-body {
        font-size: 15px;

        line-height: 2;
    }

    #cmsContentDetail .cms-content-body h2 {
        margin-top: 34px;

        font-size: 20px;
    }

}

/* ==========================================================
   子栏目入口响应式
========================================================== */

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

    #cmsChannelPage .cms-cat-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 0 28px;
    }

}

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

    #cmsChannelPage .cms-cat-nav {
        grid-template-columns: minmax(0, 1fr);

        margin-top: 32px;
    }

    #cmsChannelPage .cms-cat-nav-item {
        padding: 18px 0;
    }

    #cmsChannelPage .cms-page-empty {
        margin-top: 32px;
        padding: 56px 0;
    }

}