/* ==========================================================================
   Best Working Paper / Publication Award Page
   Color palette derived from the award logos
   All selectors scoped under .bwp-page to avoid WP/Elementor conflicts
   ========================================================================== */

/* ---------- Variables ---------- */
.bwp-page {
  --gold: #B5973A;
  --gold-light: #D4B84C;
  --gold-dark: #8B720A;
  --gold-bg: #FAF7F0;
  --gold-gradient: linear-gradient(135deg, #D4B84C 0%, #B5973A 50%, #8B720A 100%);
  --text: #333;
  --text-light: #666;
  --text-muted: #999;
  --border: #E5E0D5;
  --white: #fff;
  --gray-bg: #F7F6F3;
  --radius: 8px;
  --shadow: 0 2px 12px rgba(0,0,0,.08);
  --transition: .3s ease;
}

/* ---------- Base ---------- */
#bwp-container {
  background-color: #F4F4F4 !important;
  box-shadow: -9999px 0 0 9999px #F4F4F4, 9999px 0 0 9999px #F4F4F4 !important;
}

.bwp-page {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text);
  line-height: 1.7;
  font-size: 15px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.bwp-page *,
.bwp-page *::before,
.bwp-page *::after {
  box-sizing: border-box;
}

.bwp-page a {
  color: var(--gold-dark);
  text-decoration: none;
  transition: color var(--transition);
}

.bwp-page a:hover {
  color: var(--gold);
  text-decoration: underline;
}

/* ---------- Hero Banner ---------- */
.bwp-hero {
  position: relative;
  overflow: hidden;
  background: url('https://hkujcesgri.hku.hk/wp-content/uploads/2026/03/shutterstock_2161863413_expanded.webp') center/cover no-repeat;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-bottom: 10px !important;
  margin-top: 0 !important;
  display: flex;
  justify-content: center;
}

.bwp-hero__inner {
  width: 100%;
  max-width: 1200px;
  padding: 60px 20px 40px;
}

.bwp-hero__title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold-dark);
  margin: 0;
  text-transform: none;
  text-align: left;
}

/* ---------- Award Logos ---------- */
.bwp-logos {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 30px 0 40px;
  flex-wrap: wrap;
}

.bwp-logos__card {
  background: var(--white);
  border-radius: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  padding: 2px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}

.bwp-logos__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.2) !important;
}

.bwp-logos__card img {
  height: 200px;
  width: auto;
  object-fit: contain;
}

/* ---------- Section Divider ---------- */
.bwp-divider {
  border: none !important;
  height: 1.5px !important;
  background: #B5973A !important;
  margin: 30px 0 !important;
}

/* ---------- Section Logo (no card) ---------- */
.bwp-section-logo {
  text-align: center !important;
  padding: 20px 0;
  scroll-margin-top: 80px;
}

.bwp-section-logo img {
  height: 200px;
  width: auto;
  object-fit: contain;
  display: inline-block !important;
  margin: 0 auto !important;
}

/* ---------- Section Headings ---------- */
.bwp-section-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--gold-dark);
  text-align: left;
  margin: 0 0 40px;
  letter-spacing: 1px;
}

.bwp-section-title::after {
  content: none;
  display: none;
  width: 60px;
  height: 2px;
  background: var(--gold);
  margin: 12px auto 0;
}

/* ---------- Info Grid (About + Eligibility) ---------- */
.bwp-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 50px;
  border-bottom: none !important;
}

.bwp-info__col h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--gold-dark);
  margin: 0 0 16px;
  padding-bottom: 0;
  border-bottom: none;
}

.bwp-info__col p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}

.bwp-info__col ul {
  list-style-type: disc !important;
  padding-left: 20px !important;
  margin: 0 0 12px;
}

.bwp-info__col li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 10px;
}

.bwp-info__col a {
  word-break: break-all;
}

/* ---------- Prize Committee ---------- */
.bwp-committee {
  margin-bottom: 50px;
}

.bwp-committee__round {
  margin-bottom: 70px;
}

.bwp-committee__round-label {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0 0 30px !important;
  padding-left: 4px;
}

.bwp-committee__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 10px;
}

/* ---------- Committee Member Card ---------- */
.bwp-member {
  position: relative;
  text-align: center;
  background: var(--white) !important;
  padding: 28px 16px 24px;
  cursor: pointer;
  overflow: hidden;
  width: auto;
  aspect-ratio: 1 / 1.7;
  box-shadow: 5px 5px 16px rgba(0,0,0,.4) !important;
}

.bwp-member__photo-wrap {
  width: 160px;
  height: 160px;
  margin: 0 auto 12px;
  border-radius: 50% !important;
  padding: 0;
  background: none;
  overflow: hidden !important;
}

.bwp-member__photo {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
  border: 3px solid var(--white);
}

.bwp-member__name {
  font-size: 18px;
  font-weight: 700;
  color: #333 !important;
  margin: 0 0 6px;
  line-height: 1.3;
}

.bwp-member__desc {
  font-size: 12px;
  color: #333 !important;
  margin: 8px 0 0;
  line-height: 1.4;
  text-align: center;
}

.bwp-member__desc span {
  display: block;
  margin-bottom: 6px;
}

/* ---------- Member Overlay (hover) ---------- */
.bwp-member__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(181, 151, 58, 0.95);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 16px 14px;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 10;
  overflow-y: auto;
}

.bwp-member:hover .bwp-member__overlay {
  opacity: 1;
}

.bwp-member__overlay-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--white) !important;
  margin: 0 0 16px;
}

.bwp-member__overlay-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  width: 100%;
}

.bwp-link-item {
  display: block;
  line-height: 1.2;
}

.bwp-link-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--white) !important;
}

.bwp-member__overlay-links a {
  color: var(--white) !important;
  font-size: 14px;
  text-decoration: underline !important;
  word-break: break-all;
}

.bwp-member__overlay-links a:hover {
  opacity: 0.8;
}

.bwp-member__tooltip-links a {
  font-size: 12px;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bwp-member__tooltip-links a::before {
  content: '\2192';
}

/* ---------- Past Winners Section ---------- */
.bwp-winners {
  margin-bottom: 50px;
}

/* ---------- Accordion ---------- */
.bwp-accordion {
  margin-bottom: 24px;
}

.bwp-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 24px;
  cursor: pointer;
  margin-bottom: 0;
  transition: background var(--transition);
  user-select: none;
  box-shadow: 4px 4px 14px rgba(0,0,0,.15) !important;
}

.bwp-accordion__header:hover {
  background: #f9f9f9 !important;
}

.bwp-accordion__header-text {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0 !important;
}

.bwp-accordion__arrow {
  width: 24px;
  height: 24px;
  transition: transform var(--transition);
  color: #333;
}

.bwp-accordion__header.is-open .bwp-accordion__arrow {
  transform: rotate(180deg);
}

.bwp-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}

.bwp-accordion__body.is-open {
  max-height: 5000px;
}

.bwp-accordion__content {
  padding: 0 24px 24px;
  background: var(--white) !important;
  box-shadow: 4px 4px 14px rgba(0,0,0,.15) !important;
}

/* ---------- Winner / Runner-up Cards ---------- */
.bwp-winner-card {
  border: 2px solid var(--gold) !important;
  border-radius: 0 !important;
  padding: 0;
  margin-bottom: 24px;
  background: var(--white) !important;
  position: relative;
  overflow: hidden;
}

.bwp-winner-card--runnerup {
  border: 2px solid var(--gold) !important;
}

.bwp-winner-card__badge {
  display: block !important;
  background: var(--gold) !important;
  color: var(--white) !important;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 4px 20px;
  border-radius: 0 !important;
  margin-bottom: 0;
  text-transform: none;
  text-align: center;
}

.bwp-winner-card--runnerup .bwp-winner-card__badge {
  background: var(--white) !important;
  color: var(--gold) !important;
  border: none !important;
  border-bottom: 2px solid var(--gold) !important;
}

.bwp-winner-card__body {
  padding: 24px 28px 20px;
}

.bwp-winner-card__title {
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-dark);
  margin: 0 0 10px;
  line-height: 1.4;
}

.bwp-winner-card__authors {
  font-size: 20px;
  color: var(--text-light);
  margin: 0 0 12px !important;
  padding: 0 !important;
  line-height: 1.5;
}

.bwp-winner-card__link-wrap {
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.bwp-winner-card__link {
  font-size: 20px;
  color: #333 !important;
  font-weight: 700;
  word-break: break-all;
}

.bwp-winner-card__desc {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text);
  margin: 12px 0 30px !important;
  padding-top: 0;
  border-top: none !important;
}

/* Author thumbnails row inside winner card */
.bwp-winner-card__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 20px;
  border-top: none !important;
}

.bwp-thumb {
  text-align: center;
}

.bwp-thumb__photo {
  width: 160px;
  height: 160px;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: none;
  display: block;
  margin: 0 auto 6px;
}

.bwp-thumb__name {
  font-size: 18px;
  font-weight: 700;
  color: #333 !important;
  line-height: 1.3;
  display: block;
}

.bwp-thumb__title {
  font-size: 12px;
  color: #333 !important;
  line-height: 1.4;
  display: block;
  margin-top: 2px;
}

/* Runner-up cards grid */
.bwp-runnerup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* ---------- Link to previous round ---------- */
.bwp-past-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  color: var(--gold);
  font-weight: 500;
  padding: 10px 0;
}

.bwp-past-link:hover {
  color: var(--gold-dark);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .bwp-info {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .bwp-runnerup-grid {
    grid-template-columns: 1fr;
  }

  .bwp-hero__title {
    font-size: 24px;
  }

  .bwp-logos img {
    height: 90px;
  }

  .bwp-member__tooltip {
    display: none;
  }
}

@media (max-width: 600px) {
  .bwp-page {
    font-size: 14px;
    padding: 0 12px;
  }

  .bwp-hero {
    padding: 40px 10px 24px;
  }

  .bwp-hero__title {
    font-size: 20px;
    letter-spacing: 1px;
  }

  .bwp-logos {
    gap: 24px;
  }

  .bwp-logos img {
    height: 70px;
  }

  /* 🚨 TWO COLUMNS, NOT FOUR. Both grids are `repeat(4, 1fr)`, and `1fr` floors
     at the item's min-content width — so with .bwp-member pinned to 100px the
     four tracks demanded 4x100 + 3x20 = 460px inside a 299px container. The
     tracks simply grew: measured at 393px, members three and four ended at
     x=397 and x=517, i.e. entirely off the right of the screen, with no
     scrollbar because the ancestors clip. That is Rick's "Can't show all 4
     Price Committee (can't pull)" — there was nothing to pull.

     minmax(0, …) lets the tracks shrink, and the member becomes fluid with a
     ceiling instead of a fixed width, so two fit comfortably and the other two
     wrap to a second row. */
  .bwp-committee__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
    justify-items: center;
  }

  /* 🚨 The card is `aspect-ratio: 1 / 1.7` + `overflow: hidden` on the base rule.
     At two-up on a phone that makes it ~134x228, and the contents — 80px photo,
     name, role — need more than that, so the role line was being sliced. A card
     whose height is derived from its width cannot also be trusted to hold text
     that wraps differently at every width. Height goes back to the content here.

     The 110px cap this replaces was mine and it was wrong: the column is 133.5px,
     so it left 24px unused and squeezed "Zacharias Sautner" into breaking
     mid-word. */
  .bwp-member {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    padding: 18px 10px 16px;
  }

  /* Phlox sets word-break globally; without this the names hyphenate themselves
     into "Zacharia / s Sautner". */
  .bwp-member__name {
    font-size: 15px;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .bwp-member__desc {
    font-size: 11px;
  }

  /* Same blowout, same fix: the four award thumbnails were resolving to tracks
     that ran to x=386 inside a 159px box, which .bwp-winner-card then clipped —
     "Awardees photos are wried" in the same row of Rick's sheet. */
  .bwp-winner-card__thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .bwp-member__photo-wrap {
    width: 80px;
    height: 80px;
  }

  .bwp-winner-card {
    padding: 18px 16px 14px;
  }

  .bwp-winner-card__title {
    font-size: 16px;
  }

  .bwp-section-title {
    font-size: 22px;
  }
}