/* ================================================
   ABOUT PAGE
   Desktop: all sizes in vw (px / 1920 * 100)
   Mobile: @media (max-width: 1023px) with px
   Prefix: ab-
   ================================================ */

/* ================================================
   HERO BANNER
   h=494px
   ================================================ */
.ab-hero {
  position: relative;
  height: 25.7292vw;
  /* 494px */
  background-color: #0a1628;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ab-hero-bg {
  position: absolute;
  /*inset: 0;*/
  z-index: 0;
}

.ab-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.ab-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.ab-breadcrumb {
  position: absolute;
  top: 1.25vw;
  /* 24px */
  left: 0;
  font-size: 1.25vw;
  /* 24px */
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0.025vw;
  display: flex;
  align-items: center;
  gap: 0.4167vw;
  /* 8px */
}

.ab-breadcrumb a {
  color: var(--color-white);
  opacity: 0.7;
  transition: opacity 0.3s;
}

.ab-breadcrumb a:hover {
  opacity: 1;
}

.ab-breadcrumb span {
  color: var(--color-white);
}

.ab-hero-title {
  font-size: 4.1667vw;
  /* 80px */
  font-weight: 900;
  color: var(--color-white);
  letter-spacing: 0.0833vw;
  /* 1.6px */
  line-height: 1.2;
  margin: 0;
}

.ab-hero-subtitle {
  font-family: 'Aboreto', cursive;
  font-size: 2.0833vw;
  /* 40px */
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0.2708vw;
  /* 5.2px */
  margin-top: 0.8333vw;
  /* 16px */
}

/* ================================================
   SECTION 1 — 关于富得学堂
   light blue bg, card 1131x617
   ================================================ */
.ab-about {
  background: #FFFFFF;
  padding: 4.1667vw 0 5.2083vw;
  /* 80px 0 100px */
}

.ab-about-card {
  width: 100%;
  min-height: 32.1354vw;
  /* 617px */
  background: #F1F8FF;
  border-radius: 0.9375vw;
  /* 18px */
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 3.906vw 0 2.6042vw 5.625vw;
}

.ab-about-left {
  flex: 1;
}

.ab-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11.25vw;
  /* 216px */
  height: 2.4479vw;
  /* 47px */
  background: #3660F3;
  border-radius: 3.9583vw;
  /* 76px */
  font-size: 1.25vw;
  /* 24px */
  font-weight: 500;
  color: var(--color-white);
  white-space: nowrap;
}

.ab-about-title {
  font-size: 2.0833vw;
  /* 40px */
  font-weight: 700;
  color: #3D65F3;
  margin-top: 1.927vw;
  /* 30px */
  margin-bottom: 1.0417vw;
  /* 20px */
  line-height: 1.3;
}

.ab-about-body {
  font-size: 1.25vw;
  /* 24px */
  font-weight: 500;
  color: #777777;
  line-height: 2.0833vw;
  /* 40px */
  letter-spacing: 0.0625vw;
  /* 1.2px */
}

.ab-text-blue {
  color: #3D65F3;
}

.ab-about-right {
  flex: 0 0 30vw;
  /* 576px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.ab-about-right img {
  width: 30vw;
  /* 576px */
  height: auto;
  max-height: 34.375vw;
  /* 660px */
  object-fit: contain;
}

/* ================================================
   SECTION 2 — 专业教学体系
   gradient card with image overlay
   ================================================ */
.ab-teaching {
  padding: 4.1667vw 0 5.2083vw;
  /* 80px 0 100px */
  background: url('../assets/08-about/bg/about-bg2.webp') center / cover no-repeat;
}

.ab-teaching-card {
  width: 73.75vw;
  /* 1416px */
  min-height: 28.125vw;
  /* 540px */
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 3.125vw 0 3.125vw 5.625vw;
  overflow: hidden;
  gap: 3.542vw;
}

.ab-teaching-left {
  flex: 1;
}

.ab-teaching-title {
  font-size: 2.0833vw;
  /* 40px */
  font-weight: 700;
  color: #3D65F3;
  line-height: 1.4;
  margin-bottom: 1.5625vw;
  /* 30px */
}

.ab-teaching-body {
  font-size: 1.25vw;
  /* 24px */
  font-weight: 500;
  color: #777777;
  line-height: 2.0833vw;
  /* 40px */
  letter-spacing: 0.0625vw;
  margin-bottom: 2.0833vw;
  /* 40px */
}

.ab-teaching-list {
  display: flex;
  flex-direction: column;
  gap: 0.5208vw;
  /* 10px */
  align-items: flex-start;
}

.ab-teaching-item {
  display: flex;
  align-items: center;
  gap: 1.615vw;
}

.ab-teaching-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.0833vw;
  /* 40px */
  height: 2.0833vw;
  /* 40px */
  background: #3D65F3;
  border-radius: 50%;
  font-size: 1.0417vw;
  /* 20px */
  font-weight: 700;
  color: var(--color-white);
  flex-shrink: 0;
}

.ab-teaching-label {
  font-size: 1.25vw;
  /* 24px */
  font-weight: 700;
  color: #3D65F3;
  white-space: nowrap;
}

.ab-teaching-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 3.542vw;
}

.ab-teaching-right img {
  width: 30.1563vw;
  /* 579px */
  height: auto;
  max-height: 28.0208vw;
  /* 538px */
  object-fit: contain;
}

/* ================================================
   SECTION 3 — 未来展望 (gradient left panel)
   ================================================ */
.ab-future {
  display: flex;
  background: url('../assets/08-about/bg/about-bg3.webp') right center / cover no-repeat;
  min-height: 27.2396vw;
  /* 523px */
}

.ab-future-panel {
  width: 55.2083vw;
  /* 1060px */
  flex-shrink: 0;
  background: linear-gradient(to right, #3E66F4, #C1C2FE);
  display: flex;
  align-items: center;
  padding: 3.125vw 3.6458vw 3.125vw 15.052vw;
  gap: 2.0833vw;
  /* 40px */
}

.ab-future-text {
  flex: 0 0 30.7292vw;
  /* 590px */
}

.ab-future-text p {
  font-size: 1.25vw;
  /* 24px */
  font-weight: 500;
  color: var(--color-white);
  line-height: 2.0833vw;
  /* 40px */
  letter-spacing: 0.0625vw;
}

.ab-future-courses {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7813vw;
  /* 15px */
  align-items: center;
}

.ab-future-course {
  width: 100%;
  max-width: 15.625vw;
  /* 300px */
  border-radius: 0.5208vw;
  /* 10px */
  object-fit: cover;
}

/* ================================================
   SECTION 4 — 公司地址
   ================================================ */
.ab-address {
  padding: 4.1667vw 0 5.2083vw;
  /* 80px 0 100px */
  background: var(--color-white);
}

.ab-address-header {
  margin-bottom: 1.0417vw;
  /* 20px */
}

.ab-address-num {
  font-size: 3.3333vw;
  /* 64px */
  font-weight: 900;
  color: #3D65F3;
  display: block;
  line-height: 1.2;
}

.ab-address-title {
  font-size: 2.0833vw;
  /* 40px */
  font-weight: 700;
  color: #3D65F3;
  margin: 0;
  line-height: 1.3;
}

.ab-address-text {
  font-size: 1.25vw;
  /* 24px */
  font-weight: 500;
  color: #777777;
  line-height: 2.0833vw;
  /* 40px */
  letter-spacing: 0.0625vw;
  margin-bottom: 2.0833vw;
  /* 40px */
  margin-left: 5.208vw;
}

.ab-address-map {
  width: 73.75vw;
  /* 1416px */
  height: 23.3854vw;
  /* 449px */
  border-radius: 1.5625vw;
  /* 30px */
  overflow: hidden;
}

.ab-address-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.5625vw;
  /* 30px */
}

/* ================================================
   RESPONSIVE — <=1023px
   ================================================ */
@media (max-width: 1023px) {

  /* -- Global overflow prevention -- */
  .ab-hero,
  .ab-about,
  .ab-teaching,
  .ab-future,
  .ab-address {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ---- Hero ---- */
  .ab-hero {
    height: auto;
    min-height: auto;
    padding: 50px 0;
  }

  .ab-hero-inner {
    height: auto;
  }

  .ab-hero-title {
    font-size: 28px;
    line-height: 38px;
    letter-spacing: 1px;
  }

  .ab-hero-subtitle {
    font-size: 14px;
    letter-spacing: 2px;
    margin-top: 8px;
  }

  /* ---- Section 1 — About ---- */
  .ab-about {
    padding: 36px 0 40px;
  }

  .ab-about-card {
    width: 100%;
    min-height: auto;
    flex-direction: column;
    border-radius: 14px;
    padding: 20px;
  }

  .ab-about-left {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .ab-pill {
    width: auto;
    padding: 0 24px;
    height: 36px;
    font-size: 14px;
    border-radius: 18px;
  }

  .ab-about-title {
    font-size: 22px;
    margin-top: 14px;
    margin-bottom: 12px;
  }

  .ab-about-body {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }

  .ab-about-right {
    flex: none;
    width: 100%;
  }

  .ab-about-right img {
    width: 100%;
    height: auto;
    max-width: 280px;
    max-height: none;
    margin: 0 auto;
    display: block;
  }

  /* ---- Section 2 — Teaching ---- */
  .ab-teaching {
    padding: 36px 0 40px;
  }

  .ab-teaching-card {
    width: 100%;
    min-height: auto;
    flex-direction: column;
    border-radius: 14px;
    padding: 20px;
    gap: 20px;
  }

  .ab-teaching-left {
    max-width: none;
    margin-bottom: 16px;
  }

  .ab-teaching-title {
    font-size: 20px;
    margin-bottom: 14px;
  }

  .ab-teaching-body {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 20px;
    letter-spacing: 0;
  }

  .ab-teaching-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }

  .ab-teaching-item {
    gap: 8px;
  }

  .ab-teaching-num {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .ab-teaching-label {
    font-size: 14px;
    white-space: normal;
  }

  .ab-teaching-right {
    position: relative;
    right: auto;
    flex: none;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .ab-teaching-right img {
    width: 100%;
    height: auto;
    max-width: 260px;
    max-height: none;
  }

  /* ---- Section 3 — Future ---- */
  .ab-future {
    flex-direction: column;
    min-height: auto;
    padding: 0;
    background-size: cover;
  }

  .ab-future-panel {
    width: 100%;
    min-height: auto;
    flex-direction: column;
    border-radius: 0;
    padding: 28px 16px;
    gap: 20px;
  }

  .ab-future-text {
    flex: none;
  }

  .ab-future-text p {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
  }

  .ab-future-courses {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  .ab-future-course {
    max-width: 30%;
    border-radius: 8px;
  }

  /* ---- Section 4 — Address ---- */
  .ab-address {
    padding: 36px 0 40px;
  }

  .ab-address-header {
    margin-bottom: 12px;
  }

  .ab-address-num {
    font-size: 32px;
  }

  .ab-address-title {
    font-size: 22px;
  }

  .ab-address-text {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 20px;
    margin-left: 0;
    letter-spacing: 0;
  }

  .ab-address-map {
    width: 100%;
    height: 200px;
    border-radius: 14px;
  }

  .ab-address-map img {
    width: 100%;
    height: 100%;
    border-radius: 14px;
  }
}