/* /scholars/ — page styles.  Scope: .esgri-sch  |  !important throughout (Phlox).

   This is a FAITHFUL COPY of the existing page, not a redesign. The affiliate
   carousels keep the PowerPack markup (.pp-tm-*), the same Swiper 8.4.5 engine
   and the same settings; the rules below are the plugin's own styles plus the
   page's generated post-7183.css, frozen here so the page no longer depends on
   PowerPack or Elementor being present.

   Specs lifted verbatim:
     .pp-tm                 text-align:center; no border; padding 0
     .pp-tm-image           inline-block, position relative, margin-bottom 9px
     .pp-tm-content-normal  background var(--e-global-color-accent) = #FFFFFF
     .pp-tm-name            1em / 600 / uppercase / line-height 1.25em   (kit 87eaf03)
     .pp-tm-position        15px / 400 / var(--e-global-color-78b943c) = #7F7F7F
     arrows                 17px, background #CFCFCF, colour #FFFFFF, padding 0
     bullets                0×0 with 7px side margins — i.e. deliberately invisible
     carousel               5 per view (3 tablet / 2 mobile), 8px gap (10 / 10),
                            loop, autoplay 10s, 600ms slide

   Only the Endowed Professors block at the top is new; it replaces the former
   Leadership block. */

.esgri-sch {
  --sch-ink: #14261B;
  --sch-green: #0A5E2A;
  --sch-muted: #5C6B60;
  --sch-rule: #D7E0D9;
  --sch-wash: #F3F6F3;
  --sch-display: "Poppins", "Noto Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sch-body: "Noto Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* measured on the live page: section container 1200px with 10px side padding
     → 1180px of content. Wider than the 1140px other migrated pages use, so the
     shared page shell is widened for this page only (rule below). */
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 40px 0 88px 0 !important;
  font-family: var(--sch-body) !important;
  /* The theme's body line-height. Stated explicitly rather than inherited:
     .pp-tm-image is display:inline-block, so it sits on a text baseline and the
     leftover half-leading becomes visible space under every portrait. At the
     live value (1.5) that space is ~9px; at the browser default (normal) it is
     ~3px, which made every card 6px shorter than the original. */
  line-height: 1.5 !important;
  color: var(--sch-ink) !important;
  box-sizing: border-box !important;
}

.esgri-sch *,
.esgri-sch *::before,
.esgri-sch *::after { box-sizing: border-box !important; }

/* This page is 1180px wide on the live site, not the 1140px the shared shell
   uses. Keyed off an explicit class on the shell rather than :has(.esgri-sch) —
   .esgri-sch only exists after the fragment is fetched, so a :has() rule would
   let the server-rendered banner paint at 1140px and then jump. */
.esgri-pageshell--wide { max-width: 1180px !important; }
.esgri-pageshell--wide .esgri-titlebar__inner { max-width: 1180px !important; }

/* ---------- section headings — copied from post-7183.css ----------
   "Affiliated Researchers" (h2) and the row labels (h3) are BOTH #7F7F7F grey on
   the live page, not near-black; the rules are 2px #CCCCCC, not 1px. */

.esgri-sch__section { margin-bottom: 0 !important; }

.esgri-sch__title {
  font-family: var(--sch-display) !important;
  font-size: 2.5em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  color: #7F7F7F !important;
  margin: 0 0 0 0 !important;
  padding-bottom: 10px !important;
}

/* The live page draws exactly three 2px #CCCCCC rules, and they belong to
   containers, not headings:
     baaef26  wraps the "Affiliated Researchers" heading  → rule under the heading
     17a4377  wraps the whole HKU block                   → rule under HKU
     295aabc  wraps the whole Global block                → rule under Global
   There is NO rule under the Leadership heading, so none under its replacement
   either. Hence .esgri-sch__band is used once, and each __split carries its own. */
.esgri-sch__band {
  width: 100% !important;
  border-bottom: 2px solid #CCCCCC !important;
  padding-bottom: 6px !important;
  margin-bottom: 28px !important;
}

.esgri-sch__band--plain {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 26px !important;
}

/* ---------- affiliate row: 35% label column + 2px vertical rule ---------- */

.esgri-sch__split {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 20px !important;
  border-bottom: 2px solid #CCCCCC !important;
  padding-bottom: 30px !important;
  margin-bottom: 34px !important;
}

.esgri-sch__split:last-child { margin-bottom: 0 !important; }

.esgri-sch__label {
  /* measured: 303.844px incl. 10px side padding and the 2px rule */
  flex: 0 0 304px !important;
  width: 304px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-right: 2px solid #CCCCCC !important;
  padding: 0 10px !important;
}

.esgri-sch__subtitle {
  font-family: var(--sch-display) !important;
  font-size: 2em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #7F7F7F !important;
  margin: 0 0 10px 0 !important;
}

/* "View More" is plain bold text on the live page and leads nowhere — a real
   link here, keeping its colour (--e-global-color-secondary). */
.esgri-sch__more {
  display: inline-block !important;
  font-size: 1em !important;
  font-weight: 700 !important;
  color: rgb(56, 90, 72) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  align-self: flex-start !important;
  transition: border-color .18s ease !important;
}

.esgri-sch__more:hover { border-bottom-color: rgb(56, 90, 72) !important; }

.esgri-sch__carousel {
  /* 1180 − 304 − 20px gap = 856.156px, matching the live measurement */
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 10px !important;
}

/* ---------- Endowed Professors (replaces the Leadership block) ---------- */

/* Spacing copied from the Leadership block it replaces: the cards butt up
   against each other (no grid gap) and each carries `padding: 0 5px`, so the
   portraits sit 10px apart — not the 24px a fresh grid would default to. */
.esgri-sch__ep {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
}

.esgri-sch__prof {
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  color: inherit !important;
  padding: 0 5px !important;   /* the original card padding */
  margin: 5px 0 !important;
}

.esgri-sch__portrait {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: var(--sch-wash) !important;
  margin-bottom: 12px !important;
}

.esgri-sch__portrait img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s cubic-bezier(.2,.7,.3,1) !important;
}

a.esgri-sch__prof:hover .esgri-sch__portrait img { transform: scale(1.045) !important; }

a.esgri-sch__prof:focus-visible {
  outline: 2px solid var(--sch-green) !important;
  outline-offset: 5px !important;
}

.esgri-sch__name {
  font-family: var(--sch-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--sch-ink) !important;
  margin: 0 0 7px 0 !important;
  transition: color .18s ease !important;
}

a.esgri-sch__prof:hover .esgri-sch__name { color: var(--sch-green) !important; }

.esgri-sch__chair {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--sch-green) !important;
  margin: 0 0 5px 0 !important;
}

.esgri-sch__role {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--sch-muted) !important;
  margin: 0 !important;
}

/* ══════════ carousels — frozen PowerPack + post-7183.css ══════════ */

.esgri-sch .pp-tm-wrapper { position: relative !important; }
.esgri-sch .pp-tm-carousel { position: relative !important; }

.esgri-sch .pp-tm {
  text-align: center !important;
  border-style: none !important;
  padding: 0 !important;
}

.esgri-sch .pp-tm-image {
  display: inline-block !important;
  position: relative !important;
  margin-bottom: 9px !important;
  width: 100% !important;
}

/* the Global carousel had this rule and the HKU one did not — the asymmetry that
   made the FOUC obvious on one row only. Applied to both here. */
.esgri-sch .pp-tm-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.esgri-sch .pp-tm-content-normal {
  position: relative !important;
  z-index: 1 !important;
  background-color: #FFFFFF !important;
}

.esgri-sch .pp-tm-name {
  font-size: 1em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  line-height: 1.25em !important;
  color: rgb(56, 90, 72) !important;
  /* measured live: Poppins, not the body face — h4 inherits the kit heading font */
  font-family: var(--sch-display) !important;
  margin-top: 3.2px !important;
  margin-bottom: 0 !important;
}

.esgri-sch .pp-tm-position {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #7F7F7F !important;
  line-height: 1.5 !important;   /* measured 22.5px at 15px */
  font-family: "Noto Sans", sans-serif !important;
  margin-bottom: 0 !important;
}

/* institution line — present on the Global row only.
   Colour is the kit body colour #262626, not the page ink. */
.esgri-sch .pp-tm-description {
  font-size: 1em !important;
  font-weight: 400 !important;
  line-height: 1.25em !important;
  color: #262626 !important;
  font-family: "Noto Sans", sans-serif !important;
  margin-bottom: 0 !important;
}

/* ---- swiper ----
   Swiper's OWN stylesheet (swiper-bundle 8.4.5, declared on the page's
   data-fetch-css) provides .swiper / .swiper-wrapper / .swiper-slide. Do not
   restate them here.

   🚨 Never put !important on a property Swiper sets at runtime. Swiper writes an
   inline width on every slide after it initialises, and an !important rule beats
   an inline style — an earlier draft carried `.swiper-slide{width:100%!important}`
   copied from Swiper's base CSS, which forced every slide to full width and
   rendered one giant portrait per row. Same class of mistake as putting the
   hidden state of an animation in a base rule: don't own what the runtime owns. */

/* Correct layout BEFORE Swiper initialises — the root-cause fix from
   AVATAR-FOUC-FIX.md. Once .swiper-initialized lands these stop matching, so
   Swiper's inline sizing takes over cleanly. */
.esgri-sch .swiper:not(.swiper-initialized) { overflow: hidden !important; }
.esgri-sch .swiper:not(.swiper-initialized) .swiper-wrapper { display: flex !important; }
.esgri-sch .swiper:not(.swiper-initialized) .swiper-slide {
  width: 20% !important;
  flex: 0 0 20% !important;
  padding-right: 8px !important;
}

.esgri-sch .swiper-container-wrap { position: relative !important; }

/* arrows — .pp-slider-arrow (PowerPack) + post-7183.css overrides + Elementor
   positioning, copied verbatim:
     .pp-slider-arrow            circle, inline-flex centred, 1.8182em square,
                                 top 50% / translateY(-50%), transition .25s
     post-7183.css               font-size 17px, background #CFCFCF, colour #FFF
     Elementor frontend.min.css  prev left:10px, next right:10px, disabled .3
   The icon is Font Awesome (fas fa-angle-left/right), which this site loads on
   every page — verified on /global-affiliates/, which has no PowerPack widget —
   so the same markup renders the same glyph. */

.esgri-sch .pp-slider-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  cursor: pointer !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 17px !important;
  line-height: 22px !important;
  width: 1.8182em !important;
  height: 1.8182em !important;
  padding: 0 !important;
  background-color: #CFCFCF !important;
  color: #FFFFFF !important;
  transition: all .25s linear 0s !important;
  outline: 0 !important;
}

.esgri-sch .pp-slider-arrow i { line-height: 1 !important; }
.esgri-sch .elementor-swiper-button-prev { left: 10px !important; }
.esgri-sch .elementor-swiper-button-next { right: 10px !important; }
.esgri-sch .pp-slider-arrow.swiper-button-disabled { opacity: .3 !important; }

/* bullets were configured 0×0 — present in the DOM, invisible on screen */
.esgri-sch .swiper-pagination-bullets { margin: 0 !important; text-align: center !important; }
.esgri-sch .swiper-pagination-bullet {
  display: inline-block !important;
  height: 0 !important;
  width: 0 !important;
  margin-left: 7px !important;
  margin-right: 7px !important;
}

@media (max-width: 1024px) {
  .esgri-sch__ep { grid-template-columns: repeat(2, 1fr) !important; }
  .esgri-sch__title { font-size: 2.25em !important; }
  .esgri-sch__subtitle { font-size: 1.75em !important; }
  .esgri-sch .swiper:not(.swiper-initialized) .swiper-slide {
    width: 33.333% !important; flex-basis: 33.333% !important; padding-right: 10px !important;
  }
}

@media (max-width: 767px) {
  .esgri-sch { padding: 28px 0 64px 0 !important; }
  .esgri-sch__ep { grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; }
  .esgri-sch__title { font-size: 1.75em !important; }
  .esgri-sch__subtitle { font-size: 1.5em !important; }
  .esgri-sch .pp-tm-position { font-size: 13px !important; }
  .esgri-sch .pp-tm-description { font-size: 0.8em !important; }

  /* the 35% label column stops being a column and sits above its row */
  .esgri-sch__split { flex-direction: column !important; }
  .esgri-sch__label {
    width: 100% !important; flex: none !important;
    border-right: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 14px !important;
  }
  .esgri-sch__carousel { width: 100% !important; padding-left: 0 !important; }

  .esgri-sch .swiper:not(.swiper-initialized) .swiper-slide {
    width: 50% !important; flex-basis: 50% !important; padding-right: 10px !important;
  }
}

/* ── small button beside a section heading ──
   Used for the Awards link in the Endowed Professors header. /awards/ lists the
   honours the institute's scholars have received, and until now it was in no
   menu at all — this is its only route in from the site. */

.esgri-sch__band--row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.esgri-sch__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  font-family: var(--sch-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--sch-green) !important;
  background: transparent !important;
  border: 1px solid var(--sch-green) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  text-decoration: none !important;
  transition: background-color .18s ease, color .18s ease !important;
}

.esgri-sch__btn::after { content: "\2192" !important; transition: transform .2s ease !important; }
.esgri-sch__btn:hover { background: var(--sch-green) !important; color: #fff !important; }
.esgri-sch__btn:hover::after { transform: translateX(3px) !important; }
.esgri-sch__btn:focus-visible {
  outline: 2px solid var(--sch-green) !important;
  outline-offset: 3px !important;
}

@media (max-width: 767px) {
  .esgri-sch__btn { font-size: 13px !important; padding: 8px 15px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-08-21 — onto the site's black/gold design language.

   Yuna's mockup, `Scholars page_UI.jpg`, brought to Chase 2026-08-21:
   "根据这两个mockup去更新". Everything above this block is the faithful copy of
   the Elementor original and its green; this block is the migration, kept
   separate so the two can be told apart and the green can be read back if a
   comparison is ever needed.

   What the mockup changes, in the order it reads:

     · the page band goes black and the title uppercase — that lives in the PAGE
       CONTENT, not here, because .esgri-titlebar is shared with /staff/ and two
       legacy pages and must not be restyled from under them
     · Endowed Professors moves its label BESIDE the portraits
     · a professor's name and chair sit ON the portrait, white, over a scrim
     · Affiliated Researchers keeps its rule but goes black
     · View More becomes the same black plate as Awards
     · the carousel arrows become small dark discs OUTSIDE the row, not grey
       ones sitting on top of the first and last portrait
   ═══════════════════════════════════════════════════════════════════════════ */

.esgri-sch { --sch-ink: #14171F; --sch-ink-soft: #5B6474; }

/* ── Endowed Professors: label beside the portraits ───────────────────────── */
.esgri-sch__split--ep { align-items: start !important; }
.esgri-sch__split--ep .esgri-sch__label { padding-top: 4px !important; }
.esgri-sch__split--ep .esgri-sch__ep { flex: 1 1 auto !important; min-width: 0 !important; }

.esgri-sch__title {
  color: var(--sch-ink) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
}

/* ── The portrait carries its own caption ─────────────────────────────────────
   🚨 THE MARKUP DID NOT MOVE. The name and the chair are still siblings of the
   portrait, as they were when they sat underneath it; they are lifted onto the
   image here. Reordering the DOM for this would have cost the link's reading
   order — the whole card is one <a>, and a screen reader should still hear
   "portrait, name, chair" in that order. */
.esgri-sch__prof {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  box-shadow: 0 2px 14px rgba(20, 23, 31, .16) !important;
}
.esgri-sch__portrait { display: block !important; margin: 0 !important; }
.esgri-sch__prof::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 58% !important;
  background: linear-gradient(to top, rgba(10, 12, 18, .86) 0%,
                                      rgba(10, 12, 18, .55) 42%,
                                      rgba(10, 12, 18, 0) 100%) !important;
  pointer-events: none !important;
}
.esgri-sch__name,
.esgri-sch__role {
  position: relative !important;
  z-index: 2 !important;
  color: #fff !important;
  text-align: right !important;
  margin: 0 !important;
  padding: 0 14px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45) !important;
}
.esgri-sch__name {
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.esgri-sch__role {
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 12px !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  color: rgba(255, 255, 255, .88) !important;
}
/* ⚠️ The name is anchored ABOVE the chair rather than both being stacked from
   the bottom, because the chair runs to three lines for Philippe Aghion and one
   for Wei Jiang. Anchoring the name to a fixed offset would put it at a
   different height on every card; anchoring it to the chair's top keeps the
   pair together and lets the block grow upward. */
.esgri-sch__name { bottom: calc(12px + 1.35em * 1) !important; }
.esgri-sch__prof:hover .esgri-sch__name { color: #fff !important; }
a.esgri-sch__prof:hover .esgri-sch__portrait img { transform: scale(1.06) !important; }

/* ── Affiliated Researchers ──────────────────────────────────────────────── */
.esgri-sch__band { border-bottom: 1px solid rgba(20, 23, 31, .18) !important; }
.esgri-sch__subtitle {
  color: var(--sch-ink) !important;
  text-transform: uppercase !important;
}
.esgri-sch .pp-tm-name { color: var(--sch-ink) !important; }
.esgri-sch .pp-tm-position { color: var(--sch-ink-soft) !important; }

/* ── One button, two uses ────────────────────────────────────────────────── */
.esgri-sch__btn {
  background: var(--sch-ink) !important;
  border-color: var(--sch-ink) !important;
  color: #fff !important;
}
.esgri-sch__btn:hover {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}
.esgri-sch__btn--more { margin-top: 14px !important; }

/* ── Arrows: dark discs, clear of the portraits ──────────────────────────── */
.esgri-sch .pp-slider-arrow {
  width: 30px !important; height: 30px !important;
  background: var(--sch-ink) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.esgri-sch .pp-slider-arrow svg,
.esgri-sch .pp-slider-arrow i { color: #fff !important; fill: #fff !important; }
.esgri-sch .elementor-swiper-button-prev { left: -40px !important; }
.esgri-sch .elementor-swiper-button-next { right: -40px !important; }
@media (max-width: 1200px) {
  .esgri-sch .elementor-swiper-button-prev { left: -2px !important; }
  .esgri-sch .elementor-swiper-button-next { right: -2px !important; }
}

@media (max-width: 900px) {
  .esgri-sch__split--ep { flex-direction: column !important; }
  .esgri-sch__split--ep .esgri-sch__label { padding-top: 0 !important; }
}

/* ── The page band ────────────────────────────────────────────────────────────
   🚨 ITS MARKUP IS IN THE PAGE CONTENT (21481) AND IT IS NOT .esgri-titlebar.
   That class is shared with /staff/ and the two -legacy pages, so turning it
   black here would have turned it black there. /scholars/ carries .sch-band
   instead, the same shape the other rebuilt archives use. */
.sch-band {
  background: #14171F !important;
  color: #fff !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
}
.sch-band__inner {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 66px 48px 62px !important;
}
.sch-band__title {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: clamp(30px, 2.7vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
}
@media (max-width: 900px) { .sch-band__inner { padding: 40px 20px 36px !important; } }

/* ── The caption is one block, not two anchored strings ──────────────────────
   First pass anchored the name at `bottom: calc(12px + 1.35em)` and the chair at
   the bottom. That only works while the chair is ONE line: Roni Michaely's runs
   to two and the name landed on top of it. They are wrapped in .esgri-sch__cap
   now — one absolutely positioned box, the pair stacked inside it in normal
   flow, growing upward from the bottom edge however long the chair is.
   The wrapper sits between the portrait and the two strings, so the link still
   reads portrait → name → chair. */
.esgri-sch__cap {
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 2 !important;
  padding: 0 14px 13px !important;
  display: block !important;
}
.esgri-sch__name,
.esgri-sch__role { position: static !important; padding: 0 !important; }
.esgri-sch__name { bottom: auto !important; margin: 0 0 2px !important; }
.esgri-sch__role { bottom: auto !important; }

/* Four equal portraits. Without this the card height follows each file's own
   proportions and the row reads as four different objects — Uta Schönberg's
   master is a different crop from the other three. */
.esgri-sch__portrait { aspect-ratio: 3 / 4 !important; overflow: hidden !important; }
.esgri-sch__portrait img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center 18% !important;
}
/* the scrim has to clear the face on a 3:4 crop, not sit across the chin */
.esgri-sch__prof::after { height: 46% !important; }

/* No rule beside the professors — the mockup draws one under Affiliated
   Researchers and nowhere else. */
.esgri-sch__split--ep .esgri-sch__ep { border-left: 0 !important; padding-left: 0 !important; }
.esgri-sch__split--ep { border: 0 !important; }

/* The 2px rule belongs to .esgri-sch__label and is drawn for the two affiliate
   rows. The mockup has none beside the professors, so it is dropped there only
   — not from .esgri-sch__label itself, which the rows below still use. */
.esgri-sch__split--ep .esgri-sch__label { border-right: 0 !important; }

/* ⚠️ SQUARE. Chase, 2026-08-21: "你为什么要搞圆角".

   I did not add the radius — .esgri-sch__btn carried `border-radius: 999px`
   from the green pill it used to be, and the migration above changed its
   colours without checking its shape against the mockup, which draws a plain
   black rectangle. The lesson is the same one this file already learned twice:
   compare every property against the reference, not only the ones that caught
   your eye.

   The carousel arrows keep their 50% — the mockup draws those as discs. */
.esgri-sch__btn { border-radius: 0 !important; }

/* ⚠️ THE GREY RULES ARE NOT IN THE MOCKUP. Chase, 2026-08-21: "你完全是在自我
   发挥啊，好多该去掉线你都没管".

   He is right, and my earlier note here made it worse by claiming the affiliate
   rows still draw theirs — they do not. I removed the one rule I had noticed
   (beside the professors) and left the other three because I was comparing by
   eye instead of enumerating. What the page actually drew, listed out:

     .esgri-sch__band  bottom 1px   under AFFILIATED RESEARCHERS   ← IN THE MOCKUP
     .esgri-sch__label right  2px   beside HKU Affiliates          ← not in it
     .esgri-sch__label right  2px   beside Global Affiliates       ← not in it
     .esgri-sch__split bottom 2px   under HKU Affiliates           ← not in it
     .esgri-sch__split bottom 2px   under Global Affiliates        ← not in it

   One survives. The mockup draws a single rule on the whole page and it is the
   one under the section heading. */
.esgri-sch__label { border-right: 0 !important; }
.esgri-sch__split { border-bottom: 0 !important; }

/* The mockup sets a researcher's name in title case — "Philippe Aghion", not
   "PHILIPPE AGHION". The uppercase came from the Elementor kit this page was
   copied from (1em / 600 / uppercase) and was never asked for. The data already
   carries the casing it wants: "Prof. Yiming CAO". */
.esgri-sch .pp-tm-name { text-transform: none !important; }

/* ── One left edge for the whole page ────────────────────────────────────────
   Chase, 2026-08-21: "Endowed Professors最左边要和Scholars对齐".

   Three edges existed. Measured at 1920: SCHOLARS 308 (the band's own
   max-width 1400 + 48px padding), AFFILIATED RESEARCHERS 370 (the page shell),
   ENDOWED PROFESSORS 380 (the shell plus .esgri-sch__label's 10px side padding,
   which was measured off the Elementor original back when the label had a rule
   to sit against).

   All three answer to the shell now: the band mirrors .esgri-pageshell--wide
   instead of setting a width of its own, and the label's left padding goes.
   The 10px stays on the RIGHT, where it is the gap to the portraits. */
.sch-band__inner {
  max-width: 1180px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.esgri-sch__label { padding-left: 0 !important; }
@media (max-width: 1220px) {
  /* the shell picks up 16px of side padding here — the band has to as well or
     it hangs 16px to the left of everything under it */
  .sch-band__inner { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ⚠️ THE BAND'S BACKGROUND BLEEDS, ITS TEXT DOES NOT.

   Mirroring the shell's width was not enough. Below 1220 the shell is pushed in
   by 35px from the theme's own `aux-primary` gutter — a value no rule in this
   file knows about — so a band that escapes to 100vw and then re-centres itself
   lands 19px left of everything under it at 1100 and 35px left at 600.

   So the BOX stops escaping. .sch-band stays in the flow, inside
   .esgri-pageshell, and inherits the shell's exact geometry at every width for
   free; only a pseudo-element bleeds to 100vw to paint the black. No width to
   keep in step, no breakpoint to remember. */
.sch-band {
  width: auto !important;
  position: relative !important;
  left: auto !important;
  margin-left: 0 !important;
  background: transparent !important;
}
.sch-band::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  left: 50% !important;
  margin-left: -50vw !important;
  width: 100vw !important;
  background: #14171F !important;
  z-index: 0 !important;
}
.sch-band__inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 1220px) {
  .sch-band__inner { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ⚠️ THE PAGE IS GREY, NOT WHITE. Sampled straight out of the mockup:
   rgb(240,240,240) at four points across it, and the same value in the Case
   Competition mockup — it is the pair's shared ground, not a one-off.

   Both live pages were white, which is the kind of difference that survives any
   number of side-by-side looks: nothing about a white page reads as WRONG until
   you put a number on it.

   It bleeds through a pseudo-element rather than a 100vw box, for the reason
   .sch-band already documents — the theme's gutter means a re-centred 100vw box
   does not line up with the content it sits behind. */
.esgri-sch { position: relative !important; }
.esgri-sch::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  left: 50% !important;
  margin-left: -50vw !important;
  width: 100vw !important;
  background: #F0F0F0 !important;
  z-index: -1 !important;
}


/* 🚨 z-index: 0 ON THE WRAPPER, AND IT IS LOAD-BEARING. Without it the wrapper
   is not a stacking context, so `::before { z-index: -1 }` escapes it and paints
   behind the theme's own white .entry-content — the grey rendered as white
   everywhere except one edge. Establishing the context keeps the pseudo-element
   behind the wrapper's CONTENT and in front of the ancestor's background, which
   is the whole trick. */
.esgri-sch { z-index: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Closing the gap to Yuna's comp (Scholars page_UI.jpg) — 2026-08-24

   Chase: "现在的页面其实和bunny给的mockup差别有些大". The page was migrated in
   July as a faithful copy of the Elementor original, so what it still looks
   like is PowerPack, not the 2026 comp. Four things account for most of the
   difference; all four are measured off the comp rather than eyeballed.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 ── FOUR CARDS PER VIEW, not five (slides_per_view in scholars.html).
   The comp draws four across a 1107px carousel — 23.6%% of the frame each.
   Four across this page's 856px frame is 24.3%%, so the card lands on the
   comp's proportion without touching the page measure. */

/* 2 ── NO WHITE BOX UNDER THE PHOTO. This is the loudest difference: the
   caption carried `background-color: #FFFFFF` from the Premium Addons widget,
   and because the text is a different length on every card the boxes ended up
   different heights — measured 63px to 150px in the Global row alone. A row of
   ragged white rectangles reads as broken layout. In the comp the caption is
   simply type on the page grey, so the different lengths cost nothing. */
.esgri-sch .pp-tm-content-normal {
  background-color: transparent !important;
}

/* 3 ── ONE PHOTO SHAPE. The sources are not one ratio (0.94, 0.96 and 1.00 all
   appear), so the Global row's photos rendered 161, 167 and 171px tall side by
   side. The comp's are identical, so the box is fixed at the shape most of the
   library already is and the odd ones are cropped to it. 0.94 crops the SIDES
   of a wider source — a couple of per cent off each edge, no face touched. */
.esgri-sch .pp-tm-image {
  aspect-ratio: 940 / 1000 !important;
  overflow: hidden !important;
  /* the comp leaves 8.8%% of the card width between photo and name */
  margin-bottom: 6% !important;
}
.esgri-sch .pp-tm-image img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 22% !important;   /* headroom, not chins */
}

/* 4 ── THE ARROWS SIT ON THE PHOTO, not on the middle of photo-plus-caption.
   `top: 50%%` of .swiper-container-wrap put them at the photo's bottom edge,
   because the caption is nearly as tall as the picture. The photo's centre is
   a function of the CARD WIDTH — card = (frame - 3 gaps) / 4, height =
   card / 0.94 — so it can be written in CSS and stays right at every width
   instead of being a pixel guess per breakpoint. */
/* 🚨 THE PERCENTAGE GOES IN margin-top, NOT top. A percentage `top` resolves
   against the containing block's HEIGHT, so the first attempt quietly divided
   the wrap's 344px height instead of its 836px width and parked the arrows at
   43px — above the photo rather than on it, and wrong by a different amount at
   every window size, which is exactly the kind of error that looks like a
   tuning problem. A percentage MARGIN resolves against the WIDTH, which is the
   dimension the card is solved from. `top: 0` plus the existing
   translateY(-50%) then makes the margin the arrow's centre line. */
.esgri-sch .elementor-swiper-button-prev,
.esgri-sch .elementor-swiper-button-next {
  top: 0 !important;
  margin-top: calc((100% - 24px) / 4 / 0.94 / 2) !important;
}
@media (max-width: 1024px) {   /* three per view, 10px gaps */
  .esgri-sch .elementor-swiper-button-prev,
  .esgri-sch .elementor-swiper-button-next {
    margin-top: calc((100% - 20px) / 3 / 0.94 / 2) !important;
  }
}
@media (max-width: 767px) {    /* two per view, 10px gaps */
  .esgri-sch .elementor-swiper-button-prev,
  .esgri-sch .elementor-swiper-button-next {
    margin-top: calc((100% - 10px) / 2 / 0.94 / 2) !important;
  }
}

/* 4b ── THE LABEL SITS ON THE PHOTOS TOO, for the same reason the arrows do.
   Chase, 2026-08-25: "左边的这个文字我觉得对齐右边的图片就好". It was centred on
   the whole row, and the row is photo PLUS caption — measured at 1600, the
   title/button block's midline sat 74px below the photos' midline, low enough
   that the button hung under the bottom of the pictures. Yuna's comp
   (Scholars page_UI.jpg) puts it level with the photos.

   Same arithmetic as the arrows above, from the SPLIT's width this time:
   carousel = split - label(304) - gap(20) - carousel padding(20), card =
   (carousel - slide gaps) / per-view, photo = card / 0.94. So half the photo
   height is (100% - 368px) / 7.52 at four per view, (100% - 364px) / 5.64 at
   three. Verified against the live numbers at 1600/1280/1100 and 1024/900/800.

   🚨 PERCENTAGE MARGIN, NOT PERCENTAGE TOP — see the 🚨 on the arrows. A margin
   percentage resolves against the containing block's WIDTH, which is the
   dimension the card is solved from; a `top` percentage would resolve against
   the row's height and be wrong differently at every window size.

   🚨 NOT ON THE ENDOWED PROFESSORS ROW. Its names are painted ON the portraits
   rather than under them, so its row height IS its photo height and the label
   is already level — measured, label centre 576, photo centre 576. Applying
   this there would push it 100px off. Hence :not(--ep).

   align-self: flex-start is what lets the label be its own content's height, so
   translateY(-50%) has something meaningful to halve. Below 768 the split
   stacks and the label sits above the row, where none of this applies. */
.esgri-sch__split:not(.esgri-sch__split--ep) .esgri-sch__label {
  align-self: flex-start !important;
  justify-content: flex-start !important;
  margin-top: calc((100% - 368px) / 7.52) !important;
  transform: translateY(-50%) !important;
}
@media (max-width: 1024px) {   /* three per view, 10px gaps */
  .esgri-sch__split:not(.esgri-sch__split--ep) .esgri-sch__label {
    margin-top: calc((100% - 364px) / 5.64) !important;
  }
}
@media (max-width: 767px) {    /* stacked — the label is above the row */
  .esgri-sch__split:not(.esgri-sch__split--ep) .esgri-sch__label {
    align-self: auto !important;
    justify-content: center !important;
    margin-top: 0 !important;
    transform: none !important;
  }
}

/* 5 ── Type to the comp's proportions. The comp's name is 10%% of the card
   width and its institution line 6.5%%; at a 208px card that is 20px and 13.5px
   against the 16px and 15px inherited from PowerPack — the name was too small
   and the grey line too large, so the two read as one block instead of a
   heading with a caption under it. */
.esgri-sch .pp-tm-name {
  font-size: 19px !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
}
.esgri-sch .pp-tm-position,
.esgri-sch .pp-tm-description {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* ── Vertical rhythm, 2026-08-24 ────────────────────────────────────────────
   Chase, after seeing the four changes above land: "内部的空隙小了，多个部件
   之间的垂直距离大一些会比较好" — more air inside a card AND more between the
   blocks. Both were measurably tight against the comp, and the worst of them
   was invisible until the white box came off:

     name → grey line     0px    the two were touching, so the caption read as
                                 one paragraph rather than a name with a line
                                 under it. The comp leaves ~11px at this scale.
     photo → name        19px    comp 18px — right, but with the extra air
                                 below the name it needs to grow with it.
     EP photos → heading 35px    comp 122px
     rule → first row    28px    comp 80px
     HKU row → Global    84px    comp 144px

   The comp's figures are its own pixels x 0.765, this page's measure (1180)
   over the comp's (1543). They are a floor, not a target: the instruction was
   "bigger", so each lands at or above the scaled figure. */

/* inside the card */
.esgri-sch .pp-tm-image { margin-bottom: 11% !important; }   /* ~22px on a 203px card */
.esgri-sch .pp-tm-name  { margin-bottom: 10px !important; }

/* between the blocks.
   🚨 --ep comes AFTER the generic rule, not before it. Both selectors are one
   class, so at equal specificity the later one wins — written the other way up
   the Endowed Professors block silently took the generic 60px and sat 65px
   under its own photos instead of the 122 the comp asks for. */
.esgri-sch__band { margin-bottom: 76px !important; }
.esgri-sch__split { padding-bottom: 60px !important; margin-bottom: 84px !important; }
.esgri-sch__split--ep { padding-bottom: 118px !important; }
.esgri-sch__split:last-child { margin-bottom: 0 !important; }

/* ── The portrait shadow, to the comp's weight ────────────────────────────
   Sampled rather than judged: the 10px gap between two Endowed Professor
   portraits reads (223,223,224) here against the comp's (237,239,238) on a
   (240,240,240) page. Two 14px-blur shadows meeting in a 10px slot is what
   made the four portraits look like they sat in a dark tray — the thing that
   is most obviously "not the mockup" at a glance, and it is a shadow, not a
   container. A shorter blur under a longer offset keeps the shadow where the
   comp puts it (below each portrait) and out of the gaps beside it. */
.esgri-sch__prof {
  box-shadow: 0 10px 12px -7px rgba(20, 23, 31, .22) !important;
}

/* ── Endowed Professor portrait shape ────────────────────────────────────
   3/4 (0.750) against the comp's 270x400 (0.675). The WIDTH already agrees —
   17.3%% of the measure here, 17.5%% there — so only the height was short, and
   at 3/4 the four portraits read as squarer and smaller than the comp's. */
.esgri-sch__portrait { aspect-ratio: 27 / 40 !important; }

/* ── Hover gold, and the button only as wide as its words ─────────────────
   Chase, 2026-08-24: "EP上面，鼠标附上去，变成金色，而不是绿色，然后view more
   的宽度变小，现在延申太多了".

   The green is #0A5E2A (--sch-green), the institute's old accent; every page
   rebuilt on the 2026 language uses the gold #B89642 instead (--vx-gold in
   voices.css, --ins-gold in insights.css), so this was the last page still
   answering a hover in the previous palette.

   🚨 The selector needs the `a`. `a.esgri-sch__prof:hover .esgri-sch__name`
   already sets the green and its type selector outranks a plain
   `.esgri-sch__prof:hover .esgri-sch__name` — which is why an earlier rule
   further down this file sets #fff and never won. Matching the specificity is
   what makes this stick; raising it further would only start the same race
   again.

   The buttons rendered 294px wide — the full label column — because
   .esgri-sch__label is a flex column and a flex column stretches its children.
   `display: inline-flex` cannot stop that: the stretch is the PARENT's doing,
   so the fix belongs on the child's align-self, not on its display or width. */
a.esgri-sch__prof:hover .esgri-sch__name { color: #B89642 !important; }

.esgri-sch__btn { align-self: flex-start !important; }

/* ── The painted box must BE the photo ────────────────────────────────────
   Chase, 2026-08-24: "这层阴影不对啊，不是让你外面围一圈，mockup请你参考".

   He is describing the bottom of the row, and the cause is not the shadow: the
   caption gradient lives on .esgri-sch__prof with `left: 0; right: 0`, and that
   element is 5px wider than the photo on each side (`padding: 0 5px`, the
   original card padding). So the dark ran 5px past each photo, and since both
   neighbours did it the 10px gap between them was fully dark — the four
   portraits' bottoms joined into one continuous ribbon across the row, which is
   the "围一圈" he can see and the comp does not have. Sampled in the gap:
   (100,101,105) fading to (43,45,50), where the page is (240,240,240).

   Insetting the gradient by 5px would fix the picture and leave the cause: the
   box-shadow, the focus outline and `overflow: hidden` are all still drawn on a
   box that is not the photo. So the padding moves to the grid instead. Same
   10px between portraits, but now .esgri-sch__prof IS the photo, and everything
   painted on it lands exactly where the comp puts it. */
.esgri-sch__ep { gap: 0 10px !important; }
.esgri-sch__prof { padding: 0 !important; }

/* ── The label sits on the portraits' midline ─────────────────────────────
   Chase: "ep的字样在垂直上放在居中位置". It was top-aligned, which left the
   Awards button stranded with a column of empty grey under it — the space he
   boxed. The two affiliate rows already centre their labels; this one was the
   odd column out. */
.esgri-sch__split--ep { align-items: center !important; }
.esgri-sch__split--ep .esgri-sch__label { padding-top: 0 !important; }

/* ── Air under the black band ─────────────────────────────────────────────
   Chase, 2026-08-24: "这个部分的空隙大一些". The band bottom sat 45px above the
   first portrait; the comp leaves 170px, which is 130 at this page's scale. The
   40px this element started with was the generic page padding, not a decision
   about this band — nothing had ever measured the two against each other. */
.esgri-sch { padding-top: 125px !important; }

/* ── The affiliate cards link to their profiles ───────────────────────────
   Chase, 2026-08-24: "下面的学者们上面得加上跳转". They had never been
   clickable — the migration copied the PowerPack markup, which carries no
   anchor, while the sibling pages (/global-affiliates/, /affiliated_researchers/)
   have linked their cards all along.

   The URLs are not typed here: each card's <h4> is looked up in the same
   source-of-truth JSON that generates those pages, so this row cannot drift
   from them. 20 of the 21 resolved.

   ONE ANCHOR PER CARD, wrapping photo and caption together, which is the
   decision /teaching-affiliates/ landed on: linking the photo alone leaves the
   name — the most obviously clickable thing on the card — inert, and one anchor
   keeps a card to a single tab stop. Same shape as the Endowed Professors above.

   A card with no usable URL keeps NO anchor rather than an href="#": the
   affordance follows the link, the way it now does on the 2026 Forum agenda. */
.esgri-sch .pp-tm-link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}
.esgri-sch .pp-tm-link:hover .pp-tm-name { color: #B89642 !important; }
.esgri-sch .pp-tm-link:focus-visible {
  outline: 2px solid #B89642 !important;
  outline-offset: 3px !important;
}
/* the photo answers the hover too, at the Endowed Professors' weight */
.esgri-sch .pp-tm-link .pp-tm-image { position: relative !important; }
.esgri-sch .pp-tm-link img { transition: transform .5s cubic-bezier(.2,.7,.3,1) !important; }
.esgri-sch .pp-tm-link:hover img { transform: scale(1.045) !important; }