/*
 * Fei Gu Homepage - compact redesign layer (v2)
 * Purpose: reduce excessive white space, rebuild homepage/service layouts,
 * and improve readability across all pages without changing content.
 */
:root {
  --fg-bg: #f4f7fb;
  --fg-surface: rgba(255,255,255,.97);
  --fg-surface-soft: rgba(247,250,254,.92);
  --fg-text: #172033;
  --fg-muted: #5b6678;
  --fg-primary: #0d3d70;
  --fg-primary-2: #155da5;
  --fg-accent: #45a0df;
  --fg-line: rgba(20,72,122,.14);
  --fg-shadow: 0 16px 42px rgba(18, 45, 78, .10);
  --fg-shadow-soft: 0 8px 24px rgba(18, 45, 78, .08);
  --fg-radius-xl: 24px;
  --fg-radius-lg: 18px;
  --fg-radius-md: 12px;
  --fg-content: min(1180px, calc(100% - 56px));
}

html { background: var(--fg-bg); }
body {
  color: var(--fg-text) !important;
  line-height: 1.56 !important;
  background:
    radial-gradient(circle at 6% -8%, rgba(69,160,223,.16), transparent 30rem),
    radial-gradient(circle at 94% 0%, rgba(13,61,112,.13), transparent 28rem),
    linear-gradient(180deg,#f9fcff 0,#f4f7fb 40%,#f7f9fc 100%) !important;
}
body, body *:not(code):not(pre) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif !important;
}

.content,
.container,
.gen,
.research-area,
.research-life-container,
.info,
.content .news,
.frend-link {
  width: var(--fg-content) !important;
  max-width: var(--fg-content) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.content, .container, .gen { padding-top: 0 !important; }

.site_head .center { height: 58px !important; }
.shortcut-links ul,
.shortcut-links ul li { height: 58px !important; }
.shortcut-links ul li a { line-height: 36px !important; }
.dropdown-content { top: 52px !important; }

/* Page titles: compact, consistent, and closer to content */
.top {
  width: var(--fg-content) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 30px auto 18px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: var(--fg-primary) !important;
  font-size: clamp(30px, 3.2vw, 40px) !important;
  font-weight: 820 !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
}
.title,
.cla {
  line-height: 1.25 !important;
  margin-top: 28px !important;
  margin-bottom: 14px !important;
}

/* General cards and lists */
.info,
.info .e,
.info .c,
.news,
.frend-link,
.papers .info,
.patents .info,
.software-copyrights .info,
.recruiting .info,
.review-card {
  background: var(--fg-surface) !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: var(--fg-radius-xl) !important;
  box-shadow: var(--fg-shadow-soft) !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
}
.info .e,
.info .c {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.info p,
.info li,
.news li,
.papers li,
.patents li,
.software-copyrights li {
  line-height: 1.56 !important;
}
ul { margin-top: 10px !important; }
li {
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
.news li,
.info li,
.papers li,
.patents li,
.software-copyrights li {
  margin-bottom: 10px !important;
  padding: 10px 14px 10px 16px !important;
  line-height: 1.55 !important;
}
.bottom {
  margin-top: 42px !important;
  padding: 24px 0 32px !important;
  color: var(--fg-muted) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* ===================== Homepage ===================== */
body.home-page .content {
  width: 100% !important;
  max-width: none !important;
  padding-bottom: 18px !important;
}
body.home-page .content > .top {
  width: var(--fg-content) !important;
  margin: 24px auto 18px !important;
}
body.home-page .top .title {
  width: 100% !important;
  height: 132px !important;
  min-height: 132px !important;
  margin: 0 !important;
  border-radius: var(--fg-radius-xl) !important;
  background-image: linear-gradient(90deg,rgba(9,32,58,.58),rgba(9,32,58,.18)), url(../img/sdbuilding.png) !important;
  background-size: cover !important;
  background-position: center 42% !important;
  box-shadow: var(--fg-shadow) !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 0 clamp(28px, 4vw, 58px) !important;
}
body.home-page .top .title .word {
  margin: 0 !important;
  width: auto !important;
  max-width: 720px !important;
  color: #fff !important;
  font-size: clamp(30px, 3.2vw, 42px) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.35) !important;
  text-align: left !important;
}
body.home-page .swipers,
body.recruiting-page .swipers,
body.teaching-page .swipers {
  width: var(--fg-content) !important;
  height: 132px !important;
  margin: 0 auto 22px !important;
  border: 0 !important;
  border-radius: var(--fg-radius-xl) !important;
  background: #fff !important;
  box-shadow: var(--fg-shadow-soft) !important;
  overflow: hidden !important;
}
body.home-page .swipers .block,
body.recruiting-page .swipers .block,
body.teaching-page .swipers .block {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body.home-page .swipers .swiper,
body.recruiting-page .swipers .swiper,
body.teaching-page .swipers .swiper {
  height: 100% !important;
}
body.home-page .swipers .swiper img,
body.recruiting-page .swipers .swiper img,
body.teaching-page .swipers .swiper img {
  width: 198px !important;
  height: 132px !important;
  object-fit: cover !important;
}

body.home-page .content .img-and-intr {
  width: min(980px, calc(100% - 56px)) !important;
  max-width: 980px !important;
  margin: 18px auto 24px !important;
  padding: 24px !important;
  display: grid !important;
  grid-template-columns: 176px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: center !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,251,255,.94)) !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: var(--fg-radius-xl) !important;
  box-shadow: var(--fg-shadow) !important;
  overflow: hidden !important;
}
body.home-page .content .img-and-intr .my-img {
  width: 176px !important;
  height: 224px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(13,45,78,.16) !important;
}
body.home-page .content .img-and-intr .intr {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 8px !important;
  padding: 0 !important;
}
body.home-page .content .img-and-intr .intr > div {
  position: static !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  color: var(--fg-text) !important;
  font-size: 16px !important;
  font-weight: 560 !important;
  line-height: 1.45 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
body.home-page .content .img-and-intr .intr > div:nth-of-type(1),
body.home-page .content .img-and-intr .intr > div:nth-of-type(3),
body.home-page .content .img-and-intr .intr > div:nth-of-type(8),
body.home-page .content .img-and-intr .intr > div:nth-of-type(9) {
  display: none !important;
}
body.home-page .content .img-and-intr .intr > div:nth-of-type(2) {
  display: block !important;
  color: var(--fg-primary) !important;
  font-size: clamp(25px, 2.6vw, 34px) !important;
  font-weight: 850 !important;
  line-height: 1.22 !important;
  margin-bottom: 4px !important;
}
body.home-page .content .img-and-intr .intr > div:nth-of-type(4),
body.home-page .content .img-and-intr .intr > div:nth-of-type(5) {
  color: var(--fg-muted) !important;
  font-size: 15.5px !important;
}
body.home-page .content .img-and-intr .intr > div:nth-of-type(6),
body.home-page .content .img-and-intr .intr > div:nth-of-type(7) {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: var(--fg-primary) !important;
  background: rgba(69,160,223,.10) !important;
  border: 1px solid rgba(69,160,223,.18) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
body.home-page .intr-mb { display: none !important; }
body.home-page .news {
  width: min(980px, calc(100% - 56px)) !important;
  max-width: 980px !important;
  margin-top: 0 !important;
  padding: 22px 24px !important;
}
body.home-page .news::before {
  content: "Latest News";
  display: block;
  margin: 0 0 14px 0;
  color: var(--fg-primary);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.2;
}
body.home-page .news .new {
  display: grid !important;
  gap: 10px !important;
}
body.home-page .news li {
  margin: 0 !important;
  background: var(--fg-surface-soft) !important;
  border-left: 4px solid rgba(69,160,223,.55) !important;
  border-radius: 0 12px 12px 0 !important;
}
body.home-page .frend-link {
  width: min(980px, calc(100% - 56px)) !important;
  max-width: 980px !important;
  margin-top: 22px !important;
}

/* ===================== Services page ===================== */
body.services-page .content {
  width: var(--fg-content) !important;
  max-width: var(--fg-content) !important;
}
body.services-page .page-hero {
  margin: 30px auto 22px !important;
  padding: 30px 34px !important;
  border-radius: var(--fg-radius-xl) !important;
  background:
    linear-gradient(135deg, rgba(13,61,112,.98), rgba(21,93,165,.88)),
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.22), transparent 20rem) !important;
  box-shadow: var(--fg-shadow) !important;
  color: #fff !important;
}
body.services-page .page-hero h1 {
  margin: 0 0 8px !important;
  font-size: clamp(30px,3vw,42px) !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
}
body.services-page .page-hero p {
  margin: 0 !important;
  max-width: 760px !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}
body.services-page .gen {
  width: var(--fg-content) !important;
  max-width: var(--fg-content) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
  margin-top: 0 !important;
}
body.services-page .gen > .reviewer,
body.services-page .gen > .committee,
body.services-page .gen > .member {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 24px !important;
  background: var(--fg-surface) !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: var(--fg-radius-xl) !important;
  box-shadow: var(--fg-shadow-soft) !important;
  text-align: left !important;
}
body.services-page .gen > .reviewer { grid-row: span 2 !important; }
body.services-page .gen > .member { align-self: start !important; }
body.services-page .gen > div > .title {
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--fg-line) !important;
  color: var(--fg-primary) !important;
  font-size: 24px !important;
  text-align: left !important;
  font-weight: 850 !important;
}
body.services-page .gen > div > .title span {
  font-size: 24px !important;
}
body.services-page .gen .columns {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.services-page .committee .columns,
body.services-page .member .columns {
  grid-template-columns: 1fr !important;
}
body.services-page .gen .column {
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}
body.services-page .gen ul {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 10px !important;
}
body.services-page .gen li {
  list-style: none !important;
  margin: 0 !important;
  padding: 10px 12px 10px 14px !important;
  border-left: 4px solid rgba(69,160,223,.55) !important;
  border-radius: 0 12px 12px 0 !important;
  background: var(--fg-surface-soft) !important;
  color: var(--fg-text) !important;
  font-size: 15.5px !important;
  line-height: 1.46 !important;
  text-align: left !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
}
body.services-page .bottom {
  margin-top: 34px !important;
}

/* Other page compactness and blank-space reduction */
body.recruiting-page .top,
body.teaching-page .top { margin-bottom: 18px !important; }
body.recruiting-page .swipers { margin-top: 0 !important; margin-bottom: 20px !important; }
body.teaching-page .swipers { margin-top: 22px !important; margin-bottom: 24px !important; }
body.teaching-page .container .info { margin-bottom: 18px !important; }
body.teaching-page .container .info > div > span:first-child,
body.teaching-page .container .info > div > span:nth-child(2) {
  display: inline-block;
  margin-bottom: 12px !important;
  color: var(--fg-primary) !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
}
body.biography-page .info .c,
body.biography-page .info .e,
body.honor-and-awards-page .info,
body.publications-page .info,
body.projects-page .info,
body.recruiting-page .info {
  line-height: 1.64 !important;
}
body.research-area-page .container,
body.research-group-page .container,
body.research-life-page .container {
  margin-top: 24px !important;
}

@media (max-width: 1023px) {
  :root { --fg-content: min(760px, calc(100% - 32px)); }
  body { line-height: 1.5 !important; }
  .top {
    width: var(--fg-content) !important;
    margin: 24px auto 16px !important;
    font-size: clamp(26px, 7vw, 34px) !important;
  }
  .content,
  .container,
  .gen,
  .research-area,
  .research-life-container,
  .info,
  .content .news,
  .frend-link {
    width: var(--fg-content) !important;
    max-width: var(--fg-content) !important;
  }
  body.home-page .content > .top { width: var(--fg-content) !important; margin: 16px auto !important; }
  body.home-page .top .title {
    height: 96px !important;
    min-height: 96px !important;
    padding: 0 18px !important;
    justify-content: flex-start !important;
  }
  body.home-page .top .title .word {
    width: auto !important;
    max-width: 86% !important;
    font-size: clamp(24px, 7vw, 32px) !important;
    text-align: left !important;
  }
  body.home-page .swipers,
  body.recruiting-page .swipers,
  body.teaching-page .swipers {
    width: var(--fg-content) !important;
    height: 104px !important;
    margin-bottom: 18px !important;
  }
  body.home-page .swipers .swiper img,
  body.recruiting-page .swipers .swiper img,
  body.teaching-page .swipers .swiper img {
    width: 156px !important;
    height: 104px !important;
  }
  body.home-page .content .img-and-intr {
    width: var(--fg-content) !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 16px !important;
    margin: 16px auto 18px !important;
  }
  body.home-page .content .img-and-intr .my-img {
    width: 118px !important;
    height: 150px !important;
    border-radius: 14px !important;
  }
  body.home-page .content .img-and-intr .intr {
    display: flex !important;
    gap: 5px !important;
  }
  body.home-page .content .img-and-intr .intr > div:nth-of-type(2) {
    font-size: clamp(18px, 4.8vw, 24px) !important;
    line-height: 1.22 !important;
  }
  body.home-page .content .img-and-intr .intr > div:nth-of-type(4),
  body.home-page .content .img-and-intr .intr > div:nth-of-type(5) {
    font-size: 12.8px !important;
  }
  body.home-page .content .img-and-intr .intr > div:nth-of-type(6),
  body.home-page .content .img-and-intr .intr > div:nth-of-type(7) {
    font-size: 12.5px !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
  }
  body.home-page .news,
  body.home-page .frend-link {
    width: var(--fg-content) !important;
    padding: 16px !important;
  }
  body.home-page .news::before { font-size: 22px; }

  body.services-page .page-hero {
    margin: 22px auto 18px !important;
    padding: 24px 20px !important;
  }
  body.services-page .page-hero h1 { font-size: clamp(27px,7vw,34px) !important; }
  body.services-page .gen {
    width: var(--fg-content) !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  body.services-page .gen > .reviewer,
  body.services-page .gen > .committee,
  body.services-page .gen > .member {
    padding: 18px !important;
  }
  body.services-page .gen > .reviewer { grid-row: auto !important; }
  body.services-page .gen .columns {
    grid-template-columns: 1fr !important;
  }
  body.services-page .gen li {
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    padding: 9px 11px !important;
  }
}

@media (max-width: 560px) {
  :root { --fg-content: min(100% - 24px, 760px); }
  body.home-page .content .img-and-intr {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  body.home-page .content .img-and-intr .my-img {
    justify-self: center !important;
    width: 132px !important;
    height: 168px !important;
  }
  body.home-page .content .img-and-intr .intr {
    align-items: center !important;
  }
  body.home-page .content .img-and-intr .intr > div {
    text-align: center !important;
  }
  body.home-page .content .img-and-intr .intr > div:nth-of-type(6),
  body.home-page .content .img-and-intr .intr > div:nth-of-type(7) {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* v2.1: avoid double cards on biography/recruiting and tighten teaching cards */
body.biography-page .content > .info,
body.recruiting-page .content > .info {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.biography-page .info .e,
body.biography-page .info .c,
body.recruiting-page .info .e,
body.recruiting-page .info .c {
  width: 100% !important;
  margin: 12px 0 !important;
}
body.teaching-page .container {
  width: var(--fg-content) !important;
  max-width: var(--fg-content) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
  justify-content: initial !important;
}
body.teaching-page .container .info {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px !important;
  background: var(--fg-surface) !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: var(--fg-radius-xl) !important;
  box-shadow: var(--fg-shadow-soft) !important;
}
body.teaching-page .container .info img {
  float: none !important;
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  margin: 10px 0 12px !important;
  border-radius: 14px !important;
}
body.teaching-page .container .info ul {
  margin: 8px 0 0 !important;
  padding: 0 !important;
}
body.teaching-page .container .info li {
  list-style: none !important;
  margin: 0 0 8px !important;
  padding: 8px 10px !important;
  border-left: 3px solid rgba(69,160,223,.50) !important;
  border-radius: 0 10px 10px 0 !important;
  background: var(--fg-surface-soft) !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
}
body.honor-and-awards-page .content > .info {
  width: min(920px, calc(100% - 56px)) !important;
  max-width: 920px !important;
}
body.projects-page .project,
body.research-area-page .project,
body.research-group-page .container,
body.research-life-page .research-life-container {
  margin-bottom: 26px !important;
}

@media (max-width: 1023px) {
  body.teaching-page .container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  body.honor-and-awards-page .content > .info {
    width: var(--fg-content) !important;
    max-width: var(--fg-content) !important;
  }
}

/* v2.2: use the outer .info as the card; prevent hidden-language inner divs from becoming blank cards */
.info .e,
.info .c {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
body.biography-page .content > .info,
body.recruiting-page .content > .info {
  background: var(--fg-surface) !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: var(--fg-radius-xl) !important;
  box-shadow: var(--fg-shadow-soft) !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
}
body.biography-page .info .c,
body.biography-page .info .e,
body.recruiting-page .info .c,
body.recruiting-page .info .e {
  line-height: 1.68 !important;
}