/* xuexi-guihua.css · 考前规划（胶片齿孔题头 / 里程碑网格 / 斑马表 / 错位图文 / 进度条 / 调整 / 图底CTA） */

/* H6 胶片齿孔条带题头 */
.xg-hero{
  position:relative;background:
    linear-gradient(rgba(15,33,24,.92),rgba(15,33,24,.92)),
    url("../images/xuexi-1.jpg") center/cover;
  color:var(--cream-100);
  padding-top:calc(var(--header-h) + 60px);padding-bottom:clamp(46px,6vw,76px);
}
.xg-hero::before,.xg-hero::after{
  content:"";position:absolute;left:0;right:0;height:14px;
  background-image:radial-gradient(circle,var(--cream-50) 3.5px,transparent 4px);
  background-size:26px 14px;background-repeat:repeat-x;opacity:.5;
}
.xg-hero::before{top:calc(var(--header-h) + 60px - 22px)}
.xg-hero::after{bottom:0}
.xg-hero-inner{max-width:760px}
.xg-hero h1{color:var(--cream-50);font-size:clamp(28px,4vw,46px);margin:16px 0 14px}
.xg-sub{color:var(--cream-200);font-size:16px;line-height:1.9}

/* D5 里程碑网格 */
.xg-miles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.xg-mile{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 24px;box-shadow:var(--shadow-sm)}
.xg-mile-tag{display:inline-block;background:var(--green-800);color:var(--brass-light);font-size:13px;font-weight:700;letter-spacing:.1em;padding:6px 14px;border-radius:var(--r-xs);margin-bottom:16px}
.xg-mile-alt{background:var(--green-600)}
.xg-mile-last{background:var(--brass)}
.xg-mile h3{font-size:21px;margin-bottom:10px}
.xg-mile>p{font-size:14px;color:var(--ink-soft);line-height:1.8;margin-bottom:16px}
.xg-mile ul{border-top:1px dashed var(--line);padding-top:14px}
.xg-mile li{position:relative;padding-left:20px;font-size:13.5px;color:var(--ink-soft);margin-bottom:6px}
.xg-mile li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--brass);border-radius:50%}

.table-wrap{overflow-x:auto;border-radius:var(--r-sm);box-shadow:var(--shadow-sm)}

/* B1 错位图文 */
.xg-overlap{position:relative;max-width:1100px;margin:0 auto}
.xg-overlap-img{width:60%;box-shadow:var(--shadow-lg)}
.xg-overlap-img img{height:330px;width:100%;object-fit:cover}
.xg-overlap-body{margin:-80px 0 0 32%;background:var(--cream-50);border:1px solid var(--line);border-top:4px solid var(--brass);border-radius:var(--r-md);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-md)}
.xg-overlap-body h2{font-size:clamp(22px,3vw,32px);margin-bottom:14px}
.xg-overlap-body>p{color:var(--ink-soft);margin-bottom:16px}
.xg-ticks li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink-soft);font-size:14.5px}
.xg-ticks li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border:2px solid var(--brass);border-radius:2px}

/* E3 进度条 */
.xg-alloc{max-width:960px;margin:0 auto}
.xg-bars{max-width:680px}
.xg-bar{margin-bottom:20px}
.xg-bar-top{display:flex;justify-content:space-between;font-size:14.5px;font-weight:600;color:var(--ink-soft);margin-bottom:8px}
.xg-track{height:16px;background:var(--cream-200);border:1px solid var(--line);border-radius:var(--r-xs);overflow:hidden}
.xg-track i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--green-600),var(--brass))}
.xg-bar:nth-child(1) .xg-track i{--w:50%}
.xg-bar:nth-child(2) .xg-track i{--w:35%}
.xg-bar:nth-child(3) .xg-track i{--w:15%}

/* 调整建议 */
.xg-adjust{max-width:1100px;margin:0 auto}
.xg-adjust-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px}
.xg-adjust-grid h3{font-size:17px;color:var(--brown-700);margin-bottom:8px;padding-left:14px;border-left:3px solid var(--brass)}
.xg-adjust-grid p{font-size:14.5px;color:var(--ink-soft);line-height:1.8}

/* G4 图底CTA */
.xg-cta{position:relative;padding:clamp(60px,8vw,110px) 0;overflow:hidden}
.xg-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xg-cta-mask{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,33,24,.95),rgba(15,33,24,.78))}
.xg-cta-text{position:relative;z-index:2;max-width:640px}
.xg-cta-text h2{color:var(--cream-50);font-size:clamp(26px,3.6vw,40px);margin-bottom:14px}
.xg-cta-text p{color:var(--cream-200);margin-bottom:26px}
.xg-cta-actions{display:flex;gap:14px;flex-wrap:wrap}

@media (max-width:1024px){
  .xg-miles{grid-template-columns:1fr}
  .xg-adjust-grid{grid-template-columns:1fr}
  .xg-overlap-body{margin:-40px 0 0 0}
  .xg-overlap-img{width:90%}
}

/* ===== 扩充模块 ===== */
.xgx-who{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.xgx-who-card{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-sm);padding:24px;border-top:3px solid var(--green-700)}
.xgx-who-card h3{font-size:16.5px;color:var(--brown-800);margin-bottom:10px}
.xgx-who-card p{font-size:14px;color:var(--ink-soft);line-height:1.85}
.xgx-local{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.xgx-local-img img{width:100%;height:300px;object-fit:cover;border:1px solid var(--line);box-shadow:var(--shadow-md)}
.xgx-local-body h2{font-size:clamp(22px,3vw,32px);margin-bottom:14px}
.xgx-local-body p{color:var(--ink-soft);margin-bottom:14px;line-height:1.9;font-size:15px}
.xgx-mist-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.xgx-mist-row>div{background:rgba(251,247,236,.06);border:1px solid var(--line-dark);border-radius:var(--r-sm);padding:22px}
.xgx-mist h2{color:var(--cream-50)}
.xgx-mist-row h3{color:var(--brass-light);font-size:16px;margin-bottom:10px}
.xgx-mist-row p{color:var(--cream-200);font-size:14px;line-height:1.85}
@media(max-width:1024px){.xgx-who,.xgx-local,.xgx-mist-row{grid-template-columns:1fr}}
.xgx-aud{max-width:920px;margin:0 auto}
.xgx-aud h2{font-size:22px;margin-bottom:16px;color:var(--brown-800)}
.xgx-aud p{font-size:15px;color:var(--ink-soft);line-height:2}
.xgx-related h2{font-size:22px;margin-bottom:18px;color:var(--brown-800)}
.xgx-chips{display:flex;flex-wrap:wrap;gap:10px}
.xgx-chips a{background:var(--cream-50);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:var(--r-xs);padding:9px 16px;font-size:13.5px;color:var(--brown-700)}
.xgx-chips a:hover{background:var(--green-700);color:var(--cream-50)}

/* endnote */
.endnote-wrap{max-width:860px;margin:0 auto}
.endnote-wrap h2{font-size:22px;margin-bottom:14px;color:var(--brown-800)}
.endnote-wrap p{font-size:15px;color:var(--ink-soft);line-height:2}