/* HKSTP "AI for All" Events — rebuilt from Figma (desktop 1440 / mobile 375) */

:root {
  --grey1: #1f1f1f;
  --grey3: #bababa;
  --orange: #ff6e10;
  --blue: #035ce1;
  --border: #eaeaea;
  --border2: #343434;
  --black-bg-line: #474747;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* sticky header is 94px tall — offset every anchor jump so the
     section title isn't hidden underneath it */
  scroll-padding-top: 110px;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--grey1);
  background: #fff;
}

img { display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }

.page {
  width: 100%;
}

/* ---- section / container framework (page gutters with vertical rules) ---- */
.section {
  padding: 0 30px;
  border-bottom: 1px solid var(--border);
}
.container {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

/* ---------------- core nav ---------------- */
.core-nav {
  height: 94px;
  display: flex;
  align-items: center;
  padding: 16px 30px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  /* sticky on every page, per the corp branding guideline (UAT) */
  position: sticky;
  top: 0;
  z-index: 1000;
}
.core-nav img { height: 42px; width: auto; }
.logo-m { display: none; }

/* ---------------- hero ---------------- */
.hero-row { display: flex; align-items: stretch; }

.hero-side {
  width: 420px;
  flex-shrink: 0;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.hero-side h1 {
  font-size: 44px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.88px;
}
.hero-side .sub {
  margin-top: 12px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  font-weight: 400;
}
.anchors { display: flex; flex-direction: column; gap: 16px; }
.anchor {
  display: flex;
  align-items: center;
  gap: 14px;
}
.anchor .num {
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  color: var(--grey3);
}
.anchor .lbl {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.42px;
  text-transform: uppercase;
  color: var(--grey1);
}
.anchor .lbl img {
  width: 22px;
  height: 22px;
  transform: rotate(90deg);
}

.hero-main {
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-bottom: 40px;
}
.hero-img {
  width: 100%;
  aspect-ratio: 2598 / 1144;
  object-fit: cover;
  object-position: top;
}
.hero-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.hero-content h2 {
  font-size: 44px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -1.32px;
}
.hero-content p {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
}

/* primary CTA (blue arrow circle + label) */
.cta {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cta img { width: 40px; height: 40px; }
.cta span {
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  color: var(--grey1);
}

/* ---------------- filter bar ---------------- */
.filter .container { border-color: var(--border); }
.tabs {
  background: var(--grey1);
  height: 60px;
  padding: 20px 40px 0;
  border-top: 1px solid var(--black-bg-line);
  border-bottom: 1px solid var(--black-bg-line);
  display: flex;
  gap: 40px;
}
.tab {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.tab span {
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  color: #fff;
}
.tab .bar { height: 3px; background: var(--orange); }

.filter-row { display: flex; }
.dropdown[hidden] { display: none !important; }
.dropdown {
  /* 344px wide, but allowed to shrink on narrow screens (e.g. iPad portrait)
     so the filter bar never overflows the page width (UAT) */
  flex: 0 1 344px;
  min-width: 0;
  background: var(--grey1);
  border-bottom: 1px solid #666;
  border-right: 1px solid var(--black-bg-line);
  padding: 14px 40px;
  position: relative;
  text-align: left;
}
.dropdown .lbl {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  color: var(--grey3);
  opacity: 0.5;
  font-weight: 400;
}
.dropdown .val {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.48px;
  color: #fff;
  /* multi-select can pick several values; long lists shorten with "..." */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown > img {
  position: absolute;
  right: 40px;
  top: 8px;
  width: 36px;
  height: 36px;
}
.search {
  flex: 1;
  min-width: 0;
  background: var(--grey1);
  border-bottom: 1px solid #666;
  padding: 27px 40px;
  position: relative;
  display: flex;
  align-items: center;
}
.search input {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.36px;
  color: #fff;
}
.search input::placeholder { color: #fff; opacity: 0.5; }
.search > img {
  position: absolute;
  right: 20px;
  width: 52px;
  height: 52px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}
.filter-m { display: none; }

/* ---------------- generic content section ---------------- */
.content-section .container { padding: 80px 0; }
.sec-header {
  padding: 0 40px;
  margin-bottom: 40px;
}
.sec-header h2 {
  font-size: 44px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.88px;
}

/* meta rows (date / tag / fee / audience) */
.meta { display: flex; flex-direction: column; gap: 8px; }
.meta-row { display: flex; align-items: flex-start; gap: 8px; }
.ico24 {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ico24 img { max-width: 18px; max-height: 18px; }
.ico24 img.full { max-width: 24px; max-height: 24px; }
.meta-row p {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
}

/* ---------------- upcoming events (wide horizontal cards) ---------------- */
.card-h {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  min-height: 312px;
}
.card-h + .card-h { border-top: none; }
.card-h .pic {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  /* the cell is never shorter than the banner's own 16:9 shape, so the image
     always spans the full width — blurred side bands can't appear (UAT) */
  aspect-ratio: 16 / 9;
  background-color: #fff;
  /* background-image is set inline per card: a blown-up blurred copy of the
     same banner (::before below) fills whatever the 16:9 banner can't reach */
  background-size: cover;
  background-position: center;
}
.card-h .pic::before {
  content: "";
  position: absolute;
  inset: -24px; /* oversized so the blur has no transparent edges */
  background: inherit;
  filter: blur(18px);
}
/* the full banner is always shown, never cropped (UAT): contain letterboxes
   it when the cell's shape drifts from 16:9, and the blurred copy behind it
   fills those bands so nothing reads as white spacing (UAT) */
.card-h .pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.card-h .body {
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.card-h h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.48px;
}
.card-h .desc {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-h .meta { padding-bottom: 24px; }

/* investor card artwork: bottom-anchored crop, as in the Figma overlay */
.pic .crop {
  object-position: center bottom !important;
}

/* ---------------- past events grid ---------------- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.card-v {
  border: 1px solid var(--border);
  margin-right: -1px;
  margin-bottom: -1px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* display:flex above beats the browser's built-in [hidden] rule, so restate it */
.card-v[hidden] { display: none; }
.card-v .pic {
  width: 100%;
  aspect-ratio: 160 / 90;
  position: relative;
  overflow: hidden;
}
.card-v .pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-v .body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
}
/* Read more sits at the card bottom, so it lines up across the row even
   when a long date range wraps the meta onto an extra line */
.card-v .body .cta { margin-top: auto; }
.card-v h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.48px;
  /* titles cap at 3 lines with "..." and always occupy 3 lines of height,
     so the date/tag rows and Read more align across cards */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 84px;
}
/* past events pagination (follows hkstp.org news-and-events) */
.card-v[data-fhide] { display: none !important; }
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 48px 0;
  border-bottom: 1px solid var(--border);
}
.pagination[hidden] { display: none; }
.pg-prev,
.pg-next {
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 999px;
  background: var(--blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-prev img,
.pg-next img { width: 22px; height: 22px; }
.pg-prev img { transform: rotate(180deg); }
.pg-prev:disabled,
.pg-next:disabled { opacity: .3; cursor: default; }
.pg-nums { display: flex; align-items: center; gap: 24px; }
.pg-nums button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--grey1);
}
.pg-nums button.active { color: var(--blue); }

/* ---------------- event highlights ---------------- */
.highlight {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  min-height: 480px;
  overflow: hidden;
}
.highlight + .highlight { border-top: none; }
.highlight .txt {
  /* basis 50% (not 0) so the padding doesn't widen this column — keeps the
     text/image split exactly at the middle, like hkstp.org (UAT) */
  flex: 1 1 50%;
  min-width: 0;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
/* 32px per the corp site's featured-item titles (UAT: follow branding sizes);
   section headers stay 44px, matching hkstp.org's own hierarchy */
.highlight .txt h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.64px;
}
.highlight .txt .desc {
  margin-top: 20px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
}
.highlight .pic {
  flex: 1 1 50%;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.highlight .pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.highlight .pic.right { border-left: 1px solid var(--border); }
.highlight .pic.left { border-right: 1px solid var(--border); }

/* ---------------- learning pathway ---------------- */
.pathway-row { display: flex; align-items: stretch; }
.pathway-side {
  width: 420px;
  flex-shrink: 0;
  padding: 60px 40px;
}
.pathway-side h2 {
  font-size: 44px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.88px;
}
.pathway-main {
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* keep the infographic's own aspect ratio, capped and centred */
.pathway-main img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
}

/* ---------------- partner logos ---------------- */
.partners { display: flex; }
.partners .cell {
  flex: 1;
  min-width: 0;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}
.partners .cell > img { width: 210px; max-width: 100%; height: auto; }

/* HKSTP organiser logo: photo base + white masks + colour svg, as in Figma */
.hkstp-mark {
  position: relative;
  width: 210px;
  max-width: 100%;
  /* height follows the width so the %-positioned layers never slip when
     max-width kicks in on narrow screens */
  aspect-ratio: 210 / 104.8;
}
.hkstp-mark .base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hkstp-mark .mask1 { position: absolute; background: #fff; left: 8.73%; top: 34.1%; width: 83.86%; height: 53.54%; }
.hkstp-mark .mask2 { position: absolute; background: #fff; left: 69.4%; top: 13.07%; width: 23.19%; height: 39.93%; }
.hkstp-mark .logo { position: absolute; left: 6.17%; top: 1.77%; width: 87.65%; height: 96.66%; }

/* ---------------- spacer ---------------- */
.spacer .container { height: 80px; }

/* ---------------- footer ---------------- */
.footer {
  position: relative;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #000 0%, #080707 25%, #100f0f 50%, #201d1d 100%);
  color: #fff;
}
.footer .section { border-bottom: none; }
/* full-width grey divider between the columns and the bottom links, per hkstp.org */
.footer .section:first-child { border-bottom: 1px solid var(--border2); }
.footer .container { border-color: var(--border2); }
.footer-cols { display: flex; align-items: stretch; }
.footer-cols .col {
  flex: 1;
  min-width: 0;
  border-right: 1px solid var(--border2);
}
.footer-cols .col:first-child { border-left: none; }
.f-brand {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.f-brand .logo { height: 42px; width: 171px; }
.f-nav {
  display: flex;
  gap: 29px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.42px;
}
.f-social {
  display: flex;
  align-items: center;
  /* icons wrap instead of touching the column rules at narrow widths (UAT) */
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 14px;
  margin-top: 24px;
  padding-right: 16px;
}
.f-social img { height: 17px; width: auto; transition: filter .2s; }
/* the 小紅書 wordmark is much wider than the other glyphs, so cap it lower */
.f-social .soc-xhs img { height: 11px; }
/* hover turns the white glyph HKSTP orange (#FF6E10), approximated via filter */
.f-social a:hover img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(60%) saturate(4604%) hue-rotate(2deg) brightness(103%) contrast(101%);
}
.f-title {
  padding: 40px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.32px;
  text-transform: capitalize;
}
.f-contact {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.f-contact .hd {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.28px;
  opacity: 0.5;
}
.f-row { display: flex; gap: 12px; align-items: flex-start; }
.f-row img { width: 20px; height: 20px; flex-shrink: 0; }
.f-row p {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  max-width: 233px;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 40px;
  border-bottom: 1px solid var(--border2);
}
.f-links {
  display: flex;
  gap: 40px;
  font-size: 14px;
  text-transform: capitalize;
}
.f-copy {
  font-size: 11px;
}
/* floating back-to-top button: hidden until the page is scrolled down,
   then fades in fixed at the bottom-right (assets/js/events.js toggles .show) */
.footer-deco {
  position: fixed;
  right: 38px;
  bottom: 74px;
  width: 50px;
  height: 50px;
  transform: rotate(90deg);
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.footer-deco.show {
  opacity: 1;
  pointer-events: auto;
}

/* ======================================================================
   MOBILE (follows event_m frame, 375 design)
   ====================================================================== */
@media (max-width: 899px) {
  html { scroll-padding-top: 84px; } /* 68px header + breathing room */

  .section { padding: 0 16px; }

  .core-nav { height: 68px; padding: 0 16px; }
  .logo-d { display: none; }
  .logo-m { display: block; height: 36px; width: auto; }

  /* hero stacks */
  .hero-row { flex-direction: column; }
  .hero-side {
    width: 100%;
    border: 1px solid var(--border);
    border-top: none;
    padding: 24px 16px;
    gap: 16px;
  }
  .hero-side h1 { font-size: 28px; line-height: 30px; letter-spacing: -0.56px; }
  .hero-side .sub { margin-top: 0; }
  .anchor { gap: 16px; }
  .anchor .lbl { gap: 16px; }
  .anchor .lbl img { width: 20px; height: 20px; }
  .hero-main { border-left: none; padding-bottom: 0; }
  .hero-content {
    border: 1px solid var(--border);
    border-top: none;
    padding: 24px 16px 60px;
    gap: 16px;
  }
  .hero-content h2 { font-size: 24px; line-height: 28px; letter-spacing: -0.48px; }

  /* filter: tabs + search only */
  .filter-d { display: none; }
  .filter-m { display: block; }
  .tabs { padding: 20px 16px 0; height: 60px; gap: 24px; }
  .search-m-row { display: flex; align-items: stretch; }
  .search-m {
    flex: 1;
    min-width: 0;
    background: var(--grey1);
    border-bottom: 1px solid var(--black-bg-line);
    padding: 18px 16px;
    position: relative;
    display: flex;
    align-items: center;
  }
  .search-m input {
    background: none;
    border: none;
    outline: none;
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: #fff;
    padding-right: 48px;
  }
  .search-m input::placeholder { color: #fff; opacity: 0.5; }
  .search-m > img {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
  }
  .filter-toggle {
    width: 61px;
    flex-shrink: 0;
    background: var(--grey1);
    border-bottom: 1px solid var(--black-bg-line);
    padding: 0;
  }
  .filter-toggle img { width: 100%; height: 100%; object-fit: cover; }

  /* section headers become bordered boxes */
  .content-section .container { padding: 0 0 40px; }
  .sec-header {
    border: 1px solid var(--border);
    border-bottom: none; /* per Figma: no separator above "No Event Found." (UAT) */
    padding: 60px 16px 32px;
    margin-bottom: 0;
    width: 100%;
  }
  .sec-header h2 { font-size: 28px; line-height: 30px; letter-spacing: -0.56px; }

  /* upcoming cards stack */
  .card-h { flex-direction: column; border: none; min-height: 0; }
  .card-h + .card-h { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .card-h .pic {
    flex: none;
    width: 100%;
    aspect-ratio: 515.56 / 290;
    border: 1px solid var(--border);
  }
  .card-h .body { border-left: none; padding: 24px 16px; }

  /* past events single column */
  .event-grid { grid-template-columns: 1fr; }
  .card-v { margin-right: 0; }
  .card-v .body { padding: 24px; }
  .pagination { gap: 20px; padding: 32px 0; }
  .pg-prev, .pg-next { width: 48px; height: 48px; }
  .pg-nums { gap: 16px; }

  /* highlights stack */
  .highlight { flex-direction: column; min-height: 0; }
  .highlight .pic {
    flex: none;
    width: 100%;
    aspect-ratio: 160 / 90;
    order: -1;
    border: 1px solid var(--border);
  }
  .highlight .pic.right, .highlight .pic.left { border-left: none; border-right: none; border-bottom: 1px solid var(--border); }
  .highlight .txt { padding: 24px 16px; }
  .highlight .txt h3 { font-size: 24px; line-height: 28px; letter-spacing: -0.48px; }

  /* learning pathway stacks */
  .pathway-row { flex-direction: column; }
  .pathway-side {
    width: 100%;
    border: 1px solid var(--border);
    /* same rhythm as .sec-header so Highlights + Pathway titles align (UAT) */
    padding: 60px 16px 32px;
  }
  .pathway-side h2 { font-size: 28px; line-height: 30px; letter-spacing: -0.56px; }
  .pathway-main { border-left: none; padding: 16px; }

  /* partners: HKSTP on its own row, 3 logos below */
  .partners-d { display: none; }
  .partners-m1 .cell, .partners-m2 .cell { height: 64px; padding: 0 4px; }
  .partners-m1 { display: flex; }
  .partners-m2 { display: flex; }
  .partners-m2 .cell > img { width: 100%; height: auto; max-height: 56px; object-fit: contain; }
  .hkstp-mark { width: 105.7px; }

  .spacer .container { height: 40px; }

  /* footer stacks; no divider lines on mobile, per hkstp.org (UAT) */
  .footer-cols { flex-direction: column; }
  .footer-cols .col { border-right: none; border-bottom: none; }
  .footer .section:first-child { border-bottom: none; }
  .f-brand { padding: 24px 16px; gap: 40px; }
  .f-nav { gap: 0; justify-content: space-between; max-width: 220px; }
  .f-title { padding: 24px 16px; border-bottom: none; }
  .f-contact { padding: 24px 16px; border-bottom: none; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 16px;
  }
  .f-links { flex-direction: column; gap: 12px; }
  .footer-deco { right: 24px; bottom: 17px; }
}

/* desktop-only helpers */
@media (min-width: 900px) {
  .partners-m1, .partners-m2, .partners-m2-wrap { display: none; }
}
@media (max-width: 899px) {
  .only-d { display: none; }
}

/* ======================================================================
   EVENT DETAIL PAGE
   ====================================================================== */

/* mobile-nav search icon (visible on event_detail mobile only) */
.nav-search { display: none; }

/* breadcrumb */
.crumb-wrap { padding: 8px 0; }
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 17px 20px;
}
.crumbs a {
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  color: var(--blue);
  flex-shrink: 0;
}
.crumbs .slash { width: 7px; flex-shrink: 0; }
.crumbs .here {
  font-size: 12px;
  line-height: 14px;
  color: var(--grey1);
  min-width: 0;
}

/* hero split */
.detail-row { display: flex; align-items: flex-start; }
.detail-side {
  width: 420px;
  flex-shrink: 0;
  /* corp-style sticky sidebar: fills the viewport below the sticky nav, so the
     share block stays pinned at the bottom while the right side scrolls (UAT);
     min-height lets it grow instead of clipping on short screens.
     the share block itself is sticky (bottom: 60px = this padding), so it sits
     at the exact same viewport spot before and after this bar locks in (UAT) */
  min-height: calc(100vh - 94px);
  padding: 60px 40px;
  /* no border-bottom: the right column is usually taller, and the sidebar's
     edge would show up as a stray section break mid-page (UAT) */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  position: sticky;
  top: 94px;
}
.detail-title { display: flex; flex-direction: column; gap: 36px; }
.detail-head { display: flex; flex-direction: column; gap: 24px; }
.tag-date { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.tag-pill {
  background: var(--blue);
  border-radius: 1000px;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: #fff;
}
.tag-date .date { font-size: 14px; line-height: 21px; color: var(--grey1); }
.detail-side h1 {
  /* corp site event detail title scale: 28px up to 32px on wide screens (UAT) */
  font-size: clamp(28px, 18.154px + 0.9615vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--grey1);
}
.detail-meta { display: flex; flex-direction: column; gap: 16px; }
.detail-meta .row { display: flex; align-items: center; gap: 12px; }
.meta-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.meta-ico img { width: 16px; height: 16px; }
.meta-ico img.lg { width: 24px; height: 24px; }
.detail-meta .row p {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--grey1);
}

/* share block (HKSTP-style: the round button expands into a black pill of
   platform icons, and itself turns into a white close button) */
.share-area {
  /* stretches from below the title/meta block to the sidebar's bottom; the
     share button sticks inside it only, so with a long title it can sit
     below the meta rows but never ride up over them (UAT).
     -36px lets the sticky button borrow most of the 48px gap above, so its
     pinned spot stays reachable before the sidebar locks in (12px min gap) */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: -36px;
}
.share {
  /* sticky inside the sidebar: 60px matches the sidebar's bottom padding, so
     the button never shifts while the page scrolls (UAT) */
  position: sticky;
  bottom: 60px;
}
.share-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--grey1);
  border-radius: 999px;
  background: var(--grey1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.share-toggle .glyph-share { display: block; width: 17px; height: 18px; }
.share-toggle .glyph-close {
  display: none;
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
  color: var(--grey1);
}
.share-icons.open .share-toggle {
  background: #fff;
  border-color: var(--border);
  border-radius: 12px;
}
.share-icons.open .share-toggle .glyph-share { display: none; }
.share-icons.open .share-toggle .glyph-close { display: block; }
.share-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  background: var(--grey1);
  border-radius: 999px;
}
.share-menu[hidden] { display: none; }
.share-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.share-menu img { display: block; width: 30px; height: 30px; }
.share-menu .share-ig img { width: 14px; height: 14px; margin: 0 4px; }
.share p { font-size: 14px; line-height: 18px; color: var(--grey1); }
.share-tip {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 8px;
  z-index: 30; /* stays above the following section instead of being cut (UAT) */
  background: var(--grey1);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.share-tip.on { opacity: 1; }
.share-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

/* WeChat share: QR code overlay */
.wechat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.wechat-overlay.on { display: flex; }
.qr-box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 36px 32px 28px;
  max-width: 300px;
  text-align: center;
}
.qr-close {
  position: absolute;
  top: 6px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--grey1);
}
.qr-code {
  display: flex;
  justify-content: center;
  word-break: break-all;
  font-size: 12px;
  color: var(--grey1);
}
.qr-code img, .qr-code canvas { width: 180px; height: 180px; }
.qr-box p {
  margin-top: 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--grey1);
}

/* right column */
.detail-main {
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-bottom: 80px;
}
.detail-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 160 / 90;
  background: linear-gradient(to bottom, #193480 9.589%, #0f2c5b 91.74%);
  overflow: hidden;
}
.detail-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detail-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--grey1);
}
.detail-content h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.48px;
}
.detail-content ul { margin: 0; padding-left: 24px; }
.detail-content li, .detail-content p {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
}
/* agenda table, styled like the corp site's event pages (UAT) */
.detail-content table.agenda {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.detail-content table.agenda th,
.detail-content table.agenda td {
  border: 1px solid #ccc;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.detail-content table.agenda th {
  background: #000;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.detail-content table.agenda td:first-child { white-space: nowrap; font-weight: 600; }
.detail-content table.agenda td p + p { margin-top: 4px; }
.detail-poster {
  width: 100%;
  aspect-ratio: 842 / 1674;
  object-fit: cover;
}
.detail-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  /* narrow desktop widths: the second button drops to the next line
     instead of overlapping its sibling (UAT) */
  flex-wrap: wrap;
}
.pill {
  background: var(--blue);
  border-radius: 1000px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 11px 11px 24px;
}
.pill span {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.42px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.pill img { width: 24px; height: 24px; display: block; }
/* min-width (not a fixed width) so longer labels like DOWNLOAD MATERIALS
   still fit inside their own pill (UAT) */
.pill.fixed { min-width: 180px; justify-content: space-between; box-sizing: border-box; }

@media (max-width: 899px) {
  .nav-search { display: block; width: 28px; height: 28px; }

  .crumb-wrap { padding: 0; }

  .detail-row { flex-direction: column; }
  .detail-side {
    width: 100%;
    height: auto;
    min-height: 0; /* no stretching: the share block follows the content (UAT) */
    position: static;
    border: 1px solid var(--border);
    padding: 24px 16px;
    gap: 40px;
  }
  .detail-title { gap: 22px; }
  /* mobile sidebar is not sticky, so the share block just flows normally */
  .share { position: relative; bottom: auto; }
  .share-area { margin-top: 0; }
  .detail-main { border-left: none; padding-bottom: 0; }
  .detail-content {
    border: 1px solid var(--border);
    padding: 24px 16px;
    gap: 28px;
  }
  .detail-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .detail-wrap { padding-bottom: 40px; }
}

/* ---------------- filter dropdown menus (assets/js/filters.js) ---------------- */
.dropdown[data-filter] { cursor: pointer; }
.dropdown > img { transition: transform 0.2s; }
.dropdown.open > img { transform: rotate(180deg); }
.dropdown .menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--grey1);
  border: 1px solid var(--black-bg-line);
  border-top: 1px solid #666;
  max-height: 420px;
  overflow: auto;
}
.dropdown.open .menu { display: block; }
.dropdown .menu .opt {
  padding: 14px 40px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  color: #fff;
}
.dropdown .menu .opt:hover { background: var(--orange); }
.dropdown .menu .opt.active { color: var(--orange); font-weight: 700; }
.dropdown .menu .opt.active:hover { color: #fff; }
.no-match {
  padding: 40px;
  font-size: 18px;
  font-weight: 500;
  color: var(--grey1);
}
@media (max-width: 899px) {
  .filter-m-panel .dropdown {
    width: 100%;
    background: var(--grey1);
    border-bottom: 1px solid var(--black-bg-line);
    padding: 14px 16px;
    position: relative;
    text-align: left;
  }
  .filter-m-panel .dropdown .lbl {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.28px;
    color: var(--grey3);
    opacity: 0.5;
    font-weight: 400;
  }
  .filter-m-panel .dropdown .val {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.4px;
    color: #fff;
  }
  .filter-m-panel .dropdown > img {
    position: absolute;
    right: 16px;
    top: 14px;
    width: 36px;
    height: 36px;
  }
  .dropdown .menu .opt { padding: 14px 16px; }
  .no-match { padding: 32px 16px; }
}

/* ?lang=tc / ?lang=sc notice bar: fixed orange announcement at the bottom,
   like the hkstp.org homepage Announcement */
.lang-bar {
  position: sticky;
  top: 0;
  z-index: 1010;
  background: var(--orange);
  color: #fff;
  padding: 22px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lang-bar[hidden] { display: none !important; }
.lang-bar-ico { width: 20px; height: 20px; flex-shrink: 0; }
.lang-bar p { flex: 1; }
.lang-bar-close {
  background: none;
  border: 0;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.lang-bar p { margin: 0; font-size: 15px; }
@media (max-width: 899px) {
  .lang-bar { padding: 16px 20px; }
}