/* HKU JC ESGRI — Global Affiliates grid (replaces Premium Addons Person widget) */

/* ==========================================================================
   Black title band — /global-affiliates/ and /affiliated_researchers/
   ==========================================================================
   Chase, 2026-08-24: "这两个改成黑色的标题，global那边，标题只保留 Global
   Affiliates 就行了，scholars 的那个去掉".

   Replaces the green `.esgri-titlebar` these two pages carried. That class is
   SITE-WIDE (tools/esgri-page-shell.css) and other pages still use it, so it is
   left alone and the band is added here instead — recolouring the shared rule
   would repaint every page that has one.

   /global-affiliates/ used to stack two headings: a green bar reading
   "Scholars" and a grey underlined "Global Affiliates". Both are gone; the band
   carries the page's own name once.

   The band markup lives in the FETCHED fragments (global-affiliates.html,
   hku-researchers.html), not in the page content, so it cannot paint unstyled
   for a frame before this stylesheet lands — same reasoning as the note at the
   top of teaching-affiliates.html.

   🚨 THE BLACK IS PAINTED BY A BLED PSEUDO-ELEMENT, the band itself is an
   ordinary block. The obvious build — `width:100vw; left:50%; margin-left:-50vw`
   on the band, then a fixed `max-width` on the inner to put the title back — was
   tried first and lined up only while the theme container was wider than that
   fixed number. Measured live: title and first card both at x=390 (1920), 230
   (1600), 70 (1280) — then 16 vs 35 at 1024 and 16 vs 51 at 390, because below
   ~1140 the container is narrower than the number and carries its own padding.
   Leaving the band in normal flow means the inner IS the container's content
   box at every width, so the title cannot drift from the photographs under it.
   ::before is z-index 0 and the inner z-index 1, not -1: at -1 an opaque
   background on any ancestor hides the black entirely.

   🚨 `font-size` needs `!important`. Phlox ships `.entry-content h1 {font-size:
   2.7em}` — specificity (0,1,1), which beats a bare `.ga-band__title` (0,1,0),
   so the clamp lost and the title rendered 43.2px at every width including 390.
   Exactly the trap documented on `.ga-name` further down this file.
   ========================================================================== */
.ga-band{
  position:relative;
  color:#fff;
}
.ga-band::before{
  content:"";
  position:absolute;
  left:50%;
  width:100vw;
  margin-left:-50vw;
  top:0;
  bottom:0;
  background:#000;
  z-index:0;
}
.ga-band__inner{
  position:relative;
  z-index:1;
  padding:64px 0 60px;
}
.ga-band__title{
  font-family:"Poppins","Noto Sans",sans-serif !important;
  font-size:clamp(34px, 3.4vw, 52px) !important;
  font-weight:700 !important;
  line-height:1.06 !important;
  letter-spacing:.01em !important;
  text-transform:uppercase !important;
  color:#fff !important;
  margin:0 !important;
}
@media (max-width:1180px){
  .ga-band__inner{ padding:52px 0 48px; }
}
@media (max-width:520px){
  .ga-band__inner{ padding:36px 0 32px; }
}

.ga-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  width:100%;
  max-width:100%;
  /* 58px was the `esgri-spacer--50` + heading margin the band replaced */
  margin:58px auto 0;
  font-family:inherit;
  box-sizing:border-box;
}
.ga-grid *,
.ga-grid *::before,
.ga-grid *::after{ box-sizing:inherit; }

.ga-card{
  width:20%;
  padding:0 5px;
  margin:5px 0;
  display:flex;
  flex-direction:column;
}
/* /teaching-affiliates/ makes the WHOLE card the link (`a.ga-card`), where the
   other three link only the photo (`div.ga-card` + `a.ga-image`). Both shapes
   ship the same markup otherwise, so the only thing the anchor needs is to stop
   looking like one — .ga-name, .ga-title and .ga-inst all set their own colour,
   but nothing was cancelling the underline. No-op on the pages that have no
   anchor here. */
a.ga-card{
  text-decoration:none;
  color:inherit;
}
a.ga-card:focus-visible{
  /* the ink, not the green — the last #486F6A on the page went with the names */
  outline:2px solid #14171F;
  outline-offset:4px;
}

.ga-image{
  position:relative;
  display:block;
  width:100%;
  height:230px;
  overflow:hidden;
  text-decoration:none;
  outline:none;
}
.ga-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .5s ease-in-out;
  border:0;
}
.ga-image:hover img{ transform:scale(1.2); }

.ga-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  box-shadow:inset 0 0 120px 0 rgba(0,0,0,.5);
  opacity:0;
  transition:opacity .5s linear;
  pointer-events:none;
}
.ga-image:hover .ga-overlay{ opacity:1; }

.ga-info{
  background:#FFFFFF;
  text-align:center;
  padding:30px 15px;
  flex:1 0 auto;
}
/* 🚨 The name is an <h2>, and Phlox ships `.entry-content h2 { font-size: 2.1em }`
   — specificity (0,1,1), which BEATS a bare `.ga-name` (0,1,0). So this rule was
   losing and every name rendered at 33.6px: 239 of the 240 names wrapped, up to
   5 lines on desktop and 7 on a phone. It looked like the stylesheet had never
   shipped. `!important` is what wins it back; do not drop it.
   Leading is 1.25 rather than the original 1em — at 19px a name still wraps on
   113 of 240 cards, and 1em set those two lines touching. */
/* 🚨 THE COLOURS COME FROM THE /scholars/ CAROUSEL, not from anywhere here.
   Chase, 2026-08-27, with a screenshot of that carousel beside this grid:
   "把 /affiliated_researchers/ 这类的设计朝着对齐，改成黑色的字". Measured on the
   live page the same day, .pp-tm-name / .pp-tm-position set:
     name      Poppins 19px / 600 / rgb(20,23,31)
     position  Noto Sans 14px / 400 / rgb(91,100,116)
   The size and the weight of .ga-name were ALREADY those numbers — the green
   #486F6A was the only thing that differed, and it is the last of the 2024
   palette on these three pages. .ga-title moves 16px/#7F7F7F to the carousel's
   14px/#5B6474 to finish the pair.

   .ga-inst STAYS. The carousel has no equivalent line, but this grid is not
   the carousel: on /global-affiliates/ the institution is different for every
   card and is the whole point of the page. Only its colour follows, and it
   keeps 600 so it still reads as a different thing from the role above it. */
.ga-name{
  margin:0 0 5px;
  color:#14171F;
  font-size:19px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  transition:color .22s ease;
}
/* Hover lights the name gold (Chase, 2026-08-27: "悬浮上去，姓名变金色").
   #B89642 is the site gold — in-the-media.css, archive.css and voices.css all
   declare that exact value.

   🚨 KEYED TO .ga-card, NOT TO THE ANCHOR. Only /teaching-affiliates/ wraps the
   whole card in an <a>; the other three link the photograph alone, so a rule on
   :hover of the link would light the name on one page out of four and only
   while the pointer was over the picture. On .ga-card the whole card is the
   target everywhere, which is also what a reader aims at.

   :focus-within is the keyboard half — it fires for the photo link and for
   a.ga-card alike, so tabbing through gets the same signal as hovering. */
.ga-card:hover .ga-name,
.ga-card:focus-within .ga-name{ color:#B89642; }

@media (prefers-reduced-motion: reduce){
  .ga-name{ transition:none; }
}
.ga-title{
  margin:0;
  padding:0;
  color:#5B6474;
  font-size:14px;
  font-weight:400;
  line-height:1.35em;
}
.ga-title span{ display:inline; }
.ga-inst{
  margin:0;
  color:#5B6474;
  font-size:13px;
  font-weight:600;
  line-height:1.25em;
}
.ga-inst p{ margin:0; }

/* Tablet — original config keeps 5 per row at 20% */
@media (max-width:1024px){
  .ga-card{ width:20%; }
  /* was .9em of 16px = 14.4; the base is 14 now, so this is the same step down */
  .ga-title{ font-size:13px; }
}

/* Mobile — 2 per row. The info column is only ~104px wide here, so the name
   steps down with the rest; at 19px nearly every name broke into 4+ lines. */
@media (max-width:767px){
  .ga-card{ width:50%; }
  .ga-title{ font-size:12px; }
  .ga-name{ font-size:16px !important; }
}