/* page-resources.css — Resources页专属组件（只在Resources页加载） */

/* PAGE HERO — 独立设计，网格背景+光晕，和其他内页的简版hero不同 */
.page-hero { width:100%; padding:150px 0 64px; background:var(--paper); position:relative; overflow:hidden; }
.page-hero::before {
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:60px 60px; opacity:.5; pointer-events:none;
  mask-image: radial-gradient(ellipse 60% 100% at 50% 0%, black 40%, transparent 90%);
}
.page-hero::after {
  content:''; position:absolute; top:-160px; left:50%; transform:translateX(-50%); width:900px; height:500px;
  background:radial-gradient(ellipse, rgba(255,106,19,.13) 0%, transparent 70%); pointer-events:none;
}
.page-hero-inner { max-width:1200px; margin:0 auto; text-align:center; position:relative; z-index:2; }
.page-hero-tag {
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; color:var(--orange-deep);
  letter-spacing:2.5px; text-transform:uppercase; margin-bottom:20px;
  background:var(--orange-sub); border:1px solid rgba(255,106,19,.25); padding:6px 14px; border-radius:100px;
}
.page-hero-tag-dot { width:7px; height:7px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.page-hero-title { font-size:42px; font-weight:900; line-height:1.16; letter-spacing:-.5px; color:var(--ink); margin-bottom:20px; }
.page-hero-title em { font-style:normal; color:var(--orange); }
.page-hero-desc { font-size:15.5px; color:var(--ink-soft); line-height:1.75; max-width:600px; margin:0 auto; }

/* Stage quick-nav */
.stage-nav { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:36px; position:relative; z-index:2; }
.stage-pill { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:100px; padding:10px 20px 10px 12px; font-size:13px; font-weight:700; color:var(--ink-soft); transition:all .2s; }
.stage-pill:hover { border-color:var(--orange); color:var(--ink); box-shadow:0 10px 24px rgba(20,24,31,.08); transform:translateY(-2px); }
.stage-pill .stage-pill-num { width:22px; height:22px; border-radius:50%; background:var(--orange-sub); color:var(--orange-deep); font-family:var(--font-d); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* RESOURCE TIMELINE — 3篇文章，纵向排列，左侧阶段序号+连接线 */
.resource-timeline { display:flex; flex-direction:column; }
.resource-item { display:flex; gap:28px; padding-bottom:40px; position:relative; scroll-margin-top:90px; }
.resource-item:last-child { padding-bottom:0; }
.resource-stage { flex-shrink:0; width:44px; display:flex; flex-direction:column; align-items:center; position:relative; }
.resource-stage-num { width:44px; height:44px; border-radius:50%; background:var(--paper); border:2px solid var(--orange); color:var(--orange-deep); font-family:var(--font-d); font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; z-index:1; }
.resource-stage-line { width:2px; flex:1; background:var(--line); margin-top:8px; }
.resource-item:last-child .resource-stage-line { display:none; }

.resource-card { flex:1; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:36px 40px; transition:box-shadow .3s, transform .3s, border-color .3s; }
.resource-card:hover { box-shadow:0 10px 24px rgba(20,24,31,.05); border-color:rgba(255,106,19,.5); transform:translateY(-3px); }
/* 有特色图片的文章：图文左右布局，图片优先展示；没配图的文章保持原来纯文字样式不变 */
.resource-card.has-thumb { display:flex; gap:28px; padding:20px; align-items:flex-start; }
.resource-card-thumb { flex:0 0 320px; aspect-ratio:1/1; border-radius:calc(var(--r) - 6px); overflow:hidden; display:block; background:var(--mist); }
.resource-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.resource-card:hover .resource-card-thumb img { transform:scale(1.04); }
.resource-card-body { flex:1; min-width:0; padding:16px 16px 16px 0; }
.resource-card:not(.has-thumb) .resource-card-body { padding:0; }
.resource-stage-label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange-deep); margin-bottom:10px; display:block; }
.resource-title { font-family:var(--font-d); font-size:24px; font-weight:800; line-height:1.24; letter-spacing:-.3px; color:var(--ink); margin-bottom:12px; }
.resource-title a { transition:color .2s; }
.resource-title a:hover { color:var(--orange-deep); }
.resource-dek { font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:18px; max-width:640px; }
.resource-meta { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:12.5px; color:var(--slate); font-weight:600; margin-bottom:24px; padding-bottom:22px; border-bottom:1px dashed var(--line); }
.resource-meta span { display:inline-flex; align-items:center; gap:6px; }
.resource-meta svg { width:14px; height:14px; flex-shrink:0; }
.resource-points { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:22px; }
.resource-points li { font-size:13.5px; color:var(--ink-soft); line-height:1.6; display:flex; gap:10px; align-items:flex-start; }
.resource-points li::before { content:'✓'; color:var(--ink-soft); font-weight:700; flex-shrink:0; }
.resource-takeaway { font-size:13.5px; color:var(--ink-soft); line-height:1.7; background:var(--mist); border-left:3px solid var(--orange); border-radius:0 var(--rs) var(--rs) 0; padding:14px 18px; margin-bottom:26px; }
.resource-takeaway strong { color:var(--ink); font-weight:800; }
.resource-card-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.btn-resource { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--orange-deep); border:1.5px solid var(--orange); border-radius:var(--rs); padding:12px 24px; font-size:13.5px; font-weight:700; transition:all .2s; }
.btn-resource:hover { background:var(--orange); color:#fff; }
.resource-for { font-size:12px; color:var(--slate); font-weight:600; }
.resource-for strong { color:var(--ink-soft); }

/* CLOSING CTA */
.res-cta { text-align:center; max-width:600px; margin:0 auto; }
.res-cta h2 { font-family:var(--font-d); font-size:26px; font-weight:800; color:var(--ink); margin-bottom:14px; line-height:1.3; }
.res-cta p { font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:28px; }
.res-cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

@media(max-width:768px){
  .page-hero{padding:130px 0 48px}
}
@media(max-width:760px){
  .resource-item { gap:16px; }
  .resource-stage { width:34px; }
  .resource-stage-num { width:34px; height:34px; font-size:13px; }
  .resource-card { padding:26px 22px; }
  .resource-title { font-size:20px; }
  /* 图文卡片手机上改成图片在上、文字在下，不然图片会被挤成很窄一条 */
  .resource-card.has-thumb { flex-direction:column; padding:14px; gap:0; }
  .resource-card-thumb { flex-basis:auto; aspect-ratio:16/9; }
  .resource-card-thumb img { }
  .resource-card-body { padding:16px 6px 6px; }
}
@media(max-width:520px){
  .page-hero-title{font-size:31px}
  .stage-nav{flex-direction:column;align-items:stretch}
}