/* ===========================================
   ESG Competition Styles - Clean Academic Style
   For WordPress Elementor HTML Widget
   =========================================== */

:root {
    --esg-primary: #1a4d3e;
    --esg-primary-light: #2d7a62;
    --esg-accent: #c9a227;
    --esg-bg: #ffffff;
    --esg-bg-light: #f7f7f7;
    --esg-text: #333333;
    --esg-text-muted: #666666;
    --esg-border: #e0e0e0;

    --font-serif: inherit;
    --font-sans: inherit;
}

/* Reset & Full Width Override for Elementor */
.esg-competition-wrapper {
    font-family: var(--font-sans);
    color: var(--esg-text);
    line-height: 1.6;
    background: var(--esg-bg);

    /* Break out of Elementor container */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.esg-competition-wrapper *,
.esg-competition-wrapper *::before,
.esg-competition-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.esg-competition-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===========================================
   Header
   =========================================== */
.esg-header {
    background: var(--esg-primary);
    padding: 16px 0;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.header-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.logo-text {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.logo-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.3);
}

/* ===========================================
   Hero Section - Full Width with Complete Image
   =========================================== */
.esg-hero {
    position: relative;
    width: 100%;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
}

.hero-bg-image {
    width: 100%;
    height: auto;
    display: block;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.6) 15%,
        rgba(255, 255, 255, 0.15) 30%,
        transparent 45%
    );
    pointer-events: none;
}

.hero-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    text-align: center;
    padding: 48px 24px;
}

.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 600;
    color: var(--esg-text);
    margin-bottom: 12px;
    line-height: 1.15;
}

.hero-year {
    color: var(--esg-primary);
}

.hero-subtitle {
    font-size: clamp(15px, 2vw, 18px);
    color: var(--esg-primary);
    font-weight: 500;
}

/* ===========================================
   Stats Section
   =========================================== */
.esg-stats {
    background: var(--esg-primary);
    padding: 32px 0;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center;
}

@media (max-width: 768px) {
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-number {
    font-family: var(--font-serif);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 600;
    color: #ffffff;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===========================================
   Section Titles
   =========================================== */
.section-title {
    font-family: var(--font-serif);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    color: var(--esg-text);
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--esg-primary);
    display: inline-block;
}

.subsection-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--esg-text);
    margin: 48px 0 24px;
}

/* ===========================================
   About Section
   =========================================== */
.esg-about {
    padding: 60px 0;
    background: var(--esg-bg);
}

.about-content {
    max-width: 800px;
}

.about-content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--esg-text-muted);
    margin-bottom: 16px;
}

.about-content p:last-child {
    margin-bottom: 0;
}

/* ===========================================
   Winners Section - Stacked Cards
   =========================================== */
.esg-winners {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8f8f6 0%, #eeedea 100%);
    overflow: visible;
}

/* Stacked Cards Container */
.winners-stack {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    margin: 60px 0;
}

/* Individual Stack Card */
.stack-card {
    position: absolute;
    width: 400px;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.18);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center center;
}

.stack-card .card-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Label */
.card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.stack-card.active .card-label {
    opacity: 1;
    transform: translateY(0);
}

.label-rank {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

.label-team {
    display: block;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.label-members {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
    margin-bottom: 8px;
}

.label-amount {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--esg-primary);
    padding: 4px 10px;
    border-radius: 4px;
}

/* Default stacked positions */
.stack-card[data-index="0"] {
    z-index: 5;
    transform: translateX(-280px) rotate(-8deg);
}
.stack-card[data-index="1"] {
    z-index: 4;
    transform: translateX(-140px) rotate(-4deg);
}
.stack-card[data-index="2"] {
    z-index: 3;
    transform: translateX(0px) rotate(0deg);
}
.stack-card[data-index="3"] {
    z-index: 2;
    transform: translateX(140px) rotate(4deg);
}
.stack-card[data-index="4"] {
    z-index: 1;
    transform: translateX(280px) rotate(8deg);
}

/* Hover state - subtle lift */
.stack-card:not(.active):hover {
    transform: translateY(-12px) scale(1.06);
    z-index: 10 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28);
}
.stack-card[data-index="0"]:not(.active):hover {
    transform: translateX(-280px) rotate(-8deg) translateY(-12px) scale(1.06);
}
.stack-card[data-index="1"]:not(.active):hover {
    transform: translateX(-140px) rotate(-4deg) translateY(-12px) scale(1.06);
}
.stack-card[data-index="2"]:not(.active):hover {
    transform: translateX(0px) rotate(0deg) translateY(-12px) scale(1.06);
}
.stack-card[data-index="3"]:not(.active):hover {
    transform: translateX(140px) rotate(4deg) translateY(-12px) scale(1.06);
}
.stack-card[data-index="4"]:not(.active):hover {
    transform: translateX(280px) rotate(8deg) translateY(-12px) scale(1.06);
}

/* Active/Expanded state */
.stack-card.active {
    z-index: 100 !important;
    transform: translateX(0) translateY(-30px) rotate(0deg) scale(1.8) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
    cursor: default;
}

/* Dim non-active cards when one is expanded */
.winners-stack.has-active .stack-card:not(.active) {
    opacity: 0.3;
    pointer-events: none;
}

/* Prize-specific border accents */
.stack-card[data-prize="gold"] {
    border: 3px solid #d4af37;
}
.stack-card[data-prize="silver"] {
    border: 3px solid #a8a8a8;
}
.stack-card[data-prize="bronze"] {
    border: 3px solid #b87333;
}
.stack-card[data-prize="special"] {
    border: 3px solid var(--esg-primary);
}

/* Navigation Buttons */
.stack-nav,
.stack-close {
    display: none;
    position: absolute;
    z-index: 200;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: var(--esg-text);
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.stack-nav {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    top: 50%;
    margin-top: -54px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
}

.stack-nav:hover {
    background: var(--esg-primary);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
}

.stack-nav-prev {
    left: 50%;
    margin-left: -410px;
}

.stack-nav-next {
    right: 50%;
    margin-right: -410px;
}

.stack-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    bottom: 20px;
    left: 50%;
    margin-left: -22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    align-items: center;
    justify-content: center;
}

.stack-close:hover {
    background: #e74c3c;
    color: #fff;
    transform: scale(1.1);
}

/* Show controls when a card is expanded */
.winners-stack.has-active .stack-nav,
.winners-stack.has-active .stack-close {
    display: flex;
}

/* Responsive */
@media (max-width: 1100px) {
    .winners-stack {
        height: 400px;
    }
    .stack-card {
        width: 320px;
        height: 240px;
    }
    .stack-card[data-index="0"] { transform: translateX(-200px) rotate(-8deg); }
    .stack-card[data-index="1"] { transform: translateX(-100px) rotate(-4deg); }
    .stack-card[data-index="2"] { transform: translateX(0px) rotate(0deg); }
    .stack-card[data-index="3"] { transform: translateX(100px) rotate(4deg); }
    .stack-card[data-index="4"] { transform: translateX(200px) rotate(8deg); }

    .stack-card[data-index="0"]:not(.active):hover { transform: translateX(-200px) rotate(-8deg) translateY(-10px) scale(1.06); }
    .stack-card[data-index="1"]:not(.active):hover { transform: translateX(-100px) rotate(-4deg) translateY(-10px) scale(1.06); }
    .stack-card[data-index="2"]:not(.active):hover { transform: translateX(0px) rotate(0deg) translateY(-10px) scale(1.06); }
    .stack-card[data-index="3"]:not(.active):hover { transform: translateX(100px) rotate(4deg) translateY(-10px) scale(1.06); }
    .stack-card[data-index="4"]:not(.active):hover { transform: translateX(200px) rotate(8deg) translateY(-10px) scale(1.06); }

    .stack-card.active {
        transform: translateX(0) translateY(-20px) rotate(0deg) scale(1.6) !important;
    }

    .stack-nav-prev { margin-left: -320px; }
    .stack-nav-next { margin-right: -320px; }
}

@media (max-width: 768px) {
    .winners-stack {
        height: 320px;
    }
    .stack-card {
        width: 240px;
        height: 180px;
    }
    .stack-card[data-index="0"] { transform: translateX(-140px) rotate(-6deg); }
    .stack-card[data-index="1"] { transform: translateX(-70px) rotate(-3deg); }
    .stack-card[data-index="2"] { transform: translateX(0px) rotate(0deg); }
    .stack-card[data-index="3"] { transform: translateX(70px) rotate(3deg); }
    .stack-card[data-index="4"] { transform: translateX(140px) rotate(6deg); }

    .stack-card[data-index="0"]:not(.active):hover { transform: translateX(-140px) rotate(-6deg) translateY(-8px) scale(1.05); }
    .stack-card[data-index="1"]:not(.active):hover { transform: translateX(-70px) rotate(-3deg) translateY(-8px) scale(1.05); }
    .stack-card[data-index="2"]:not(.active):hover { transform: translateX(0px) rotate(0deg) translateY(-8px) scale(1.05); }
    .stack-card[data-index="3"]:not(.active):hover { transform: translateX(70px) rotate(3deg) translateY(-8px) scale(1.05); }
    .stack-card[data-index="4"]:not(.active):hover { transform: translateX(140px) rotate(6deg) translateY(-8px) scale(1.05); }

    .stack-card.active {
        transform: translateX(0) translateY(-15px) rotate(0deg) scale(1.8) !important;
    }

    .stack-nav {
        width: 40px;
        height: 40px;
    }
    .stack-nav-prev { margin-left: -260px; }
    .stack-nav-next { margin-right: -260px; }
    .stack-close { width: 38px; height: 38px; margin-left: -19px; }
}

@media (max-width: 500px) {
    .winners-stack {
        height: 280px;
    }
    .stack-card {
        width: 180px;
        height: 135px;
    }
    .stack-card[data-index="0"] { transform: translateX(-100px) rotate(-6deg); }
    .stack-card[data-index="1"] { transform: translateX(-50px) rotate(-3deg); }
    .stack-card[data-index="2"] { transform: translateX(0px) rotate(0deg); }
    .stack-card[data-index="3"] { transform: translateX(50px) rotate(3deg); }
    .stack-card[data-index="4"] { transform: translateX(100px) rotate(6deg); }

    .stack-card[data-index="0"]:not(.active):hover { transform: translateX(-100px) rotate(-6deg) translateY(-6px) scale(1.04); }
    .stack-card[data-index="1"]:not(.active):hover { transform: translateX(-50px) rotate(-3deg) translateY(-6px) scale(1.04); }
    .stack-card[data-index="2"]:not(.active):hover { transform: translateX(0px) rotate(0deg) translateY(-6px) scale(1.04); }
    .stack-card[data-index="3"]:not(.active):hover { transform: translateX(50px) rotate(3deg) translateY(-6px) scale(1.04); }
    .stack-card[data-index="4"]:not(.active):hover { transform: translateX(100px) rotate(6deg) translateY(-6px) scale(1.04); }

    .stack-card.active {
        transform: translateX(0) translateY(-10px) rotate(0deg) scale(2) !important;
    }

    .label-rank { font-size: 9px; }
    .label-team { font-size: 14px; }
    .label-members { font-size: 8px; }
    .label-amount { font-size: 10px; padding: 3px 8px; }

    .stack-nav {
        width: 34px;
        height: 34px;
    }
    .stack-nav svg { width: 16px; height: 16px; }
    .stack-nav-prev { margin-left: -200px; }
    .stack-nav-next { margin-right: -200px; }
    .stack-close { width: 32px; height: 32px; margin-left: -16px; bottom: 10px; }
    .stack-close svg { width: 14px; height: 14px; }
}

/* ===========================================
   Gallery Section
   =========================================== */
.esg-gallery {
    padding: 60px 0;
    background: var(--esg-bg);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

.gallery-item {
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* ===========================================
   Judges Section
   =========================================== */
.esg-judges {
    padding: 60px 0;
    background: var(--esg-bg-light);
}

.judges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .judges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .judges-grid {
        grid-template-columns: 1fr;
    }
}

.judge-item {
    background: var(--esg-bg);
    padding: 24px;
    border-radius: 8px;
    border-left: 3px solid var(--esg-primary);
}

.judge-name {
    display: block;
    font-weight: 600;
    color: var(--esg-text);
    margin-bottom: 8px;
    font-size: 16px;
}

.judge-title {
    display: block;
    font-size: 13px;
    color: var(--esg-text-muted);
    line-height: 1.5;
}

/* ===========================================
   Past Editions Section
   =========================================== */
.esg-past-editions {
    padding: 60px 0;
    background: var(--esg-bg);
}

.editions-list {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.edition-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 32px;
    background: var(--esg-bg-light);
    border: 1px solid var(--esg-border);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.edition-link:hover {
    border-color: var(--esg-primary);
}

.edition-link.active {
    background: var(--esg-primary);
    border-color: var(--esg-primary);
}

.edition-year {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--esg-text);
}

.edition-link.active .edition-year {
    color: #ffffff;
}

.edition-name {
    font-size: 12px;
    color: var(--esg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.edition-link.active .edition-name {
    color: rgba(255, 255, 255, 0.8);
}

/* ===========================================
   Footer
   =========================================== */
.esg-footer {
    padding: 40px 0;
    background: var(--esg-primary);
    text-align: center;
}

.footer-content {
    color: #ffffff;
}

.footer-org {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
}

.footer-copyright {
    font-size: 13px;
    opacity: 0.8;
}

/* ==========================================================================
   White strip above the footer                        (2026-08-09)
   ==========================================================================
   Phlox keeps a bottom margin on `.entry-main` (70px) and `.entry-content`
   (50px). With the site footer now black and flush, that margin shows as a
   band of white page between the last section and the footer — measured ~70px
   here. Zeroed, not painted: a background colour would leave the dead space
   still there. Same rule and same reason as insights.css and frontpage.css;
   this page simply never got it. */
.entry-main,
.entry-content {
  margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-08-21 — Yuna's mockup, `Case competition page_UI.jpg`.

   ⚠️ EVERY CORNER HERE IS SQUARE. The mockup draws plates, not pills, and the
   one thing this page's sibling redesign got wrong the same day was inheriting
   a border-radius nobody looked at. Any radius below is deliberate and says so.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 🚨 --k-ink IS #000, NOT #14171F, SINCE 2026-08-26. Chase: "整体的风格和其他那些
   黑底白字的网站保持一致". /global-affiliates/ and /affiliated_researchers/ paint
   their bands pure black; this page painted its band, its stats bar and its
   judge cards #14171F, so at the top of a scroll the two sites read as two
   different blacks. Imperceptible in text, obvious across a 195px band. */
.esg-competition-wrapper { --k-ink: #000; --k-soft: #5B6474; --k-gold: #B08D2B; }

/* ── Band ────────────────────────────────────────────────────────────────── */
.esg-band {
  background: var(--k-ink);
  color: #fff;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}
/* 64/60, the padding /global-affiliates/ uses, stepped down the same way. The
   band held two lines until 2026-08-26 and 58/54 was set around the pair. */
.esg-band__inner { max-width: 1400px; margin: 0 auto; padding: 64px 48px 60px; }
/* 🚨 EVERY DECLARATION HERE NEEDS !important, AND NOT FOR TIDINESS. Phlox
   ships `.entry-content h1 { font-size: 2.7em }` — specificity (0,1,1), which
   beats a bare `.esg-band__title` (0,1,0). Measured on the live page before
   this change: the clamp never applied at any width and the title rendered a
   flat 43.2px/800 everywhere, i.e. the theme's h1, not this rule. The same
   trap is documented in global-affiliates.css; this is that fix, and the
   numbers below are that page's, so the two bands now set identically.
   font-weight 700, not 800: Chase's 8/25 note on this page was "字体太粗". */
.esg-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;
}
/* .esg-band__sub is gone — Chase, 2026-08-26, "标题里面不要放小标题". The markup
   went with it in esg-competition-content.html; do not re-add one without
   re-adding the other. */

@media (max-width: 1180px) { .esg-band__inner { padding-top: 52px; padding-bottom: 48px; } }
@media (max-width: 520px)  { .esg-band__inner { padding-top: 36px; padding-bottom: 32px; } }

/* ── Photo with the stats welded to its bottom edge ──────────────────────── */
.esg-hero2 { padding: 44px 0 0; }
.esg-hero2__inner { max-width: 1400px; margin: 0 auto; padding: 0 48px; }
.esg-hero2__img { display: block; width: 100%; height: auto; }
.esg-stats2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--k-ink);
  padding: 22px 0;
}
.esg-stat { text-align: center; color: #fff; }
.esg-stat__n {
  display: block;
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: clamp(19px, 1.5vw, 27px);
  font-weight: 700;
  line-height: 1.15;
}
.esg-stat__l {
  display: block;
  font-size: clamp(10px, .72vw, 13px);
  color: rgba(255,255,255,.8);
  margin-top: 4px;
}

/* ── A label beside its content, the shape /scholars/ uses ───────────────── */
.esg-split {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0 40px;
  align-items: start;
}
/* 700, not 800 (Chase, 2026-08-25 "字体太粗") — this was the heaviest type
   anywhere on the site.
   🚨 THE TRACKING STAYS NEGATIVE. The band above it went to +.01em to match
   /global-affiliates/, and the obvious tidy is to bring these two headings
   along. Tried, measured, reverted: this label sits in a 220px column and
   "2025 AWARD WINNERS" sets on two lines at -0.01em and three at +0.01em. */
/* 🚨 !important, and for the same reason .esg-band__title needs it: Phlox's
   `.entry-content h2 { 2.1em }` is (0,1,1) and beats a bare class. Found on
   /staff/ 2026-08-26 while giving that page this same heading — measured here
   too, the clamp had never applied and this rendered a flat 33.6px at every
   width instead of 27 down to 19. */
.esg-split__title {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: clamp(19px, 1.5vw, 27px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--k-ink) !important;
  margin: 0 !important;
}
.esg-winners2 { padding: 66px 0 10px; }
.esg-judges2  { padding: 56px 0 70px; }

/* ── The accordion ───────────────────────────────────────────────────────── */
.esg-acc__item { background: #fff; margin-bottom: 14px; }
.esg-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.esg-acc__rank {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: clamp(15px, 1.15vw, 21px);
  font-weight: 600;
  color: var(--k-ink);
}
/* a chevron drawn from a rotated square — no icon font, no svg to keep in step */
.esg-acc__chev {
  width: 11px; height: 11px;
  border-right: 2px solid var(--k-ink);
  border-bottom: 2px solid var(--k-ink);
  transform: rotate(45deg);
  transform-origin: center;
  margin-top: -4px;
  transition: transform .22s ease;
  flex: 0 0 auto;
}
.esg-acc__item.is-open .esg-acc__chev { transform: rotate(225deg); margin-top: 4px; }

/* The panel slides instead of snapping (Chase, 2026-08-21: "切换winner的时候能否
   平滑一些"). It used to be toggled with the `hidden` attribute, which is
   display:none and cannot be animated at all.

   🚨 THE PADDING LIVES ON .esg-acc__body, NOT HERE. A closed panel is
   `height: 0`, and height does not include padding — left on the panel, every
   closed prize would keep 24px of white below its title and the four shut rows
   would sit further apart than they look. */
.esg-acc__panel {
  height: 0;
  overflow: hidden;
  opacity: 0;
  /* 🚨 NOT the site's usual cubic-bezier(.22,.9,.3,1). That curve is tuned for
     6px hover nudges and front-loads the movement: measured on the live panel
     it covered 338 of 429px in the first 55ms, which reads as a snap with a
     settle rather than a slide. This is the standard ease-in-out pair, which
     starts and ends slowly over a distance this large. */
  transition: height .38s cubic-bezier(.4, 0, .2, 1), opacity .26s ease;
}
/* `auto` is the resting state, not a number, so a panel opened before its
   photograph loaded still ends up the right height — and stays right when the
   window is resized under it. The JS only holds a pixel height for the length
   of the animation. */
.esg-acc__item.is-open > .esg-acc__panel { height: auto; opacity: 1; }

/* 🚨 THE PANEL IS SIZED AROUND THE PHOTOGRAPH, and the names are centred
   against it. Chase, 2026-08-24: "中间还是有较多的空隙" → "照片加大，文字加大".

   Measured at 1600 before touching anything: the panel was 429px tall and the
   name block only 110 of it, so 295px of the left column was white. The trap
   is that widening the photograph does NOT fix that — at a fixed ratio a wider
   photograph is a taller one, so the void grows with it. What shrinks the void
   is the two things he asked for at once: a bigger photograph that is also
   FLATTER, and type large enough to hold its side of the panel.

     now  photo 540x405  names 110 tall  void 295
     this photo 682x455  names 165 tall  void 290  (in a panel 50px taller)

   🚨 align-items: START, and it stays start. It was briefly centred on
   2026-08-24 and Chase turned it back the same day — "文字还是靠上" — so the
   names line up with the TOP EDGE of the photograph, which is also where the
   mockup puts them. Do not "fix" this to center: the remaining white below
   the names is deliberate. */
.esg-acc__body {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 2fr);
  gap: 24px;
  align-items: start;
  padding: 0 24px 24px;
}
/* Bigger, twice over (Chase: "名字能否大一些"). The team read at 16.8px against
   a photograph 700px wide — the smallest thing in a very large panel, and the
   one thing a visitor came to the section to read. */
/* Raised twice: 16.8 -> 24.8 -> 32px at 1600 (Chase, 2026-08-21 "名字能否大一些"
   then 2026-08-24 "文字加大"). Checked against every panel at this size — the
   longest team name, "Khoo Thien Zhi", still sets on one line in the 290px
   column, and so do the four Chinese ones. */
.esg-acc__team {
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: clamp(24px, 2.0vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--k-gold);
  margin: 0 0 16px;
  text-transform: uppercase;
}
.esg-acc__members {
  font-size: clamp(16px, 1.28vw, 23px);
  line-height: 1.8;
  color: var(--k-ink);
  margin: 0;
}
/* 🚨 aspect-ratio, not just height:auto. All five photographs are 4:3
   (1280x961 and 1919x1440, measured), and reserving the box means the panel's
   scrollHeight is already correct when the JS measures it — a lazy image
   inside a zero-height panel has not loaded at that moment, so without this
   the slide animates to a target ~500px short and then jumps. */
/* 🚨 3/2 WITH object-fit: cover — the photographs are 4:3 (1280x961 and
   1919x1440), so this TRIMS about 7% off the top and 7% off the bottom. All
   five were checked at this crop before it shipped: nobody is beheaded, no
   feet are cut, and the HKU / Renmin logos along the top edge survive. 16/9
   was tried and rejected for cutting exactly those logos off.

   The declared ratio also keeps the slide animation honest — a lazy image
   inside a zero-height panel has not loaded when the JS reads scrollHeight,
   so without a reserved box the panel animates to a target ~500px short and
   then jumps. */
.esg-acc__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ── A panel naming five teams instead of one ──────────────────────────────
   Innovation Award, since 2026-08-26. The other four panels carry ONE team, so
   .esg-acc__team can afford 36px; five of them cannot. Measured in the 290px
   left column at 1600: "牛油果香蕉燕麦奇亚籽" sets 360px wide at 36px, i.e. it
   overflows on its own, and one-name-per-line would run the block past 1000px
   against a 455px photograph.

   So this panel, and only this panel, steps the team down to the members' size
   (gold and 700 still carry the distinction) and sets each team's members as
   one wrapped line. Everything else about the panel is untouched. */
.esg-acc__body--multi .esg-acc__sub + .esg-acc__sub { margin-top: 18px; }
.esg-acc__body--multi .esg-acc__team {
  font-size: clamp(16px, 1.28vw, 23px);
  line-height: 1.3;
  margin: 0 0 4px;
  /* 🚨 NOT uppercase. The single-team rule uppercases, which is invisible on
     Chinese but would turn "TrialBlazers" and "C&R Advisory" into shouting —
     and three of these five team names are Chinese, so the panel would mix the
     two treatments. These read as written. */
  text-transform: none;
}
.esg-acc__body--multi .esg-acc__members {
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.55;
}

/* ── Judges ──────────────────────────────────────────────────────────────── */
.esg-judges2__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.esg-judge { background: var(--k-ink); color: #fff; padding: 20px 20px 22px; }
.esg-judge__name {
  display: block;
  font-family: "Poppins", "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.esg-judge__role { display: block; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.72); }

@media (max-width: 1024px) {
  .esg-split { grid-template-columns: 1fr; gap: 18px; }
  .esg-judges2__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .esg-acc__panel, .esg-acc__chev { transition: none !important; }
}

@media (max-width: 767px) {
  .esg-band__inner, .esg-hero2__inner, .esg-split { padding-left: 20px; padding-right: 20px; }
  .esg-stats2 { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .esg-judges2__grid { grid-template-columns: 1fr; }
  .esg-acc__body { grid-template-columns: 1fr; }
}

/* ── Enumerated against the mockup, not eyeballed ────────────────────────────
   What the page actually painted at 1920, and what the mockup asks for:

     left edge   band / photo / stats / both labels   308   ← the new sections
     left edge   About title and body                 384   ← .section-container
     rule        .section-title bottom 2px, GREEN            ← not in the mockup
     type        About title: title case, #333, 600          ← uppercase, ink, 800
     type        body: #666                                  ← the page's soft ink

   One left edge, one fewer rule. .section-container is the Elementor original's
   own container and still wraps About, so it is brought onto the same box as
   .esg-band__inner / .esg-hero2__inner / .esg-split rather than those being bent
   to it. */
.esg-competition-wrapper .section-container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}
/* 🚨 THE GREEN UNDERLINE GOES. It is the last of the old palette on this page —
   rgb(26,77,62) under "About the Competition" — and the mockup draws no rule
   anywhere. If a section title ever needs one again it should be the ink, not
   the green, which nothing else here still uses. */
.esg-competition-wrapper .section-title {
  border-bottom: 0 !important;
  text-transform: uppercase !important;
  /* 700, in step with .esg-split__title; tracking unchanged, see the note there.
     The size is !important for the same Phlox h2 reason documented above. */
  font-size: clamp(19px, 1.5vw, 27px) !important;
  font-weight: 700 !important;
  color: var(--k-ink) !important;
  letter-spacing: -0.01em !important;
}
.esg-competition-wrapper .section-title::after { display: none !important; }
.esg-competition-wrapper .about-content p { color: var(--k-soft) !important; }
/* 🚨 THE 800px CAP GOES (Chase, 2026-08-26: "这个部分铺满宽度"). .about-content
   is the Elementor original's own box and carried `max-width: 800px` from a
   1200px-wide design. On the 1400px page that left the About paragraphs 800px
   against 1304px for the band, the photograph, the stats, the accordion and the
   judges — the one block on the page that stopped short, and the whole reason
   this section looked unfinished. Same reasoning as the .section-container
   override above: bring the old box onto the new measure rather than bending
   the new sections to the old one. */
.esg-competition-wrapper .about-content { max-width: none !important; }

@media (max-width: 767px) {
  .esg-competition-wrapper .section-container {
    padding-left: 20px !important; padding-right: 20px !important;
  }
}

/* ⚠️ THE PAGE IS GREY, NOT WHITE — rgb(240,240,240), sampled at four points in
   the mockup and identical in the Scholars mockup, so it is the pair's shared
   ground. Both pages were white. It is also what makes the accordion read as a
   stack of cards: the rows are #fff and had nothing to sit against. */
.esg-competition-wrapper { position: relative; }
.esg-competition-wrapper::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background: #F0F0F0;
  z-index: -1;
}


/* 🚨 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. */
.esg-competition-wrapper { z-index: 0 !important; }

/* .esg-about carried a full-width white background from the old design, so the
   grey ground broke for 567px in the middle of the page. The mockup runs one
   ground from the band to the footer. */
.esg-competition-wrapper .esg-about { background: transparent !important; }