/* ==========================================================================
   丝路故事与路线 · 页面视觉优化
   —— 路线区由深绿改为暖米白；路线卡、故事卡统一高度与按钮；
   —— 路线说明改为卡片下方提示条；底部翻页区收紧。
   ========================================================================== */

/* 整页背景：用户指定的国潮山水画，固定 */
body.gc-page.gc-sub {
    background-color: #F6F1E7;
    background-image: url('../guochao/国潮背景.png') !important;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* 顶部标题、面包屑也不再铺米白底，整页只留背景画 */
body.gc-page .gc-phead,
body.gc-page .gc-crumb {
    background: transparent !important;
    border-bottom-color: rgba(38, 61, 56, .08) !important;
}
body.gc-page .gc-phead h1,
body.gc-page #routes .gc-head h2,
body.gc-page #stories .gc-head h2 {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

/* 国潮子页默认隐藏区块标题；本页需要保留路线与故事标题 */
body.gc-sub #routes > .container > .gc-head,
body.gc-sub #stories > .container > .gc-head {
    display: block;
}

/* ---------- 路线区：暖米白底 ---------- */
body.gc-page #routes {
    background: transparent !important;
    color: #35463F;
    padding-top: clamp(1.4rem, 2.6vw, 2.2rem);
    padding-bottom: clamp(1rem, 1.8vw, 1.5rem);
}
#routes .gc-head__no { color: #A9853F; }
#routes .gc-head h2 { color: #193B38; }
#routes .gc-head p { color: #625F54; }

#routes .gc-route__grid {
    align-items: stretch;
    gap: clamp(1rem, 1.8vw, 1.35rem);
}
#routes .gc-route {
    height: 100%;
    padding: 1.25rem 1.3rem 1.15rem;
    background: #FFFCF5;
    border: 1px solid rgba(169, 95, 69, .18);
    border-radius: 14px;
    box-shadow: 0 18px 38px -32px rgba(60, 40, 20, .55);
    gap: .55rem;
}
#routes .gc-route__no {
    color: #B08A47;
    font-size: .78rem;
    letter-spacing: .22em;
}
#routes .gc-route h3 {
    margin: 0;
    color: #193B38;
    font-size: 1.12rem;
    line-height: 1.45;
    letter-spacing: .04em;
}
#routes .gc-route p {
    color: #625F54;
    font-size: .85rem;
    line-height: 1.85;
}
#routes .gc-route .gc-route__meta {
    color: #A9853F;
    font-size: .72rem;
    letter-spacing: .04em;
}
#routes .gc-route__stops { margin-top: .15rem; }
#routes .gc-route__stops li {
    background: #FBF7EE;
    border: 1px solid rgba(169, 95, 69, .2);
    color: #4A5A52;
}
#routes .gc-route__stops a:hover {
    color: #A6402F;
    border-bottom-color: rgba(166, 64, 47, .4);
}
#routes .gc-route__go {
    margin-top: auto;
    min-height: 2.35rem;
    padding: .42rem .9rem;
    color: #193B38;
    background: #F8F3E9;
    border-color: rgba(25, 59, 56, .24);
    border-radius: 9999px;
    font-size: .78rem;
    line-height: 1.45;
}
#routes .gc-route__go:hover {
    color: #FFF9EC;
    background: #193B38;
    border-color: #193B38;
}
#routes .gc-route__go svg { flex: none; }

/* 路线说明：卡片下方的简洁提示条 */
#routes .gc-note {
    margin-top: 1.1rem;
    padding: .8rem 1rem;
    background: rgba(255, 252, 245, .78);
    border: 1px solid rgba(169, 95, 69, .14);
    border-left: 3px solid #D8B474;
    border-radius: .55rem;
    color: #6B6459;
    font-size: .78rem;
    line-height: 1.85;
}

/* ---------- 故事区：连续暖米白，插画背景减弱 ---------- */
body.gc-page #stories {
    background: transparent !important;
    padding-top: clamp(1.8rem, 3.2vw, 2.8rem);
    padding-bottom: clamp(2rem, 3.6vw, 2.8rem);
}
#stories .gc-head { margin-bottom: clamp(1.4rem, 2.4vw, 2rem); }
#stories .gc-head h2 { color: #193B38; }
#stories .gc-head p { color: #625F54; }

#stories .gc-story__grid {
    align-items: stretch;
    gap: clamp(.9rem, 1.5vw, 1.15rem);
}
#stories .gc-story {
    height: 100%;
    background: #FFFCF6;
    border: 1px solid rgba(169, 95, 69, .16);
    border-radius: 13px;
    box-shadow: 0 16px 34px -30px rgba(60, 40, 20, .5);
}
#stories .gc-story__media {
    aspect-ratio: 1 / 1;
    background: #EFE6D4;
}
#stories .gc-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#stories .gc-story__body {
    padding: 1rem 1.05rem 1.1rem;
    gap: .5rem;
}
#stories .gc-story__body h3 {
    color: #193B38;
    font-size: .97rem;
    line-height: 1.55;
}
#stories .gc-story__body p {
    color: #625F54;
    font-size: .81rem;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.9em;
}
#stories .gc-story__btn {
    margin-top: auto;
    align-self: flex-start;
    padding: .4rem .85rem;
    color: #193B38;
    background: #F8F3E9;
    border: 1px solid rgba(25, 59, 56, .2);
    border-radius: 9999px;
    font-size: .78rem;
    line-height: 1.4;
}
#stories .gc-story__btn:hover {
    color: #FFF9EC;
    background: #193B38;
    border-color: #193B38;
}
#stories .gc-story__more {
    display: inline-block;
    margin-top: 1.5rem;
    padding: .45rem .8rem;
    background: rgba(248, 243, 233, .78);
    border-radius: .4rem;
    color: #6B6459;
    font-size: .8rem;
    line-height: 1.9;
}
#stories .gc-story__more a { color: #A6402F; }

/* ---------- 底部翻页：收紧留白，统一按钮 ---------- */
.gc-pager {
    background: transparent;
    padding: .8rem 0 1.2rem;
}
.gc-pager__inner {
    padding-top: .8rem;
    border-top: 1px solid rgba(38, 61, 56, .12);
}
.gc-pager a {
    min-width: 10.5rem;
    justify-content: center;
    padding: .5rem 1rem;
    font-size: .82rem;
}
.gc-pager a.is-home { background: #193B38; border-color: #193B38; color: #F3E6C8; }
.gc-pager a.is-home:hover { background: #2A5147; border-color: #2A5147; color: #fff; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
    #routes .gc-route__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #stories .gc-story__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    #stories .gc-story__grid { grid-template-columns: 1fr; }

}
@media (max-width: 700px) {
    #routes .gc-route__grid { grid-template-columns: 1fr; }
    #routes .gc-route { padding: 1.1rem 1.05rem 1rem; }
    #stories .gc-story__body p { min-height: 0; }
    .gc-pager__inner { gap: .7rem; }
    .gc-pager a { width: 100%; min-width: 0; }
}