/* ==========================================================================
   国潮专题 · 首屏轮播 + 双层导航（2026-10 视觉统一）
   仅作用于 body.gc-page
   ========================================================================== */
body.gc-page {
    --gc-ink: #203F3A;
    --gc-ink-2: #2c514a;
    --gc-paper: #F6F1E7;
    --gc-gold: #D9BD82;
    --gc-text: #35463F;
    --gc-muted: #6f7d76;
    --gc-red: #A6402F;
    --gc-radius: 14px;
    --gc-ease: cubic-bezier(.22, .61, .36, 1);
    background: var(--gc-paper);
}

/* ---------- 主导航 ---------- */
body.gc-page .navbar {
    height: 64px;
    background: var(--gc-ink) !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.gc-page .navbar::before { display: none; }
body.gc-page .navbar__inner { height: 64px; }
body.gc-page .navbar .brand span,
body.gc-page .navbar .nav__link,
body.gc-page .navbar a {
    color: rgba(247, 242, 232, .9);
    font-size: .92rem;
    letter-spacing: .04em;
}
body.gc-page .navbar .brand span { color: #F7F2E8; letter-spacing: .08em; }
body.gc-page .navbar .nav__link[aria-current="page"] {
    color: var(--gc-gold);
    box-shadow: inset 0 -1px 0 var(--gc-gold);
}
body.gc-page .navbar .btn-login,
body.gc-page .navbar .auth-btn {
    border: 1px solid rgba(217, 189, 130, .5);
    background: transparent;
    color: #F7F2E8;
    border-radius: 9999px;
    padding: .38rem 1rem;
}

/* ---------- 二级分类导航 ---------- */
body.gc-page .gc-subnav {
    background: var(--gc-paper);
    border-bottom: 1px solid rgba(32, 63, 58, .10);
    box-shadow: none;
    position: sticky;
    top: 64px;
    z-index: 40;
}
body.gc-page .gc-subnav__inner {
    display: flex;
    align-items: center;
    gap: .3rem;
    height: 46px;
    overflow-x: auto;
    scrollbar-width: none;
}
body.gc-page .gc-subnav__inner::-webkit-scrollbar { display: none; }
body.gc-page .gc-subnav a {
    flex: none;
    padding: .34rem .85rem;
    border-radius: 9999px;
    font-size: .84rem;
    color: var(--gc-text);
    text-decoration: none;
    border: 0;
    transition: background .25s var(--gc-ease), color .25s var(--gc-ease);
}
body.gc-page .gc-subnav a:hover { background: rgba(32, 63, 58, .07); color: var(--gc-ink); }
body.gc-page .gc-subnav a[aria-current="page"] {
    background: var(--gc-ink);
    color: #F7F2E8;
}

/* ---------- 首屏轮播 ---------- */
body.gc-page .gc-hero {
    display: block;
    width: 100%;
    background: transparent;
    padding: 0;
    min-height: 0;
}
body.gc-page .gc-hero .container { width: 100%; max-width: none; padding: 0; }
/* 轮播高度由 .gch 决定，避免旧版 480px 上限截掉底部过渡。 */
body.gc-page .gc-hero--carousel { max-height: none; }
body.gc-page .gc-hero--carousel::after { content: none; }

.gch {
    position: relative;
    height: clamp(400px, 37vw, 480px);
    overflow: hidden;
    background: transparent;
}
/* 画面与压暗层一起淡出，透出下方同一张宣纸背景；按钮保持清晰。 */
body.gc-page .gch__track,
body.gc-page .gch__scrim {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 116px), rgba(0, 0, 0, .9) calc(100% - 88px), rgba(0, 0, 0, .55) calc(100% - 52px), rgba(0, 0, 0, .12) calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 116px), rgba(0, 0, 0, .9) calc(100% - 88px), rgba(0, 0, 0, .55) calc(100% - 52px), rgba(0, 0, 0, .12) calc(100% - 18px), transparent 100%);
}
.gch__track { position: absolute; inset: 0; }
.gch__slide {
    position: absolute; inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity .72s var(--gc-ease);
    will-change: opacity;
}
.gch__slide.is-active { opacity: 1; z-index: 1; }
.gch__slide img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 42%;
    transform: scale(1.02);
    transition: transform 7s linear;
}
.gch__slide.is-active img { transform: scale(1.06); }

/* 左侧文字区柔和压暗，只压左半边 */
.gch__scrim {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(18, 34, 30, .78) 0px, rgba(18, 34, 30, .46) 58px, rgba(18, 34, 30, 0) 130px),
        linear-gradient(90deg, rgba(24, 48, 43, .86) 0%, rgba(24, 48, 43, .62) 30%, rgba(24, 48, 43, .22) 56%, rgba(24, 48, 43, 0) 74%),
        linear-gradient(0deg, rgba(24, 48, 43, .45) 0%, rgba(24, 48, 43, 0) 30%);
}

/* 文字层：固定不动 */
.gch__copy {
    position: absolute; z-index: 3;
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
    width: min(560px, 46vw);
    padding-right: 1rem;
    color: #F7F2E8;
}
.gch__eyebrow {
    display: inline-block;
    font-size: .68rem; letter-spacing: .34em;
    color: rgba(217, 189, 130, .95);
    margin-bottom: .9rem;
}
.gch__copy h1 {
    font-family: "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: .14em;
    margin: 0 0 .8rem;
    color: #FBF6EA;
    text-shadow: 0 6px 30px rgba(10, 20, 16, .5);
}
.gch__sub {
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: 1rem; letter-spacing: .12em;
    color: var(--gc-gold);
    margin: 0 0 .8rem;
}
.gch__desc {
    font-size: .88rem; line-height: 1.95;
    color: rgba(247, 242, 232, .82);
    margin: 0 0 1.5rem;
    max-width: 32rem;
}
.gch__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.gch__btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .72rem 1.4rem; border-radius: 9999px;
    font-size: .86rem; letter-spacing: .06em; text-decoration: none;
    border: 1px solid transparent;
    transition: transform .25s var(--gc-ease), background .25s var(--gc-ease), color .25s var(--gc-ease);
}
.gch__btn svg { width: .95rem; height: .95rem; }
.gch__btn--gold { background: var(--gc-gold); color: #2b2419; }
.gch__btn--gold:hover { background: #e6cb95; transform: translateY(-1px); }
.gch__btn--ghost {
    border-color: rgba(247, 242, 232, .55);
    color: #F7F2E8;
    background: rgba(255, 255, 255, .04);
}
.gch__btn--ghost:hover { background: rgba(247, 242, 232, .14); border-color: rgba(247, 242, 232, .8); }

/* 左右按钮 */
.gch__nav {
    position: absolute; z-index: 4; top: 50%;
    transform: translateY(-50%);
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 1px solid rgba(247, 242, 232, .28);
    background: rgba(20, 38, 34, .42);
    color: rgba(247, 242, 232, .88);
    display: grid; place-items: center; cursor: pointer;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: background .25s, border-color .25s, transform .25s;
}
.gch__nav svg { width: 1.1rem; height: 1.1rem; }
.gch__nav--prev { left: 1.4rem; }
.gch__nav--next { right: 1.4rem; }
.gch__nav:hover { background: rgba(20, 38, 34, .72); border-color: var(--gc-gold); }
.gch__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.gch__nav--next:hover { transform: translateY(-50%) translateX(2px); }

/* 分页圆点 */
.gch__dots {
    position: absolute; z-index: 4; left: 50%; bottom: 1.1rem;
    transform: translateX(-50%);
    display: flex; gap: .5rem;
    padding: .45rem .65rem; border-radius: 999px;
    background: rgba(32, 63, 58, .65);
}
.gch__dot {
    width: 9px; height: 9px; padding: 0; border-radius: 9999px;
    border: 1px solid rgba(247, 242, 232, .7);
    background: rgba(247, 242, 232, .22); cursor: pointer;
    box-shadow: 0 1px 5px rgba(12, 22, 18, .4);
    transition: width .3s var(--gc-ease), background .25s, border-color .25s;
}
.gch__dot.is-active { width: 22px; background: var(--gc-gold); border-color: var(--gc-gold); }

/* ---------- 下方主题区 ---------- */
body.gc-page .gc-hub { background: var(--gc-paper); padding: clamp(2.8rem, 5vw, 4.4rem) 0 clamp(3rem, 5.4vw, 4.6rem); }
body.gc-page .gc-hub__head { text-align: left; max-width: 46rem; margin: 0 0 2rem; }
body.gc-page .gc-hub__head > span { color: var(--gc-red); letter-spacing: .22em; font-size: .7rem; }
body.gc-page .gc-hub__head h2 {
    font-family: "Noto Serif SC", "Songti SC", serif;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: .1em;
    color: var(--gc-ink); margin: .6rem 0 .7rem;
}
body.gc-page .gc-hub__head p { color: var(--gc-muted); font-size: .9rem; line-height: 1.95; margin: 0; }
body.gc-page .gc-hub__grid { gap: 1rem; }
body.gc-page .gc-hubcard {
    border-radius: var(--gc-radius);
    border: 1px solid rgba(32, 63, 58, .1);
    box-shadow: 0 10px 26px -24px rgba(32, 63, 58, .8);
    background: #fff;
    overflow: hidden;
    transition: transform .3s var(--gc-ease), box-shadow .3s var(--gc-ease);
}
body.gc-page .gc-hubcard:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -28px rgba(32, 63, 58, .75); }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    .gch__copy { left: 8%; width: min(520px, 60vw); }
}
@media (max-width: 760px) {
    .gch { height: 420px; }
    .gch__copy { left: 1.2rem; right: 1.2rem; width: auto; top: 46%; }
    .gch__copy h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
    .gch__desc { font-size: .82rem; line-height: 1.85; }
    .gch__scrim {
        background:
            linear-gradient(180deg, rgba(24, 48, 43, .5) 0%, rgba(24, 48, 43, .72) 42%, rgba(24, 48, 43, .82) 100%);
    }
    /* 手机端以滑动 + 圆点为主，隐藏左右箭头避免压住正文 */
    .gch__nav { display: none; }
    .gch__dots { bottom: .8rem; }
    body.gc-page .gc-subnav { top: 58px; }
    body.gc-page:not(.gc-sub) .gc-subnav { top: 57px; }
    body.gc-page .gc-subnav__inner { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .gch__slide, .gch__slide img, .gch__btn, .gch__nav { transition: none !important; }
    .gch__slide.is-active img { transform: none; }
}

/* ---------- 首页：二级导航透明，浮在轮播图上（位置不变） ---------- */
/* 首页首屏要顶到页面最上沿，去掉子页用来避开固定导航的 body 内边距 */
body.gc-page:not(.gc-sub) { padding-top: 0 !important; }
body.gc-page:not(.gc-sub) .gc-subnav {
    background: transparent;
    border-bottom-color: transparent;
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
body.gc-page:not(.gc-sub) .gc-subnav a { color: rgba(250, 246, 236, .88); }
body.gc-page:not(.gc-sub) .gc-subnav a:hover { background: rgba(250, 246, 236, .16); color: #fff; }
body.gc-page:not(.gc-sub) .gc-subnav a[aria-current="page"] { background: #F6F1E7; color: #1f3a33; }
body.gc-page:not(.gc-sub) .gch { margin-top: 0; height: 526px; }
body.gc-page:not(.gc-sub) .gch__copy { padding-top: 46px; }
/* 滚动后恢复米白实底，保证可读 */
body.gc-page:not(.gc-sub) .gc-subnav.is-solid {
    background: rgba(246, 241, 231, .96);
    border-bottom-color: rgba(32, 63, 58, .10);
    box-shadow: 0 6px 18px -16px rgba(16, 32, 28, .9);
    backdrop-filter: blur(8px);
}
body.gc-page:not(.gc-sub) .gc-subnav.is-solid a { color: #35463F; }
body.gc-page:not(.gc-sub) .gc-subnav.is-solid a:hover { background: rgba(25, 59, 56, .07); color: #1f3a33; }
body.gc-page:not(.gc-sub) .gc-subnav.is-solid a[aria-current="page"] { background: #1f3a33; color: #F6F1E7; }
@media (max-width: 900px) {
    body.gc-page:not(.gc-sub) .gch { height: 466px; }
}

body.gc-page:not(.gc-sub) .gc-subnav::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(16, 30, 26, .52) 0%, rgba(16, 30, 26, .30) 62%, rgba(16, 30, 26, 0) 100%);
    pointer-events: none;
    transition: opacity .35s ease;
}
body.gc-page:not(.gc-sub) .gc-subnav > * { position: relative; z-index: 1; }
body.gc-page:not(.gc-sub) .gc-subnav.is-solid::before { opacity: 0; }
body.gc-page:not(.gc-sub) .gc-subnav a { text-shadow: 0 1px 6px rgba(12, 24, 20, .45); }
body.gc-page:not(.gc-sub) .gc-subnav.is-solid a { text-shadow: none; }

/* 二级导航与主导航无缝衔接：本身全透明，由轮播图顶部的暗角托底 */
body.gc-page:not(.gc-sub) .navbar {
    border-bottom-color: transparent !important;
    background-position: center top !important;   /* 纹样挪到导航上沿，避免压住与二级导航的接缝 */
}
body.gc-page:not(.gc-sub) .gc-subnav {
    position: fixed;
    /* 向上压住 1px，避免高分屏/缩放下出现白色接缝 */
    top: 63px;
    left: 0;
    right: 0;
    background: transparent !important;
    background-image: none !important;
    border-bottom: 0 !important;
    /* 用深色 1px 盖住接缝，避免露出纸面白线 */
    box-shadow: 0 -1px 0 #203F3A !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body.gc-page:not(.gc-sub) .gc-subnav::before { background: none !important; }
body.gc-page:not(.gc-sub) .gc-subnav.is-solid {
    background: rgba(246, 241, 231, .96) !important;
    border-bottom: 1px solid rgba(32, 63, 58, .10) !important;
    box-shadow: 0 6px 18px -16px rgba(16, 32, 28, .9) !important;
}
