/* ==========================================================================
   Leadership — /leadership/            (2026-08-05)
   ==========================================================================

   A TITLE-ONLY migration. Chase's instruction was "只改标题，下面的全都别改" —
   swap the green Elementor banner for the black band of the new design
   language and leave everything below it exactly as it was.

   So the body is page 1270's Elementor tree, frozen and served as a fetched
   fragment, still wearing its Elementor classes and still styled by
   `leadership-frozen.css` — a copy of the generated
   uploads/elementor/css/post-1270.css. This file adds the band and nothing
   else. Do not "tidy" the frozen markup: it is deliberately untouched.

   Fetched rather than pasted into post_content on purpose. wpautop runs over
   post_content and does not know Elementor's container tags, so a frozen tree
   there grows phantom duplicated blocks — the trap in WEB_WORKFLOW.md. A
   fragment injected by the loader never meets wpautop.

   🚨 THE FROZEN SHEET NEEDS `.elementor-1270` ON AN ANCESTOR. Every one of its
   443 rules is written `.elementor-1270 .elementor-element.elementor-element-…`
   — Elementor scopes a page's generated CSS to a class it puts on the page
   wrapper, and the frozen fragment starts below that wrapper. Shipped without
   it on 2026-08-05, so the whole sheet matched nothing and the tree fell back
   to the theme: names at 33.6px instead of 24/19, titles at 22px/600 instead
   of 16px/400, and both in the wrong colours. `#lead-root` carries the class
   in leadership-page.html; do not drop it.
   ========================================================================== */

.lead-band {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  background: #000 !important;
  color: #fff !important;
}
/* 1140, NOT the 1440 the other new pages use. This page keeps Elementor's
   narrower body (see the note below), and the shell around it is
   .esgri-pageshell at 1140 — set the band wider than its parent and the title
   overflows to the left and gets clipped, which is what the first attempt did. */
.lead-band__inner {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 64px 0 60px !important;
}
.lead-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;
}

/* The frozen tree was laid out inside Elementor's 1200px measure, so this page
   is NOT widened to 1440 like the rest of the new language — the cards would
   re-flow and that is exactly what "don't change anything below" rules out.
   Only the band runs wide. */

@media (max-width: 1024px) { .lead-band__inner { padding: 48px 16px 44px !important; } }
@media (max-width: 767px)  { .lead-band__inner { padding: 36px 16px 32px !important; } }

/* The person-grid width rules that used to sit here are gone. They were a
   workaround for the scoping bug above: while `leadership-frozen.css` was
   matching nothing, the cards laid out full width and had to be propped by hand. The frozen sheet sets those same widths
   itself — 33.33% for 954913b and 20% for 2fc2a21, 100% below 768 — and now
   that it applies, hand-written copies could only drift away from it. */

/* ==========================================================================
   🚨 Elementor's own frontend CSS is NOT on this page
   ==========================================================================
   Elementor enqueues `frontend.min.css` only for pages IT renders. This page is
   plain, so nothing defines `.elementor-hidden-*` — and a stale block that has
   been hidden at every breakpoint for months (element cbed47a: a plain-text
   duplicate of the whole list, still naming Prof. Chao REN) came back into view.
   It is invisible on the old page for exactly this reason, which is why nobody
   has cleaned it up.

   Reproduced here at Elementor's own breakpoints rather than pulling in the
   whole framework sheet, which would restyle things this migration is supposed
   to leave alone. */
@media (min-width: 1025px) { .elementor-hidden-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .elementor-hidden-tablet { display: none !important; } }
@media (max-width: 767px) { .elementor-hidden-mobile { display: none !important; } }

/* ==========================================================================
   Centre a part-full row                                    (2026-08-13)
   ==========================================================================
   Removing Anthony Cheung left the Associate Director row (2fc2a21) with four
   cards in a row the frozen sheet sizes at 20% each — so they filled 80% and
   left a 224px hole on the right, which read as a missing person rather than a
   shorter row (Chase: "右边缺了一个很奇怪").

   `justify-content`, deliberately, NOT a width: the frozen sheet owns the
   widths (33.33% for 954913b, 20% for 2fc2a21, 100% below 768) and the note
   above records what happened last time this file hand-copied them. Centring is
   a no-op on any row that is already full, which is why it can be set on the
   class rather than on one element id — the top row's three cards at 33.33%
   still span the full measure and do not move.
   ========================================================================== */
.premium-persons-container { justify-content: center !important; }
