/* ===========================================================================
   弘大教育官网 · 主题层
   ---------------------------------------------------------------------------
   职责边界：vendor.css（StartBootstrap Agency + Bootstrap 5.2，MIT）原样不动，
   本文件只做三件事 —— ① 换弘大品牌色 ② 换中文字体栈（去掉 Google Fonts）
   ③ 补模板没有的组件（专业组 chip / 二维码卡 / 成绩数字 / 案例表 / 占位说明）。

   ⚠️ 覆盖 vendor 时必须**照抄它的选择器**：它写 `header.masthead`、`section#contact`、
   `.page-section h2.section-heading`、`#about .portfolio-item`
   这类带元素/父级的选择器，特异性高于裸类名，裸写会被盖掉（本文件已逐条对齐）。
   =========================================================================== */

:root {
  /* 品牌色（真源 = brand/弘大招生三折页-原型.html 的三折页规范） */
  --hd-navy: #0E3769;         /* logo 主色 */
  --hd-navy-deep: #0A2A50;    /* 大面积底 / 渐变深档 */
  --hd-navy-foot: #07203D;    /* 页脚 */
  --hd-ink: #3A4657;          /* 正文 */
  --hd-gray: #6B7686;         /* 次要文字 */
  --hd-line: #E3E9F2;         /* 描边 / 分隔 */
  --hd-tint: #EEF3F9;         /* 浅藏青底 */
  --hd-orange: #E99311;       /* CTA / 强调（2026-10-08 青峰定，替换原 #FF7D29） */
  --hd-orange-dark: #CE830F;  /* hover 深一档（同色相压暗约 10%，随基色同步） */
  --hd-orange-rgb: 233, 147, 17;

  /* 版心（居中栏宽）—— 2026-10-08 13:28 青峰定「文本框最宽 800」后收口成变量：
     以前 820（.hd-intro）/ 760（.section-subheading）/ 1040（表格）散在四处，改一次要翻全文。
     `--hd-narrow` = 副标题 / 引子正文 / 2 列表格；`--hd-wide` = 4 列对比表 / 九种形态卡。 */
  --hd-narrow: 800px;
  --hd-wide: 1040px;

  /* Bootstrap 主题变量（5.2 里用 var 的地方靠这里生效） */
  --bs-primary: #E99311;
  --bs-primary-rgb: 233, 147, 17;
  --bs-secondary: #0E3769;
  --bs-secondary-rgb: 14, 55, 105;

  /* 中文栈：不再依赖 Google Fonts（国内常拉不动，会 FOUT 甚至白屏） */
  --hd-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
             "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Hiragino Sans GB", sans-serif;
}

/* ---------- 1. 字体栈：模板把 Montserrat/Roboto Slab 挂在 body、标题、按钮上 ---------- */
body, h1, h2, h3, h4, h5, h6, .btn, input, textarea, select,
#mainNav .navbar-brand, #mainNav .navbar-nav .nav-item .nav-link, #mainNav .navbar-toggler,
header.masthead .masthead-subheading, header.masthead .masthead-heading,
.page-section h2.section-heading, .page-section h3.section-subheading {
  font-family: var(--hd-font);
  letter-spacing: 0;
}
html { scroll-behavior: smooth; scroll-padding-top: 84px; }   /* 固定导航会盖住锚点标题 */
body { color: var(--hd-ink); }

/* ---------- 2.5 容器左右留白 ---------- */
/* Bootstrap 5.2 的 .container 是 `padding: calc(var(--bs-gutter-x) * .5)`，而 --bs-gutter-x: 1.5rem
   → 恒定 12px，**且不随断点变化**（手机上也只 12px，实测已确认）。青峰 2026-10-08 定为 16px。
   ⚠️ 直接写 padding，不要去改 --bs-gutter-x：那个变量是 .row 在用的（.row 自己重声明了 1.5rem，
      所以改它不影响行间距，但会波及所有继承它的后代，语义不干净）。
   ⚠️ 这条顺带把「row 负边距」的安全余量从 12px 提到 16px —— 改前实测手机端有元素左沿正好落在 0
      （g-4 的 −12px 撞上容器 12px，零余量）；改后留 4px，更不容易横向溢出。 */
.container { padding-left: 16px; padding-right: 16px; }

/* ---------- 2. 主题色：Bootstrap 编译版把 #ffc800 写死在规则里，必须逐条覆盖 ---------- */
.btn-primary { background-color: var(--hd-orange); border-color: var(--hd-orange); font-weight: 600; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background-color: var(--hd-orange-dark); border-color: var(--hd-orange-dark);
}
.btn-primary:focus, .btn-check:focus + .btn-primary { box-shadow: 0 0 0 0.25rem rgba(var(--hd-orange-rgb), 0.35); }
.text-primary { color: var(--hd-orange) !important; }
.bg-primary { background-color: var(--hd-orange) !important; }
.btn-dark { background-color: var(--hd-navy); border-color: var(--hd-navy); }
.text-muted { color: var(--hd-gray) !important; }
#mainNav { background-color: var(--hd-navy-deep); }
/* ⚠️ 滚动后必须**连状态类一起写**：模板的 `#mainNav.navbar-shrink`（具体性 1-1-0）
   比裸写 `#mainNav`（1-0-0）高，只盖裸选择器盖不住 → 实测滚动时页眉会从品牌藏青
   变成模板默认的近黑灰 #212529（青峰 2026-10-08 看到的「灰色页眉」就是它）。
   现在两端同色，页眉滚动前后不再变色。 */
#mainNav.navbar-shrink { background-color: var(--hd-navy-deep); }
#mainNav .navbar-brand img,
#mainNav.navbar-shrink .navbar-brand img { height: 24px; width: auto; }
/* 高度 24px = 青峰 2026-10-08 拍板（原 20px 是他看 PC 实景后判的「太小」）。
   ⚠️ **为什么必须写成两条选择器**：模板里 `#mainNav .navbar-brand img`（1-1-1）在 ≥992px
      给 2rem，而 `#mainNav.navbar-shrink .navbar-brand img`（**1-2-1**）给 1.5rem ——
      具体性更高，所以**滚动后一直是 24px 赢了我们的 20px**，两个状态长期不一致。
      青峰正是看着滚动后那版（24px）说「刚刚好」，故定为基准并两端统一。
   新 logo 是纯文字横版、很扁：viewBox 171.92 × 22.66 ≈ 7.59:1 → 24px 高 = 182px 宽。
   窄屏安全余量实测：320px 时距折叠按钮仍余 28.8px（360/375/390/430 余 68.8/83.8/98.8/138.8），零溢出，
   所以**仍然不需要小屏收缩**（旧 32px 时宽 243px、360px 屏只剩 16px 余量，才加过
   max-width:575.98px 那条；已随 2026-10-08 那次删除）。 */
#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav .navbar-nav .nav-item .nav-link:hover { color: var(--hd-orange); }
#mainNav .navbar-nav .nav-item .nav-link { font-size: 1rem; padding-inline: 0.85rem; }
/* 原有一条 `#mainNav .navbar-nav .nav-item .btn`（10px 圆角）随 2026-10-08 青峰删掉
   「扫码进小程序」按钮一起删除 —— 页眉里已无任何 .btn，留着就是死代码。
   若以后页眉再加按钮，圆角照旧取 hdp PC 真源 10px（--hd-radius-lg）。 */

/* ---------- 3. 区块标题与留白：中文要更大行高、更小段距 ---------- */
.page-section { padding: 5rem 0; }
@media (min-width: 768px) { .page-section { padding: 6.5rem 0; } }
.page-section h2.section-heading {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--hd-navy);
  margin-bottom: 1rem;
}
.page-section h3.section-subheading {
  font-size: 1.02rem;
  font-style: normal;          /* 模板是斜体，中文斜体很别扭 */
  font-weight: 400;
  line-height: 1.9;
  max-width: var(--hd-narrow);
  margin: 0 auto 3rem;
}
.bg-light { background-color: var(--hd-tint) !important; }

/* ---------- 4. 首屏 ----------
   原模板真源 = `/tmp/tpl/show/agency/dist/css/styles.css`（`header.masthead` 段，2023-03-25）。
   ✅ **2026-10-08 青峰「图的裁切是对的」→ 背景块比例照原模板，保留**（见下）。
   ❌ **同日青峰「字号改回去吧」→ 原模板那套字号已撤回**。原因记死，别再自作主张套一遍：
      模板字号 = <768 副标 24 / 主标 52px，≥768 副标 36 / 主标 72px，line-height = 1。
      套到我们内容上会出两个副作用：① 主标 <768 恒 52px 会把 7 个汉字折成 3 行（模板是拉丁文才敢这么干）
      ② 副标 24px 时整句 16.21em = 389px，≤390px 屏放不下、会折成两行。
      即：**模板的字号是为拉丁文 + 短标语设计的，直接照搬到中文长标语会崩**。 */
/* 背景块比例照原模板：**块高由内边距决定，不加 min-height**（青峰 2026-10-08 认定「裁切是对的」）。
   ⚠️ 原先这里有 `min-height: 88vh`（连 `display:flex` / `align-items:center`），按他要求撤掉 ——
      它让块高随屏幕高度变，`cover` 的裁切窗口跟着变，就不是模板那套比例了。
      反直觉的事实：**88vh 在宽屏上反而裁得少** —— 他的屏 2522×1400 时块高 1232 → 看得到原图 74% 高；
      撤掉后块高 880 → 只看到 53%。**想少裁图要调块高，不是换图。**
   ⚠️ 背景那层**轻渐变是我们自己的**（青峰给的教室实拍极深，实测白字叠原图就 14.5:1，不需要重遮罩，
      只留一层斜向渐变做纵深）—— 原模板没有这层，因为它配的是另一张图。 */
header.masthead {
  padding: 10.5rem 0 6rem;                 /* 168 / 96px，同原模板 */
  background-color: var(--hd-navy-deep);   /* 底图加载失败时的兜底 */
  background-image: linear-gradient(150deg, rgba(10, 42, 80, 0.55) 0%, rgba(11, 41, 79, 0.28) 45%, rgba(14, 55, 105, 0.06) 100%),
                    url("../assets/img/hero-bg.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
@media (min-width: 768px) { header.masthead { padding: 17rem 0 12.5rem; } }   /* 272 / 200px，同原模板 */
header.masthead .masthead-subheading {
  /* 🔴 2026-10-08 16:11 青峰：「2028 届　免费试听火爆预约中」和下面那行「60 人小班课 / …」
     **字号一样大** → 这里与 `.masthead-lead` 用**完全相同的 clamp**（原来这条是 1.02rem，比 lead 小一档）。
     ⚠️ **两处必须同值**：改这里就把下面 `.masthead-lead` 一起改（它有几行注释互指）。 */
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-style: normal;          /* 模板是斜体，中文斜体很别扭 */
  line-height: 1.8;
  letter-spacing: 0.16em;      /* ⚠️ 字距是这两行现在**唯一的差异**（副标题拉开、lead 不拉）——
                                  他这次只说了「字号」，所以字距没动。若他看后觉得「还是不一样」，
                                  第一个要动的就是这条，别去改字号。 */
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1.1rem;
}
header.masthead .masthead-heading {
  /* 上限 4.5rem(72px)：原上限 3.9rem(62.4px) 在 1200px 视口就撞到，而青峰的工作屏实测 ≈2522px 宽
     → 主标文本实宽恒 445.5px，1440 屏占视口 30.9%、2522 屏只占 17.7%（视觉缩水 43%）→ 2026-10-08「主标题太小了」。
     ⚠️ 外面套 min(..., 11.5vw) 是防悬崖：主标最长一行 7 个汉字（**实测 7.14em**），
        只抬下限会在 320px 屏算成 41.6px(297px 宽) > 可用 288px → **折成 4 行**。
        11.5vw 在 320px = 36.8px，留余量；390px 以上 11.5vw 已大于 41.6px，等于不生效。
        （13.6vw − 5px 那道更贴合的护栏随模板字号一起撤了，将来若要极紧的排版再取用。） */
  font-size: min(clamp(2.6rem, 5.2vw, 4.5rem), 11.5vw);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: 0.02em;
  margin-bottom: 1.4rem;
}
.masthead-lead {
  /* ⚠️ 与上面 `header.masthead .masthead-subheading` **同号**（2026-10-08 16:11 青峰要求那两行一样大）
     → 改这里必须同步改那里，两处的 clamp 要字字相同。 */
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 2;
  color: rgba(255, 255, 255, 0.88);
  max-width: var(--hd-narrow);
  margin: 0 auto 2.2rem;
}
/* 首屏只剩「马上预约」一个按钮（2026-10-08 青峰：去掉「扫码进小程序」「先看我们怎么做」）
   → 原来的 .btn-hero-ghost 幽灵按钮样式已随之删除，别在这里留死代码。 */
.masthead .btn-group-hero { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 首屏 CTA「马上预约」：造型对齐 hdp PC 端按钮真源
   （hdp/teacher/src/pc/styles/element-overrides.scss ——「32px 高 / 10px 圆角 / 14px 字」，
   --hd-radius-lg = 10px 就是按钮圆角，hdp 不用胶囊）。
   这里是首屏 CTA，等比放大一档取 46px 高 / 16px 字，**圆角严格照抄 10px**。
   改前实测 154×69px、圆角 6px（Bootstrap .btn-xl 的 20px/40px 内边距太高）→ 青峰 2026-10-08 指出。 */
.btn-hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px;
  padding: 0 46px;
  font-size: 20px;
  line-height: 1;
  border-radius: 10px;
}
/* 尺寸沿革（都是青峰本人拍的，别再来回磨）：
   154×69（Bootstrap .btn-xl 原样，20px/40px 内边距）→ 2026-10-08「高度太高了，窄一点」→ 134×46
   → 同日 11:14「按钮太小了，换大的那个，四个字也放大」→ **172×60 / 20px 字**。
   现在是「比 btn-xl 矮一档、但字已放大到 20px」，条状更符合 CTA 比例。
   圆角始终严格照抄 hdp PC 真源 10px（`--hd-radius-lg`），**不受尺寸变化影响**。 */

/* ---------- 4.5 了解弘大：一段引子（.hd-intro）+ 六张卖点卡（原模板 Portfolio 形式） ---------- */
/* 结构由青峰 2026-10-08 定死：1 段引子 + 6 个卖点，**别改结构**。
   引子版面 = 一句副标题（h2 下居中）+ 一段正文（**窄栏 820px 居中，正文也居中**）。
   📌 版本沿革（这条改动过三回，别再凭印象改）：
     ① 最初 = 居中窄栏 820px（正文左对齐）
     ② 12:20 = 改成**左图右字**（col-lg-5 图 / col-lg-7 文字）
     ③ 12:33 = 青峰「**不要这张图了 小字也居中 我重新分一下行**」→ **撤回左图右字，回到窄栏居中**，
        并**把正文从「左对齐」改成「居中」**（这是他明确要的，中文长段落居中读起来费劲也照做）；
        配图 `assets/img/intro.jpg` 一并撤下（挪到 /tmp 待用，没删）。
     ⚠️ 正文那一段的换行是**青峰手动指定的**（第 2 段中间一个 `<br class="hd-br-lg">`），
        br 在窄屏被关掉（见下面的媒体查询）—— 否则 800px 长的行在手机上会先自动折 2 次、再被 br 多切一刀。
     ⚠️ `.hd-intro-lead`（副标题）**不属于 `.hd-intro` 块**，它是紧跟在 `h2` 后的那个 `<p>`：
        `.hd-intro p` 那条**不作用于它**，改它的样式时别搞错作用域。
   六个卖点同日改成**原模板 Portfolio 形式**（他指名：「6 张图，每张图带主副标题，点击图片弹窗展示明细」）：
     卡片 = 配图 + 主标题（卖点名）+ 副标题（提要句）；明细（英文名 / 大图 / 正文全文）进 #featureModal。
     原 `.hd-feature` 文字卡那一套（白底 + 顶部 3px 橙线 + 四行文字）**已整段删除** —— 不留死代码。
   版面口径：卡片三列（col-lg-4，同原模板），白卡浮在浅藏青底上。
   配色：**副标题不用橙色**（#E99311 白底只有 2.43:1，小字不达标）→ 走 .text-muted 的 --hd-gray；
   橙色只做「悬停遮罩」—— 当底色用，上面叠的是白色图标（图形元素，不承担正文可读性）。
   ⚠️ **这套样式必须挂在 `#about` 下**：vendor 的 Portfolio 规则**全是 `#portfolio .xxx`** —— 那段（课程体系）
      2026-10-08 16:0x 已整段删除，vendor 那套现在站上没人用了；但**作用域仍要照写不误**，
      否则以后新增的段落会跟这里串味（第 6 节那套「课程体系」样式也已同步删除）。 */
/* 版心窄栏居中（现 = `--hd-narrow` 800px）：正文整块居中排版时**必须收窄**，铺满 1320 容器行长超过 80 字，居中会读起来很累。
   这个数还兼一个功能：**它是手动断行那行的安全宽度** —— 📏 2026-10-08 13:30 复测：第 2 段那两行 = **732 / 672px**，
   距 800 还有 68px 余量（这条从 820 收到 800 时**没有把断行挤折**，已实测）。 */
.hd-intro { max-width: var(--hd-narrow); margin: 0 auto 3.5rem; }
.hd-intro p { font-size: 1rem; line-height: 2.05; color: var(--hd-ink); text-align: center; margin-bottom: 1.1rem; }
/* ⚠️ `.hd-intro` 现在**两处共用**：「了解弘大」的引子 + 「小班课」的引子/表前引子（同一套居中窄栏口径）。
   改动它之前先看这两个调用点；只想收某一处就用修饰类，别动基类。
   `.hd-intro--tight` = 用在**表格前面**的那一段，下距从 3.5rem 收到 2.2rem（表头离得太远会显得断档）。 */
.hd-intro--tight { margin-bottom: 2.2rem; }
.hd-intro--tight p:last-child { margin-bottom: 0; }
/* 手动断行的 br：**只在容器真能容下他分的那一行时才生效**。
   ⚠️ **别按视口算，要按「实际可用容器宽」算** = `.hd-intro` 的 800 与 `.container` 内宽**取小值**。
      Bootstrap 的 `.container` 内宽是分档的：<576 → 100vw−32 ／ 576–767 → 508 ／ **768–991 → 688**
      ／ 992–1199 → 928 ／ ≥1200 → ≥1108。**可见只有 ≥992px 时才取得到 800**（928 / 1108 都 ≥ 800），
      他分的那两行（📏 实测 732 / 672px）也才都放得下（1440 与 992 两档逐行量过，断点位置完全一致）。
      实测教训：我第一版把断点设在 852px（按视口硬算）→ **852~991 区间 br 生效但容器只有 688，
      前半行先自动折一次、再被 br 切一刀 → 第 2 段变成 3 行，比不加 br 还难看**。
      所以断点直接取 **992px（= Bootstrap 的 lg 起点）**，跟容器分档对齐，别自己编数。 */
@media (max-width: 991.98px) { br.hd-br-lg { display: none; } }
/* 「了解弘大」的副标题（紧跟在 h2 后的那个 <p>，**不在 .hd-intro 里**）
   对齐/间距口径：`text-align: center` 不能靠父级 `.text-center` 继承来省 —— 显式写着，免得哪天挪位置就丢了；
   下距 3rem 是对齐其他区块 `h3.section-subheading` 的口径（h2 的 mb 是 1rem，标题↔副标题 16px）。
   📌 版心 `--hd-narrow`（青峰 2026-10-08 13:30「**所有的小字内文都按这个最大宽度做**」）：
     这就是青峰 13:28 那条「副标题能不能做一个**跟着宽度变化的、看不见的文本框**、文本框居中」提的那个元素
     —— 做成的形态 = `max-width: 800` + `margin-inline: auto`（框隐形、居中，随视口缩到 800 以下）。
     ✅ **宽度是对称的第三条**：`.section-subheading`（区块副标题）和 `.hd-intro`（引子正文）都已走同一个变量。
     ⚠️ **`text-align` 保持 center，没有改成左对齐**：青峰 12:33 明确要过「小字也居中」；
        他 13:28 说的「文字在里面左对齐」是他描述机制时带的半句，**与之冲突，按『拿不准先问』处理**：
        本处不动，已把这条摆给他确认（要改就是这一行的事）。
     📏 实测（1440 档）：正文实宽 388px，**远小于 800 → 这条目前不咬人**，
        但它把「副标题永不铺满 1288 容器」这条规则固化下来，文案变长时才不会失控。 */
.hd-intro-lead {
  text-align: center;
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--hd-navy);
  max-width: var(--hd-narrow);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}
/* 收尾金句：**只有加粗 + 深藏青**（2026-10-08 12:33 青峰：「最下这一行 不需要行前的橙色竖杠」）
   → 原来的 `border-left: 3px solid var(--hd-orange)` + `padding-left: 15px` 已删掉，别再顺手加回来。 */
.hd-intro-quote {
  margin-bottom: 0 !important;
  color: var(--hd-navy) !important;
  font-weight: 600;
}
#about .portfolio-item {
  height: 100%;                          /* 一行里六张卡等高 */
  background: #fff;
  border-radius: 10px;
  overflow: hidden;                      /* 配合圆角裁掉图片的直角 */
  box-shadow: 0 4px 18px rgba(14, 55, 105, 0.07);
  max-width: 26rem;                      /* 同原模板；1320 容器下三列内容宽约 413px，实际不吃这条 */
  margin-left: auto;
  margin-right: auto;
}
/* 卡片缩略图 = `img-fluid w-100`，**没有独立规则**（宽度由卡宽决定）。
   ⚠️ 比例锚点跟弹窗位一致 = **16:9**：配图 1280×720 → 1320 容器下实测 413×232（旧 4:3 时是 413×310）。
   🎬 卡片位以后也换成 `<video>`（青峰 2026-10-08 12:44：「**全部都是视频可以的**」——
      卡片位/弹窗位都用视频，**不单独做封面图**）→ 换时这里必须补三样：
      `aspect-ratio: 16 / 9`（img 靠天然比例，video 不会）＋ `object-fit: cover` ＋ **不加 controls**；
      并且 6 个 video 要 `preload="metadata"`、**禁止 autoplay**，否则一进页面并发下载 6 段视频。 */
#about .portfolio-link { position: relative; display: block; }
/* 悬停遮罩：原模板底色是 rgba(255,200,0,.9) 的黄，换品牌橙，过渡时长同模板（0.25s） */
#about .portfolio-link .portfolio-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--hd-orange-rgb), 0.9);
  opacity: 0;
  transition: opacity 0.25s;
}
/* `:focus-visible` 给键盘 Tab；`:active` 给触屏 —— 手机没有 hover，不加这条按下去毫无反馈 */
#about .portfolio-link:hover .portfolio-hover,
#about .portfolio-link:focus-visible .portfolio-hover,
#about .portfolio-link:active .portfolio-hover { opacity: 1; }
#about .portfolio-hover-content { color: #fff; }
#about .portfolio-hover-content svg { width: 46px; height: 46px; display: block; }
#about .portfolio-caption { padding: 20px 22px 22px; text-align: center; }   /* 模板就是居中 */
#about .portfolio-caption-heading { font-size: 1.12rem; font-weight: 700; color: var(--hd-navy); margin-bottom: 7px; }
#about .portfolio-caption-subheading { font-size: 0.92rem; font-style: normal; line-height: 1.8; }
/* 副标题最长一条 20 字 ≈ 294px ＜ 卡内可用 369px → 六张卡副标题都是一行，卡高天然齐平 */

/* ---------- 4.6 卖点弹窗：沿用原模板 .portfolio-modal（vendor 那套定位 / 内边距直接生效） ---------- */
/* vendor 里 `.portfolio-modal` 是**全局类**（不像卡片规则挂在 #portfolio 下）→ 遮罩、居中、
   右上角关闭按钮的位置都不用重写，这里只压中文排版：
   `padding 上下 6rem` 是给拉丁文短标题留的空气 → 中文压到 4rem / 3.5rem；
   `h2 3rem` + `p.item-intro` 斜体 + Roboto Slab → 全按本站中文口径改掉（同首屏那次教训，别照搬模板字号）。
   ⚠️ 对齐口径（青峰 2026-10-08 12:13 校过）：**整块弹窗都是居中的**（标题区 + 副标题 + 配图居中），
      **只有最下面那段正文左对齐** —— 原模板是全文居中，但那是 2–3 行拉丁文；我们每段约 200 汉字（约 5 行），
      居中会两头都不齐、读起来费劲，所以单独把正文改成左对齐。
      🔴 **`text-align: left` 只能写在 `p:last-child` 上，不能写在 `p` 上**：弹窗里有两个 `<p>`
      （`.item-intro` 副标题 + 正文），写在 `p` 上会把副标题一起打成左对齐（`p.item-intro` 只声明了 margin，
      它拿不到自己的对齐值 → 直接被兜底规则吃掉）。**这个坑踩过一次，别再合回去。** */
/* 【弹窗宽度】原模板是 `margin:1rem; max-width:100vw` → 面板几乎铺满（1440 视口下面板 1408 宽、
   内容只占约 620），**2522 屏上两侧大片空白**。青峰 2026-10-08「可以收窄」→ 定 **992px 居中**。
   🔑 **992 是实测反推出来的，不是拍脑袋**：面板宽 P 时配图实宽 = (P − 8) × 8/12 − 24(col 内边距) − 32(modal-body 内边距)
      = (P − 8) × 0.6667 − 56；令其 = 600 → **P = 992**。
      ⚠️ 我先定的 960 是**算漏了 `.modal-body` 的 1rem 内边距**，实测配图被缩到 579px（−3.5%）→ 已改 992，实测正好 600。
      📌 **改 16:9（2026-10-08 12:40）后这条推导的「600」含义变了，但结论不变**：原来 600 =
      **配图天然宽**（旧 600×450 时 `img-fluid` 只能缩不能放，天然宽就是上限）；现在配图是 **1280×720**，
      天然宽 1280 > 可用宽，**卡住的是列的可用宽**（992 面板下约 600）。两条路都落在 600 → 面板仍是 992。
      若哪天要换更宽的弹窗，改的是这个 992，**不要**去动图片尺寸。
   ⚠️ **`width: calc(100% - 2rem)` 这半句不能省**：`.modal-dialog` 本身是 `width: auto`，
      而这种元素上的水平 `auto` margin 会被**解析成 0**（剩余空间全给 width）。
      只写 `margin: 1rem auto` 的后果实测过：**窄屏（<1024）弹窗贴屏幕两侧、16px 边距整条丢失**
      （320/390/576/768 下量到面板宽 = 视口宽、左右留白 0/0）。
      给了具体 `width` 之后 auto margin 才成立 → 窄屏自动平分那 32px 变成左右各 16px，宽屏才居中。
   ⚠️ 必须连 `.modal-dialog` 一起写：vendor 那条 `.portfolio-modal .modal-dialog`（0-2-0）与我们同权，
      靠「site.css 在 vendor.css 之后」取胜 —— **别把这段挪到 vendor 前面去**。 */
.portfolio-modal .modal-dialog { width: calc(100% - 2rem); max-width: 992px; margin: 1rem auto; }
.portfolio-modal .modal-content { padding-top: 4rem; padding-bottom: 3.5rem; border: 0; border-radius: 12px; }
.portfolio-modal .modal-content h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--hd-navy);
  margin-bottom: 0.6rem;
}
.portfolio-modal .modal-content p.item-intro {
  font-style: normal;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--hd-gray);
  text-align: center;          /* ⚠️ 显式写上：下面那条 `p` 是给正文用的兜底，别让副标题被它吃掉 */
  margin-bottom: 1.8rem;
}
/* 这条 `p` 只管**正文段**的排版。
   🔄 2026-10-08 13:50 改口径：原先是「`text-align: left` 只写在 `p:last-child` 上」，
      因为那时每个弹窗**只有一段**正文；现在「核心理念」的 3 个弹窗是**多段正文 + 表格**，
      只认最后一个子元素会让中间几段仍然居中 → 改成**在 `p` 上统一左对齐**。
   ⚠️ 能这么改的前提是上面 `p.item-intro` 已经**显式写了 `text-align: center`**
      （特异性 0-3-1 > 这里的 0-2-1，副标题不会被吃掉）—— 这条前提别删。
   ⚠️ 旧的坑记在这里，别再合回去：`item-intro` 一旦丢掉那句 center，副标题会跟着正文一起左对齐。 */
.portfolio-modal .modal-content p {
  font-size: 0.98rem;
  line-height: 2.05;
  color: var(--hd-ink);
  max-width: var(--hd-narrow);
  text-align: left;
  margin: 0 auto 1.2rem;
}
.portfolio-modal .modal-content p:last-child { margin-bottom: 0; }
/* 弹窗内的**小标题**（2026-10-08 13:50 新增）：用在「教学」弹窗的「因材施教：先懂学生，再带学生」、
   「带学」弹窗的「十个月备考再分三个阶段推进」这类段落之间的分节标题上。
   口径对齐弹窗 h2：同藏青、但小两档、左对齐（弹窗正文是左对齐的，小标题居中会很跳）。 */
.portfolio-modal .modal-content h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--hd-navy);
  text-align: left;
  max-width: var(--hd-narrow);
  margin: 2.2rem auto 0.9rem;
}
/* 弹窗内的表格：**直接复用 4.7 那套 `.hd-cmp` + `.hd-cmp-scroll`（+ 窄屏 `--stack` 拆卡）**，
   不另写一套 —— 「核心理念」三个弹窗里的 4 张表都走它。这里只补两条：
   ① 外距：弹窗里没有 `.hd-cmp-hint`，默认 `margin: 0 auto` 会让表格贴住上一段；
   ② 🔴 **首列钉住不折**：本套表的第一列是「正课 / 测评 / 项目」这类**短标签**，而 `.hd-cmp` 的表头
      (`thead th`/`tbody th`) 自带 `white-space: nowrap`，**我们这些表的行首用的是 `<td>`，拿不到那条** ——
      实测自动布局把「五课型」表首列压到 **70px**，「正课」被逐字折成两行。
      用 `nowrap + width: 1%` 钉成「按内容宽、剩下的全给后两列」。
      ⚠️ **必须包在 `min-width: 768px` 里**：窄屏时 `--stack` 会把 `td` 改成 `display:block`，
         那条 `width: 1%` 会变成「块级元素只占 1% 宽」→ 内容全挤成一列。断点与 `--stack` 的 767.98 对齐。 */
.portfolio-modal .modal-content .hd-cmp-scroll { margin: 0 auto 1.8rem; }
@media (min-width: 768px) {
  .portfolio-modal .modal-content .hd-cmp tbody td:first-child { white-space: nowrap; width: 1%; }
}
/* 弹窗媒体位：⚠️ **比例锚点 = 16:9**（2026-10-08 12:40 定，青峰「横屏视频」；
   同日 12:44 再定「**全部都是视频可以的**」→ 卡片位/弹窗位都用视频、不单独做封面图）。
   占位图 feature-1~6.svg = 1280×720；将来 `<img>` → `<video controls>` 时**这一条要跟着改**
   —— video 元素默认不锁比例，容器高会塌或撑高 → 必须 `aspect-ratio: 16 / 9`（或给死高度）。
   现在 img 靠天然比例自适应，所以这里不写 aspect-ratio（写了反而多余）。 */
.portfolio-modal .modal-content img { border-radius: 10px; margin-bottom: 2rem; }
/* 弹窗里的英文小标 + 一道橙短线（橙色只做图形，不吃文字对比度门槛） */
.hd-modal-en {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hd-gray);
  margin-bottom: 14px;
}
.hd-modal-en::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin: 9px auto 0;
  background: var(--hd-orange);
  border-radius: 2px;
}
.portfolio-modal .close-modal {
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; color: var(--hd-navy);
}
.portfolio-modal .close-modal svg { width: 26px; height: 26px; display: block; }
@media (max-width: 575.98px) {
  .portfolio-modal .modal-content { padding-top: 3.5rem; padding-bottom: 2.5rem; }
  .portfolio-modal .close-modal { top: 0.75rem; right: 0.75rem; }
}
/* ⚠️ 补 Bootstrap 漏掉的一条：vendor.css 里**没有 `.modal-open`**（那份 CSS 是裁剪过的构建），
   但 bundle.js 弹窗打开时照样会给 <body> 加这个类 → 背景页锁不住滚动。
   macOS 是覆盖式滚动条，Bootstrap 也不会自己补内联锁，所以这条在本机是真有用的。 */
body.modal-open { overflow: hidden; }

/* ---------- 4.7 小班课：两个对比表（同一套 .hd-cmp 的两个形态） ---------- */
/* 布局口径（青峰 2026-10-08 12:56 定）：**4 列对比表窄屏横滑**、**2 列对比表窄屏堆叠成卡**。
   一个基类 `.hd-cmp` + 两个修饰类：
     `.hd-cmp--wide`  = 4 列（专科 / 民办本科 / 公办本科）→ 给 `min-width`，窄屏靠 `.hd-cmp-scroll` 横滑；
     `.hd-cmp--stack` = 2 列（传统大班课 / 弘大小班课）→ 窄屏把每行拆成一张卡，td 上的 `data-label` 补行内小标题。
   ⚠️ **「首选列」用浅橙底 + 藏青字，绝不用橙底白字** —— 白字压 #E99311 只有 2.43:1，不达标（本文件已有同一原则）。
      强调靠背景 tint + 表头顶部一条 3px 橙杠；橙杠用 `inset box-shadow` 画，**不用 border-top**（border 会改行高、把表头顶下去）。
   ⚠️ `overflow-x: auto` 会把圆角外的影子裁掉 → **影子/圆角/描边写在 `.hd-cmp-scroll` 上，表格本身不写**。
   ⚠️ 窄屏堆叠时把 `thead` 做成「视觉隐藏」而不是 `display:none` —— 读屏仍能念出列名。
   ⚠️ 隐藏类要用 **`visually-hidden`（Bootstrap 5 的名字）**，本站 vendor.css 是裁剪构建，
      **没有 `.sr-only`**（5.0 起已改名）—— 我第一版写了 `sr-only`，结果表标题「专科、民办本科、公办本科三项对比」
      直接印在表格底下。同一份裁剪还缺 `.modal-open`（见 4.6 节），踩坑两个了，以后先 grep 再用。 */
.hd-sub {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  color: var(--hd-navy);
  text-align: center;
  line-height: 1.5;
  max-width: var(--hd-narrow);
  margin: 3.25rem auto 1.6rem;   /* ⚠️ **上距不能省**：写成 `0 auto` 会把 h3 自带的上边距一起清零、标题贴到表上 */
}
.hd-cmp-scroll {
  max-width: var(--hd-wide);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--hd-line);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(14, 55, 105, 0.06);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.hd-cmp-scroll--narrow { max-width: var(--hd-narrow); }
.hd-cmp { width: 100%; border-collapse: collapse; }
.hd-cmp--wide { min-width: 680px; }
.hd-cmp th, .hd-cmp td {
  padding: 15px 20px;
  font-size: 0.95rem;
  line-height: 1.8;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hd-line);
}
.hd-cmp thead th { background: #EFF3F8; color: var(--hd-navy); font-weight: 600; white-space: nowrap; }
.hd-cmp thead th.is-best { background: rgba(var(--hd-orange-rgb), 0.14); box-shadow: inset 0 3px 0 var(--hd-orange); }
.hd-cmp tbody th { background: #F8FAFC; color: var(--hd-navy); font-weight: 600; white-space: nowrap; }
.hd-cmp tbody td.is-best { background: rgba(var(--hd-orange-rgb), 0.06); color: var(--hd-navy); font-weight: 600; }
.hd-cmp tbody tr:last-child th, .hd-cmp tbody tr:last-child td { border-bottom: 0; }
/* 「首选」小标：橙色只做描边/底，**字用藏青**（同上，不碰对比度红线） */
.hd-cmp-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--hd-navy);
  border: 1px solid rgba(var(--hd-orange-rgb), 0.5);
  background: rgba(var(--hd-orange-rgb), 0.12);
  vertical-align: 1px;
}
.hd-cmp-hint { display: none; }
@media (max-width: 767.98px) {
  .hd-cmp th, .hd-cmp td { padding: 13px 16px; font-size: 0.9rem; }
  .hd-cmp--wide { min-width: 640px; }
  .hd-cmp-hint { display: block; text-align: center; font-size: 0.82rem; color: var(--hd-gray); margin: 10px 0 0; }
  .hd-cmp--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hd-cmp--stack, .hd-cmp--stack tbody, .hd-cmp--stack tr { display: block; }
  .hd-cmp--stack tr { padding: 14px 16px; border-bottom: 1px solid var(--hd-line); }
  .hd-cmp--stack tr:last-child { border-bottom: 0; }
  .hd-cmp--stack td { display: block; padding: 0; border: 0; }
  .hd-cmp--stack td + td { margin-top: 10px; }
  .hd-cmp--stack td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--hd-gray);
  }
  .hd-cmp--stack td:first-child { color: var(--hd-gray); }
  .hd-cmp--stack td.is-best {
    background: none;
    padding-left: 12px;
    border-left: 3px solid var(--hd-orange);
    color: var(--hd-navy);
    font-weight: 600;
  }
  .hd-cmp--stack td.is-best::before { color: var(--hd-navy); font-weight: 600; }
}

/* ---------- 4.8 小班课：「九种形态」的一日时间轴（9 格可点，开 #shapeModal） ---------- */
/* 结构照青峰 2026-10-08 13:03 给的印刷版：左时段栏（竖线 + 圆点）+ 右内容区；
   学习行 = 3 张图（.hd-day-shapes 网格：**桌面三列 / 手机一行一个**）+ 图下居中标签；休息行 = 一条浅橙横幅 + 居中文字。
   📌 **9 个格子都可点击**（青峰 13:1x：「九种形态的图片也能像上面的六个小标题一样点击查看详情吗」）
      → 每格是一个 `.hd-shape`（`<a data-bs-toggle="modal" href="#shapeModalN">`，媒体外层 + 橙色悬停遮罩
      + 中央放大镜 + 下方名字），明细弹窗在页面底部 `#shapeModal1~9`，**文案是占位的**（挂在 .hd-todo 上）。
      两个坑：`<a>` 里只能放 `<span>` 不能放 `<div>`；`.hd-shape` 要显式 `text-decoration:none; color:inherit`
      （`<a>` 默认带下划线和 link 蓝）。
   ⚠️ **「九种形态」= 3 个学习时段 × 各 3 个形态，午餐 / 晚餐休息不算形态**
      （青峰原话：「九种形态是不包含午餐休息 和晚餐休息的 剩下的9种形态」）
      → **标题说九、行数是 5，两者不矛盾，别再"顺手"把标题改成五个**。
   ⚠️ 圆点颜色我**统一**了（印刷版上混着蓝 / 橙 / 绿三种）→ 学习时段一律品牌橙、休息一律浅灰：多一个强调色就多一份漂移。
   ⚠️ **行距必须用 `padding`，不能用 `margin`** —— 竖线画在 `.hd-day-time::before` 上、靠 `top/bottom: -行内边距`
      往上下探出去跟相邻行接上；换成 margin 做行距，线就会一段段断开。首末行再用 `:first-child`/`:last-child` 收边。
   ⚠️ 卡底用 `--hd-tint`（浅藏青），所以 9 张占位图特意做成**白底**（feature-1~6 是浅藏青底、放白卡上，正好相反）。
      换实拍照片后这条不用改，实拍图自己就有边界。
   📌 图的比例 = **16:9**（青峰 2026-10-08 13:10 定，原 4:3；原话「图片比例都换成 16 比 9 吧，
      如果哪天想换视频了也能实现，不用改尺寸」）→ 占位图 `shape-1~9.svg` = 1280×720，与 feature-1~6 同版式。
      ⚠️ **本节的图片没有写死宽高，靠 `width:100%; height:auto` 跟天然比例走** → 换成 `<video>` 时
      `height:auto` 不再成立（video 不按天然比例占位），**必须补 `aspect-ratio: 16 / 9`**，否则格子塌或撑高。 */
.hd-day {
  max-width: var(--hd-wide);
  margin: 0 auto;
  background: var(--hd-tint);
  border-radius: 12px;
  padding: 22px 28px;
}
.hd-day-list { list-style: none; margin: 0; padding: 0; }
.hd-day-row { display: flex; align-items: stretch; padding: 18px 0; }
.hd-day-time {
  flex: 0 0 132px; width: 132px; padding-right: 26px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  text-align: right; position: relative;
}
.hd-day-time::before {
  content: ""; position: absolute; right: 11px; top: -18px; bottom: -18px; width: 2px; background: #CDD9E8;
}
.hd-day-row:first-child .hd-day-time::before { top: 0; }
.hd-day-row:last-child .hd-day-time::before { bottom: 0; }
.hd-day-time::after {
  content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--hd-orange);
}
.hd-day-row--rest .hd-day-time::after { background: #B7C4D6; }
.hd-day-time b { display: block; font-size: 1.05rem; font-weight: 700; color: var(--hd-navy); line-height: 1.55; }
.hd-day-time span { display: block; font-size: 0.92rem; font-weight: 600; color: var(--hd-navy); line-height: 1.55; }
.hd-day-row--rest .hd-day-time span { color: var(--hd-gray); }
.hd-day-body { flex: 1 1 auto; min-width: 0; }
.hd-day-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* 每个格子 = 一整块可点区域（图 + 名字都在 <a> 里）→ 点开 #shapeModalN 看详情。
   ⚠️ `<a>` 里放 `<span>`（不能放 div）—— HTML5 的 `<a>` 允许包流内容，但**不能再套 interactive 元素**；
      图标是 SVG、没有点击语义，安全。
   📌 图片位本身（`.hd-media` + `.hd-media-hover`）**已抽成通用组件**，见 4.9 节 ——
      本节与「核心理念」那 3 张卡共用同一套，别在这里再写一遍。 */
.hd-shape { display: block; text-decoration: none; color: inherit; }
.hd-shape-name {
  display: block; margin-top: 8px; text-align: center;
  font-size: 0.98rem; font-weight: 700; color: var(--hd-navy); line-height: 1.5;
}
.hd-day-rest {
  background: rgba(var(--hd-orange-rgb), 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  font-size: 1rem; font-weight: 700; color: var(--hd-navy); line-height: 1.6;
}
@media (max-width: 767.98px) {
  .hd-day { padding: 16px 18px; border-radius: 10px; }
  .hd-day-row { display: block; padding: 14px 0; }
  .hd-day-time {
    width: auto; flex: none; padding-right: 0; margin-bottom: 10px;
    flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px;
    text-align: left;
  }
  .hd-day-time::before { display: none; }                 /* 竖线收起 */
  .hd-day-time::after {
    position: static; transform: none; order: -1;         /* order:-1 把圆点提到行首（它是 DOM 里的最后一个子元素） */
    flex: 0 0 auto; width: 9px; height: 9px;
  }
  .hd-day-time b, .hd-day-time span { font-size: 0.98rem; }
  /* 手机端：**一行一个**（青峰 2026-10-08 13:21：「手机端不是并列一行三个，也改成一行一个啊」）。
     只是把列数从 3 收成 1，**格子本身的形状不变**（还是「图 + 图下居中名字」），
     跟桌面的观感是一条线；图随卡宽走 → 390 档实测 322×181（16:9），改成一行一个之前只有 102×57。 */
  .hd-day-shapes { grid-template-columns: 1fr; gap: 12px; }
  .hd-shape-name { font-size: 0.95rem; margin-top: 8px; }
  .hd-day-rest { padding: 11px 12px; font-size: 0.95rem; }
}

/* ---------- 4.9 通用组件：可点图片位 .hd-media ---------- */
/* 2026-10-08 13:50 抽出来的：青峰要求「核心理念」的教 / 管 / 带三张卡也带图、也能点开弹窗
   → 它与「九种形态」那 9 格是**同一个东西**（16:9 图 + 橙色悬停遮罩 + 中央放大镜 + 点开弹窗），
   遂把原来写在 4.8 里的图片位提成通用件，**两处共用一套**，不再各写一遍。
   结构（两处一致）：
     <a href="#某弹窗" data-bs-toggle="modal"><span class="hd-media"><img><span class="hd-media-hover"><svg/></span></span></a>
   ⚠️ **悬停触发写成 `a:hover`（后代选择器）而不是 `.hd-shape:hover`** —— 因为 `.hd-media-hover` 是
      `<a>` 的**孙元素**（中间隔着 `.hd-media`），用 `>` 匹配不到；这样写两个调用点都不用额外类名。
   ⚠️ `<a>` 里只能放 `<span>`，不能放 `<div>`（见 4.8 节注释）。
   📌 底色口径：**白底占位图配浅底容器**（九种形态在 `--hd-tint` 卡上、核心理念在 `bg-light` 上，都用 shape/service 那套白底图）；
      `#about` 那 6 张卡是**白卡**，配的是浅藏青底的 feature 图 —— 正好相反，别混用。 */
.hd-media { position: relative; display: block; border-radius: 8px; overflow: hidden; }
.hd-media img { width: 100%; height: auto; display: block; }
.hd-media-hover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--hd-orange-rgb), 0.9);
  color: #fff;
  opacity: 0; transition: opacity 0.25s;
}
a:hover .hd-media-hover,
a:focus-visible .hd-media-hover,
a:active .hd-media-hover { opacity: 1; }
.hd-media-hover svg { width: 34px; height: 34px; display: block; }
@media (max-width: 767.98px) { .hd-media-hover svg { width: 30px; height: 30px; } }

/* ---------- 5. 核心理念三卡（教学 / 管学 / 带学） ---------- */
/* 2026-10-08 13:50 青峰改版：原来是「92px 橙色圆形图标 + 标题 + 一段说明」，
   现在三张卡**带 16:9 图、可点开弹窗**（原话「是分成三个并列板块带图片的，点开也是有弹窗的，
   图片比例也是16比9」+「细节内容放弹窗里」）。
   同日 15:25 再精简：**卡面只留图** ——「核心理念下方教学管学带学这种标题和副标题可以都不要了」
   → `<h4>` / `<p>` 连同 CSS 一并删除：`.hd-service-icon`（第一回删的圆形图标）、
     `.hd-service-link`、`.hd-service h4`、`.hd-service p` **四条已全部不在**，不留死代码。
   详细正文与 4 张表格全在 `#serviceModal1~3` 里。
   📌 图片位与链接壳都是通用组件 `<a class="hd-media">`（见 4.9 节），所以本节**只剩一条手机端间距**：
      桌面三列横向排开不需要纵向间距，窄屏堆叠成三行才需要。
   ⚠️ 卡面已无可见文字 → 可访问名靠 `<a>` 上的 `aria-label`（HTML 里写着）。
   ⚠️ **要加回标题前先看这条**：青峰对这三张卡主动删过两回（先删圆形图标、再删标题+副标题），
      别顺手加回来；真要加，先问。 */
@media (max-width: 767.98px) { .hd-service { margin-bottom: 2.5rem; } .hd-service:last-child { margin-bottom: 0; } }

/* ---------- 6. （原「课程体系六卡」—— 2026-10-08 16:0x 整节删除） ---------- */
/* 删因：青峰「现在有的专业组设置和优秀学员内容，可以直接删掉，我做新的」→ 随 `#portfolio` 段一起删。
   同批删掉的 CSS（都在本节点名下，删前已 grep 确认**无第二处引用**）：
     #portfolio .portfolio-item ／ .portfolio-item .portfolio-caption ／
     .portfolio-caption-heading ／ .portfolio-caption-subheading   ← 四条，作用域都在 #portfolio 下
     .hd-why（橙色描边胶囊）／ .hd-chips ／ .hd-chip（12 个专业组标签）
   ⚠️ **编号「6」故意留空不重排**（同第 7 节的做法，省得把后面 7–15 全改一遍）。
   ⚠️ 字体栈（第 1 节）里那两条 `#portfolio …` 选择器**已同步删除**，否则是死规则。
   ⚠️ 图片 `assets/img/course-1~6.svg`（4:3 占位图）**没删** —— 青峰说「我做新的」，可能还要用；真不用了再删。
   ⚠️ 要恢复：删前整站快照 `/tmp/lg/site-before-del-PF-RS/`（hdp/site 未入 git，只此一份）。 */

/* ---------- 7. （原「时间线 · 在弘大的一天」—— 2026-10-08 整节删除） ---------- */
/* 删因：那段时间线与「小班课」里青峰给的「一天」表格**是同一批数据**（5 个时段起止时间 1:1 相同）
   → 只留表格版（.hd-cmp--stack），时间线连同 HTML 段一起删（原 id #day）。
   被删的 6 条 `.timeline` 覆盖规则（本文件原来只覆盖了颜色和字号，几何是 vendor.css 给的）：
     .timeline > li .timeline-image { background-color: var(--hd-navy); border-color: var(--hd-tint); }
     .timeline > li .timeline-image h4 { font-weight: 700; line-height: 1.35; }
     .timeline-heading h4 { font-size: 1.12rem; font-weight: 700; color: var(--hd-navy); line-height: 1.5; }
     .timeline-heading h4.subheading { font-size: 0.98rem; font-weight: 500; color: var(--hd-gray); }
     .timeline-body p { font-size: 0.95rem; line-height: 1.9; }
     .timeline-image img { background: #fff; }
   ⚠️ **编号「7」故意留空不重排**（省得把后面 8–13 全改一遍）；vendor.css 里的 .timeline 几何规则没动。
   ⚠️ 要恢复：`/tmp/lg/day-section.shelved.html` 里有 HTML 段 + 上面这 6 条规则，直接贴回即可
      （hdp/site 未入 git，所以留了这份快照）。 */

/* ---------- 8. （原「成绩（数字 + 案例）」—— 2026-10-08 16:0x 整节删除） ---------- */
/* 删因：青峰「现在有的专业组设置和优秀学员内容，可以直接删掉，我做新的」→ 随 `#results` 段一起删。
   同批删掉的 CSS（删前已 grep 确认**无第二处引用**）：
     .hd-stat（含 .num / .label）／ .hd-cases（含 th、td、tr:last-child、td.score）／
     手机端 `@media (max-width: 767.98px)` 里那 4 条拆卡规则。
   ⚠️ **编号「8」一起留空不重排**。要恢复：删前整站快照 `/tmp/lg/site-before-del-PF-RS/`。 */

/* ---------- 9. 师资 ---------- */
.team-member img { width: 200px; height: 200px; object-fit: cover; border-radius: 100%; }
.team-member h4 { font-size: 1.15rem; font-weight: 700; color: var(--hd-navy); margin: 20px 0 6px; }
.team-member .role { color: var(--hd-orange); font-weight: 600; font-size: 0.95rem; margin-bottom: 10px; }
.team-member .duty { font-size: 0.92rem; line-height: 1.85; }

/* ---------- 10. 上岸院校 ---------- */
.hd-schools .img-brand { max-height: 84px; width: auto; max-width: 100%; }

/* ---------- 11. 联系 / 二维码 ---------- */
section#contact { background-color: var(--hd-navy-deep); background-image: none; }
section#contact h2.section-heading { color: #fff; }
section#contact h3.section-subheading { color: rgba(255, 255, 255, 0.76); }
.hd-qr-card {
  background: #fff; border-radius: 16px; padding: 24px;
  text-align: center; max-width: 360px; margin: 0 auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
.hd-qr-card img { width: 100%; height: auto; display: block; border-radius: 8px; }
.hd-qr-card .qr-title { font-size: 1.15rem; font-weight: 700; color: var(--hd-navy); margin-top: 16px; }
.hd-qr-card .qr-tip { font-size: 0.88rem; color: var(--hd-gray); line-height: 1.8; margin-top: 8px; }
.hd-info { color: rgba(255, 255, 255, 0.92); }
.hd-info .row-item { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.hd-info .row-item:last-child { border-bottom: 0; }
.hd-info .ico { flex: 0 0 22px; margin-top: 3px; color: var(--hd-orange); }
.hd-info .ico svg { width: 20px; height: 20px; display: block; }
.hd-info .k { display: block; font-size: 0.84rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 2px; }
.hd-info .v { display: block; font-size: 1rem; line-height: 1.75; }

/* ---------- 12. 待替换标记（真图/真数据到位后，连同 .hd-todo 一起删） ---------- */
.hd-todo {
  display: inline-block; font-size: 0.78rem; color: var(--hd-orange);
  background: rgba(var(--hd-orange-rgb), 0.12);
  border: 1px dashed rgba(var(--hd-orange-rgb), 0.5);
  border-radius: 4px; padding: 1px 8px; margin-left: 8px; vertical-align: middle;
  font-style: normal;
  /* 标记可能被塞进带装饰性字距/大小写的容器里（例：.hd-modal-en 是 letter-spacing:.16em + uppercase）
     → 标记本身必须把这两条按回去，否则「英文小标待补」会被拉成一字一格。 */
  letter-spacing: normal;
  text-transform: none;
}
.hd-todo:first-child { margin-left: 0; }   /* 独占一行时不要那个给「跟在文字后面」留的 8px */

/* ---------- 13. 页脚 ---------- */
/* 🔴 2026-10-08 16:19 青峰重做：「联系我们」已独立成页 → **所有页面都靠页脚支撑**。
   🔴 同日 16:30 再改版式：**不要三列**，改成**两栏** ——
   一侧「logo + 校区地址 + 校长专线」，另一侧「三个二维码并排」，两端对齐（照他给的参考图）。
   二维码固定放**右侧**（他：「要么放最左 要么放最后」→ 取「最后」）。
   ⚠️ 页脚 HTML 在 **5 个页面里各存一份**（纯静态、无 include）→ 改样式改这里，改结构要 5 个文件一起改。 */
footer.footer {
  background-color: var(--hd-navy-foot);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem; line-height: 1.9;
  padding: 3.5rem 0 2rem;
  /* 🔴 2026-10-08 16:51 **必须显式写 `text-align: left`**：vendor.css 第 11312 行有一条
     Agency 模板遗留的 `.footer { text-align: center }`（还有一处写死的 Montserrat 字体栈）。
     不重置的话整块页脚**全部继承居中** —— 实测踩过：
       · 「专注公办专升本」在 .foot-left 里居中飘着，跟 logo 左边缘对不齐；
       · 信息行的 `.v` 是 `flex: 1 1 auto`（撑满剩余宽度）+ 继承居中 →
         「沈阳 · 沈北大学城…」被推到容器中间，**跟前面的「机构地址」脱开**。
     在**根节点**重置一次，比逐个孩子写 left 稳：以后页脚再加字段也不会又继承到居中。
     ⚠️ 需要居中的两处**各自显式写了** center、选择器权重也更高（(0,2,1) > (0,1,1)），不受影响：
       `.foot-qr`（每个二维码的标签）和 `.foot-bottom`（版权条）。 */
  text-align: left;
}

/* 两栏主体：左（logo + 信息）｜右（三个二维码），两端对齐；窄屏自动换行堆叠 */
footer.footer .foot-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px 48px; flex-wrap: wrap;
}
footer.footer .foot-left { flex: 1 1 340px; min-width: 0; }
footer.footer .foot-logo { height: 34px; width: auto; opacity: 0.95; display: block; margin-bottom: 12px; }
/* logo 下面那行短语 —— 2026-10-08 16:42 青峰要求加。
   🔄 2026-10-09 07:21 青峰：**文字改成「经沈阳市教育局、民政局批准的正规专升本培训学校」**
      （原「专注公办专升本」），并且「**字号大小恢复之前的**」→ 字号 / 字距 / 行高**全部回退**到
      他放大之前的值：`0.92rem` / `0.14em` / 行高继承页脚的 `1.9`（不再单独写 line-height）。
      ⚠️ **10-09 07:06 那套「按 logo 宽度反解」（1.7rem / 0.3em / line-height 1.4）已作废** ——
        那句反解是针对 6 个字的「专注公办专升本」算的（每字 ~41px）；现在这句 **23 个字**，
        按 logo 宽 258 反解字号会小到 ~11px 读不清，**两个口径不能混用**。
      ⚠️ 后果：23 个字在手机档会折行（左栏内宽 390 档 358 / 320 档 288，文字约 448px）→ **手机上 2 行是预期**。
      ⚠️ 靠 `footer.footer` 的 `text-align: left` 跟 logo 左边缘对齐，**别再加 `text-align: center`**。 */
footer.footer .foot-tagline { font-size: 0.92rem; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.14em; margin: 0 0 22px; }

/* 信息行 = 「图标 + 标签 + 值」**同一行**（照参考图），窄屏时值自己折行 */
footer.footer .foot-info .item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
footer.footer .foot-info .item:last-child { margin-bottom: 0; }
footer.footer .foot-info .ico { flex: 0 0 20px; margin-top: 3px; color: var(--hd-orange); }
footer.footer .foot-info .ico svg { width: 18px; height: 18px; display: block; }
footer.footer .foot-info .k { flex: 0 0 auto; color: rgba(255, 255, 255, 0.55); }
footer.footer .foot-info .v { flex: 1 1 auto; min-width: 0; color: rgba(255, 255, 255, 0.9); }

/* 三个二维码：一排定宽（`flex: 0 1 400px` = 基准 400、可缩不可涨）→
   PC 上每个约 122px，窄屏等比缩小到刚好放得下，**永远不换行、不溢出**。
   ⚠️ 二维码底色必须是白的，不能跟深色页脚混。 */
footer.footer .foot-qrs { flex: 0 1 400px; display: flex; gap: 16px; }
footer.footer .foot-qr { flex: 1 1 0; min-width: 0; text-align: center; }
footer.footer .foot-qr img { width: 100%; height: auto; display: block; background: #fff; border-radius: 8px; }
footer.footer .foot-qr span { display: block; margin-top: 8px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); }

/* 底部版权条（一道分隔线把它和上面两栏分开） */
footer.footer .foot-bottom {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); text-align: center;
}
/* 备案号（2026-10-09 07:31 青峰给号：`辽ICP备2026015171号`）。
   ⚠️ **必须显式写色** —— `<a>` 不写就吃浏览器默认的蓝/紫，在深藏青底上既难看也不协调。
   做法 = `color: inherit` 继承版权条的浅灰，靠**下划线**（很淡的白）提示可点，hover 才提亮。
   ⚠️ 链接指向 https://beian.miit.gov.cn/（工信部要求网站底部标注备案号且可跳转）。 */
footer.footer .foot-bottom a.foot-icp {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
footer.footer .foot-bottom a.foot-icp:hover,
footer.footer .foot-bottom a.foot-icp:focus {
  color: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* ---------- 14. 内页头 + 骨架页占位（多页化，2026-10-08 15:40 青峰定） ---------- */
/* 每项独立成页后，**只有首页有那张大图 masthead**；内页统一用这块「藏青底 + 大标题」当页头。
   ⚠️ nav 是 `fixed-top`，页头顶部内边距必须让开它：实测 nav 高 ≈ 76px（logo 24 + 上下 padding），
      这里取 8.5rem(136px) 起，页面滚到顶时标题也不会被导航压住。
   ⚠️ 内页头用 <h1>（首页那张 masthead 里是 <div>，语义上首页标题是 `<title>` + 视觉大字）。
      一个页面只应有一个 h1，内页别再补第二个。 */
.page-hero {
  background-color: var(--hd-navy-deep);
  background-image: linear-gradient(150deg, rgba(10, 42, 80, 0.94) 0%, rgba(14, 55, 105, 0.86) 100%);
  padding: 8.5rem 0 4rem;
  text-align: center;
}
@media (min-width: 768px) { .page-hero { padding: 11rem 0 5rem; } }
.page-hero .page-hero-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700; line-height: 1.3; letter-spacing: 0.02em;
  color: #fff; margin-bottom: 0.9rem;
}
.page-hero .page-hero-sub {
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  line-height: 1.95; color: rgba(255, 255, 255, 0.82);
  max-width: var(--hd-narrow); margin: 0 auto;
}

/* 骨架页（政策解读 / 开课计划 / 上岸俱乐部）内容待补时的居中提示。
   ⏳ 青峰 2026-10-08 15:40「没有内容的你先空着」→ 这几页**现在就是空的**，
      这块只是让空页不至于整片白。有真内容后**整块连同 .hd-placeholder 一起删**。 */
.hd-placeholder { text-align: center; max-width: var(--hd-narrow); margin: 0 auto; }
.hd-placeholder .hd-placeholder-ico { color: var(--hd-orange); margin-bottom: 1.5rem; }
.hd-placeholder .hd-placeholder-ico svg { width: 46px; height: 46px; display: block; margin: 0 auto; }
.hd-placeholder p { font-size: 1rem; line-height: 2.05; color: var(--hd-ink); margin-bottom: 0.9rem; }
.hd-placeholder p:last-child { margin-bottom: 0; font-size: 0.92rem; color: var(--hd-gray); }

/* ---------- 15. 弘大风采：照片合集（横向滑动 · CSS scroll-snap） ---------- */
/* 2026-10-08 15:40 新增。**示意图**：占位图 gallery-1~8.svg，青峰回头给真照片替换 <img src>。
   ⚠️ 没走 Bootstrap carousel：那是「一次一张 + 淡入」，不是「一排合集横滑」；且 vendor.css 是裁剪构建，
      `.carousel*` 虽在（vendor.css:5787 起），但 controls / indicators 齐不齐要单独核。
      自持 scroll-snap 更稳，还白得原生惯性滑动 + 触控手势。 */
.hd-gallery { position: relative; }
.hd-gallery-track {
  display: flex; gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* ⚠️ 水平 padding 必须是 0：`scroll-snap-align: start` 会把首张吸附到「padding 内边缘」，
     留 2px 水平 padding 就会让初始 scrollLeft = 2 而不是 0 → JS 判不出「已在最左」，
     「上一张」箭头在起始位置就不隐藏了（实测踩过）。 */
  padding: 0 0 8px;
  scrollbar-width: none;                                    /* Firefox：藏滚动条 */
}
.hd-gallery-track::-webkit-scrollbar { display: none; }     /* Chrome / Safari：藏滚动条 */
/* 键盘聚焦提示：outline 内缩，因为 track 没有水平 padding、外扩会被 overflow 裁掉 */
.hd-gallery-track:focus-visible { outline: 2px solid var(--hd-orange); outline-offset: -2px; border-radius: 10px; }
.hd-gallery-item {
  flex: 0 0 auto;
  /* 宽度：视口越宽一次看到越多；窄屏 ≈ 一屏一张多一点，天然提示「右边还有」。 */
  width: clamp(230px, 40vw, 400px);
  margin: 0;
  border-radius: 10px; overflow: hidden;
  scroll-snap-align: start;
  background: var(--hd-tint);   /* 图未铺满时的兜底（占位图也是浅藏青底，天然融在一起） */
}
.hd-gallery-item img {
  display: block; width: 100%; height: auto;
  /* ⚠️ 换真照片后**别删这两条**：任意尺寸的照片都按 16:9 裁切，不会把卡片撑变形。
     青峰给的照片若是竖拍，这里会裁成横的 —— 要保留竖图就得改这个比例（改前先问）。 */
  aspect-ratio: 16 / 9; object-fit: cover;
}
/* 左右箭头：压在滑道两端。滚到尽头时对应箭头淡出（JS 切 .is-off），避免点了没反应 */
.hd-gallery-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 42, 80, 0.82); color: #fff;
  cursor: pointer; z-index: 2;
  transition: opacity 0.2s, background 0.2s;
}
.hd-gallery-btn:hover { background: var(--hd-navy); }
.hd-gallery-btn svg { width: 22px; height: 22px; display: block; }
.hd-gallery-prev { left: 10px; }
.hd-gallery-next { right: 10px; }
.hd-gallery-btn.is-off { opacity: 0; pointer-events: none; }
@media (max-width: 575.98px) {
  .hd-gallery-btn { width: 38px; height: 38px; }
  .hd-gallery-btn svg { width: 18px; height: 18px; }
  .hd-gallery-prev { left: 4px; }
  .hd-gallery-next { right: 4px; }
}