/* ═══════════════════════════════════════════════════════════════════
   雅思教练 · 题型解码器布局
   ───────────────────────────────────────────────────────────────────
   之前的问题（用户截图）：
   1600px 宽屏下主区 1458px，内容只占 570px，**右侧空 888px（61%）**。
   根因是 `lay-read` 的 `max-width: var(--measure)`（38em）——
   那是给「方法论讲解」这类**单列正文**设计的，
   但题型解码器是**索引 + 详情**结构，用单列锁宽必然浪费。

   改法：左栏索引（sticky）+ 右栏详情（填满）
     · 宽屏 ≥1180px：两栏，左 260 / 右 1fr
     · 平板 760–1180px：两栏，左 210 / 右 1fr
     · 手机 <760px：单栏，左栏变成横向滚动条

   额外收益：11 个题型竖着列要滚很久，
   改成左栏后**一眼看全部**，右栏专注当前题型。
   ═══════════════════════════════════════════════════════════════════ */

.tk-layout {
  display: grid;
  grid-template-columns: calc(260 * var(--u)) minmax(0, 1fr);
  gap: calc(14 * var(--u));
  align-items: start;
}

/* ═══════ 左栏：题型索引 ═══════ */
.tk-nav {
  position: sticky;
  top: calc(62 * var(--u));
  max-height: calc(100vh - calc(84 * var(--u)));
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: calc(3 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}

.tk-nav-sec {
  display: flex; align-items: baseline; gap: calc(7 * var(--u));
  padding: calc(11 * var(--u)) calc(4 * var(--u)) calc(5 * var(--u));
  margin-top: calc(5 * var(--u));
}
.tk-nav-sec:first-child { margin-top: 0; }
.tk-nav-sec-t {
  font-size: var(--fs-2); font-weight: 800; color: var(--ink-4);
  letter-spacing: calc(.4 * var(--u));
  text-transform: uppercase;
}
.tk-nav-sec-n {
  font-size: var(--fs-1); color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.tk-nav-b {
  display: flex; align-items: center; gap: calc(7 * var(--u));
  width: 100%;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(9 * var(--u));
  border: 1px solid transparent;
  background: none;
  color: var(--ink-2);
  font-size: var(--fs-3); font-weight: 600; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: background .16s var(--e-out), border-color .16s var(--e-out), color .16s var(--e-out);
}
.tk-nav-b:hover { background: var(--hover); color: var(--ink-1); }
.tk-nav-b.on {
  background: color-mix(in srgb, var(--acc) 14%, transparent);
  border-color: var(--acc);
  color: var(--ink-1);
}
.tk-nav-b-n { flex: 1 1 auto; min-width: 0; }
.tk-nav-b-c {
  flex: 0 0 auto;
  padding: calc(0 * var(--u)) calc(6 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--n-750);
  color: var(--ink-4);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
}
.tk-nav-b.on .tk-nav-b-c {
  background: color-mix(in srgb, var(--acc) 24%, transparent);
  color: var(--acc);
}
.tk-nav-b-tag {
  flex: 0 0 auto;
  padding: calc(0 * var(--u)) calc(5 * var(--u));
  border-radius: calc(4 * var(--u));
  border: 1px solid var(--glass-line-2);
  color: var(--ink-4);
  font-size: var(--fs-1);
}

/* ═══════ 右栏：详情 ═══════ */
.tk-main { min-width: 0; }

.tk-crumb {
  display: flex; align-items: baseline; gap: calc(9 * var(--u));
  margin-bottom: calc(10 * var(--u));
  flex-wrap: wrap;
}
.tk-crumb-g {
  font-size: var(--fs-2); font-weight: 700; color: var(--ink-4);
  letter-spacing: calc(.3 * var(--u));
}
.tk-crumb-s {
  font-size: var(--fs-5); font-weight: 800; color: var(--ink-1);
  letter-spacing: calc(-.2 * var(--u));
}
.tk-crumb-g::after {
  content: "›";
  margin-left: calc(9 * var(--u));
  color: var(--ink-4);
  font-weight: 400;
}

/* 右栏里的卡片 —— 宽屏下让内容分两列，充分利用横向空间 */
.tk-main .g-card {
  padding: calc(15 * var(--u)) calc(17 * var(--u));
}
.tk-main .g-card h3 {
  font-size: var(--fs-6);
  margin-bottom: calc(11 * var(--u));
}
.tk-main .g-block {
  margin-bottom: calc(10 * var(--u));
}

/* ═══════ 响应式 ═══════ */
@media (max-width: 1180px) {
  .tk-layout {
    grid-template-columns: calc(210 * var(--u)) minmax(0, 1fr);
    gap: calc(11 * var(--u));
  }
  .tk-nav-b { padding: calc(7 * var(--u)) calc(9 * var(--u)); }
}

@media (max-width: 860px) {
  .tk-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(12 * var(--u));
  }
  /* 左栏变成横向滚动条 —— 手机上纵向一列会占掉半屏 */
  .tk-nav {
    position: static;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    gap: calc(7 * var(--u));
    padding: 0 0 calc(6 * var(--u));
    border-bottom: 1px solid var(--glass-line);
  }
  .tk-nav-sec {
    flex-direction: column; align-items: flex-start; gap: calc(3 * var(--u));
    padding: calc(6 * var(--u)) calc(9 * var(--u)) calc(4 * var(--u));
    margin-top: 0;
    border-radius: calc(8 * var(--u));
    background: var(--n-850);
    border: 1px solid var(--glass-line);
    flex: 0 0 auto;
  }
  .tk-nav-sec-n { display: none; }
  .tk-nav-b {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    border: 1px solid var(--glass-line);
    background: var(--n-850);
  }
}