/* ============================================================
   Hanzi Teaching Child — 汉字卡专用样式
   仅作用于 .hanzi-card，避免与父主题冲突。
   声调配色约定：1红 2橙 3绿 4蓝 轻声灰（与演示站 mvp-site 一致）
   ============================================================ */

/* 中文衬线（汉字大字号用），无外部字体时回退系统宋体 */
.serif-cn { font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif; }

/* 拼音 ruby 通用规则 */
ruby { ruby-position: over; }
rt { font-size: .52em; font-weight: 700; user-select: none; }
.hanzi-card .pinyin { font-size: .42em; }

/* 声调配色（作用域限定，避免污染父主题） */
.hanzi-card .p1 { color: #d0453b; }
.hanzi-card .p2 { color: #e08a2e; }
.hanzi-card .p3 { color: #3d9970; }
.hanzi-card .p4 { color: #2f6fb2; }
.hanzi-card .pn { color: #8a94a3; }

/* 汉字卡容器 */
.hanzi-card {
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 14px;
  padding: 22px 16px;
  text-align: center;
  position: relative;
  width: auto;
  margin: 0;               /* 不再 auto：flex 布局下 auto 会破坏间距与居中 */
  box-sizing: border-box;
  /* 一行 4 个：100% 减去 3 个 18px 间隔后四等分；min-width 保证窄屏自动降列 */
  flex: 0 0 calc((100% - 54px) / 4);
  min-width: 150px;
}
/* 字形块：固定高度 + flex 居中。
   日期行高用固定值而非 1.15 倍，避免不同汉字的字体上下伸部（ascent/descent）
   把行盒撑高，导致同排两张卡一张高一张矮。 */
.hanzi-card .glyph {
  font-size: 64px;
  line-height: 1;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1c2430;
}
/* 拼音行：固定 1.3 行高，不再继承主题的 1.6（否则不同拼音字符会撑出不同行盒） */
.hanzi-card .py { font-size: 24px; line-height: 1.3; margin: 6px 0 2px; }
.hanzi-card .gloss { font-size: 13.5px; line-height: 1.4; color: #5b6675; }
.hanzi-card .facts {
  display: flex; justify-content: center; gap: 8px;
  margin: 10px 0 12px; font-size: 11.5px; line-height: 1.4; color: #5b6675; flex-wrap: wrap;
}
.hanzi-card .facts span { background: #faf8f5; border: 1px solid #e6e9ee; border-radius: 99px; padding: 2px 9px; }
.hanzi-card .acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* 按钮（轻量，不依赖父主题按钮体系） */
.hanzi-card .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font-weight: 700; font-size: 13.5px; line-height: 1;
  padding: 8px 14px; border-radius: 999px; font-family: inherit;
}
.hanzi-card .btn-primary { background: #b8442e; color: #fff; }
.hanzi-card .btn-primary:hover { background: #8f3222; }
.hanzi-card .btn-ghost { background: #fff; color: #b8442e; border: 1.5px solid #b8442e; }
.hanzi-card .btn-ghost:hover { background: #fbeae6; }
.hanzi-card .btn-sm { padding: 8px 14px; font-size: 13.5px; }

/* 笔顺框 */
.hanzi-card .sw-box { margin-top: 14px; display: none; }
.hanzi-card .sw-box.open { display: block; }
.hanzi-card .sw-target {
  width: 180px; height: 180px; max-width: 100%; margin: 0 auto;
  box-sizing: border-box;
  background: #fff; border: 1px dashed #e6e9ee; border-radius: 12px;
}
.hanzi-card .sw-note { font-size: 12px; color: #5b6675; margin-top: 8px; }
.hanzi-card .sw-hint { font-size: 12.5px; color: #c9a24b; font-weight: 700; margin-top: 6px; min-height: 1.2em; }

/* ============================================================
   网格布局（修复卡片错位）
   根因：WordPress 的 wpautop 会把短代码行之间的换行转换成 <br />；
         <br /> 在 grid / flex 里同样是"子项"，会占掉一个格位，
         于是 4 张卡被挤成「左 / 右 / 中 / 左」的错位。
   解决：改用 flex + 移除 <br /> 与空 <p>；若短代码被 <p> 包裹，
         用 display:contents 让包裹层不参与布局。
   ============================================================ */
.hanzi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-items: flex-start;
  margin: 14px 0 8px;
}
.hanzi-grid br,
.hanzi-grid > p:empty { display: none; }
.hanzi-grid > p { display: contents; margin: 0; padding: 0; }

/* 响应式由卡片 min-width 自动降列（4→3→2→1），无需额外 media query。
   若某处想强制列数，可给该 .hanzi-grid 加内联 style="--cols:3" 的自定义方案。 */

/* 发音提示 toast */
.ht-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: #1c2430; color: #fff; font-size: 13.5px; padding: 10px 18px; border-radius: 99px;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 99; max-width: 88vw; text-align: center;
}
.ht-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   课时内容区加宽 —— 修复「内容区两侧大片空白」
   根因：Tutor 自带的 .tutor-learning-area-container 设了
         max-width:760/860/944px + margin:0 auto，
         把课时正文锁在一个居中盒子里；而内容列本身是
         网格 1fr（减去 320px 侧栏）更宽，于是两侧留白。
   .hanzi-grid 正是它的直接子元素（无 is-layout-constrained 祖先），
   去掉该 max-width 即可用满内容列，汉字卡随之变宽。
   仅作用于学习区，不影响站点其它页面。
   ============================================================ */
.tutor-learning-area .tutor-learning-area-container {
  max-width: none !important;   /* 用满内容列，消除两侧留白 */
}
/* 备选（若你希望在大屏也限制最大宽度、避免正文行过宽）：
   .tutor-learning-area .tutor-learning-area-container { max-width: 1280px !important; }
   普通笔记本(内容列 ≤ 1280)会铺满；仅 1920+ 超宽屏才出现少量留白。 */

/* 减弱动画偏好 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}