/* 雅之林® 首屏 Hero 文字 单一真源
   ============================================================
   作用范围：group / news / edu / check(健康自检) / ai(健康顾问)
   只负责「首屏大字小字」的字体、字号、字重、字距、行高、颜色、间距
   （即 kicker / 大标题 / 下方小字 desc 三件套 + 内容容器 + 字体族）。
   首屏「区块高度 / padding / 背景图 / 遮罩」等由各站本地 CSS 保留（因 group 内页要容纳 7 维导航条，刻意与 news/check 高度不同）。

   配套规范文档：/首屏hero设计规范_20260903.md
   接入方式：每个页面 <head> 末尾（所有本地 <style>/style.css 之后）加
            <link rel="stylesheet" href="/hero.css">
   本文件任何改动 -> 全站首屏文字即时统一生效，杜绝事后逐站修修补补。

   字体族铁律：-apple-system 必须打头（与 nav.css、品牌动态一致）。 */

/* ============================================================
   手机端"锁格式"铁律（Elderly / 大字体 场景）
   ------------------------------------------------------------
   防止老年用户把系统字体调大后首屏/整站布局被撑乱：
   1) text-size-adjust:100% —— 关闭浏览器"小屏自动放大字体"与系统字号
      档位对 px 文字的强制膨胀（安卓 Chrome 字号设置、iOS 自动 inflation
      的主要来源）。写在本文件即全站（6 站）生效。
   2) 区块用 min-height（可生长）而非固定 height + overflow:hidden，
      即使文字变多也只让首屏变高，不会与下方内容重叠错位。
   3) kicker / 关键单行文字 nowrap + 溢出裁剪 —— 字号再大也只换"视觉粗细"
      不换行、不撑高，超宽部分裁掉而非把整块布局顶乱。
   ============================================================ */
html,body{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* 统一字体族：写到区块上，子元素继承；kicker/title/desc 再显式写一遍防御 */
.hero,
.page-hero,
.ux-hero{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* 内容容器：居中、抬到背景之上 */
.hero-content,
.ux-hero-content{
  position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;color:#fff;
}

/* —— kicker：主标题上方小字（YAZHILIN · 雅之林®） ——
   单行锁定：字号再大也不换行、不撑高；超宽优雅裁切。 */
.hero-kicker,
.ux-hero-kicker{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:fit-content;max-width:100%;
  margin:0 auto 18px;
  color:#E8CE8E;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-kicker sup,
.ux-hero-kicker sup{
  font-size:9px;font-weight:400;vertical-align:super;margin-left:-10px;
}

/* —— 大标题 h1 —— */
/* 子页 / ux-hero 统一字号；首页品牌大字（brand-hero-title）由 group 本地样式保持 34/6vw/68 */
.hero h1,
.page-hero h1,
.ux-hero-title{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(30px,5vw,52px);
  font-weight:900;color:#fff;line-height:1.12;letter-spacing:1px;margin:0 0 18px;
}

/* —— 下方小字 desc —— */
.hero-desc,
.ux-hero-desc{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(15px,2vw,20px);
  font-weight:400;line-height:1.7;
  color:rgba(255,255,255,.85);
  max-width:860px;
  margin:0 auto 34px;
}

/* 手机端：首屏蓝区统一 305px，desc 底部间距收为 0 */
@media (max-width:640px){
  .hero-desc,
  .ux-hero-desc{margin-bottom:0;}
}

/* ============================================================
   手机端首屏高度：全站「一套方案」单一真源
   ------------------------------------------------------------
   早期做法：各站在自己的 style.css / index 里各自硬编码 min-height:305px，
   edu 教程子页(basic/advanced)漏改 → 手机端 473px，与其他页 305px 不一致。
   现改为：本文件一条规则，覆盖所有 hero 变体（含 edu 子页 .topbar+.hero），
   全站手机端首屏统一 305px，不再逐站补丁。
   桌面端(≥768px)的高度由 desktop.css 另行处理，不在此受限。 */
@media (max-width:767px){
  .hero,
  .page-hero,
  .ux-hero,
  .topbar + .hero,
  .topbar + .page-hero{
    min-height:305px !important;
    padding:48px 16px 88px !important;
  }
  /* 手机端栏目导航（蓝区）高度统一：底部内边距锁定 16px（group 首页标准）。
     此前 news/edu/check/ai 为 40px（641~767px 桌面值 54px），比 group 各页
     高出 24~38px，切换页面时蓝区高度跳动。一条规则全站拉平。 */
  html body .home-nav{
    padding-bottom:16px !important;
  }
  /* 手机端与桌面端统一：蓝区自铺「品牌主视觉图 + 蓝色纱罩」，
     图片覆盖整个导航区、蓝色只做半透明罩盖在图片上（与 desktop.css 规则 18 同一套）。
     inset:0 全覆盖（手机端导航 217px，含与首屏重叠的 56px）；
     z-index:-1 垫在导航内容下，配合导航自身 z-index:1 盖住首屏背景层。 */
  html body .home-nav{
    position:relative !important;
    z-index:1 !important;
    background-color:#002FA7 !important;
    background-image:none !important;
  }
  html body .home-nav::before{
    content:'' !important;
    position:absolute !important;
    inset:0 !important;
    z-index:-1 !important;
    background:
      linear-gradient(180deg, rgba(0,26,99,.80) 0%, rgba(0,26,99,.40) 35%, rgba(0,26,99,.68) 100%),
      url(https://group.yazhilin.cn/assets/hero.jpg?v=20260830) center 32%/cover no-repeat;
  }
}

/* ============================================================
   首屏背景图：全站「一套方案」单一真源
   ------------------------------------------------------------
   此前各站各页用了 4 张不同首屏图（hero.jpg / tech-lab.jpg /
   brand-gene.jpg / product-heart.jpg），页面观感不统一。
   现统一为品牌主视觉 hero.jpg：一条规则覆盖所有首屏变体
   ——group 用 .hero-bg 子层、check/ai 用 .ux-hero-bg 子层、
   edu 子页直接写在 .hero 上。
   !important 用于压过各页 style="" 内联背景（内联样式优先于外部表，
   但 !important 的外部规则胜出）。 */
.hero-bg,
.ux-hero-bg,
.hero,
.page-hero,
.ux-hero{
  background-image:url(https://group.yazhilin.cn/assets/hero.jpg?v=20260830) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
