/* ziliao-tiku.css · 题库练习（分栏图文题头 / 色带磁贴 / 环形循环 / 图夹文 / 双栏对比 / 双按钮CTA） */

/* H3 分栏图文题头 */
.tk-hero{
  background:linear-gradient(120deg,#16301F,#0F2118);color:var(--cream-100);
  padding-top:calc(var(--header-h) + 60px);padding-bottom:clamp(46px,6vw,76px);
}
.tk-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.tk-hero-text h1{color:var(--cream-50);font-size:clamp(28px,4vw,46px);margin:16px 0 14px}
.tk-hero-text p{color:var(--cream-200);max-width:520px;margin-bottom:24px}
.tk-hero-img img{width:100%;height:300px;object-fit:cover;border:1px solid var(--line-dark);box-shadow:var(--shadow-lg)}

/* C6 连续色带磁贴 */
.tk-magstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line)}
.tk-mag{
  background:var(--green-800);color:var(--cream-100);padding:26px 20px;
  border-right:1px solid var(--line-dark);background:var(--c,var(--green-800));
}
.tk-mag:last-child{border-right:none}
.tk-mag:nth-child(1){--c:var(--green-800)}
.tk-mag:nth-child(2){--c:var(--green-700)}
.tk-mag:nth-child(3){--c:var(--brown-600)}
.tk-mag:nth-child(4){--c:var(--brass)}
.tk-mag b{display:block;font-family:var(--font-display);font-size:19px;margin-bottom:10px;color:var(--cream-50)}
.tk-mag span{font-size:13.5px;color:var(--cream-200);line-height:1.7;display:block}
.tk-note{font-size:12.5px;color:var(--muted);margin-top:14px;text-align:center}

/* D3 环形循环 */
.tk-loop{position:relative;max-width:820px;margin:0 auto;min-height:380px}
.tk-loop-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150px;height:150px;border-radius:50%;background:var(--brass);
  color:var(--cream-50);display:flex;align-items:center;justify-content:center;
  text-align:center;font-family:var(--font-display);font-size:18px;line-height:1.4;
  border:4px dashed rgba(251,247,236,.4);
}
.tk-loop-step{
  position:absolute;width:180px;background:var(--cream-50);color:var(--ink);
  border-radius:var(--r-sm);padding:16px;box-shadow:var(--shadow-md);
}
.tk-loop-step span{font-family:var(--font-display);color:var(--brass);font-weight:700;font-size:13px}
.tk-loop-step b{display:block;font-size:16px;margin:6px 0 4px;color:var(--brown-800)}
.tk-loop-step p{font-size:12.5px;color:var(--muted)}
.tk-loop-step.s1{left:0;top:0}
.tk-loop-step.s2{right:0;top:0}
.tk-loop-step.s3{left:0;bottom:0}
.tk-loop-step.s4{right:0;bottom:0}

/* B2 图夹文交叠 */
.tk-overlap{position:relative}
.tk-overlap-img{position:relative;z-index:1;width:62%;box-shadow:var(--shadow-lg)}
.tk-overlap-img img{height:340px;width:100%;object-fit:cover}
.tk-overlap-body{
  position:relative;z-index:2;margin:-90px 0 0 30%;
  background:var(--cream-50);border:1px solid var(--line);
  border-top:4px solid var(--brass);border-radius:var(--r-md);
  padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-md);
}
.tk-overlap-body h2{font-size:clamp(22px,3vw,32px);margin-bottom:14px}
.tk-overlap-body>p{color:var(--ink-soft);margin-bottom:16px}
.tk-check{margin-bottom:20px}
.tk-check li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink-soft);font-size:14.5px}
.tk-check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green-600);font-weight:700}

/* E2 双栏对比 */
.tk-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch}
.tk-col{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-md);padding:28px}
.tk-col-alt{background:var(--green-800);color:var(--cream-100)}
.tk-col h3{font-size:20px;margin-bottom:16px}
.tk-col-alt h3{color:var(--brass-light)}
.tk-col li{position:relative;padding-left:22px;margin-bottom:11px;font-size:14.5px;color:var(--ink-soft)}
.tk-col-alt li{color:var(--cream-200)}
.tk-col li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--brass);border-radius:50%}
.tk-vs-badge{
  align-self:center;width:56px;height:56px;border-radius:50%;
  background:var(--brass);color:var(--cream-50);font-family:var(--font-display);font-weight:700;
  display:flex;align-items:center;justify-content:center;border:3px solid var(--cream-100);
  box-shadow:var(--shadow-md);
}

/* 题库服务 */
.tk-svc{max-width:1100px;margin:0 auto}
.tk-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 40px}
.tk-svc-grid h3{font-size:18px;color:var(--brown-700);margin-bottom:8px;padding-left:14px;border-left:3px solid var(--brass)}
.tk-svc-grid p{font-size:14.5px;color:var(--ink-soft);line-height:1.8}

/* G4 双按钮 */
.tk-cta{text-align:center;padding:clamp(56px,7vw,90px) 0}
.tk-cta-inner{max-width:720px;margin:0 auto}
.tk-cta h2{color:var(--cream-50);font-size:clamp(26px,3.4vw,38px);margin-bottom:14px}
.tk-cta p{color:var(--cream-200);margin-bottom:26px}
.tk-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* 响应式 */
@media (max-width:1024px){
  .tk-hero-grid{grid-template-columns:1fr}
  .tk-magstrip{grid-template-columns:repeat(2,1fr)}
  .tk-mag{border-bottom:1px solid var(--line-dark)}
  .tk-vs{grid-template-columns:1fr}
  .tk-vs-badge{margin:0 auto}
  .tk-overlap-body{margin:-40px 0 0 0}
  .tk-overlap-img{width:90%}
}
@media (max-width:640px){
  .tk-magstrip{grid-template-columns:1fr}
  .tk-mag{border-right:none}
  .tk-loop{min-height:0;display:grid;grid-template-columns:1fr;gap:12px}
  .tk-loop-center{position:static;transform:none;margin:0 auto 6px;width:auto;height:auto;border-radius:var(--r-sm);padding:10px}
  .tk-loop-step{position:static;width:auto}
  .tk-svc-grid{grid-template-columns:1fr}
}

/* ===== 扩充模块 ===== */
.tkx-who{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tkx-who-card{background:var(--cream-50);border:1px solid var(--line);border-top:3px solid var(--green-700);border-radius:var(--r-sm);padding:24px}
.tkx-who-card h3{font-size:17px;color:var(--brown-800);margin-bottom:10px}
.tkx-who-card p{font-size:14px;color:var(--ink-soft);line-height:1.85}
.tkx-local{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center}
.tkx-local-img img{width:100%;height:300px;object-fit:cover;box-shadow:var(--shadow-md);border:1px solid var(--line)}
.tkx-local-body h2{font-size:clamp(22px,3vw,32px);margin-bottom:14px}
.tkx-local-body p{color:var(--ink-soft);margin-bottom:14px;line-height:1.9;font-size:15px}
.tkx-related h2{font-size:22px;margin-bottom:18px;color:var(--brown-800)}
.tkx-chips{display:flex;flex-wrap:wrap;gap:10px}
.tkx-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)}
.tkx-chips a:hover{background:var(--green-700);color:var(--cream-50)}
@media(max-width:1024px){.tkx-who{grid-template-columns:1fr}.tkx-local{grid-template-columns:1fr}}
.tkx-myths{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tkx-myth{background:var(--brown-700);color:var(--cream-100);border-radius:var(--r-md);padding:26px;box-shadow:var(--shadow-sm)}
.tkx-myth h3{font-size:16.5px;color:var(--brass-light);margin-bottom:10px}
.tkx-myth p{font-size:14px;color:var(--cream-200);line-height:1.85}
@media(max-width:1024px){.tkx-myths{grid-template-columns:1fr}}
.tkx-how{max-width:860px;margin:0 auto}
.tkx-how li{display:flex;gap:18px;margin-bottom:18px;background:var(--cream-50);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px}
.tkx-how b{flex-shrink:0;font-family:var(--font-display);color:var(--brass);font-size:16px;min-width:120px}
.tkx-how p{color:var(--ink-soft);font-size:14.5px;line-height:1.85}
.tkx-note-inner{max-width:860px;margin:0 auto;text-align:center}
.tkx-note p{color:var(--cream-200);font-size:15.5px;line-height:2;border-left:none;padding:0}

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