@charset "UTF-8";
/**
 * 英语兔官网 · site.css
 * 页面级布局，叠在 tokens.css / colors_and_type.css / yyt-ui.css（组件参考实现）之上。
 * 不引入任何新颜色/字号数值。
 */

html { scroll-behavior: smooth; }
/* 锚点跳转落点：nav 非 sticky（跳转后已滚出视口），无需为其留位。
   板块自带 80px 上内边距，用负 scroll-margin 抵消其大部分，让眉题落在距顶 ~32px
   （= 想要的 space-8 间隙 − 板块 space-20 上内边距）。改板块上内边距时同步这里。 */
section[id] { scroll-margin-top: calc(var(--yyt-space-8) - var(--yyt-space-20)); }

/* 移动端：导航链接条横向滑动，不换行不溢出 */
@media (max-width: 768px) {
  .nav .links { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav .links::-webkit-scrollbar { display: none; }
}

/* ---- Hero ---- */
.hero .actions { flex-wrap: wrap; }
/* 主标题：桌面端一行（含逗号）；窄屏改为断行——逗号隐藏、断行显示，
   避免行尾全角逗号导致居中的首行视觉左偏 */
.hero-break { display: none; }
.hero .sub { text-wrap: balance; }
/* Hero 主 CTA：落地页唯一主行动，较标准 lg 放大一档
   —— 高 56（4px 网格）· 文字 18px（body-03，字阶升一档）· 横向留白 32（space-8） */
.hero .actions .btn { height: 56px; padding: 0 var(--yyt-space-8); font-size: var(--yyt-type-body-03-size); }

/* Hero 配图（纸飞机宽幅横图，置于 CTA 下方；index.html 与 index-v2.html 共用） */
.hero-pic { margin-top: var(--yyt-space-12); }
.hero-pic img { display: block; width: 100%; max-width: 960px; height: auto; margin: 0 auto; }

/* ---- 区块留白节奏 ----
   桌面：hero 64/48、区块 80/80（区块间 160px）；移动端见媒体查询。
   原则：区块间距 ≫ 图文间距（16–24），分组清晰；干净但不分散、不拥挤。 */
.hero { padding-top: var(--yyt-space-16); padding-bottom: var(--yyt-space-12); }
/* 板块分区（方案 D · 只眉题、无分隔线）：靠「绿眉题 + 大留白 + 左右交替」分区。
   去线后留白加大一档（64→80）撑起板块边界，避免纯留白显单调。 */
.section { padding-top: var(--yyt-space-20); padding-bottom: var(--yyt-space-20); }  /* 80/80，区块间 160px */
/* 眉题：品牌绿短条 + 加宽字距分类标签（英文自动大写） */
.eyebrow {
  display: flex; align-items: center; gap: var(--yyt-space-3); margin: 0 0 var(--yyt-space-4);
  font: 700 var(--yyt-type-label-01-size)/1 var(--yyt-font-sans);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.eyebrow::before { content: ""; width: 24px; height: 3px; background: var(--accent); flex: none; }

/* ---- 功能区块：左右交替 spotlight ---- */
.spotlight {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--yyt-space-16); align-items: start;   /* 文字顶对齐插画，消除居中造成的标题上方空洞 */
}
.spotlight .pic { text-align: center; }
/* 插画已裁去白边，尺寸按内容自适应；用 max-height 统一控制视觉高度，避免高图撑高行。
   原图 600px，放大到此区间仍是降采样、清晰；填满约 528px 图列而不显空。 */
.spotlight .pic img { max-width: 440px; max-height: 320px; width: auto; height: auto; display: inline-block; }
/* 品牌签名④：区块标题衬线 display-01（spotlight 内 h2 比全局选择器深一层，需显式声明） */
.spotlight h2, .section .container > h2 {
  font: var(--yyt-type-display-01-weight) var(--yyt-type-display-01-size)/var(--yyt-type-display-01-line) var(--yyt-type-display-01-font);
  letter-spacing: 0;
  margin: 0 0 var(--yyt-space-4);
}
.spotlight p { color: var(--fg-2); margin: 0 0 var(--yyt-space-6); max-width: var(--yyt-measure); }
/* 交替：偶数区块图片在左 */
.spotlight.flip .pic { order: -1; }
@media (max-width: 768px) {
  .hero-break { display: inline; }
  .hero-comma { display: none; }
  .spotlight { grid-template-columns: 1fr; gap: var(--yyt-space-6); }
  /* 图在文字下方（DOM 本就是文字在前，取消桌面端的上移/左移） */
  .spotlight .pic, .spotlight.flip .pic { order: 0; }
  .spotlight .pic img { max-width: 300px; max-height: 240px; }
  .hero-pic { margin-top: var(--yyt-space-8); }
  /* 移动端留白：hero 40/40、区块 48/48（区块间 96px，无线，仍 ≫ 图文间距 24） */
  .hero { padding-top: var(--yyt-space-10); padding-bottom: var(--yyt-space-10); }
  .section { padding-top: var(--yyt-space-12); padding-bottom: var(--yyt-space-12); }
  /* 移动端板块上内边距为 space-12（48）；锚点落点同样抵消到距顶 ~24px */
  section[id] { scroll-margin-top: calc(var(--yyt-space-6) - var(--yyt-space-12)); }
}

/* ---- 小程序 CTA ---- */
/* 二维码本身已自带白色圆角卡，无需再套边框/阴影 */
.qr-card { display: inline-block; }
.qr-card img { display: block; width: 240px; height: auto; }

/* ---- 页脚合规区 ---- */
.footer .container { flex-direction: column; align-items: center; gap: var(--yyt-space-3); text-align: center; }
.footer .fine a { color: var(--yyt-color-neutral-400); text-decoration: none; }
.footer .fine a:hover { color: var(--fg-inverse); }

/* ---- 招聘页 ---- */
.jobs { align-items: stretch; }
.job-card { display: flex; flex-direction: column; }
.job-card .meta { margin-top: 0; margin-bottom: var(--yyt-space-4); }
.job-card p { margin-bottom: var(--yyt-space-3); }
.job-card .apply { margin-top: auto; padding-top: var(--yyt-space-4); }