/* ============================================================
   jiaozuo-guide.html · 对角斜切题头 + B6画框图 + B3棋盘格 +
   产业图文 + E1大数字带 + F1手风琴
   ============================================================ */

/* ---------- 题头：对角斜切（图左文右） ---------- */
.jz-hero{
  background:var(--green-900);
  padding-top:calc(var(--header-h));
}
.jz-hero-grid{
  display:grid;grid-template-columns:1fr 1fr;min-height:420px;align-items:stretch;
}
.jz-hero-media{position:relative;overflow:hidden}
.jz-hero-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:polygon(0 0,92% 0,100% 100%,0 100%);
}
.jz-hero-text{
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 40px 60px 40px;
}
.jz-hero h1{
  font-size:clamp(34px,4.6vw,54px);color:var(--cream-50);margin:16px 0 12px;letter-spacing:.04em;
}
.jz-hero-text > p{color:var(--cream-200);font-size:16px;line-height:1.9;max-width:480px}
.jz-hero .crumb a{color:var(--brass-light)}

/* ---------- B6 画框式边框图 ---------- */
.jz-overview{background:var(--cream-50)}
.overview-frame{
  max-width:900px;margin:0 auto 36px;padding:14px;
  border:2px solid var(--brown-700);outline:1px solid var(--brass);outline-offset:6px;
}
.overview-frame img{width:100%;height:380px;object-fit:cover;display:block}
.overview-text{max-width:820px;margin:0 auto}
.overview-text h2{font-size:clamp(24px,3vw,34px);margin:6px 0 14px}
.overview-text p{color:var(--ink-soft);line-height:1.9;margin-bottom:12px}

/* ---------- B3 棋盘格区县 ---------- */
.jz-county{border-top:1px solid var(--line)}
.checker{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1.5px solid var(--brown-700);
}
.checker-cell{
  padding:26px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:all .25s ease;
}
.checker-a{background:var(--cream-100)}
.checker-b{background:var(--brown-800);color:var(--cream-100)}
.checker-b h3{color:var(--brass-light)}
.checker-b p{color:var(--cream-200)}
.checker-cell:hover{transform:scale(1.02);box-shadow:var(--shadow-md)}
.checker-cell h3{font-size:19px;margin-bottom:6px;color:var(--brown-800)}
.checker-cell p{font-size:13.5px;color:var(--muted)}
.checker-note{margin-top:16px;font-size:13.5px;color:var(--muted)}
.checker-note a{color:var(--green-700);text-decoration:underline}

/* ---------- 产业图文 ---------- */
.jz-industry{background:var(--cream-50)}
.ind-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
.ind-media img{width:100%;height:320px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.ind-text h2{font-size:clamp(22px,2.8vw,30px);margin:6px 0 14px}
.ind-text p{color:var(--ink-soft);line-height:1.9;margin-bottom:12px}

/* ---------- E1 大数字带 ---------- */
.jz-nums{
  background:
    repeating-linear-gradient(90deg,rgba(210,176,120,.06) 0 1px,transparent 1px 60px),
    var(--green-900);
  border-top:4px solid var(--brass);
}
.nums-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.num-cell b{
  display:block;font-family:var(--font-display);font-size:clamp(40px,5vw,60px);
  color:var(--brass-light);line-height:1;
}
.num-cell span{display:block;margin-top:8px;color:var(--cream-200);font-size:14px}

/* ---------- F1 手风琴 ---------- */
.jz-faq{background:var(--cream-50)}
.faq1-wrap{max-width:860px}
.faq1-item{
  background:var(--cream-100);border:1px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:12px;overflow:hidden;
}
.faq1-q{
  width:100%;text-align:left;padding:18px 22px;display:flex;justify-content:space-between;
  align-items:center;font-weight:600;font-size:16px;color:var(--brown-800);
}
.faq1-sign{color:var(--brass);font-size:20px;transition:transform .25s ease}
.faq1-q[aria-expanded="true"] .faq1-sign{transform:rotate(45deg)}
.faq1-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq1-a p{padding:0 22px 18px;color:var(--ink-soft);font-size:14.5px;line-height:1.85}

/* ---------- CTA ---------- */
.jz-cta{border-top:4px solid var(--brass);text-align:center}
.jz-cta-inner{padding:20px 0}
.jz-cta-inner h2{color:var(--cream-50);font-size:clamp(24px,3vw,32px);margin-bottom:8px}
.jz-cta-inner p{color:var(--cream-200);margin-bottom:20px}
.jz-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .jz-hero-grid{grid-template-columns:1fr}
  .jz-hero-media{min-height:240px}
  .jz-hero-media img{clip-path:none;position:static;height:240px}
  .checker{grid-template-columns:1fr 1fr}
  .ind-wrap{grid-template-columns:1fr}
  .nums-row{grid-template-columns:1fr 1fr}
}

/* ---------- 扩充：本地场景卡片 ---------- */
.jz-scene{background:var(--cream-50)}
.jz-scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.jz-scene-card{
  background:var(--cream-100);border:1.5px solid var(--brown-700);
  padding:24px 22px;border-left:4px solid var(--brass);
}
.jz-scene-card h3{font-size:17px;color:var(--brown-800);margin-bottom:8px}
.jz-scene-card p{font-size:14px;color:var(--ink-soft);line-height:1.85}

/* ---------- 扩充：误区 ---------- */
.jz-myth{border-top:1px solid var(--line)}
.jz-myth-body{max-width:820px}
.jz-myth-body p{
  background:var(--cream-50);border:1px solid var(--line);
  padding:18px 22px;margin-bottom:12px;line-height:1.9;font-size:14.5px;color:var(--ink-soft);
}
.jz-myth-body strong{color:var(--brown-800)}

/* ---------- 扩充：相关服务 ---------- */
.jz-relate{background:var(--cream-50)}
.jz-relate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.jz-relate-cell{
  display:block;background:var(--cream-100);border:1.5px solid var(--brown-700);
  padding:22px 20px;transition:all .25s ease;
}
.jz-relate-cell:hover{background:var(--brown-800);transform:translateY(-4px)}
.jz-relate-cell:hover h3{color:var(--brass-light)}
.jz-relate-cell:hover p{color:var(--cream-200)}
.jz-relate-cell h3{font-size:16px;color:var(--brown-800);margin-bottom:6px}
.jz-relate-cell p{font-size:13.5px;color:var(--muted);line-height:1.7}

@media (max-width:900px){
  .jz-scene-grid{grid-template-columns:1fr}
  .jz-relate-grid{grid-template-columns:1fr 1fr}
}

/* ---------- 扩充：说明段 ---------- */
.lc-note,.cl-note,.fy-note,.xx-note,.jz-note,.kt-note,.kd-note,.tx-note{background:var(--cream-50)}
.lc-note .narrow,.cl-note .narrow,.fy-note .narrow,.xx-note .narrow,.jz-note .narrow,.kt-note .narrow,.kd-note .narrow,.tx-note .narrow{max-width:820px}
.note-body p{color:var(--ink-soft);line-height:2;margin-bottom:14px;font-size:15.5px}