/* scaled-1to1：本文件长度值已按固定 4000px 画布（设计稿原始像素）换算 */
/* ==========================================================================
   苏能教育官网 · 基础层（设计令牌 / 重置 / 通用组件）
   令牌数值由设计稿像素量测得出，依据见 docs/设计还原规格.md
   设计稿基准：CSS 视口 2000px 宽，容器 1600px，左右外边距各 200px
   ========================================================================== */

:root {
    /* 集团品牌色 */
    --sg-teal: #0C9488;
    --sg-teal-2: #56C7B2;
    --sg-magenta: #D63384;
    --sg-red: #E63946;
    --sg-orange: #FBB343;          /* 流程序号橙（设计稿实测） */

    /* 四个子品牌色 */
    --sg-hosting: #E8892E;
    --sg-suyang: #D63384;
    --sg-tour: #D62839;
    --sg-bean: #F39200;

    /* 品牌矩阵卡底色（设计稿实测，极淡） */
    --sg-card-1: #FEFFF9;
    --sg-card-2: #FFFAFE;
    --sg-card-3: #FAFFE9;
    --sg-card-4: #FFF1DC;

    /* 中性色（正文与微标签均按 WCAG AA 4.5:1 校色） */
    --sg-ink: #1F1F1F;
    --sg-ink-2: #3A3F45;
    --sg-gray: #5C636B;
    --sg-gray-2: #6E7681;
    --sg-line: #E7E9EC;
    --sg-line-2: #F1F3F5;

    /* 底色（设计稿实测） */
    --sg-bg: #FFFFFF;
    --sg-bg-soft: #F7F7F7;         /* 品牌矩阵区边距色 */
    --sg-bg-warm: #FFFBF2;         /* 师资区暖米色 */
    --sg-bg-blue: #EAF2FB;
    --sg-bg-card: #F2F2F2;         /* 流程卡浅灰 */
    --sg-bg-footer: #E6E6E6;       /* 页脚 */

    /* 形状与节奏 */
    --sg-radius-sm: 24px;
    --sg-radius: 40px;
    --sg-radius-lg: 56px;
    --sg-radius-pill: 1998px;
    --sg-shadow: 0 20px 60px rgba(24, 32, 44, .06);
    --sg-shadow-hover: 0 32px 80px rgba(24, 32, 44, .12);

    /* 容器：max-width 含左右 padding，故内容宽 = 1648 − 48 = 1600 */
    --sg-max: 3296px;
    --sg-gutter: 48px;
    --sg-section-y: 192px;

    --sg-font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --sg-font-en: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* 固定画布：与设计稿逐像素 1:1（设计稿为 2 倍图，故原始像素即 CSS 值）。
   画布宽度按页可配 —— 首页/栏目页 = 4000（设计稿 01/03/04/06 宽 4000），
   四大品牌页 = 764（设计稿 10–13 的竖版首屏），由模板写 <html data-design-width>、
   main.js 的 initFitCanvas() 读取并整页等比缩放；
   窗口窄于画布时缩放铺满（不重排），窗口宽于画布时不放大（居中显示）。 */
html {
    -webkit-text-size-adjust: 100%;
}

/* 四大品牌页：
   有桌面整页稿的（托管/素养）→ 桌面用 4000 画布的设计稿切片页，窄屏(≤768)切回 764 竖版图片页；
   尚无桌面稿的（研学/机智豆）→ 恒为 764 画布（竖版图片页）。 */
body.sg-page--brand { --sg-canvas-w: 764px; }
body.sg-page--brand-desktop { --sg-canvas-w: 4000px; }
/* 新四稿（教研体系/学员成果/教研洞察/关于苏能）：1920 画布设计稿页 */
body.sg-page--design1920 { --sg-canvas-w: 1920px; }
@media (max-width: 768px) {
    body.sg-page--brand-desktop { --sg-canvas-w: 764px; }
}

body {
    margin: 0 auto;                        /* 窗口宽于画布时水平居中 */
    width: var(--sg-canvas-w, 4000px);     /* 画布宽度：默认 4000，品牌页由下方规则覆盖为 764 */
    background: var(--sg-bg);
    color: var(--sg-ink);
    font-family: var(--sg-font);
    font-size: 32px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: inherit; text-decoration: none; transition: color .25s ease, opacity .25s ease; }
a:hover { color: var(--sg-teal); }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; }

/* ---------- 布局容器 ---------- */
/* 页面主体设为定位上下文：首页的绝对定位切片层（.sg-slice-layer）与 banner 覆盖层
   以主体顶部为基准。页头若是「白底占位」形态会占据流内高度，切片层必须随之偏移，
   否则整套切片与板块会整体错位一个页头高度。 */
.sg-main { position: relative; }

.sg-container {
    width: 100%;
    max-width: var(--sg-max);
    margin: 0 auto;
    padding: 0 var(--sg-gutter);
}

.sg-section { padding: var(--sg-section-y) 0; }
.sg-section--tight { padding: 128px 0; }
.sg-section--soft { background: var(--sg-bg-soft); }
.sg-section--warm { background: var(--sg-bg-warm); }
.sg-section--blue { background: var(--sg-bg-blue); }

/* ---------- 标题组 ---------- */
.sg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; margin-bottom: 96px; }
.sg-head__en {
    font-family: var(--sg-font-en);
    font-size: 80px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--sg-ink);
    text-transform: uppercase;
}
.sg-head__cn { font-size: 48px; font-weight: 600; color: var(--sg-ink); }
.sg-head__cn small { display: block; font-size: 26px; font-weight: 400; letter-spacing: .18em; color: var(--sg-gray); text-transform: uppercase; margin-top: 12px; }
.sg-head--center { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.sg-head--center .sg-head__en { font-size: 88px; }

/* 眉标：小节英文标识 */
.sg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    font-family: var(--sg-font-en);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sg-gray);
}
.sg-eyebrow::before { content: ""; width: 52px; height: 2px; background: currentColor; opacity: .5; }

/* ---------- 按钮 ---------- */
.sg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-width: 264px;
    padding: 26px 60px;
    border-radius: var(--sg-radius-pill);
    background: var(--sg-ink);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    letter-spacing: .02em;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.sg-btn:hover { color: #fff; background: var(--sg-teal); transform: translateY(-4px); box-shadow: var(--sg-shadow-hover); }
.sg-btn--light { background: #fff; color: var(--sg-ink); }
.sg-btn--light:hover { background: #fff; color: var(--sg-teal); }
.sg-btn--ghost { background: transparent; color: var(--sg-ink); border: 2px solid var(--sg-ink); }
.sg-btn--ghost:hover { background: var(--sg-ink); color: #fff; }
.sg-btn--sm { min-width: 216px; padding: 20px 44px; font-size: 28px; }

/* ---------- 标签 ---------- */
.sg-tag {
    display: inline-flex;
    align-items: center;
    padding: 12px 32px;
    border-radius: var(--sg-radius-pill);
    font-size: 26px;
    line-height: 1.4;
    background: rgba(255, 255, 255, .82);
    color: var(--sg-ink-2);
}
.sg-tag--outline { background: transparent; border: 2px solid var(--sg-line); color: var(--sg-ink-2); }

.sg-pillbar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    padding: 24px 52px;
    border-radius: var(--sg-radius-pill);
    background: #fff;
    box-shadow: var(--sg-shadow);
    color: var(--sg-ink-2);
    font-size: 30px;
}
.sg-pillbar > span { padding: 0 32px; }
.sg-pillbar > span + span { border-left: 2px solid var(--sg-line); }

/* ---------- 卡片 ---------- */
.sg-card {
    background: #fff;
    border-radius: var(--sg-radius);
    overflow: hidden;
}

/* ---------- 数字/英文排版 ---------- */
.sg-num {
    font-family: var(--sg-font-en);
    font-size: 104px;
    line-height: 1;
    font-weight: 700;
    color: var(--sg-ink);
}
.sg-num small { font-size: .5em; color: var(--sg-magenta); margin-left: 4px; }

.sg-en-caps {
    font-family: var(--sg-font-en);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sg-gray);
}

/* ---------- 图片占位兜底 ---------- */
.sg-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-img--contain { object-fit: contain; }

/* ---------- 进场动画 ---------- */
.sg-reveal { opacity: 0; transform: translateY(52px); transition: opacity .7s ease, transform .7s ease; }
.sg-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .sg-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 通用：隐藏 ---------- */
.sg-sr {
    position: absolute;
    width: 2px; height: 2px;
    padding: 0; margin: -2px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}