/* scaled-1to1：本文件长度值已按固定 4000px 画布（设计稿原始像素）换算 */
/* ==========================================================================
   苏能教育官网 · 页头 / 页脚 / 内页骨架
   ========================================================================== */

/* ---------------- 页头 ---------------- */
.sg-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
    border-bottom: 2px solid var(--sg-line-2);
    transition: box-shadow .3s ease, background .3s ease;
}

.sg-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    min-height: 240px;   /* 2026-11-06 用户要求：页头加高（168 → 200 → 240） */
}

/* 品牌区 */
.sg-logo { display: inline-flex; align-items: center; gap: 24px; flex: none; }
.sg-logo__mark { width: 80px; height: 80px; flex: none; }
/* 完整 LOGO 锁定（图标+中文+英文，1:1 抠自设计稿，见 assets/suneng/img/logo/logo-lockup.png 生成说明） */
.sg-logo__lockup { display: block; height: 104px; width: auto; flex: none; }   /* 2026-11-06 用户要求：LOGO 放大（原 80px） */
.sg-logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.sg-logo__cn { font-size: 38px; font-weight: 700; letter-spacing: .04em; color: var(--sg-ink); }
.sg-logo__en {
    font-family: var(--sg-font-en);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .19em;
    color: var(--sg-gray);
    text-transform: uppercase;
    margin-top: 6px;
}

/* 导航 */
.sg-nav { display: flex; align-items: center; gap: 0; }
.sg-nav__item { position: relative; }
.sg-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 40px;
    line-height: 1.25;
    white-space: nowrap;
}
.sg-nav__link .cn { font-size: 30px; font-weight: 500; color: var(--sg-ink); }
.sg-nav__link .en {
    font-family: var(--sg-font-en);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--sg-gray-2);
    text-transform: uppercase;
}
.sg-nav__item + .sg-nav__item::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 2px; height: 40px;
    margin-top: -20px;
    background: var(--sg-line);
}
.sg-nav__link:hover .cn,
.sg-nav__item.is-active .cn { color: var(--sg-teal); }
.sg-nav__item.is-active .sg-nav__link::after {
    content: "";
    position: absolute;
    left: 40px; right: 40px; bottom: 0;
    height: 4px;
    background: var(--sg-teal);
    border-radius: 4px;
}

/* 页头右侧动作区 */
.sg-header__actions { display: flex; align-items: center; gap: 28px; flex: none; }
/* 2026-11-06 用户要求：电话热线放大（字号 28→34→42、图标 32→40→48） */
.sg-header__tel { display: inline-flex; align-items: center; gap: 20px; font-size: 42px; color: var(--sg-ink-2); }
.sg-header__tel svg { width: 48px; height: 48px; flex: none; }

/* 移动端汉堡 */
.sg-burger {
    display: none;
    width: 84px; height: 84px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    border: 2px solid var(--sg-line);
}
.sg-burger span,
.sg-burger span::before,
.sg-burger span::after {
    display: block;
    width: 36px; height: 4px;
    background: var(--sg-ink);
    border-radius: 4px;
    transition: transform .25s ease, opacity .25s ease;
}
.sg-burger span::before,
.sg-burger span::after { content: ""; position: relative; }
.sg-burger span::before { top: -12px; }
.sg-burger span::after { top: 8px; }
body.is-menu-open .sg-burger span { background: transparent; }
body.is-menu-open .sg-burger span::before { top: 0; transform: rotate(45deg); }
body.is-menu-open .sg-burger span::after { top: -4px; transform: rotate(-45deg); }

/* 透明（覆盖在首屏上）变体 */
.sg-header--over {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: transparent;
    border-bottom-color: transparent;
}
/* 2026-10-11 用户要求：导航栏常态化显示 → 首页已改回白底页头（headerOver=false），
   原「未吸顶时隐藏页头内容（opacity:0）」规则作废删除。
   注：设计切片 slice-01-hero.jpg 顶部烙印的导航文字仍由 docs/tools/make-slices.php
   的 patch_nav_out() 抠除（不抠会与 HTML 导航文字重影），LOGO 烙印同理已抠除
   （patch_logo_text_out / patch_logo_icon_out），原图备份 slice-01-hero.jpg.bak-20261011。 */
.sg-header--over .sg-logo__cn,
.sg-header--over .sg-nav__link .cn,
.sg-header--over .sg-header__tel { color: #fff; }
.sg-header--over .sg-logo__en,
.sg-header--over .sg-nav__link .en { color: rgba(255, 255, 255, .72); }
.sg-header--over .sg-nav__item + .sg-nav__item::before { background: rgba(255, 255, 255, .38); }
.sg-header--over .sg-burger { border-color: rgba(255, 255, 255, .5); }
.sg-header--over .sg-burger span,
.sg-header--over .sg-burger span::before,
.sg-header--over .sg-burger span::after { background: #fff; }
.sg-header--over .sg-nav__item.is-active .cn { color: #fff; }
.sg-header--over .sg-nav__item.is-active .sg-nav__link::after { background: #fff; }

/* 滚动后的视觉态（非首屏覆盖态：仅加阴影） */
.sg-header.is-sticky {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom-color: var(--sg-line);
    box-shadow: 0 12px 44px rgba(24, 32, 44, .06);
}

/* 首屏覆盖态在滚动后转为固定吸顶，并恢复深色文字 */
.sg-header--over.is-sticky {
    position: fixed;
    top: 0; left: 0; right: 0;
    animation: sg-header-in .3s ease;
}
.sg-header.is-sticky .sg-logo__cn,
.sg-header.is-sticky .sg-nav__link .cn,
.sg-header.is-sticky .sg-header__tel { color: var(--sg-ink); }
.sg-header.is-sticky .sg-logo__en,
.sg-header.is-sticky .sg-nav__link .en { color: var(--sg-gray-2); }
.sg-header.is-sticky .sg-nav__item + .sg-nav__item::before { background: var(--sg-line); }
.sg-header.is-sticky .sg-nav__item.is-active .cn { color: var(--sg-teal); }
.sg-header.is-sticky .sg-nav__item.is-active .sg-nav__link::after { background: var(--sg-teal); }
.sg-header.is-sticky .sg-burger { border-color: var(--sg-line); }
.sg-header.is-sticky .sg-burger span,
.sg-header.is-sticky .sg-burger span::before,
.sg-header.is-sticky .sg-burger span::after { background: var(--sg-ink); }

@keyframes sg-header-in {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* ---------------- 页脚（全站统一 = 首页页脚切片贴图） ----------------
   2026-11-06 用户指令：全站页脚统一按照首页的页脚进行复刻。
   视觉 = slice-10-footer.jpg（4000×798，灰底 #E6E6E6）width:100% 随画布等比：
   4000 画布 → 798px 高 / 1920 → 383px / 764 → 152px。
   margin-top:588px 仅 4000 画布页生效（实测：图文段底 → 页脚 588px，
   使页脚带与切片层 y22158 对齐，页面总高不变）；
   1920 四页与窄画布 margin-top:0（见 .sg-page--design1920 / is-narrow-canvas 段）。 */
.sg-footer {
    position: relative;
    margin-top: 588px;
    background: var(--sg-bg-footer);
}
.sg-footer__img { display: block; width: 100%; height: auto; }
/* TEL 文本热区（坐标 % 量测自 slice-10-footer.jpg x1487..1895 y318..350，留点按余量） */
.sg-footer__tel-hot {
    position: absolute;
    left: 36.5%;
    top: 37%;
    width: 11.5%;
    height: 7%;
    border-radius: var(--sg-radius-sm);
}
.sg-footer__tel-hot:focus-visible { outline: 4px solid var(--sg-teal); outline-offset: 2px; }

/* ---------------- 内页骨架 ---------------- */
.sg-inner-banner {
    position: relative;
    min-height: 840px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--sg-ink);
}
.sg-inner-banner__bg { position: absolute; inset: 0; }
.sg-inner-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.sg-inner-banner__bg::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(12, 16, 22, .62) 0%, rgba(12, 16, 22, .28) 55%, rgba(12, 16, 22, .18) 100%);
}
.sg-inner-banner__body { position: relative; padding: 0 0 128px; color: #fff; }
.sg-inner-banner__title { font-size: 92px; font-weight: 700; line-height: 1.2; }
.sg-inner-banner__en {
    font-family: var(--sg-font-en);
    font-size: 28px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    margin-top: 24px;
}
.sg-inner-banner__sub { margin-top: 32px; max-width: 1280px; color: rgba(255, 255, 255, .86); }

.sg-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 26px; color: var(--sg-gray); padding: 40px 0; }
.sg-breadcrumb a:hover { color: var(--sg-teal); }
.sg-breadcrumb span.sep { color: var(--sg-gray-2); }

.sg-prose { font-size: 32px; line-height: 1.95; color: var(--sg-ink-2); }
.sg-prose p + p { margin-top: 40px; }
.sg-prose h3 { font-size: 44px; color: var(--sg-ink); margin: 80px 0 32px; }
.sg-prose strong { color: var(--sg-ink); }

/* 建设中提示 */
.sg-placeholder {
    border: 2px dashed var(--sg-line);
    border-radius: var(--sg-radius);
    padding: 112px 64px;
    text-align: center;
    color: var(--sg-gray);
    background: var(--sg-bg-soft);
}
.sg-placeholder strong { display: block; font-size: 36px; color: var(--sg-ink); margin-bottom: 16px; }


/* ==========================================================================
   四大品牌页：设计稿图片页（设计稿 10–13，764×1689）
   与首页同一套开发方式 —— 设计稿整图即页面内容，画布宽度按页可配：
   品牌页画布 764px（base.css 的 body.sg-page--brand 覆盖 --sg-canvas-w），
   main.js 读 <html data-design-width="764"> 做整页等比缩放
   （窗口窄于画布 → 缩小铺满；窗口宽于画布 → 不放大，居中显示）。
   页头/页脚仍是站点真实组件；窄画布下需要一套紧凑版式（html.is-narrow-canvas）。
   ========================================================================== */
.sg-brand-page { position: relative; }
.sg-brand-page__img {
    display: block;
    width: 764px;          /* 画布宽度，与设计稿 1:1 */
    height: auto;
    max-width: none;
}
/* Explore：对齐设计稿图内按钮的透明热区（实测自 hero-hosting.jpg，四稿版式一致） */
.sg-brand-page__hotspot {
    position: absolute;
    left: 32.2%; top: 92.3%;
    width: 36.1%; height: 5%;
    border-radius: 999px;
}
.sg-brand-page__hotspot:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }

/* ==========================================================================
   窄画布版式（main.js 依据 data-design-width ≤1000 给 <html> 加 .is-narrow-canvas）
   页头紧凑 + 汉堡抽屉；页脚单列。范围仅限品牌页画布，首页等 4000 画布不受影响。
   ========================================================================== */
html.is-narrow-canvas { overflow-x: hidden; }
html.is-narrow-canvas body { overflow-x: hidden; }

/* ---- 页头 ---- */
html.is-narrow-canvas .sg-header__inner { min-height: 0; padding: 20px 32px; gap: 16px; }
html.is-narrow-canvas .sg-logo__lockup { height: 44px; }
html.is-narrow-canvas .sg-nav { display: none; }
html.is-narrow-canvas .sg-burger { display: inline-flex; width: 64px; height: 64px; border-radius: 18px; }
html.is-narrow-canvas .sg-burger span,
html.is-narrow-canvas .sg-burger span::before,
html.is-narrow-canvas .sg-burger span::after { width: 28px; height: 3px; }
html.is-narrow-canvas .sg-burger span::before { top: -10px; }
html.is-narrow-canvas .sg-burger span::after { top: 6px; }
html.is-narrow-canvas .sg-header__actions { gap: 18px; }
html.is-narrow-canvas .sg-header__tel { font-size: 22px; gap: 0; }
html.is-narrow-canvas .sg-header__tel span { display: none; }   /* 窄画布只留电话图标，给汉堡让位 */
html.is-narrow-canvas .sg-header__tel svg { width: 30px; height: 30px; }

/* ---- 抽屉导航（复用页头既有 [data-menu-toggle] 交互） ---- */
html.is-narrow-canvas body.is-menu-open .sg-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; top: 84px; bottom: 0;
    z-index: 70;
    background: #fff;
    padding: 24px 32px 48px;
    overflow-y: auto;
    border-top: 2px solid var(--sg-line);
}
html.is-narrow-canvas .sg-nav__item { width: 100%; }
html.is-narrow-canvas .sg-nav__link {
    flex-direction: row; align-items: center; justify-content: flex-start;
    text-align: left; gap: 0; padding: 24px 0;
}
html.is-narrow-canvas .sg-nav__link .cn { font-size: 32px; }
html.is-narrow-canvas .sg-nav__link .en { display: none; }      /* 英文副标签在 764 画布下会把行撑破 */
html.is-narrow-canvas .sg-nav__item + .sg-nav__item::before { display: none; }
html.is-narrow-canvas .sg-nav__item.is-active .sg-nav__link::after { left: 0; right: auto; width: 56px; bottom: 6px; }

/* ---- 页脚：单列，尺寸按 764 画布 ---- */
/* 窄画布（764 品牌页）：页脚同为贴图，仅去掉 588px 大留白（图随画布等比缩至 ~152px 高） */
html.is-narrow-canvas .sg-footer { margin-top: 0; }

/* ==========================================================================
   1920 画布设计稿页（新四稿：教研体系/学员成果/教研洞察/关于苏能）
   body.sg-page--design1920：画布 1920（--sg-canvas-w 见 base.css）；
   图内烙印页头带/页脚带均已裁除，页头/页脚为真实 DOM 组件
   （2026-11-06 用户指令：内页导航按首页统一）。
   ========================================================================== */

/* 真实页头紧凑版式 = 标准页头 ×0.48（1920/4000 画布换算）。
   保证任意窗口宽度下浮出页头与全站其它页页头视觉完全一致
   （如 1920 窗口：首页 zoom0.48 × 240px = 115px，本页 zoom1 × 115px = 115px）。
   2026-11-06 随首页页头加高/LOGO 放大同步：min-height 81→115、logo 38→50。 */
body.sg-page--design1920 .sg-header__inner {
    min-height: 115px;
    gap: 23px;
    /* 容器随画布换算：首页 3296px×0.48 = 1582px、内边距 48px×0.48 = 23px，
       使 LOGO/导航/电话的位置与首页在同窗口下逐像素对齐 */
    max-width: 1582px;
    padding: 0 23px;
}
body.sg-page--design1920 .sg-logo__lockup { height: 50px; }
body.sg-page--design1920 .sg-nav__link { padding: 10px 19px; gap: 2px; }
body.sg-page--design1920 .sg-nav__link .cn { font-size: 14px; }
body.sg-page--design1920 .sg-nav__link .en { font-size: 8px; }
body.sg-page--design1920 .sg-nav__item + .sg-nav__item::before { height: 19px; margin-top: -10px; }
body.sg-page--design1920 .sg-nav__item.is-active .sg-nav__link::after { left: 19px; right: 19px; height: 2px; border-radius: 2px; }
body.sg-page--design1920 .sg-header__actions { gap: 13px; }
body.sg-page--design1920 .sg-header__tel { font-size: 20px; gap: 10px; }
body.sg-page--design1920 .sg-header__tel svg { width: 23px; height: 23px; }

/* 页脚紧随设计内容：588px 是 4000 画布的对齐值，1920 画布归零
   （设计内容已在分隔线处裁断，自带页脚带已剔除） */
body.sg-page--design1920 .sg-footer { margin-top: 0; }

/* 设计稿图内热区（导航/LOGO/CTA）：透明可点、不改变画面 */
.sg-design-hotspot { position: absolute; z-index: 31; display: block; border-radius: 12px; }
.sg-design-hotspot:focus-visible { outline: 4px solid var(--sg-teal); outline-offset: 2px; }

/* ==========================================================================
   内页设计稿切片页（.sg-design-page，用于 /service 与品牌页桌面版）
   与首页切片同一套机制：切片层绝对定位锚定本节，DOM 文案在切片之下（SEO/读屏）。
   容器高度 = 设计稿内容高（已剔除尾部空白），overflow:hidden 保证语义内容
   不影响页面总高，切片与设计稿逐像素对齐。
   ========================================================================== */
.sg-design-page { position: relative; overflow: hidden; }
.sg-slice-page {
    position: absolute;
    left: 0;
    display: block;
    width: var(--sg-canvas-w, 4000px);   /* 随画布：4000 默认 / 1920 四稿 / 764 品牌窄屏 */
    max-width: none;
    height: auto;
}
.sg-design-page__content { position: relative; padding: 0 48px; }

/* 品牌页两套变体：桌面切片版 / 窄屏竖版图片页 */
.sg-brand-mobile { display: none; }
.sg-brand-desktop { display: block; }
@media (max-width: 768px) {
    body.sg-page--brand-desktop .sg-brand-desktop { display: none; }
    .sg-brand-mobile { display: block; }
}