/* =====================================================
   TAAL13A DESIGN SYSTEM
   全站共用的唯一样式基础：颜色、字号层级、按钮、动效。
   页面自己的 CSS 只写布局。规则：不写 !important。
===================================================== */

:root{
  /* ---- 底色（沿用线上版本） ---- */
  --paper:#FFFFFF;
  --cream:#FCF8D8;
  --sky:#DCE9EE;
  --sand:#EADDA3;
  --white:#FFFFFF;

  /* ---- 文字 ---- */
  --ink:#17130F;
  --ink-2:#4A4640;
  --ink-3:#6E6A63;
  --line:#E3DACB;

  /* ---- 强调色：代尔夫特蓝 + 荷兰橙（荷兰文化色，饱和度适中） ---- */
  --blue:#2F5DA8;            /* 代尔夫特蓝：在线学习、主按钮 */
  --blue-deep:#234A8A;
  --orange:#D06A42;          /* 荷兰橙：线上小班 */
  --orange-text:#B4532E;     /* 浅底上的橙色文字（保证对比度） */
  --orange-soft:#F8E4D9;     /* 小班价签底色 */
  --ice:#D9E6F5;             /* 在线价签底色 */
  --yellow:#EDBE45;          /* 郁金香黄（几何图形） */
  --pink:#E9A195;            /* 珊瑚粉（几何图形） */
  --gold:#F6CB79;            /* 深色区块里的小标题 / 价格（沿用线上版本） */
  --green:#2C8A58;
  /* 课程类型：在线学习 = 雾蓝，线上小班 = 芥子黄（低饱和，和淡蓝区块、沙黄色同一家） */
  --type-online:#4A78BF;
  --type-online-text:#2F5DA8;
  --type-online-soft:#E4ECF7;
  --type-group:#D06A42;
  --type-group-text:#B4532E;
  --type-group-soft:#F8E4D9;           /* 可用 / 免费 状态圆点 */

  /* ---- 字体 ---- */
  --font-display:"Noto Serif SC","Songti SC",serif;
  --font-body:"Inter","PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;

  /* ---- 字号层级 ---- */
  --fs-display:clamp(43px,6vw,76px);    /* H1 页面主标题 */
  --fs-h2:clamp(34px,4.4vw,56px);       /* H2 区块标题 */
  --fs-h3:clamp(20px,1.8vw,24px);       /* H3 卡片标题 */
  --fs-lead:clamp(16px,1.5vw,20px);     /* 副标题 */
  --fs-body:17px;                       /* 正文 */
  --fs-small:15px;                      /* 辅助文字（中文最小字号） */
  --fs-label:13px;                      /* 仅用于大写英文小标签 */

  /* ---- 结构 ---- */
  --page-max:1180px;
  --gutter:clamp(18px,4vw,50px);
  --section-y:clamp(64px,8vw,100px);
  --border:1.5px solid var(--ink);

  /* ---- 动效：悬停时右上抬起 + 左下橙色硬投影（沿用线上版本） ---- */
  --ease:cubic-bezier(.2,.8,.2,1);
  --lift:translate(4px,-3px);
  --shadow-hard:-6px 6px 0 var(--orange);
}

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3,p,figure,blockquote{margin:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- 版心 & 区块底色 ---------- */
.container{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.section--cream{background:var(--cream)}
.section--sky{background:var(--sky)}
.section--sand{background:var(--sand)}

/* ---------- 标题层级：灰色编号小字 → 大标题 → 副标题 ---------- */
.kicker{
  display:block;
  margin-bottom:18px;
  font-family:var(--font-body);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(20,20,20,.48);
}
.title-display{
  font-family:var(--font-display);
  font-size:var(--fs-display);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.05em;
}
.section-title{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  font-weight:900;
  line-height:1.12;
  letter-spacing:-.05em;
}
.card-title{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:900;
  line-height:1.3;
}
.lead{font-size:var(--fs-lead);line-height:1.7;color:var(--ink-3)}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(28px,4vw,48px);
}
.section-head .lead{margin-top:10px}

/* ---------- 按钮：方角、1.5px 黑框 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:18px;
  min-width:232px;min-height:58px;padding:0 22px;
  border:var(--border);border-radius:0;
  font-family:var(--font-body);font-size:16px;font-weight:900;
  line-height:1;text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s;
}
/* 全站箭头：平时 ↗，悬停时转 45° 变成 →（"进入"） */
.arrow{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover{transform:var(--lift);box-shadow:var(--shadow-hard)}
.btn:hover .arrow{transform:rotate(45deg)}
.btn:active{transform:none;box-shadow:none}
.btn{position:relative}
.btn--blue{background:var(--blue);color:var(--white)}
.btn--paper{background:rgba(255,255,255,.92);color:var(--ink)}
.btn--ghost{background:rgba(255,253,248,.2);color:var(--ink);border-color:rgba(23,19,15,.4)}

/* 文字链接：下划线从左向右收起 */
.text-link{
  display:inline-flex;align-items:center;gap:8px;
  padding-bottom:5px;
  font-size:var(--fs-small);font-weight:800;text-decoration:none;
  background:linear-gradient(var(--orange),var(--orange)) left bottom/100% 1.5px no-repeat;
  transition:background-size .35s var(--ease);
}
.text-link:hover{background-size:0 1.5px;background-position:right bottom}
.text-link:hover .arrow{transform:rotate(45deg)}

/* 方形箭头按钮（轮播） */
.icon-btn{
  width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:inherit;
  border:1.5px solid currentColor;border-radius:0;
  font-size:20px;line-height:1;
  transition:background-color .2s,color .2s;
}
.icon-btn:disabled{opacity:.3;cursor:default}

/* 方块指示点（横向滑动区块共用） */
.dots{display:flex;justify-content:center;gap:10px;margin-top:22px}
.dot{width:10px;height:10px;padding:0;border:0;background:rgba(23,19,15,.2);transition:width .25s var(--ease),background-color .25s}
.dot.active{width:28px;background:var(--ink)}
.dots--light .dot{background:rgba(255,255,255,.35)}
.dots--light .dot.active{background:var(--white)}

/* 补充说明：绿色圆点 + 小字（与课程卡片上的“● 开放报名”同一种写法）
   用于首屏按钮下方的“以上均含免费内容”等补充说明 */
.footnote{
  display:flex;align-items:center;gap:8px;
  margin:0;
  font-size:14px;font-weight:700;line-height:1.4;color:var(--ink-2);
}
.footnote::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--green)}
.footnote[hidden]{display:none}

/* 小标签 */
.label{font-size:var(--fs-label);font-weight:800;letter-spacing:.14em}
.label--blue{color:var(--type-online-text)}
.label--orange{color:var(--type-group-text)}

/* ---------- 进场动画（尊重“减少动态效果”设置） ---------- */
/* 用 animation + 独立的 translate 属性，不会和元素自己的 hover transform / transition 冲突 */
/* 只有 home.js 成功运行（给 html 加上 reveal-ready）才先隐藏，脚本失败时内容照常显示 */
.reveal-ready .reveal{opacity:0}
.reveal-ready .reveal.is-in{animation:fly-in .85s var(--ease) var(--reveal-delay,0ms) both}
@keyframes fly-in{
  from{opacity:0;translate:0 56px}
  to{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:reduce){
  .reveal-ready .reveal,.reveal-ready .reveal.is-in{opacity:1;animation:none}
  .btn,.arrow,.text-link{transition:none}
}

@media (max-width:760px){
  .section-head{flex-direction:column;align-items:flex-start;gap:14px}
  .btn{min-height:52px;font-size:15px;padding:0 18px}
}