@charset "utf-8";

/* ==========================================================
   expert-profile.css
   模块：李凯城个人主题页面
   作用：控制个人 Banner、人物履历、研究领域、
        出版专著、主讲课程、实战经验及响应式布局。
   ========================================================== */

:root {
  --expert-profile-primary: #073e99;
  --expert-profile-primary-dark: #052f78;
  --expert-profile-heading: #252b32;
  --expert-profile-text: #434a52;
  --expert-profile-line: #d7dce2;
  --expert-profile-container: 1240px;
}

/* ==========================================================
   1. 页面公共容器
   ========================================================== */

.expert-profile-body {
  min-width: 0;
  overflow-x: hidden;
  background: #ffffff;
}

.expert-profile-page,
.expert-profile-page *,
.expert-profile-page *::before,
.expert-profile-page *::after {
  box-sizing: border-box;
}

.expert-profile-page {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  background: #ffffff;
  color: var(--expert-profile-text);
}

.expert-profile-container {
  width: min(
    var(--expert-profile-container),
    calc(100% - 48px)
  );
  margin: 0 auto;
}

.expert-profile-page img {
  max-width: 100%;
}

.expert-profile-page figure {
  margin: 0;
}

/* 语义化隐藏标题，不使用 display:none */
.expert-profile-page__title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================
   2. 专家个人 Banner
   图片：/banner/eb7.jpg
   采用与其他二级页面一致的CSS背景图写法。
   ========================================================== */

.expert-profile-banner {
  position: relative;
  width: 100%;
  height: clamp(280px, 28vw, 430px);
  min-height: 280px;
  overflow: hidden;
  background: #0d1a29;
}

.expert-profile-banner__image {
  width: 100%;
  height: 100%;
  background-image: url("/banner/eb7.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* ==========================================================
   3. 人物身份与履历
   ========================================================== */

.expert-profile-summary {
  width: 100%;
  padding: 54px 0 4px;
  background: #ffffff;
}

.expert-profile-summary__layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.92fr);
  gap: 60px;
  align-items: start;
}

.expert-profile-summary__content,
.expert-profile-summary__media {
  min-width: 0;
}

.expert-profile-summary__name {
  margin: 0 0 22px;
  color: var(--expert-profile-heading);
  font-size: 40px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/*
 * li01.jpg顶部低于“李凯城”标题。
 * 72px约等于姓名行高与姓名下方间距之和。
 */
.expert-profile-summary__media {
  margin-top: 72px;
}

.expert-profile-summary__media img {
  display: block;
  width: 100%;
  height: auto;
}

.expert-profile-summary__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.expert-profile-summary__list li {
  position: relative;
  margin: 0;
  padding: 5px 0 5px 20px;
  color: var(--expert-profile-text);
  font-size: 16px;
  line-height: 1.82;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.expert-profile-summary__list li::before {
  content: "";
  position: absolute;
  top: 1.18em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--expert-profile-primary);
  transform: translateY(-50%);
}

/*
 * 双栏部分结束后的通栏履历。
 * 此区域宽度等于整个页面内容容器，
 * 长内容不再被限制在左侧半栏中。
 */
.expert-profile-summary__continuation {
  width: 100%;
  margin-top: 8px;
}

.expert-profile-summary__list--full {
  width: 100%;
}

/* ==========================================================
   4. 公共栏目标题
   ========================================================== */

.expert-profile-section {
  width: 100%;
  padding: 24px 0 2px;
  background: #ffffff;
}

.expert-profile-heading {
  display: flex;
  width: 100%;
  margin: 0 0 20px;
  align-items: center;
  gap: 13px;
}

.expert-profile-heading::before {
  content: "";
  flex: 0 0 4px;
  width: 4px;
  height: 22px;
  background: var(--expert-profile-primary);
}

.expert-profile-heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--expert-profile-line);
}

.expert-profile-heading__title {
  flex: 0 0 auto;
  margin: 0;
  color: var(--expert-profile-primary-dark);
  font-size: 21px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ==========================================================
   5. 研究领域
   ========================================================== */

.expert-profile-section__text {
  color: var(--expert-profile-text);
  font-size: 16px;
  line-height: 1.9;
}

.expert-profile-section__text p {
  margin: 0;
}

/* ==========================================================
   6. 出版专著
   ========================================================== */

.expert-profile-section--media {
  padding-top: 28px;
  /*padding-bottom: 38px;*/
}

.expert-profile-media-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.92fr);
  gap: 60px;
  align-items: start;
}

.expert-profile-media-layout__content,
.expert-profile-media-layout__media {
  min-width: 0;
}

.expert-profile-book-list,
.expert-profile-course-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.expert-profile-book-list li,
.expert-profile-course-list li {
  position: relative;
  margin: 0;
  padding: 5px 0 5px 18px;
  color: var(--expert-profile-text);
  font-size: 16px;
  line-height: 1.82;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.expert-profile-book-list li::before,
.expert-profile-course-list li::before {
  content: "";
  position: absolute;
  top: 1.18em;
  left: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--expert-profile-primary);
  transform: translateY(-50%);
}

.expert-profile-media-layout__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================
   7. 主讲课程
   ========================================================== */

.expert-profile-course-list li {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* ==========================================================
   8. 实战经验
   ========================================================== */

.expert-profile-section--experience {
  padding-top: 28px;
  padding-bottom: 58px;
}

.expert-profile-experience {
  color: var(--expert-profile-text);
  font-size: 16px;
  line-height: 1.95;
  text-align: justify;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.expert-profile-experience p {
  margin: 0 0 16px;
  text-indent: 2em;
}

.expert-profile-experience p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   9. 平板端适配
   ========================================================== */

@media screen and (max-width: 1200px) {
  .expert-profile-container {
    width: calc(100% - 40px);
  }

  .expert-profile-summary {
    padding-top: 44px;
  }

  .expert-profile-summary__layout,
  .expert-profile-media-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(340px, 0.88fr);
    gap: 36px;
  }

  .expert-profile-summary__name {
    font-size: 35px;
  }

  .expert-profile-summary__media {
    margin-top: 60px;
  }

  .expert-profile-summary__list li,
  .expert-profile-book-list li,
  .expert-profile-course-list li,
  .expert-profile-section__text,
  .expert-profile-experience {
    font-size: 15px;
  }
}

/* ==========================================================
   10. 手机端适配
   ========================================================== */

@media screen and (max-width: 768px) {
  .expert-profile-container {
    width: calc(100% - 32px);
  }

  .expert-profile-summary {
    padding: 38px 0 18px;
  }

  .expert-profile-summary__layout,
  .expert-profile-media-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .expert-profile-summary__name {
    margin-bottom: 18px;
    font-size: 30px;
  }

  /*
   * 手机端图片位于基础履历下方，
   * 不再额外下移。
   */
  .expert-profile-summary__media {
    margin-top: 0;
  }

  .expert-profile-summary__continuation {
    margin-top: 14px;
  }

  .expert-profile-summary__list li {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 15px;
    line-height: 1.78;
  }

  .expert-profile-section,
  .expert-profile-section--media {
    padding-top: 22px;
    padding-bottom: 30px;
  }

  .expert-profile-heading {
    margin-bottom: 17px;
    gap: 10px;
  }

  .expert-profile-heading::before {
    height: 20px;
  }

  .expert-profile-heading__title {
    font-size: 18px;
  }

  .expert-profile-section__text,
  .expert-profile-book-list li,
  .expert-profile-course-list li,
  .expert-profile-experience {
    font-size: 15px;
    line-height: 1.82;
  }

  .expert-profile-book-list li,
  .expert-profile-course-list li {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .expert-profile-section--experience {
    padding-top: 22px;
    padding-bottom: 46px;
  }

  .expert-profile-experience {
    text-align: left;
  }

  .expert-profile-experience p {
    margin-bottom: 14px;
  }
}

@media screen and (max-width: 420px) {
  .expert-profile-container {
    width: calc(100% - 28px);
  }

  .expert-profile-summary__name {
    font-size: 28px;
  }

  .expert-profile-summary__list li,
  .expert-profile-section__text,
  .expert-profile-book-list li,
  .expert-profile-course-list li,
  .expert-profile-experience {
    font-size: 14px;
  }
}

/* 本页没有专用动画 */
@media (prefers-reduced-motion: reduce) {
  .expert-profile-page *,
  .expert-profile-page *::before,
  .expert-profile-page *::after {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   专家个人Banner响应式
   ========================================================== */

@media screen and (max-width: 768px) {
  .expert-profile-banner {
    height: 190px;
    min-height: 190px;
  }

  .expert-profile-banner__image {
    background-position: center center;
  }
}

@media screen and (max-width: 420px) {
  .expert-profile-banner {
    height: 165px;
    min-height: 165px;
  }
}