/* 强制本页使用 white 背景（不加其它花纹/渐变） */
body.page-highlights{
  background: #fff url("assets/images/backgrounds/white.jpg") repeat;
}

/* 避免 section-alt 自带的点阵/图案干扰（如果全局有） */
.page-highlights .section-alt{
  background: transparent !important;
}

.hl-page{
  --c-primary:#1f5eff;
  --c-text:#111827;
  --c-sub:#6b7280;
  --c-border:#e5e7eb;
  --shadow: 0 18px 60px rgba(0,0,0,.08);
}

/* 顶部快捷导航 */
.hl-quicknav{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.hl-chip{
  height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(31,94,255,.18);
  background: rgba(31,94,255,.06);
  color: var(--c-primary);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  font-weight:700;
  font-size:13px;
}
.hl-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* 亮点概览 */
.hl-overview{ padding-top: 18px; }
.hl-overview-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:12px;
}
.hl-mini{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:16px;
  padding:14px 14px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.hl-mini h3{ margin:0 0 6px; font-size:14px; color:var(--c-text); }
.hl-mini p{ margin:0; color:var(--c-sub); line-height:1.6; font-size:12px; }

/* 图片区网格 */
.hl-grid{ display:grid; gap:14px; }
.hl-grid-2{ grid-template-columns: repeat(2, 1fr); }
.hl-grid-3{ grid-template-columns: repeat(3, 1fr); }

.hl-card{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:18px;
  box-shadow: 0 12px 36px rgba(0,0,0,.06);
  overflow:hidden;
}
.hl-media__wrap{
  position:relative;
  background:#f3f4f6;
}
.hl-media__img{
  width:100%;
  display:block;
  border-radius:0;
  max-height: 280px;
  object-fit: cover;
}
.hl-media--contain .hl-media__img{
  object-fit: contain;
  background:#fff;
}
.hl-cap{
  padding:12px 14px 14px;
  margin:0;
  color:#4b5563;
  line-height:1.7;
  font-size:14px;
}

/* 放大按钮 */
.hl-zoom{
  position:absolute;
  right:10px; bottom:10px;
  border:1px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.45);
  color:#fff;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  cursor:pointer;
}
.hl-zoom:hover{ background: rgba(0,0,0,.55); }

/* 核心优势对比卡 */
.hl-compare-card{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:14px;
}
.hl-scroll{ overflow:auto; }
.hl-hint{ margin:10px 2px 0; color:var(--c-sub); font-size:12px; }

.hl-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:8px;
  margin-right:8px;
  font-weight:900;
  font-size:14px;
}
.hl-yes{ background: rgba(16,185,129,.12); color:#059669; }
.hl-no{ background: rgba(239,68,68,.12); color:#dc2626; }

/* 学员反馈卡 */
.hl-testimonial-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.hl-testimonial{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:18px;
  padding:16px;
  box-shadow: 0 12px 36px rgba(0,0,0,.06);
}
.hl-quote{
  margin:0 0 14px;
  color:#374151;
  line-height:1.8;
}
.hl-person{
  display:flex;
  gap:10px;
  align-items:center;
}
.hl-avatar{
  width:40px; height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(31,94,255,.10);
  color: var(--c-primary);
  font-weight:900;
}
.hl-person__info strong{ display:block; }
.hl-person__info span{ display:block; color:var(--c-sub); font-size:13px; }

.hl-cta{
  margin-top:16px;
  border:1px solid var(--c-border);
  border-radius:18px;
  padding:16px;
  background:#fff;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.hl-cta h3{ margin:0 0 6px; }
.hl-cta p{ margin:0; color:var(--c-sub); }

/* Lightbox */
.hl-lightbox{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.hl-lightbox.is-open{ display:block; }
.hl-lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
}
.hl-lightbox__panel{
  position:relative;
  max-width:min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  margin: 14px auto 0;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.hl-lightbox__close{
  position:absolute;
  right:10px; top:10px;
  width:38px; height:38px;
  border-radius:14px;
  border:1px solid var(--c-border);
  background:#fff;
  cursor:pointer;
  font-size:20px;
}
#hlLightboxImg{
  width:100%;
  height: calc(100vh - 140px);
  object-fit: contain;
  background:#0b1220;
}
#hlLightboxCap{
  padding:12px 14px 14px;
  margin:0;
  color:#374151;
}

/* 回到顶部 */
.hl-top{
  position:fixed;
  right:14px;
  bottom:14px;
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(31,94,255,.25);
  background: rgba(255,255,255,.9);
  color: var(--c-primary);
  font-weight:900;
  cursor:pointer;
  display:none;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.hl-top.is-show{ display:block; }

@media (max-width: 980px){
  .hl-overview-grid{ grid-template-columns: repeat(2, 1fr); }
  .hl-grid-3{ grid-template-columns: repeat(2, 1fr); }
  .hl-testimonial-grid{ grid-template-columns: repeat(2, 1fr); }
  .hl-cta{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 560px){
  .hl-grid-2, .hl-grid-3{ grid-template-columns: 1fr; }
  .hl-testimonial-grid{ grid-template-columns: 1fr; }
}

/* 喜报模块标题样式 */
.hl-subblock { margin-top: 18px; }
.hl-subtitle { margin: 6px 0 6px; font-size: 18px; color: #111827; }
.hl-subdesc  { margin: 0 0 12px; color: #6b7280; }

/* 4列网格（复用现有的 hl-grid 体系） */
.hl-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* 喜报图片特殊样式 */
.hl-grid-4 .hl-media__img{
  max-height: 380px;
  object-fit: cover;
}

/* 响应式 - 喜报网格 */
@media (max-width: 980px){
  .hl-grid-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .hl-grid-4{ grid-template-columns: 1fr; }
}