/* ──────────────────────────────────────────────────────────────────────────
 * ucfund.css — /hku-uchicago-collaborative-sustainability-and-climate-research-fund/
 *
 * Variant C migration of Elementor page 12697. A migration, not a redesign:
 * every value was measured off the live page with getComputedStyle at 1440px
 * and 390px.
 *
 *   heading ink                      rgb(20,23,31)    #14171F
 *   body text                        rgb(38,38,38)    #262626
 *   card text                        rgb(68,68,68)    #444444
 *   card border 2px                  rgb(232,232,232) #E8E8E8
 *   divider 1px                      rgb(172,172,172) #ACACAC
 *
 * Vertical rhythm below the hero, as measured: h1 +50, sub +20, rule +35,
 * body +36, PROJECTS +60, short rule +22, grid +23, PARTNERS +80, logo +20.
 *
 * 2026-08-12, Chase: drop the institute green. The colour is NOT #000 — the
 * site's current pages (/insights-2026/, /in-the-media/, /past-events/,
 * /voices/) all set headings and card titles to rgb(20,23,31) = #14171F, with
 * rgb(74,78,88) for secondary text and rgb(184,150,66) gold as the one accent.
 * The green pages (/press/, /perspectives/, /staff/) are the older generation.
 * So every #385A48 here became #14171F; the greys, the rules and the card
 * border were never green and are unchanged.
 *
 * 🚨 Selectors carrying `#ucf-root` do so because Phlox reaches inside
 * `.entry-content` at (0,1,1) and out-specifies a single class — the Elementor
 * original rendered on a full-width canvas, outside that wrapper, so none of
 * those rules used to apply. Headings and list items are the ones affected.
 * Check with getComputedStyle before copying the prefix onto anything else.
 * ────────────────────────────────────────────────────────────────────────── */

#ucf-root {
  /* full-bleed out of the theme's 1140 box, keyed to the injected root div */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
}

.ucf {
  --ucf-ink-strong: #14171F;   /* the site's current heading ink — see the note above */
  --ucf-ink: #262626;
  --ucf-card-ink: #444444;
  --ucf-card-border: #E8E8E8;
  --ucf-rule: #ACACAC;
  --ucf-head: Poppins, "Noto Sans", sans-serif;
  --ucf-body: "Noto Sans", sans-serif;
  font-family: var(--ucf-body);
  color: var(--ucf-ink);
}

.ucf * { box-sizing: border-box; }

.ucf-wrap {
  /* 1220 with 10px gutters, measured: 1200 @120 at 1440, 1004 @10 at 1024,
     370 @10 at 390 — the live page's gutter collapses to 10px below 1440 */
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 10px;
}

/* ── Hero: an image band with no text over it ─────────────────────────── */

.ucf-hero {
  min-height: 290px;
  background: url("https://hkujcesgri.hku.hk/wp-content/uploads/2025/07/shutterstock_458471392.webp")
              50% 50% / cover no-repeat;
  /* 🚨 `fixed`, not the default `scroll`. A fixed background is sized and
     centred against the VIEWPORT, not the element, so `cover` on a 1440x900
     window fills 1440x900 and this 290px-tall band shows the middle slice of
     it. With `scroll` the same file, the same `cover` and the same `50% 50%`
     produce a completely different picture — sunset ridge versus night
     harbour — and it reads as "you used the wrong image". Elementor turns it
     off below 1024, as below. */
  background-attachment: fixed;
}

/* ── Intro ────────────────────────────────────────────────────────────── */

.ucf-intro { padding-top: 50px; }

#ucf-root .ucf-title {
  font-family: var(--ucf-head);
  font-size: 38px;
  line-height: 45.6px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

.ucf-sub {
  font-size: 24px;
  line-height: 30px;
  font-weight: 300;
  color: var(--ucf-ink);
  margin: 20px 0 0;
}

.ucf-rule {
  border: 0;
  border-top: 1px solid var(--ucf-rule);
  margin: 35px 0 0;
}

.ucf-body {
  font-size: 17.6px;
  line-height: 28.16px;
  font-weight: 300;
  color: var(--ucf-ink);
  margin: 36px 0 0;
}

.ucf-body p { margin: 0 0 28px; }
.ucf-body p:last-child { margin-bottom: 0; }
.ucf-body a { color: var(--ucf-ink-strong); text-decoration: underline;
               text-underline-offset: 3px; }   /* ink alone would not read as a link */

/* ── Section heads ────────────────────────────────────────────────────── */

#ucf-root .ucf-h2 {
  font-family: var(--ucf-head);
  font-size: 22px;
  line-height: 22px;
  font-weight: 600;
  color: var(--ucf-ink-strong);
  margin: 60px 0 0;
}

.ucf-rule--short {
  border: 0;
  border-top: 1px solid var(--ucf-rule);
  width: 60px;
  margin: 22px 0 0;
}

/* ── Project cards ────────────────────────────────────────────────────── */

#ucf-root .ucf-cards {
  list-style: none;
  margin: 23px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 18px;
}

.ucf-card {
  border: 2px solid var(--ucf-card-border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  color: var(--ucf-card-ink);
}

.ucf-card__media {
  display: block;
  aspect-ratio: 343 / 193;      /* the size the Royal grid rendered */
  overflow: hidden;
  background: #f2f2f2;
}

.ucf-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Measured on the LINKS, not their wrappers — the wrapper divs report the
   theme's #444 while the anchors inside carry the real colours: grey category,
   green title, green Read More. Reading the wrapper is how you ship a card
   that is the right size in entirely the wrong colour. Each block carries its
   own bottom spacing; the gaps between them are zero. */
.ucf-card__cat {
  font-size: 15px;
  line-height: 22.5px;
  font-weight: 700;
  margin: 0 0 14.5px;
}

.ucf-card__cat a { color: #7F7F7F; text-decoration: none; }
.ucf-card__cat a:hover { text-decoration: underline; }

#ucf-root .ucf-card__title {
  font-size: 21px;
  line-height: 29.4px;
  font-weight: 700;
  font-family: var(--ucf-head);
  margin: 0;
}

.ucf-card__title a { color: var(--ucf-ink-strong); text-decoration: none; }
.ucf-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ucf-card__exc {
  font-size: 15px;
  line-height: 22.5px;
  color: var(--ucf-card-ink);
  margin: 0 0 9.5px;
}

/* the live page locks every card to 556px, which leaves up to 130px of dead
   space under the shorter ones. Here the row sizes to its tallest card and
   Read More sits on the floor of each. */
.ucf-card__more {
  margin: 0;
  padding-top: 30px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
}

.ucf-card__more a { color: var(--ucf-ink-strong); text-decoration: none; }
.ucf-card__more a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ucf-card__spacer { margin-top: auto; }

/* fallback if the REST call fails — never leave an empty page */
.ucf-cards__fallback {
  margin: 23px 0 0;
  font-size: 17.6px;
  line-height: 28.16px;
  font-weight: 300;
}

.ucf-cards__fallback a { color: var(--ucf-ink-strong); text-decoration: underline; }

/* ── Partners ─────────────────────────────────────────────────────────── */

.ucf-partners { margin: 20px 0 0; padding-bottom: 80px; }

.ucf-partners img {
  /* a percentage of the column, and the percentage itself is responsive:
     30% → 360 at 1440, 52% → 522 at 1024 and 389 at 768, 100% → 370 at 390 */
  width: 30%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Responsive ───────────────────────────────────────────────────────────
 * Measured at 1440 / 1024 / 768 / 390. Two things worth knowing before
 * "improving" them: the h1 never shrinks — it is 38/45.6 at every width,
 * including 390 — and the prose has its own two-step ladder that the headings
 * do not share.
 * ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  #ucf-root .ucf-cards { grid-template-columns: repeat(2, 1fr); }
  .ucf-hero { background-attachment: scroll; }   /* Elementor drops it here */
  .ucf-sub { font-size: 14.4px; line-height: 18px; }
  .ucf-body { font-size: 14.4px; line-height: 23.04px; }
  .ucf-partners img { width: 52%; }
}

@media (max-width: 767px) {
  #ucf-root .ucf-cards { grid-template-columns: 1fr; }
  .ucf-sub { font-size: 12.8px; line-height: 16px; }
  .ucf-body { font-size: 12.8px; line-height: 20.48px; }
  .ucf-partners img { width: 100%; }
}