/* =========================================================
   公共排版类（Typography）

   目的：
   把全站重复的标题、正文、辅助文字和按钮字号集中到这里。
   页面只追加 type-* class，不再在每个页面重复写媒体查询。

   当前已接入：
   - 首页 template/qingchengw/html/index.html
   - 课程介绍 template/qingchengw/html/kecheng.html
   - 知识库列表 template/qingchengw/html/newslist.html
   - 文章详情 template/qingchengw/html/article.html
   - 关于我们 template/qingchengw/html/about.html
   - 联系我们 template/qingchengw/html/liuyan.html
   - 兼职中心 template/qingchengw/html/jiedan.html

   使用规则：
   1. 保留页面原有的布局、颜色、动画 class，只追加一个 type-*。
      例如：class="hero-sub type-lead"
   2. 本文件必须放在页面级 CSS 之后加载。
   3. 本文件只控制 font-size / line-height。
      颜色、间距、圆角、布局、动画仍由原页面 CSS 控制。
   4. 同一个元素不要叠加多个同组 type-*。
      例如不要同时写 type-section 和 type-card。
   5. 不要使用 !important。选择器权重已经按现有页面样式设计好。

   断点：
   手机     默认值（<768）
   平板     ≥768
   桌面     ≥1024
   大屏     ≥1440
   超大屏   ≥1920

   快速对照：
   type-display        营销页 Hero 主标题
   type-page-title     知识库列表页大标题
   type-article-title  文章详情页标题
   type-section        版块 H2
   type-card           卡片 H3
   type-subhead        卡片内小标题 / 流程步骤标题
   type-heading        内容区大标题（Tab 面板 / 案例标题）
   type-lead           Hero 副标题 / 版块导语
   type-body           长正文 / 文章正文
   type-body-sm        卡片、列表正文
   type-list           勾选列表 / 要点列表
   type-meta           时间、浏览量、辅助说明
   type-stat           统计数字 / 收入数字
   type-label          统计条短标签 / 强调标签
   type-caption        免责声明 / 角标 / 表单提示
   type-button         主 CTA（预约 / 查看课程 / 提交）
   type-button-md      Tab、排序、查看全部、加载更多
   type-button-sm      教程入口、导航 CTA
   type-input          表单输入框、下拉框、文本域

   页面加 class 示例：
   <a class="btn btn-primary btn-lg type-button">预约免费试学</a>
   <h2 class="type-section">版块标题</h2>
   <p class="type-lead">导语文字</p>
   <p class="type-body-sm">卡片说明</p>
   <p class="type-caption">免责声明</p>

   维护方式：
   - 调某个角色的字号：只改该 class 在 5 个档位里的 font-size。
   - 调行高：只改手机默认档位里的 line-height。
   - 新增页面：按上面的快速对照选择 class，
     不要把整套媒体查询复制到新页面。
   ========================================================= */

/* =========================================================
   手机默认档位（<768）
   这里是所有 class 的基础字号，后面的媒体查询只覆盖字号。
   ========================================================= */

/* ---------------------------------------------------------
   type-display | 营销页 Hero 主标题
   用途：页面第一视觉层级的大标题。
   适用：首页 .hero h1、课程页 .course-banner-inner h1、
         关于页 .about-banner-inner h1、接单页 .hero h1。
   不要用于：文章详情 .art-head h1、知识库 .kb-hero h1、
             卡片标题或正文中的 h1。
   示例：<h1 class="type-display">...</h1>
   --------------------------------------------------------- */
h1.type-display {
  font-size: 24px;
  line-height: 1.3;
}

/* ---------------------------------------------------------
   type-page-title | 知识库列表页大标题
   用途：知识库栏目页顶部的页面标题，通常带较大字间距。
   适用：newslist.html 中的 .kb-hero h1。
   不要用于：首页/课程/关于 Hero、文章详情标题。
   示例：<h1 class="type-page-title">知识库</h1>
   --------------------------------------------------------- */
h1.type-page-title {
  font-size: 26px;
  line-height: 1.35;
}

/* ---------------------------------------------------------
   type-article-title | 文章详情页标题
   用途：文章正文顶部标题，字号低于营销页 Hero。
   适用：article.html 中的 .art-head h1。
   不要用于：首页/课程/关于 Hero，否则会从 24px 放大到 44/52px。
   示例：<h1 class="type-article-title">文章标题</h1>
   --------------------------------------------------------- */
h1.type-article-title {
  font-size: 22px;
  line-height: 1.35;
}

/* ---------------------------------------------------------
   type-section | 版块 H2
   用途：页面内每个内容版块的主标题。
   适用：.section-head h2、.cta-inner h2。
   不要用于：文章正文内部的 .art-body h2、卡片标题。
   示例：<h2 class="type-section">一套完整的课程体系</h2>
   --------------------------------------------------------- */
h2.type-section {
  font-size: 22px;
  line-height: 1.2;
}

/* ---------------------------------------------------------
   type-card | 卡片 H3
   用途：课程卡、能力卡、案例卡、步骤卡等卡片标题。
   适用：.ability-card h3、.prospect-card h3、.service-card h3、
         .step-card h3、.tutorial-body h3。
   支持标签：h2 / h3 / div。
   不要用于：版块 H2、正文段落、价格或统计数字。
   示例：<h3 class="type-card">课程名称</h3>
   --------------------------------------------------------- */
h2.type-card,
h3.type-card,
div.type-card {
  font-size: 17px;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   type-heading | 内容区大标题
   用途：Tab 面板、案例详情、文章区块等内容区的主标题。
   适用：.tab-body h3、案例面板 h3。
   支持标签：h3 / h4 / div。
   不要用于：页面版块 H2、卡片小标题。
   示例：<h3 class="type-heading">案例：半导体晶圆搬运机械手</h3>
   --------------------------------------------------------- */
h3.type-heading,
h4.type-heading,
div.type-heading {
  font-size: 22px;
  line-height: 1.35;
}

/* ---------------------------------------------------------
   type-subhead | 卡片内小标题 / 流程步骤标题
   用途：比卡片 H3 再小一级的标题或加粗引导语。
   适用：.vip-perk h3、.flow-list b、.order-title 等。
   支持标签：h2 / h3 / b / strong。
   不要用于：版块 H2、主卡片 H3、正文段落。
   示例：<b class="type-subhead">报名成为 VIP 学员</b>
   --------------------------------------------------------- */
h2.type-subhead,
h3.type-subhead,
b.type-subhead,
strong.type-subhead {
  font-size: 14px;
  line-height: 1.45;
}

/* ---------------------------------------------------------
   type-lead | 导语 / 副标题
   用途：Hero 下方的一两句说明，或版块标题下方的导语。
   适用：.hero-sub、.course-banner-inner p、
         .about-banner-inner p、.section-head p。
   不要用于：卡片正文、文章长正文。
   示例：<p class="type-lead">从 0 基础到独立做项目</p>
   --------------------------------------------------------- */
p.type-lead {
  font-size: 14px;
  line-height: 1.7;
}

/* ---------------------------------------------------------
   type-body | 长正文
   用途：需要连续阅读的大段正文。
   适用：article.html 中的 .art-body，或其他长段落容器。
   不要用于：卡片短说明、时间/浏览量等辅助文字。
   示例：<div class="art-body type-body">...</div>
   --------------------------------------------------------- */
div.type-body,
p.type-body {
  font-size: 14px;
  line-height: 1.8;
}

/* 文章正文由 CMS 输出，内部标题和图片说明无法逐个加 class，
   这里给 .type-body 容器内的 h2 / figcaption 统一字号。 */
.type-body h2 {
  font-size: 18px;
  line-height: 1.4;
}

.type-body figcaption {
  font-size: 13px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   type-body-sm | 卡片 / 列表正文
   用途：卡片、列表、侧栏里的短说明文字。
   适用：.prospect-card p、.service-card-text p、.why-card p、
         .kb-item-body p、.ability-card p。
   支持标签：p / h3 / strong / span / div / figcaption / label。
   不要用于：文章正文、Hero 导语。
   示例：<p class="type-body-sm">课程说明文字</p>
   --------------------------------------------------------- */
p.type-body-sm,
h3.type-body-sm,
strong.type-body-sm,
span.type-body-sm,
div.type-body-sm,
figcaption.type-body-sm,
label.type-body-sm {
  font-size: 14px;
  line-height: 1.7;
}

/* ---------------------------------------------------------
   type-list | 勾选列表 / 要点列表
   用途：课程要点、案例涉及内容、能力清单等列表项。
   适用：在 ul / ol 容器上添加 class，内部 li 自动生效。
   不要用于：导航菜单、统计条、按钮组。
   示例：<ul class="check-list type-list">...</ul>
   --------------------------------------------------------- */
ul.type-list li,
ol.type-list li {
  font-size: 14px;
  line-height: 1.8;
}

/* ---------------------------------------------------------
   type-stat | 统计数字 / 收入数字
   用途：数据条、收入条里的核心数字。
   适用：.stats-list strong、.income-bar strong。
   支持标签：strong / b。
   不要用于：普通正文、价格小字、按钮文字。
   示例：<strong class="type-stat">1,200+</strong>
   --------------------------------------------------------- */
strong.type-stat,
b.type-stat {
  font-size: 20px;
  line-height: 1.2;
}

/* ---------------------------------------------------------
   type-label | 统计条短标签 / 强调标签
   用途：数据条里的短标签，或有强调作用的短词。
   适用：首页 .stats-list strong。
   支持标签：strong / b / span。
   不要用于：长正文、卡片标题、按钮文字。
   示例：<strong class="type-label">累计服务</strong>
   --------------------------------------------------------- */
strong.type-label,
b.type-label,
span.type-label {
  font-size: 20px;
  line-height: 1.2;
}

/* ---------------------------------------------------------
   type-meta | 辅助文字
   用途：时间、浏览量、标签、版权和辅助说明等小字。
   适用：.kb-meta、.art-meta、.hero-points li、
         .contact-qr-item p 等。
   支持标签：span / time / li / div / p。
   不要用于：正文、按钮文字。
   示例：<span class="type-meta">2026-10-20</span>
   --------------------------------------------------------- */
span.type-meta,
time.type-meta,
li.type-meta,
div.type-meta,
p.type-meta {
  font-size: 13px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   type-caption | 免责声明 / 角标 / 表单提示
   用途：比 type-meta 更小的说明文字。
   适用：免责声明、角标、错误提示、版权、表单辅助说明。
   支持标签：p / span / small / div / time / figcaption。
   不要用于：正文、按钮文字、时间/浏览量（用 type-meta）。
   示例：<p class="type-caption">不构成收益承诺</p>
   --------------------------------------------------------- */
p.type-caption,
span.type-caption,
small.type-caption,
div.type-caption,
time.type-caption,
figcaption.type-caption {
  font-size: 12px;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   type-button | 主 CTA 按钮
   用途：页面主要转化按钮。
   适用：所有带 .btn 的预约、查看课程、查看案例按钮，
         以及 .submit-btn 这类独立提交按钮。
   写法：class="btn btn-primary btn-lg type-button"
         或 class="submit-btn type-button"
   不要用于：Tab、FAQ、排序、导航 CTA（请用 md / sm）。
   权重说明：.btn.type-button 用两个 class，
             是为了压过原 .btn-lg 的 16px 字号。
   --------------------------------------------------------- */
.btn.type-button,
.type-button {
  font-size: 14px;
  line-height: 1.2;
}

/* ---------------------------------------------------------
   type-button-md | 中等页内操作按钮
   用途：版块内的切换和操作按钮。
   适用：.tab-btn、.sort-btn、.toggle-btn、.load-more-btn、
         .faq-q-btn。
   不要用于：主 CTA、导航 CTA。
   示例：<button class="tab-btn type-button-md">SW软件课</button>
   --------------------------------------------------------- */
.type-button-md {
  font-size: 14px;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   type-button-sm | 小按钮 / 轻量操作
   用途：字号最小的按钮型操作。
   适用：.tutorial-btn、.qx-header-cta。
   不要用于：主 CTA、Tab、FAQ。
   示例：<a class="tutorial-btn type-button-sm">免费学习</a>
   --------------------------------------------------------- */
.type-button-sm {
  font-size: 13px;
  line-height: 1.4;
}

/* 导航 CTA 原选择器是 .qx-header .qx-header-cta，权重为 0,2,0。
   这里提供同权重选择器，避免公共字号被 header.css 覆盖。 */
.qx-header .type-button-sm {
  font-size: 13px;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   type-input | 表单输入框 / 下拉框 / 文本域
   用途：表单里的可输入文字，移动端保持 16px，避免 iOS 聚焦时自动放大。
   适用：.fadan-field input、.fadan-field textarea、select 等。
   不要用于：按钮、普通正文。
   示例：<input class="type-input" type="text">
   --------------------------------------------------------- */
input.type-input,
textarea.type-input,
select.type-input {
  font-size: 16px;
  line-height: 1.5;
}

/* =========================================================
   平板：768px 起
   只调整字号；line-height 已在手机默认档位定义，
   后续档位不重复写，避免同一元素出现多份行高规则。
   ========================================================= */

@media (min-width: 768px) {
  h1.type-display {
    font-size: 32px;
  }

  h1.type-page-title {
    font-size: 30px;
  }

  h1.type-article-title {
    font-size: 24px;
  }

  h2.type-section {
    font-size: 26px;
  }

  h2.type-card,
  h3.type-card,
  div.type-card {
    font-size: 18px;
  }

  h3.type-heading,
  h4.type-heading,
  div.type-heading {
    font-size: 24px;
  }

  h2.type-subhead,
  h3.type-subhead,
  b.type-subhead,
  strong.type-subhead {
    font-size: 16px;
  }

  p.type-lead {
    font-size: 16px;
  }

  div.type-body,
  p.type-body {
    font-size: 14px;
  }

  .type-body h2 {
    font-size: 18px;
  }

  .type-body figcaption {
    font-size: 13px;
  }

  p.type-body-sm,
  h3.type-body-sm,
  strong.type-body-sm,
  span.type-body-sm,
  div.type-body-sm,
  figcaption.type-body-sm,
  label.type-body-sm {
    font-size: 14px;
  }

  ul.type-list li,
  ol.type-list li {
    font-size: 14px;
  }

  strong.type-stat,
  b.type-stat {
    font-size: 21px;
  }

  strong.type-label,
  b.type-label,
  span.type-label {
    font-size: 24px;
  }

  span.type-meta,
  time.type-meta,
  li.type-meta,
  div.type-meta,
  p.type-meta {
    font-size: 13px;
  }

  p.type-caption,
  span.type-caption,
  small.type-caption,
  div.type-caption,
  time.type-caption,
  figcaption.type-caption {
    font-size: 12px;
  }

  .btn.type-button,
  .type-button {
    font-size: 14px;
  }

  .type-button-md {
    font-size: 14px;
  }

  .type-button-sm,
  .qx-header .type-button-sm {
    font-size: 13px;
  }

  input.type-input,
  textarea.type-input,
  select.type-input {
    font-size: 16px;
  }
}

/* =========================================================
   桌面：1024px 起
   ========================================================= */

@media (min-width: 1024px) {
  h1.type-display {
    font-size: 38px;
  }

  h1.type-page-title {
    font-size: 32px;
  }

  h1.type-article-title {
    font-size: 24px;
  }

  h2.type-section {
    font-size: 32px;
  }

  h2.type-card,
  h3.type-card,
  div.type-card {
    font-size: 19px;
  }

  h3.type-heading,
  h4.type-heading,
  div.type-heading {
    font-size: 24px;
  }

  h2.type-subhead,
  h3.type-subhead,
  b.type-subhead,
  strong.type-subhead {
    font-size: 17px;
  }

  p.type-lead {
    font-size: 17px;
  }

  .type-body h2 {
    font-size: 18px;
  }

  .type-body figcaption {
    font-size: 13px;
  }

  p.type-body-sm,
  h3.type-body-sm,
  strong.type-body-sm,
  span.type-body-sm,
  div.type-body-sm,
  figcaption.type-body-sm,
  label.type-body-sm {
    font-size: 14px;
  }

  ul.type-list li,
  ol.type-list li {
    font-size: 14px;
  }

  strong.type-stat,
  b.type-stat {
    font-size: 22px;
  }

  strong.type-label,
  b.type-label,
  span.type-label {
    font-size: 24px;
  }

  span.type-meta,
  time.type-meta,
  li.type-meta,
  div.type-meta,
  p.type-meta {
    font-size: 14px;
  }

  p.type-caption,
  span.type-caption,
  small.type-caption,
  div.type-caption,
  time.type-caption,
  figcaption.type-caption {
    font-size: 12px;
  }

  .btn.type-button,
  .type-button {
    font-size: 16px;
  }

  .type-button-md {
    font-size: 14px;
  }

  .type-button-sm,
  .qx-header .type-button-sm {
    font-size: 14px;
  }

  input.type-input,
  textarea.type-input,
  select.type-input {
    font-size: 16px;
  }
}

/* =========================================================
   大屏：1440px 起
   ========================================================= */

@media (min-width: 1440px) {
  h1.type-display {
    font-size: 44px;
  }

  h1.type-page-title {
    font-size: 36px;
  }

  h1.type-article-title {
    font-size: 26px;
  }

  h2.type-section {
    font-size: 34px;
  }

  h2.type-card,
  h3.type-card,
  div.type-card {
    font-size: 20px;
  }

  h3.type-heading,
  h4.type-heading,
  div.type-heading {
    font-size: 26px;
  }

  h2.type-subhead,
  h3.type-subhead,
  b.type-subhead,
  strong.type-subhead {
    font-size: 18px;
  }

  p.type-lead {
    font-size: 18px;
  }

  div.type-body,
  p.type-body {
    font-size: 17px;
  }

  .type-body h2 {
    font-size: 20px;
  }

  .type-body figcaption {
    font-size: 14px;
  }

  p.type-body-sm,
  h3.type-body-sm,
  strong.type-body-sm,
  span.type-body-sm,
  div.type-body-sm,
  figcaption.type-body-sm,
  label.type-body-sm {
    font-size: 14px;
  }

  ul.type-list li,
  ol.type-list li {
    font-size: 14px;
  }

  strong.type-stat,
  b.type-stat {
    font-size: 24px;
  }

  strong.type-label,
  b.type-label,
  span.type-label {
    font-size: 26px;
  }

  span.type-meta,
  time.type-meta,
  li.type-meta,
  div.type-meta,
  p.type-meta {
    font-size: 14px;
  }

  p.type-caption,
  span.type-caption,
  small.type-caption,
  div.type-caption,
  time.type-caption,
  figcaption.type-caption {
    font-size: 13px;
  }

  .btn.type-button,
  .type-button {
    font-size: 17px;
  }

  .type-button-md {
    font-size: 16px;
  }

  .type-button-sm,
  .qx-header .type-button-sm {
    font-size: 14px;
  }

  input.type-input,
  textarea.type-input,
  select.type-input {
    font-size: 16px;
  }
}

/* =========================================================
   超大屏：1920px 起
   1920 以上保持这一档，不再继续放大，避免超宽屏文字失控。
   ========================================================= */

@media (min-width: 1920px) {
  h1.type-display {
    font-size: 52px;
  }

  h1.type-page-title {
    font-size: 42px;
  }

  h1.type-article-title {
    font-size: 30px;
  }

  h2.type-section {
    font-size: 38px;
  }

  h2.type-card,
  h3.type-card,
  div.type-card {
    font-size: 22px;
  }

  h3.type-heading,
  h4.type-heading,
  div.type-heading {
    font-size: 30px;
  }

  h2.type-subhead,
  h3.type-subhead,
  b.type-subhead,
  strong.type-subhead {
    font-size: 20px;
  }

  p.type-lead {
    font-size: 20px;
  }

  div.type-body,
  p.type-body {
    font-size: 18px;
  }

  .type-body h2 {
    font-size: 22px;
  }

  .type-body figcaption {
    font-size: 14px;
  }

  p.type-body-sm,
  h3.type-body-sm,
  strong.type-body-sm,
  span.type-body-sm,
  div.type-body-sm,
  figcaption.type-body-sm,
  label.type-body-sm {
    font-size: 16px;
  }

  ul.type-list li,
  ol.type-list li {
    font-size: 16px;
  }

  strong.type-stat,
  b.type-stat {
    font-size: 28px;
  }

  strong.type-label,
  b.type-label,
  span.type-label {
    font-size: 28px;
  }

  span.type-meta,
  time.type-meta,
  li.type-meta,
  div.type-meta,
  p.type-meta {
    font-size: 16px;
  }

  p.type-caption,
  span.type-caption,
  small.type-caption,
  div.type-caption,
  time.type-caption,
  figcaption.type-caption {
    font-size: 14px;
  }

  .btn.type-button,
  .type-button {
    font-size: 18px;
  }

  .type-button-md {
    font-size: 17px;
  }

  .type-button-sm,
  .qx-header .type-button-sm {
    font-size: 16px;
  }

  input.type-input,
  textarea.type-input,
  select.type-input {
    font-size: 17px;
  }
}