/* =========================================================
   招生体系页（enrollment-system.htm）
   PC 端三列粘连一体：地市列 │ 区县/学院列 │ 学习中心详情区
   三列等高（拉伸到内容区高度），列间以细分隔线相接；
   ≤992px 退化为三张卡片上下竖排，交互不变
   ========================================================= */

/* ---------------- 页面底色带（news 区同款浅蓝，向下渐白并入页脚） ---------------- */
.es-band {
  background: linear-gradient(180deg, #F5FBFE 0%, #EAF4FB 55%, #FFFFFF 100%);
  padding: 44px 0 84px;
}
.es-section { display: flex; flex-direction: column; gap: 28px; }

/* ---------------- 区块标题（宣传视频标题同款深蓝 + 两侧渐变短杠） ---------------- */
.es-head { text-align: center; margin-bottom: 8px; }
.es-title {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: clamp(24px, 1.9vw, 34px);
  font-weight: 700;
  color: #0F5E9C;
  letter-spacing: 3px;
}
.es-title::before,
.es-title::after {
  content: "";
  width: 46px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0988C5 0%, #4FC2DC 100%);
}
.es-title::after { transform: scaleX(-1); }
.es-sub { margin-top: 12px; font-size: 16px; color: #8C8C8C; letter-spacing: 1px; }

/* ---------------- 通用卡片（快捷导航卡同款白卡） ---------------- */
.es-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(30, 90, 150, .08);
}

/* =========================================================
   PC 三列粘连布局（默认样式即桌面，窄屏在下方响应式退化为竖排）
   ========================================================= */
.es-cols {
  display: flex;
  align-items: stretch;   /* 三列等高：拉齐到最高的内容列 */
}
/* 左右两列固定窄宽，与相邻列以 1px 细线相接（圆角只留最外两侧） */
.es-city-card {
  width: 224px;
  flex: none;
  padding: 18px 14px 16px;
  border-radius: 20px 0 0 20px;
  border-right: 1px solid #EAF2F8;
}
.es-district-card {
  width: 224px;
  flex: none;
  padding: 18px 14px 16px;
  border-radius: 0;
  border-right: 1px solid #EAF2F8;
}
.es-detail {
  flex: 1;
  min-width: 0;
  border-radius: 0 20px 20px 0;
  /* 手机端点击区县后详情滚到吸顶头部之下 */
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* 列头：地市 / 区县 两个标签同款同高 */
.es-col-head {
  font-size: 15px;
  font-weight: 500;
  color: #8C8C8C;
  letter-spacing: 2px;
  padding: 6px 16px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #EAF2F8;
}

/* ---------------- 第一级：地市（竖列单列） ---------------- */
.es-city-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.es-city {
  height: 48px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #F3FAFE;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--tr), color var(--tr), border-color var(--tr), box-shadow .3s;
}
.es-city:hover {
  background: #DFF3FC;
  color: #1E6FC0;
  border-color: #BFE3F7;
}
/* 一二级选中态统一：侧栏标题同款主蓝渐变 */
.es-city.active,
.es-district.active {
  background: linear-gradient(135deg, #0C81B9 0%, #29A4D1 55%, #4FC2DE 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(14, 110, 160, .30);
}
.es-city:focus-visible,
.es-district:focus-visible {
  outline: 2px solid #1E7BC8;
  outline-offset: 2px;
}

/* ---------------- 第二级：区县 / 学院（竖列单列，与地市列同行高节奏） ---------------- */
.es-district-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.es-district {
  height: 48px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #F5FBFE;
  font-size: 16px;
  color: var(--c-text2);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--tr), color var(--tr), border-color var(--tr), box-shadow .3s;
}
.es-district:hover {
  background: #DFF3FC;
  color: #1E6FC0;
  border-color: #9FC3EF;
}

/* ---------------- 第三级：学习中心详情（文章页正文结构） ---------------- */
.es-detail { padding: 40px 48px 46px; }
.es-detail-title {
  font-size: 30px;
  line-height: 1.75;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
  margin-bottom: 40px;
}
/* 正文限宽（同文章页 1000px），过长行不影响阅读 */
.es-detail .article-body { max-width: 1000px; margin: 0 auto; }
.es-content p + p { margin-top: 12px; }
.es-content a:hover { text-decoration: underline; }

/* ---------------- 切换入场动画（按钮/正文重渲时轻浮起；
   只用 backwards 填充，动画结束后不占用 transform，悬停位移不受影响） ---------------- */
html.js .es-anim { animation: esItemIn .5s cubic-bezier(.25, .7, .35, 1) backwards; }
@keyframes esItemIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .es-anim { animation: none; }
}

/* =========================================================
   响应式：≤992px 三列退化为三张分离卡片上下竖排
   （圆角/分隔线恢复独立卡片形态，地市恢复网格、区县恢复胶囊）
   ========================================================= */
@media (max-width: 992px) {
  .es-band { padding: 32px 0 32px; }
  .es-cols { flex-direction: column; gap: 22px; }
  .es-cols > .es-card { border-radius: 16px; border-right: 0; }
  .es-city-card,
  .es-district-card { width: auto; padding: 16px; }
  .es-col-head { padding: 2px 4px 12px; }

  .es-city-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .es-city {
    height: 48px;
    padding: 0 6px;
    border-color: #DCEBF5;
    font-size: 15px;
    text-align: center;
  }

  .es-district-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
  .es-district {
    height: 42px;
    padding: 0 8px;
    border-color: #E3E3E3;
    border-radius: 999px;
    font-size: 14px;
    text-align: center;
  }

  .es-detail { padding: 34px 34px 40px; }
}

@media (max-width: 768px) {
  .es-band { padding: 26px 0 48px; }
  .es-head { margin-bottom: 2px; }
  .es-title { gap: 12px; letter-spacing: 2px; }
  .es-title::before, .es-title::after { width: 26px; }
  .es-sub { font-size: 13px; letter-spacing: 0; }

  .es-city-card { padding: 14px 12px; }
  .es-col-head { padding: 0 2px 10px; font-size: 14px; letter-spacing: 1px; }
  .es-city-grid { gap: 9px; grid-template-columns: repeat(3, 1fr); }
  .es-city { height: 46px; font-size: 14px; }

  .es-district-card { padding: 14px 12px 16px; }
  .es-district-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .es-district { height: 40px; }

  .es-detail { padding: 26px 18px 32px; }
  .es-detail-title { font-size: 22px; margin-bottom: 24px; }
  .es-content p + p { margin-top: 10px; }
}