@charset "utf-8";
/* ============================================================
   关于世荣 · 页面样式
   复用 styles.css 的设计系统（navy / gold / paper），仅补充页面专属布局。
   z-index 策略：不使用负值，统一用 0/1 保证图片不被 .hero 背景色盖住。
   ============================================================ */

/* ---------- 本页首屏 ---------- */

.page-hero {
  position: relative;
  min-height: 88svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--navy-3);
  overflow: hidden;
}

.page-hero .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-hero .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.page-hero .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(9, 24, 39, .42) 0%, rgba(9, 24, 39, .18) 34%, rgba(9, 24, 39, .72) 100%),
    linear-gradient(90deg, rgba(9, 24, 39, .55) 0%, rgba(9, 24, 39, 0) 55%);
}

.page-hero .hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  padding: clamp(100px, 16vh, 180px) var(--pad) clamp(34px, 5vw, 58px);
  color: #F7F3EA;
}
.page-hero .kicker { color: var(--gold-l); }
.page-hero .hero-title {
  font-size: clamp(34px, 6.4vw, 70px);
  line-height: 1.12;
  margin: 20px 0 24px;
  letter-spacing: .005em;
}
.page-hero .hero-sub {
  font-size: 14.5px;
  line-height: 1.95;
  max-width: 36em;
  color: rgba(247, 243, 234, .78);
}

/* 首屏三栏目预览索引 */
.page-hero .hero-index {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-dark-soft);
}
.page-hero .index-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px var(--pad);
  border-left: 1px solid var(--line-dark-soft);
  transition: background .3s var(--ease);
}
.page-hero .index-row:first-child { border-left: 0; }
.page-hero .index-row:hover { background: rgba(255, 255, 255, .06); }
.page-hero .idx { font-family: var(--num); font-size: 15px; color: var(--gold-l); }
.page-hero .idx-name { font-family: var(--serif); font-size: 17px; }
.page-hero .idx-tags { font-size: 11px; color: rgba(247, 243, 234, .5); letter-spacing: .04em; }
.page-hero .index-row .arrow {
  width: 26px; height: 1px; background: var(--gold-l); position: relative;
}
.page-hero .index-row .arrow::after {
  content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
  border-top: 1px solid var(--gold-l); border-right: 1px solid var(--gold-l);
  transform: rotate(45deg);
}

/* ---------- 栏目通用 ---------- */

.chapter { padding: clamp(64px, 9vw, 132px) 0; }
.chapter .sec-head { max-width: 820px; margin-bottom: clamp(40px, 6vw, 72px); }
.chapter .sec-note { max-width: 42em; }

/* ---------- 01 关于我们 ---------- */

.intro-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}
.intro-lead .intro-text {
  font-size: 15px;
  line-height: 2.05;
  color: var(--ink-2);
}
.intro-lead .intro-text + .intro-text { margin-top: 18px; }
.intro-lead .intro-sign {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-3);
}

.intro-side { display: grid; gap: 28px; }
.intro-card {
  padding: 28px 30px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.intro-card .card-no {
  font-family: var(--num);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: 10px;
}
.intro-card h3 { font-size: 19px; margin-bottom: 12px; }
.intro-card p { font-size: 13.5px; line-height: 1.9; color: var(--ink-2); }

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(44px, 6vw, 72px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fact {
  padding: 24px 20px;
  border-left: 1px solid var(--line);
}
.fact:first-child { border-left: 0; }
.fact-num {
  font-family: var(--num);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  color: var(--gold);
}
.fact-num em { font-size: 15px; margin-left: 3px; color: var(--ink-2); }
.fact-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-2);
}

/* ---------- 02 团队与服务 ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 3vw, 28px);
}
.member {
  display: grid;
  gap: 12px;
  padding: 30px 26px 28px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  align-content: start;
}
.member-portrait {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--gold);
  font-family: var(--num);
  font-size: 20px;
}
.member h3 { font-size: 19px; }
.member-role {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gold);
}
.member-text { font-size: 13px; line-height: 1.9; color: var(--ink-2); }
.member-note {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: clamp(44px, 6vw, 72px);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.service {
  padding: 28px 26px 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.service:nth-child(2n) { border-right: 0; }
.service:nth-last-child(-n+2) { border-bottom: 0; }
.service-no { font-family: var(--num); font-size: 12px; color: var(--gold); letter-spacing: .16em; }
.service h3 { font-size: 18px; margin: 10px 0 10px; }
.service p { font-size: 13px; line-height: 1.9; color: var(--ink-2); }

.service-note {
  margin-top: 22px;
  padding: 20px 24px;
  background: var(--paper-2);
  border-left: 2px solid var(--gold);
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-2);
}

/* ---------- 03 案例与活动 ---------- */

.cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cases-grid[data-offer="study"],
.cases-grid[data-offer="identity"] {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 14px;
}
.case {
  background: var(--paper);
  border: 1px solid rgba(22, 34, 44, .16);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.case:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(9, 24, 39, .28);
}
.case-img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-2);
}
/* 录取捷报是 A4 竖版扫描/海报，用 contain 保留完整内容，不让 cover 裁掉边缘信息 */
.cases-grid[data-offer="study"] .case-img,
.cases-grid[data-offer="identity"] .case-img {
  aspect-ratio: 1100 / 1556;
  background: #fff;
}
.cases-grid[data-offer="study"] .case-img img,
.cases-grid[data-offer="identity"] .case-img img {
  object-fit: contain;
}
.case-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.case:hover .case-img img { transform: scale(1.04); }
.case-cap {
  padding: 14px 15px 16px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
  text-align: left;
  word-break: break-word;
}
/* 院校名单独成行，字号不低于 14px：4 列卡片下说明区只有约 186px 宽，
   13.5px 的中文长名称会被挤成两三行，读起来碎 */
.case-cap b {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: .01em;
  margin-bottom: 5px;
}
/* 身份卡片的说明区更紧凑：只有 10 张、每格约 210px 宽，
   计划名 + 结果 + 标签三行排下来，靠上对齐比居中更好读 */
.case-id .case-cap {
  padding: 12px 14px 14px;
  font-size: 12px;
  line-height: 1.65;
}
.case-id .case-cap b {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.case-id .case-tag {
  display: block;
  width: fit-content;
  margin-top: 7px;
}


/* 折叠态：留学 Offer 先显示 8 张（2 排），其余收起 */
.cases-grid[data-offer="study"].is-collapsed > .case:nth-child(n+9) {
  display: none;
}

.offer-more {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}
.offer-more-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 26px;
  font: inherit;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.offer-more-btn::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s var(--ease);
}
.offer-more-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(160, 118, 46, .05);
}
.offer-more-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.offer-more-btn[aria-expanded="true"]::after {
  transform: rotate(225deg) translateY(-2px);
}

.cases-more {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

/* 录取捷报：留学 Offer / 身份 Offer 两组 */
.offer-split {
  margin-top: clamp(30px, 4vw, 44px);
  display: grid;
  gap: clamp(34px, 5vw, 56px);
}
.offer-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.offer-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink);
}
.offer-sub {
  margin: 6px 0 0;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.cases-more {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

/* 录取捷报：留学 Offer / 身份 Offer 两组 */
.offer-split {
  margin-top: clamp(30px, 4vw, 44px);
  display: grid;
  gap: clamp(34px, 5vw, 56px);
}
.offer-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.offer-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink);
}
.offer-sub {
  margin: 6px 0 0;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-3);
}
/* 卡片外壳（纯展示，不可点击） */
.case { position: relative; }
.case-in { display: block; }
.case-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border: 1px solid rgba(160, 118, 46, .55);
  background: rgba(160, 118, 46, .12);
  font-size: 11.5px;
  letter-spacing: .08em;
  line-height: 1.5;
  color: #6E4A12;
  vertical-align: middle;
}
/* 授权证书墙 */
.certwall { margin-top: clamp(52px, 7vw, 80px); }
.certwall-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.certwall-title {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--ink);
}
.certwall-sub { font-size: 12.5px; color: var(--ink-3); letter-spacing: .02em; }
.certwall-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.cert {
  background: #FFF;
  border: 1px solid var(--line);
  overflow: hidden;
}
.cert-img {
  aspect-ratio: 1 / 1.12;
  overflow: hidden;
  background: var(--paper-2);
}
.cert-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.cert:hover .cert-img img { transform: scale(1.05); }
.cert-name {
  padding: 9px 11px 11px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  letter-spacing: .01em;
}

/* 活动现场照片墙 · 悬停放大相册
   左：固定展示框（sticky），鼠标移到哪张缩略图就放大哪张；
   右：全部活动照片缩略图网格（桌面 8 列，平板 6 列，手机 4 列）。
   键盘 Tab 到缩略图同样会切换，触屏点按切换。 */
.gal {
  margin-top: clamp(44px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
}
.gal-stage {
  position: sticky;
  top: 92px;
  align-self: start;
}
.gal-frame {
  position: relative;
  background: var(--navy-3);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gal-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity .28s var(--ease);
}
.gal-frame.is-fading img { opacity: .25; }
.gal-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  margin: 0;
  padding: 3px 9px;
  background: rgba(9, 24, 39, .62);
  color: rgba(246, 242, 233, .88);
  font-family: var(--num);
  font-size: 12px;
  letter-spacing: .1em;
  backdrop-filter: blur(2px);
}
.gal-count span { color: var(--gold-l); }
.gal-cap {
  margin: 10px 0 0;
  min-height: 1.6em;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
  letter-spacing: .01em;
}
.gal-cap b {
  font-weight: 400;
  color: var(--ink-2);
  margin-right: 8px;
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.g-thumb {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--paper-2);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.g-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease), filter .3s var(--ease);
  filter: saturate(.92);
}
.g-thumb:hover,
.g-thumb:focus-visible,
.g-thumb.is-on {
  border-color: var(--gold);
  box-shadow: 0 8px 18px -12px rgba(9, 24, 39, .45);
  transform: translateY(-2px);
  z-index: 2;
}
.g-thumb:hover img,
.g-thumb:focus-visible img,
.g-thumb.is-on img { transform: scale(1.06); filter: saturate(1); }
.g-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 1120px) {
  .gal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gal-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 820px) {
  .gal { grid-template-columns: 1fr; }
  .gal-stage { position: static; }
  .gal-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 560px) {
  .gal-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .gal-cap { font-size: 12px; }
}

.activities {
  margin-top: clamp(44px, 6vw, 72px);
  border-top: 1px solid var(--line);
}
.activity {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: padding .3s var(--ease), color .3s var(--ease);
}
.activity:hover { padding-left: 10px; }
.activity-date { font-family: var(--num); font-size: 14px; color: var(--gold); letter-spacing: .06em; }
.activity-title { font-family: var(--serif); font-size: 19px; }
.activity-tag {
  font-size: 11px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  color: var(--ink-3);
  letter-spacing: .08em;
  white-space: nowrap;
}
.activity-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .02em;
}

/* ---------- 栏目间过渡带 ---------- */

.chapter-band {
  position: relative;
  height: 260px;
  overflow: hidden;
  display: grid;
  align-items: end;
}
.chapter-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chapter-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 24, 39, .3), rgba(9, 24, 39, .7));
}
.chapter-band p {
  position: relative;
  z-index: 1;
  padding: 26px var(--pad) 28px;
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 26px);
  color: #F7F3EA;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}


/* ---------- 响应式 ---------- */

@media (max-width: 980px) {
  .intro-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact { border-left: 0; border-top: 1px solid var(--line); }
  .fact:nth-child(-n+2) { border-top: 0; }
  .fact:nth-child(odd) { border-right: 1px solid var(--line); }
  .team-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .service { border-right: 0; }
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
  .cases-grid[data-offer="study"] { grid-template-columns: repeat(3, 1fr); }
  .offer-head { align-items: flex-start; }
  .acts-grid { grid-template-columns: repeat(4, 1fr); }
  .certwall-grid { grid-template-columns: repeat(3, 1fr); }
  .page-hero .hero-index { grid-template-columns: 1fr; }
  .page-hero .index-row { border-left: 0; border-top: 1px solid var(--line-dark-soft); }
  .page-hero .index-row:first-child { border-top: 0; }
}

@media (max-width: 640px) {
  .page-hero { min-height: 76svh; }
  .page-hero .hero-inner { padding-top: 90px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .cases-grid,
  .cases-grid[data-offer="study"] { grid-template-columns: repeat(2, 1fr); }
  .offer-head { flex-wrap: wrap; gap: 10px; }
  .activity { grid-template-columns: 1fr; gap: 8px; }
  .activity-tag { justify-self: start; }
  .qr-row { flex-direction: column; align-items: flex-start; }
  .qr-item { flex-direction: row; gap: 14px; align-items: center; }
  .qr-item img { width: 72px; height: 72px; padding: 6px; }
}