/* ═══════════════════════════════════════════════════════════════════
   雅思教练 · 学习入口区样式
   ───────────────────────────────────────────────────────────────────
   位置：主页最上方，KPI 带之前。

   视觉定位
   ───────────────────────────────────────────────────────────────────
   这一区要传递的信息是「这里有内容可以学」，不是「这里有数据」。
   所以它用**实心强调色块**做计数与图标，与下方 KPI 带的
   「玻璃卡片 + 图表」形成明确区分 —— 两者是不同的东西，
   视觉上就不该看起来一样。

   配色
   ───────────────────────────────────────────────────────────────────
   全部走 CSS 变量，5 套配色（lime/cyan/violet/amber/rose）与明暗主题自动跟随。
   不用硬编码色值 —— 换了 skin 还要回来改一遍，是必然会漏的债。
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════ 1. 区块外壳 ═══════ */
.le-band {
  position: relative;
  margin-bottom: var(--sp-5);
  padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u));
  border-radius: calc(16 * var(--u));
  /* 顶部一道强调色渐变 —— 与 KPI 带区分开，一眼看出「这一块是内容」 */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--acc) 9%, var(--n-900)) 0%,
      var(--n-900) 62%),
    var(--n-900);
  border: 1px solid var(--glass-line);
  overflow: hidden;
}
.le-band::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: calc(2.5 * var(--u));
  background: linear-gradient(90deg,
    var(--acc),
    color-mix(in srgb, var(--acc) 40%, var(--c-sky)) 55%,
    transparent);
}

/* ═══════ 2. 头部：标题 + 计数 ═══════ */
.le-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-5);
  margin-bottom: calc(16 * var(--u));
}
.le-head-l { min-width: 0; }
.le-eyebrow {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  font-size: var(--fs-2); font-weight: 800;
  letter-spacing: calc(1.2 * var(--u)); text-transform: uppercase;
  color: var(--acc);
  margin-bottom: calc(7 * var(--u));
}
.le-eyebrow::before {
  content: ""; width: calc(16 * var(--u)); height: calc(2 * var(--u));
  border-radius: calc(1 * var(--u));
  background: var(--acc);
}
.le-title {
  margin: 0 0 calc(7 * var(--u));
  font-size: var(--fs-8); font-weight: 800;
  line-height: calc(30 * var(--u));
  letter-spacing: calc(-.5 * var(--u));
  color: var(--ink);
}
.le-lede {
  margin: 0; max-width: var(--measure);
  font-size: var(--fs-5); line-height: calc(21 * var(--u));
  color: var(--ink-2);
}
.le-lede b { color: var(--ink-1); font-weight: 700; }
.le-dim { color: var(--ink-3); font-size: var(--fs-4); }

/* 头部右侧两个计数 */
.le-head-r {
  display: flex; gap: var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--glass-line);
  flex-shrink: 0;
}
.le-m { text-align: right; }
.le-mv {
  font-size: var(--fs-9); font-weight: 800; line-height: calc(34 * var(--u));
  color: var(--ink); letter-spacing: calc(-.6 * var(--u));
  font-variant-numeric: tabular-nums;
}
.le-mv em {
  font-style: normal; font-size: var(--fs-4); font-weight: 700;
  color: var(--acc); margin-left: calc(3 * var(--u));
}
.le-ml {
  font-size: var(--fs-2); color: var(--ink-4);
  margin-top: calc(2 * var(--u));
  max-width: calc(150 * var(--u));
}

/* ═══════ 3. 板块卡片网格 ═══════ */
/* 4 列 → 2 列 → 1 列。
   卡片信息量中等（图标 + 名称 + 说明 + 计数），
   单列太宽会让说明行拉长、双列会挤，所以 4 列是上限。 */
.le-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(10 * var(--u));
}

.le-card {
  position: relative;
  display: flex; align-items: flex-start; gap: calc(11 * var(--u));
  padding: calc(13 * var(--u)) calc(13 * var(--u)) calc(12 * var(--u));
  border-radius: calc(13 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s var(--e-out), background .18s var(--e-out),
              transform .18s var(--e-out);
}
.le-card:hover {
  border-color: color-mix(in srgb, var(--acc) 45%, var(--glass-line-2));
  background: color-mix(in srgb, var(--acc) 6%, var(--n-850));
  transform: translateY(calc(-2 * var(--u)));
}
.le-card:focus-visible {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
}

/* 图标 —— 强调色实心方块，是这张卡最先被看到的东西 */
.le-ic {
  flex: 0 0 auto;
  width: calc(34 * var(--u)); height: calc(34 * var(--u));
  border-radius: calc(10 * var(--u));
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--acc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  color: var(--acc);
}
.le-ic svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }

/* 文字区 */
.le-bd { flex: 1 1 auto; min-width: 0; }
.le-n {
  display: block;
  font-size: var(--fs-6); font-weight: 700;
  color: var(--ink-1); line-height: calc(22 * var(--u));
  letter-spacing: calc(-.2 * var(--u));
}
.le-n em {
  font-style: normal; font-size: var(--fs-2); font-weight: 600;
  color: var(--ink-4); margin-left: calc(6 * var(--u));
  letter-spacing: calc(.2 * var(--u));
}
/* 说明文字 —— 统一两行高度。
   不设固定高的话，八张卡因文字长度不同而参差不齐，
   网格看起来会「毛」。「-webkit-line-clamp」比固定 px 更稳：
   内容超两行时省略号收尾，不会溢出卡片。 */
.le-d {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: calc(5 * var(--u));
  min-height: calc(34 * var(--u));
  font-size: var(--fs-3); line-height: calc(17 * var(--u));
  color: var(--ink-3);
}

/* 计数 —— 右上角实心强调色，是「这块有多少」的直接答案 */
.le-c {
  flex: 0 0 auto;
  display: flex; align-items: baseline; gap: calc(2 * var(--u));
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(999 * var(--u));
  background: var(--acc);
  color: var(--acc-ink);
  align-self: flex-start;
}
.le-c b {
  font-size: var(--fs-6); font-weight: 800;
  line-height: calc(22 * var(--u));
  font-variant-numeric: tabular-nums;
}
.le-c em {
  font-style: normal; font-size: var(--fs-1); font-weight: 700;
  opacity: .78;
}

/* ═══════ 4. 底部行动条 ═══════ */
.le-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  margin-top: calc(14 * var(--u));
  padding-top: calc(13 * var(--u));
  border-top: 1px dashed var(--glass-line);
}
.le-foot-l {
  font-size: var(--fs-4); line-height: calc(19 * var(--u));
  color: var(--ink-3); max-width: var(--measure);
}
.le-foot-l b { color: var(--ink-1); font-weight: 700; }

.le-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  border-radius: calc(999 * var(--u));
  border: 1px solid var(--acc);
  background: transparent;
  color: var(--acc);
  font-family: inherit; font-size: var(--fs-4); font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .18s var(--e-out), color .18s var(--e-out);
}
.le-cta:hover { background: var(--acc); color: var(--acc-ink); }
.le-cta svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

/* ═══════ 5. 响应式 ═══════ */
@media (max-width: 1180px) {
  .le-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .le-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .le-head-r {
    padding-left: 0; padding-top: calc(12 * var(--u));
    border-left: none; border-top: 1px solid var(--glass-line);
  }
  .le-m { text-align: left; }
  .le-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .le-band { padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(15 * var(--u)); }
  .le-title { font-size: var(--fs-7); line-height: calc(26 * var(--u)); }
  .le-lede { font-size: var(--fs-4); line-height: calc(20 * var(--u)); }
  .le-grid { grid-template-columns: minmax(0, 1fr); }
  .le-foot { flex-direction: column; align-items: stretch; gap: calc(11 * var(--u)); }
  .le-cta { justify-content: center; }
}