@charset "utf-8";
/* ==========================================================================
   内页通用 page.css · 页面 Banner / 面包屑 / 通用列表底座
   各页面在此基础上用专属 css 做差异化版式
   ========================================================================== */

/* ---------- 内页 Banner ---------- */
.page-hero{position:relative;padding:150px 0 70px;overflow:hidden;background:var(--brown-900);color:var(--cream-100)}
.page-hero .bg{position:absolute;inset:0;z-index:0}
.page-hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.page-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(33,22,16,.9),rgba(33,22,16,.5))}
.page-hero .inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:28px}
.page-hero .crumbs{color:var(--cream-300);margin-bottom:22px}
.page-hero .crumbs a{color:var(--latte)}
.page-hero .crumbs a:hover{color:var(--pink-300)}
.page-hero h1{color:#fff;max-width:760px}
.page-hero h1 .pink{color:var(--pink-300);font-style:italic}
.page-hero .lead{color:var(--cream-200);max-width:620px;margin-top:18px}
.page-hero .ph-meta{display:flex;gap:30px;margin-top:30px;flex-wrap:wrap}
.page-hero .ph-meta .m{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;color:var(--cream-300)}
.page-hero .ph-meta .m b{display:block;font-family:var(--f-serif);font-size:1.5rem;color:var(--pink-300);margin-top:4px;letter-spacing:0}
/* 装饰河流 */
.page-hero .river{position:absolute;left:0;right:0;bottom:0;height:80px;z-index:1;opacity:.4;pointer-events:none}
.page-hero .river svg{width:100%;height:100%}

/* ---------- 通用区块标题（内页用） ---------- */
.s-title{margin-bottom:14px}
.s-desc{color:var(--brown-600);max-width:640px}

/* ---------- 通用侧栏 ---------- */
.side-card{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);margin-bottom:24px}
.side-card h4{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coffee);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.side-card h4::before{content:"";width:18px;height:2px;background:var(--coffee)}

/* ---------- 通用迷你文章列表（侧栏相关用，可被各页面覆写） ---------- */
.mini-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.mini-list li:last-child{border-bottom:0}
.mini-list .t-img{width:84px;height:60px;border-radius:8px;overflow:hidden;flex:none;background:var(--cream-200)}
.mini-list .t-img img{width:100%;height:100%;object-fit:cover}
.mini-list .t-txt{flex:1;min-width:0}
.mini-list .t-txt h5{font-family:var(--f-sans);font-size:.92rem;font-weight:600;line-height:1.45;color:var(--brown-800);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-list .t-txt h5 a:hover{color:var(--pink-500)}
.mini-list .t-txt time{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);display:block;margin-top:6px}

/* ---------- 通用 CTA 条（内页） ---------- */
.cta-line{background:var(--brown-800);border-radius:var(--radius-lg);padding:38px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta-line h3{color:#fff}
.cta-line p{color:var(--cream-200);margin-top:6px}

@media (max-width:860px){
  .page-hero{padding:120px 0 56px}
}