/* ziliao-jiaocai.css · 官方教材（斜切色带题头 / 双栏说明 / 画框 / 编号清单 / 标签云 / 语录 / 横幅CTA） */

/* H2 斜切色带题头 */
.jc-hero{
  background:var(--green-900);color:var(--cream-100);
  padding-top:calc(var(--header-h) + 60px);padding-bottom:clamp(46px,6vw,76px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),0 100%);
}
.jc-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center}
.jc-band h1{color:var(--cream-50);font-size:clamp(26px,3.6vw,44px);margin:16px 0 14px}
.jc-band p{color:var(--cream-200);max-width:520px;line-height:1.9}
.jc-hero-img img{width:100%;height:280px;object-fit:cover;box-shadow:var(--shadow-lg)}

.jc-narrow{max-width:960px;margin:0 auto}
.jc-lead-p{font-size:16px;color:var(--ink-soft);line-height:2;margin-bottom:28px}
.jc-twocol{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.jc-twocol h3{font-size:18px;color:var(--green-700);margin-bottom:8px}
.jc-twocol p{font-size:14.5px;color:var(--ink-soft);line-height:1.85}

/* 画框 */
.jc-framegrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center}
.jc-frame{margin:0}
.jc-frame img{width:100%;height:300px;object-fit:cover;border:8px solid var(--cream-200);outline:1px solid var(--line);box-shadow:var(--shadow-md)}
.jc-frame figcaption{text-align:center;font-size:12.5px;color:var(--muted);margin-top:10px}
.jc-framebody h2{font-size:clamp(22px,3vw,32px);margin-bottom:14px}
.jc-framebody>p{color:var(--ink-soft);margin-bottom:16px}
.jc-ticks li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink-soft);font-size:14.5px}
.jc-ticks li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;border:2px solid var(--brass);border-radius:2px}

/* C1 编号清单 */
.jc-order{max-width:820px;margin:0 auto;display:grid;gap:18px}
.jc-order li{display:flex;gap:20px;background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 24px;align-items:flex-start}
.jc-order>li>span{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--brass);line-height:1;flex-shrink:0}
.jc-order h3{font-size:18px;margin-bottom:6px}
.jc-order p{font-size:14.5px;color:var(--ink-soft)}

/* C3 标签云 */
.jc-cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:820px;margin:0 auto}
.jc-tag{
  padding:10px 20px;border:1.5px solid var(--line);border-radius:30px;background:var(--cream-50);
  font-size:14px;color:var(--ink-soft);transition:all .2s ease;
}
.jc-tag:hover{border-color:var(--brass);color:var(--brown-700);background:var(--cream-100);transform:translateY(-2px)}

/* E4 语录 */
.jc-quote{max-width:800px;margin:0 auto;text-align:center;position:relative}
.jc-quote-mark{font-family:var(--font-display);font-size:80px;color:var(--brass);line-height:.6;opacity:.5}
.jc-quote blockquote{font-family:var(--font-display);font-size:clamp(19px,2.4vw,26px);color:var(--brown-700);line-height:1.7;margin:6px 0 16px}
.jc-quote-by{font-size:13.5px;color:var(--muted)}

/* G1 横幅 */
.jc-banner{padding:clamp(50px,6vw,80px) 0}
.jc-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.jc-banner h2{color:var(--cream-50);font-size:clamp(24px,3.2vw,36px);margin-bottom:10px}
.jc-banner p{color:var(--cream-200);max-width:560px}

/* 响应式 */
@media (max-width:1024px){
  .jc-hero-grid,.jc-framegrid,.jc-twocol{grid-template-columns:1fr}
  .jc-hero{clip-path:none;padding-bottom:60px}
}

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

/* 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}