/* ============================================================
   内训二级页 · 训练营方案（training.html）
   ------------------------------------------------------------
   设计：白底 + 蓝白极简，站点主色酒红作点缀。
   宽度统一 1200px 居中（沿用 .container）。

   页面骨架：
     .tp-hero       页面标题区
     .tp-camp-nav   营期导航（多个实训名称，点击同页切换，不跳三级页）
     .tp-detail     营期详情（随导航切换）
     .tp-faculty    师资团队
     .tp-sites      研学点
     .tp-enroll     报名引导

   ⚠ 与首页内训板块（.tm-*，在 style.css）是两套样式，互不干扰：
     首页那套是「宣传窗口」，这里的是「方案详情」。
   ============================================================ */

/* 页面不给 padding-top：横幅要顶到最上面（菜单条透明时压在横幅上，
   是改版前就有的观感）。让开 60px 固定菜单条的活，由横幅自己的
   padding-top: 68px 承担——见下面 .tp-banner / .tpr-hero。 */
.tp-page { padding-bottom: 56px; }

/* ── 路径（首页 / 跨境内训 / 项目名）────────────────────
   位置：横幅内左侧、主标题上方（横幅是本页视觉第一落点）。
   黑白由 js/crumb-contrast.js 实测「底图 + 遮罩」亮度后，
   把 .is-on-dark / .is-on-light 打在横幅容器上（.tp-banner / .tpr-hero），
   路径和标题、副标题整块文字一起跟色。
   默认（JS 判定完成前）按深底白字显示，避免出现黑字压深底。 */
.tp-crumb {
  font-size: 13px;
  line-height: 1.5;
  /* 与课程页 .breadcrumb 同口径：18px 上下内边距。
     横幅从 y=68 起，路径文字因此落在 y=86，和 courses.html / player.html 一致。 */
  padding: 18px 0;
  margin: 0;
  color: inherit;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.tp-crumb a { color: inherit; text-decoration: none; }
.tp-crumb a:hover { text-decoration: underline; }
.tp-crumb .sep { margin: 0 8px; opacity: .6; }

/* 横幅文字垂直居中：路径固定在上，标题区在剩下的空间里居中，
   两者不会挤在一起。横幅高度不足时（内容超高）自然退化为顺序排列。
   ⚠ 标题行必须 width:100%——否则它会按内容收缩、整行跑到横幅中间。 */
.tp-bn-body { flex: 1 1 auto; display: flex; align-items: center; }
.tp-bn-body .tp-hero-row { width: 100%; }
.tpr-hero > .container { display: flex; flex-direction: column; }
.tpr-hero-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.tp-banner.is-on-dark .tp-crumb, .tpr-hero.is-on-dark .tp-crumb {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.tp-banner.is-on-light .tp-crumb, .tpr-hero.is-on-light .tp-crumb {
  color: #1a1a1a;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .55);
}
/* 三级页 Hero 是居中排版：路径靠左；标题/副标题/编制信息跟底图一起变黑白 */
.tpr-hero .tp-crumb { text-align: left; }
.tpr-hero.is-on-dark { color: #fff; }
.tpr-hero.is-on-light { color: #1a1a1a; }
.tpr-hero.is-on-light.has-image { text-shadow: 0 1px 6px rgba(255, 255, 255, .6); }
.tpr-hero.is-on-dark.has-image { text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }

/* ── 标题区 ───────────────────────────────────────────── */
.tp-hero {
  background: linear-gradient(135deg, #7a1f24 0%, #5e1519 100%);
  color: #fff;
  padding: 40px 0 44px;
}
.tp-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
}
.tp-sub {
  font-size: 14px;
  line-height: 1.8;
  opacity: .85;
  max-width: 860px;
}

/* ── 营期导航 ─────────────────────────────────────────── */
.tp-camps { padding: 26px 0 4px; }
.tp-camp-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.tp-camp-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  text-align: left;
}
.tp-camp-card:hover {
  border-color: #c9b2b3;
  box-shadow: 0 6px 18px rgba(122, 31, 36, .10);
  transform: translateY(-2px);
}
.tp-camp-card.is-active {
  border-color: var(--primary);
  box-shadow: 0 8px 22px rgba(122, 31, 36, .16);
}
/* 选中态左侧酒红竖条 */
.tp-camp-card.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
}
.tp-cc-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tp-cc-days {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: #f3f6fa;
  color: #2f6fb5;
  font-size: 12px;
  font-weight: 700;
}
.tp-camp-card.is-active .tp-cc-days {
  background: var(--primary);
  color: #fff;
}
.tp-cc-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.tp-cc-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  min-height: 20px;
}
.tp-cc-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
}
.tp-cc-price .tbd { color: var(--text-muted); font-weight: 400; font-size: 13px; }

/* ── 详情区 ───────────────────────────────────────────── */
.tp-detail { padding-top: 22px; }
.tp-detail-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

/* 详情头部 */
.cd-head {
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--border);
}
.cd-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cd-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.cd-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  background: #f7f9fc;
  border: 1px solid #eaeef4;
  border-radius: 8px;
  padding: 14px 16px;
}
.cd-meta-item { min-width: 0; }
.cd-meta-item > span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.cd-meta-item > b {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}
.cd-meta-item.price > b { color: var(--primary); }

/* 详情分块 */
.cd-block { padding: 22px 26px; border-top: 1px solid var(--border); }
.cd-block:first-of-type { border-top: none; }
.cd-h {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cd-h::before {
  content: '';
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--primary);
}

/* 定位信息网格 */
.cd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}
.cd-field {
  background: #fafbfc;
  border: 1px solid #eef1f5;
  border-radius: 8px;
  padding: 12px 14px;
}
.cd-field.is-wide { grid-column: 1 / -1; }
.cd-field > span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.cd-field > p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

/* 培训目标 */
.cd-goals { margin-top: 14px; display: grid; gap: 10px; }
.cd-goal {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-left: 3px solid #dbe6f2;
  background: #fafbfc;
  border-radius: 0 8px 8px 0;
}
.cd-goal-label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #2f6fb5;
  border-radius: 4px;
  padding: 2px 8px;
  margin-top: 2px;
}
.cd-goal-text { font-size: 14px; line-height: 1.75; color: var(--text); }

/* ── 课程推进表 ───────────────────────────────────────── */
.cd-daynav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.cd-daybtn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  border-radius: 18px;
  padding: 5px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.cd-daybtn:hover { border-color: #c9b2b3; color: var(--primary); }
.cd-daybtn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.cd-day-head {
  background: #f7f9fc;
  border: 1px solid #eaeef4;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.cd-day-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.cd-day-goal { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

.cd-table-wrap { overflow-x: auto; }
.cd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}
.cd-table thead th {
  background: #eef3f9;
  color: #33475b;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid #e2e9f1;
  white-space: nowrap;
}
.cd-table td {
  padding: 12px;
  border: 1px solid #eaeef4;
  vertical-align: top;
  line-height: 1.75;
  color: var(--text);
}
.cd-table tbody tr:nth-child(even) td { background: #fcfdfe; }
.cd-table .c-time { white-space: nowrap; color: var(--text-secondary); font-weight: 600; }
.cd-table .c-topic { font-weight: 600; min-width: 150px; }
.cd-table .c-content { min-width: 280px; }
.cd-table .c-form,
.cd-table .c-deliver { color: var(--text-secondary); min-width: 120px; }

.cd-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.cd-empty i { display: block; font-size: 26px; margin-bottom: 8px; color: #d6d9de; }

/* ── 师资团队 ─────────────────────────────────────────── */
.tp-faculty { padding: 30px 0 0; }
.tp-sec-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
.tp-sec-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.tp-faculty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
}
.tp-faculty-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;               /* 头像在左、文字在右（姓名 / 头衔两行） */
  align-items: flex-start;
  gap: 12px;
}
/* 师资头像：圆形 + 深酒红描边，25px。
   必须显式给尺寸——早期只输出了 class 没写样式，图片会按原始像素撑爆卡片。 */
.tp-fc-avatar {
  flex: none;
  width: 25px; height: 25px;
  margin-top: 1px;             /* 与右侧姓名首行视觉对齐 */
  border: 1px solid var(--primary);
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.tp-fc-avatar.tp-fc-avatar-text {
  font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--primary);       /* 无图时退回姓氏首字，描边配色保持一致 */
}
.tp-fc-main { flex: 1; min-width: 0; }
.tp-fc-head { margin-bottom: 8px; }
.tp-fc-name { font-size: 17px; font-weight: 700; line-height: 1.4; }
.tp-fc-title { font-size: 12.5px; color: var(--primary); line-height: 1.5; margin-top: 2px; }
.tp-fc-bio { font-size: 13px; line-height: 1.75; color: var(--text-secondary); }
.tp-fc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tp-fc-tag {
  font-size: 12px;
  color: #2f6fb5;
  background: #f3f6fa;
  border-radius: 4px;
  padding: 2px 8px;
}

/* ── 研学点 ───────────────────────────────────────────── */
.tp-sites { padding: 30px 0 0; }
.tp-sites-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tp-site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  background: #f7f9fc;
  border: 1px solid #eaeef4;
  border-radius: 16px;
  padding: 6px 14px;
}
.tp-site i { color: var(--primary); font-size: 12px; }

/* ── 报名引导 ─────────────────────────────────────────── */
.tp-enroll { padding: 30px 0 0; }
.tp-enroll-box {
  background: linear-gradient(120deg, #7a1f24, #5e1519);
  border-radius: 10px;
  padding: 26px 28px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.tp-enroll-box h3 { font-size: 19px; margin-bottom: 6px; }
.tp-enroll-box p { font-size: 13px; opacity: .85; line-height: 1.8; }
.tp-enroll-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity .15s;
}
.tp-btn:hover { opacity: .88; }
.tp-btn-solid { background: #fff; color: var(--primary); }
.tp-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }

/* ── 加载 / 错误 ──────────────────────────────────────── */
.tp-loading, .tp-error {
  padding: 60px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.tp-error { color: #b03030; }

/* ── 窄屏 ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .tp-banner { padding: 26px 0 28px; height: 150px; }
  .tp-bn-dots { bottom: 10px; }
  .tp-title { font-size: 21px; }
  .tp-sub { font-size: 13px; }
  .cd-head, .cd-block { padding: 18px 16px; }
  .cd-grid { grid-template-columns: 1fr; }
  .tp-faculty-grid { grid-template-columns: 1fr; }
  .tp-enroll-box { padding: 20px; }
}

/* ============================================================
   2026-09-29 改版：两级结构
   ------------------------------------------------------------
   二级页（training.html）＝ 实训项目卡片（.tp-pj-*，抽屉式）
   三级页（training-project.html）＝ 项目完整方案（.tpr-*）
   旧的 .tp-camp-card / .tp-camp-nav / .cd-* 课程表样式保留：
   .cd-* 课程表在三级页继续复用。
   ============================================================ */

/* ── 二级页 · 标题区（标题 + 预约咨询）────────────────── */
.tp-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.tp-hero-cta { flex: none; margin-bottom: 4px; }

/* ── 二级页 · 顶部轮播（2026-10-09）──────────────────────
   尺寸沿用原横条：高 192px（40 + 内容 108 + 44），通栏，
   内容区仍是 .container 的 1200 居中。图片铺满 + 酒红遮罩，
   左侧压深保证白字可读，右侧透出图片。
   ============================================================ */
.tp-hero { padding: 0; }
.tp-banner {
  position: relative;
  overflow: hidden;
  /* 下限 192px（改版前实测值），但不再锁死：横幅内顶部加了「返回上一页」，
     192px 装不下「按钮 + 标题 + 两行副标题」，装不下就让横条长高，
     而不是把按钮压回固定菜单条底下。文字过长仍由 line-clamp 截断。 */
  min-height: 192px;
  /* 68px = 固定菜单条 60px + 8px：横幅顶到最上方，内容让开菜单条 */
  padding: 68px 0 18px;
}
/* 没配轮播时退回原来的纯色横条（padding 也回到 .tp-banner 上，高度不变） */
.tp-banner.is-plain { background: linear-gradient(135deg, #7a1f24 0%, #5e1519 100%); }

.tp-bn-track { position: absolute; inset: 0; z-index: 0; }
.tp-bn-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.tp-bn-slide.is-on { opacity: 1; }
.tp-bn-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 无图（只填了文字）的那一帧：给个略深的纯色底，避免整块塌陷成黑 */
.tp-bn-slide.no-img { background: #6d1a1f; }

.tp-bn-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(94, 21, 25, .95) 0%, rgba(94, 21, 25, .70) 48%, rgba(122, 31, 36, .52) 100%),
    linear-gradient(135deg, rgba(122, 31, 36, .30) 0%, rgba(94, 21, 25, .30) 100%);
}
/* 纯色模式下不需要遮罩（否则会把底色压得更暗） */
.tp-banner.is-plain .tp-bn-mask { display: none; }

/* 面包屑移到横幅外面后，横幅内只剩标题区一列；让它垂直居中，
   避免文字整体偏上（横条高度仍锁死 192px，不会被撑高）。 */
.tp-bn-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-start;
  /* 横幅改成 min-height 后，这里的 100% 无参照、按 auto 处理：
     内容自 68px 处向下排（返回按钮在最上面），不再垂直居中。 */
  height: 100%;
}
.tp-bn-text { min-width: 0; }
/* 主标题单行、小标题最多两行：保证任何后台文案都不会把横条撑高 */
.tp-bn-text .tp-title {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.tp-bn-text .tp-sub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 右侧列：主 CTA「预约咨询」+ 次要的项目入口。整列右对齐、底部对齐，
   与改版前 .tp-hero-cta 的位置一致。 */
.tp-bn-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  margin-bottom: 2px;
}
.tp-bn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  color: #fff;
  opacity: .9;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  padding-bottom: 2px;
  transition: opacity .18s;
}
.tp-bn-link:hover { opacity: 1; text-decoration: none; }
.tp-bn-link i { font-size: 11px; }

.tp-bn-dots {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.tp-bn-dot {
  width: 26px; height: 3px;
  border: 0; padding: 0;
  background: rgba(255, 255, 255, .38);
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s, width .25s;
}
.tp-bn-dot.is-on { background: #fff; width: 34px; }

/* ── 二级页 · 项目卡片（抽屉式）───────────────────────── */
.tp-pj-list { display: flex; flex-direction: column; gap: 14px; }
.tp-pj-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.tp-pj-card.is-open {
  border-color: #c9b2b3;
  box-shadow: 0 8px 22px rgba(122, 31, 36, .10);
}
.tp-pj-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.tp-pj-head:hover { background: #faf7f7; }
.tp-pj-idx {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
.tp-pj-name {
  flex: none;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.tp-pj-meta {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-pj-dot { margin: 0 8px; opacity: .55; }
.tp-pj-count {
  flex: none;
  font-size: 12px;
  color: #2f6fb5;
  background: #f3f6fa;
  border-radius: 10px;
  padding: 3px 10px;
  font-weight: 600;
}
.tp-pj-chev { flex: none; color: var(--text-muted); transition: transform .2s; }
.tp-pj-card.is-open .tp-pj-chev { transform: rotate(180deg); }

/* 抽屉体 */
.tp-pj-body {
  padding: 4px 20px 20px 74px;
  border-top: 1px dashed var(--border);
}
.tp-pj-intro {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 14px 0 14px;
}
.tp-pj-plans { display: flex; flex-direction: column; gap: 8px; }
.tp-pj-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.tp-pj-plan:hover { border-color: #c9b2b3; background: #fbf7f7; }
.tp-pj-plan-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.tp-pj-plan-meta { display: flex; align-items: center; gap: 10px; flex: none; }
.tp-pj-plan-meta b { font-size: 13px; color: #2f6fb5; background: #f3f6fa; border-radius: 9px; padding: 2px 9px; }
.tp-pj-plan-meta em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--primary); }
.tp-pj-plan-meta em.tbd { color: var(--text-muted); font-weight: 400; font-size: 12.5px; }
.tp-pj-plan > i { color: var(--text-muted); font-size: 12px; }
.tp-pj-state {
  font-size: 11.5px;
  border-radius: 9px;
  padding: 2px 9px;
  font-weight: 600;
}
.tp-pj-state.is-open { color: #1d7a4f; background: #e8f5ee; }
.tp-pj-state.is-soon { color: #2f6fb5; background: #eef4fb; }
.tp-pj-state.is-off { color: #8a8a8a; background: #f1f1f1; }
.tp-pj-actions { margin-top: 14px; display: flex; gap: 10px; }
.tp-pj-actions .tp-btn { background: var(--primary); color: #fff; }
.tp-pj-actions .tp-btn:hover { opacity: .88; }

/* 定制横幅（企业定制内训） */
.tp-enroll-box { display: flex; align-items: center; gap: 28px; }
.tp-enroll-info { flex: 1; }
.tp-enroll-info h3 { font-size: 19px; margin-bottom: 8px; }
.tp-enroll-info p { font-size: 13.5px; line-height: 1.8; opacity: .85; margin-bottom: 14px; }
.tp-enroll-avatars { flex: none; display: flex; gap: 12px; }
.tp-enroll-avatars img,
.tp-enroll-avatars .tp-av-text {
  width: 74px; height: 92px;
  border-radius: 8px;
  object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18);
  color: #fff; font-size: 26px; font-weight: 700;
}
.tp-enroll-avatars .tp-btn { margin-top: 0; }

/* 空态 */
.tp-empty {
  padding: 18px;
  font-size: 13px;
  color: var(--text-muted);
  background: #faf8f6;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

/* ============================================================
   三级页（training-project.html）· .tpr-*
   ============================================================ */
.tpr-hero {
  background: linear-gradient(135deg, #243b73 0%, #2f6fb5 60%, #3f8fd2 100%);
  color: #fff;
  /* 顶 68px = 固定菜单条 60 + 8：Hero 顶到最上方，内容（含返回按钮）让开菜单条 */
  padding: 68px 0 46px;
  text-align: center;
}
/* 上端通栏图（后台在「实训项目库」里按项目上传）；没配图时保持上面的渐变色块 */
.tpr-hero.has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 260px;
  display: flex;
  align-items: center;
  position: relative;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.tpr-hero.has-image::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .38) 0%, rgba(15, 23, 42, .60) 100%);
}
.tpr-hero.has-image > .container { position: relative; z-index: 1; width: 100%; }
.tpr-title { font-size: 30px; font-weight: 800; letter-spacing: 1px; margin-bottom: 10px; }
.tpr-sub { font-size: 14.5px; opacity: .9; }
.tpr-meta { font-size: 12px; opacity: .7; margin-top: 14px; }
.tpr-meta span { margin: 0 10px; }

/* 价格梯度卡 */
.tpr-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: -26px;
  position: relative;
  z-index: 2;
}
.tpr-price-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 26px rgba(36, 59, 115, .12);
}
.tpr-price-ico {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: #eef4fb; color: #2f6fb5;
}
.tpr-price-card.tier-1 .tpr-price-ico { background: #eef4fb; color: #2f6fb5; }
.tpr-price-card.tier-2 .tpr-price-ico { background: #e8f5ee; color: #1d7a4f; }
.tpr-price-card.tier-3 .tpr-price-ico { background: #fdf1e7; color: #c2661b; }
.tpr-price-num { font-size: 21px; font-weight: 800; color: var(--text); }
.tpr-price-num small { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 2px; }
.tpr-price-tag {
  display: inline-block;
  margin-top: 5px;
  font-size: 11.5px;
  border-radius: 9px;
  padding: 2px 10px;
  background: #f3f6fa; color: #2f6fb5;
}
.tier-2 .tpr-price-tag { background: #e8f5ee; color: #1d7a4f; }
.tier-3 .tpr-price-tag { background: #fdf1e7; color: #c2661b; }

/* 方案抽屉 */
.tpr-plans { display: flex; flex-direction: column; gap: 14px; padding: 24px 0 8px; }
.tpr-plan { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tpr-plan.is-open { border-color: #b9cbe4; box-shadow: 0 8px 22px rgba(47, 111, 181, .10); }
.tpr-plan-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 16px 20px;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
}
.tpr-plan-head:hover { background: #f8fafd; }
.tpr-plan-name { font-size: 16px; font-weight: 700; color: var(--text); }
.tpr-plan-days {
  flex: none; font-size: 12px; font-weight: 700;
  color: #fff; background: #2f6fb5;
  border-radius: 10px; padding: 3px 10px;
}
.tpr-plan-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.tpr-plan-price { font-size: 13.5px; color: var(--text-secondary); }
.tpr-plan-price b { color: var(--text); font-size: 15px; }
.tpr-plan-host { font-size: 12px; color: var(--text-muted); }
.tpr-plan .tp-pj-chev { color: var(--text-muted); transition: transform .2s; }
.tpr-plan.is-open .tp-pj-chev { transform: rotate(180deg); }
.tpr-plan-body { border-top: 1px dashed var(--border); padding: 18px 20px 20px; }
.tpr-plan-intro { font-size: 13px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 14px; }

/* 信息瓦片（定位/学员对象/培训目标…） */
.tpr-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.tpr-tile {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfcfe;
}
.tpr-tile h5 {
  font-size: 12.5px; color: #2f6fb5;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px; font-weight: 700;
}
.tpr-tile p { font-size: 12.5px; line-height: 1.65; color: var(--text-secondary); }

/* 方案报名条 */
.tpr-plan-cta { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.tpr-plan-cta .tp-btn { background: #1d7a4f; color: #fff; }
.tpr-plan-cta .tp-btn.is-off { background: #c9c9c9; pointer-events: none; }
.tpr-plan-cta-note { font-size: 12.5px; color: var(--text-muted); }

/* 底部操作条 */
.tpr-footer-bar {
  margin-top: 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tpr-footer-bar .mid { font-size: 13px; color: var(--text-secondary); }
.tpr-footer-bar .mid b { color: var(--text); }
.tpr-footer-bar .tp-btn-dark { background: var(--primary); color: #fff; }

/* 三级页窄屏 */
@media (max-width: 900px) {
  .tpr-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tp-hero-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tp-pj-head { padding: 14px; gap: 10px; flex-wrap: wrap; }
  .tp-pj-meta { flex-basis: 100%; order: 5; white-space: normal; }
  .tp-pj-body { padding: 4px 14px 16px 14px; }
  .tp-pj-plan { flex-wrap: wrap; }
  .tp-enroll-box { flex-direction: column; align-items: flex-start; }
  .tpr-prices { grid-template-columns: 1fr; }
  .tpr-plan-head { flex-wrap: wrap; }
  .tpr-plan-right { flex-basis: 100%; margin-left: 0; justify-content: flex-start; }
  .tpr-tiles { grid-template-columns: 1fr; }
  .tpr-footer-bar { flex-direction: column; text-align: center; }
}

/* ── 三级页补充：包裹区 / 天头行 / 报名弹层 ───────────── */
.tpr-prices-wrap { padding-bottom: 4px; }
.tpr-plans-wrap { padding-bottom: 8px; }

/* 天头行（课程表按天分组） */
.tpr-table td { vertical-align: top; }
.tpr-dayrow td {
  background: #f3f6fa;
  color: #243b73;
  font-size: 13px;
  padding: 8px 12px !important;
}
.tpr-dayrow b { margin-right: 10px; }
.tpr-dayrow span { color: #2f6fb5; font-weight: 600; margin-right: 10px; }
.tpr-dayrow em { font-style: normal; color: var(--text-muted); font-size: 12px; }

/* 报名弹层 */
.tpr-modal { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; }
.tpr-modal[hidden] { display: none; }
.tpr-modal-mask { position: absolute; inset: 0; background: rgba(20, 24, 34, .45); }
.tpr-modal-box {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px 22px;
  max-height: 86vh;
  overflow: auto;
}
.tpr-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; font-size: 16px;
}
.tpr-modal-x { background: none; border: 0; cursor: pointer; color: var(--text-muted); font-size: 16px; }
.tpr-modal-box label {
  display: block;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.tpr-input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.tpr-input:focus { outline: none; border-color: #2f6fb5; }
.tpr-modal-err { color: #b03030; font-size: 12.5px; min-height: 18px; margin-bottom: 6px; }