/* 城市活动页 events/<id>/:site.json 的 events.promos 一场一页,内容由 tools/sync.js 生成(@promo-page)。
   上半截深色:左边名称、日期地点、报名(二维码 + 在线报名),右边海报(点开看大图),底下铺一层海报糊成的光;
   下面白底「About the event」、浅灰「Past GCSx events」(同系列往届的回顾文章,没有就不出)。
   活动日期一过,js/site.js 按 data-until 收起报名、按 data-after 露出「已结束」一行。 */

/* ---------- 上半截 ---------- */
.event-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--header-h) + 44px) 88px;
  color: var(--paper);
  background: rgb(var(--night));
}
/* 海报糊成的光,垫在海报后面:每一场的页面自带自己海报的颜色。
   海报那一栏的中心在页面中线右边 370px(1200 版心、460 宽的海报栏) */
.event-hero__ambient {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: calc(50% + 370px);
  width: 900px;
  height: 900px;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
  filter: blur(90px) saturate(1.25);
  opacity: 0.5;
  pointer-events: none;
}
.event-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  column-gap: 80px;
  align-items: center;
}

.event-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  color: rgb(255 255 255 / 0.72);
  transition: color 0.2s;
}
.event-hero__back::before { content: "\2190"; content: "\2190" / ""; transition: transform 0.2s; }
.event-hero__kicker {
  margin-top: 40px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.event-hero__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(40px, calc(4.17 * var(--vw)), 60px);
  line-height: 1.1;
  font-weight: 700;
}

.event-facts { margin: 26px 0 0; padding: 0; list-style: none; }
.event-facts li { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; line-height: 1.5; color: rgb(255 255 255 / 0.88); }
.event-facts li + li { margin-top: 8px; }
.event-facts__icon { flex: none; width: 20px; height: 20px; margin-top: 3.5px; color: var(--accent); }

/* 报名:二维码 + 怎么扫 + 在线报名(二维码里读出来的同一个网址)。id="register",只能扫码的活动从首页跳到这里 */
.event-reg {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  grid-template-areas: "qr how" "qr btn";
  column-gap: 24px;
  row-gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin-top: 36px;
  padding: 16px 28px 16px 16px;
  background: rgb(255 255 255 / 0.07);
  border-left: 3px solid var(--accent);
}
.event-reg--scan-only { grid-template-areas: "qr how"; align-items: center; }
.event-reg__qr { grid-area: qr; align-self: center; width: 136px; height: 136px; background: var(--paper); }
.event-reg__how { grid-area: how; align-self: end; }
.event-reg--scan-only .event-reg__how { align-self: center; }
.event-reg__scan {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.event-reg__hint { margin-top: 4px; font-size: 16px; line-height: 1.5; color: rgb(255 255 255 / 0.72); }
.event-reg__hint--phone { display: none; }
.event-reg__btn {
  grid-area: btn;
  justify-self: start;
  align-self: start;
  padding: 12px 22px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  text-decoration: none;
  color: rgb(var(--night));
  background: var(--accent);
  transition: background 0.2s;
}
.event-reg__btn::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: 8px; transition: transform 0.2s; }

/* 网站上直接报名的活动(site.json 的 registration):没有二维码,一个按钮跳到下面的报名区,另有一条去合作签约区 */
.event-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 36px; }
.event-cta .event-reg__btn { padding: 15px 28px; font-size: 17px; }
.event-cta__link {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.event-cta__note { flex-basis: 100%; font-size: 16px; line-height: 1.5; color: rgb(255 255 255 / 0.72); }

/* 活动过后:报名那块收起,换成这一行(有回顾文章就链过去,没有就回 Events 页) */
.event-ended {
  max-width: 560px;
  margin-top: 36px;
  padding: 14px 20px;
  font-size: 18px;
  line-height: 1.5;
  background: rgb(255 255 255 / 0.07);
  border-left: 3px solid rgb(255 255 255 / 0.45);
}
.event-ended a {
  color: var(--paper);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* 海报:点开看大图(弹层在 js/site.js);特别长的长图只露上面一截。「看大图」一行在海报下面 */
.event-hero__poster { display: block; text-decoration: none; }
.event-hero__poster img {
  width: 100%;
  max-height: 640px;
  object-fit: cover;
  object-position: top;
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.08);
}
.event-hero__zoom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.3;
  color: rgb(255 255 255 / 0.72);
  transition: color 0.2s;
}
.event-hero__zoom svg { flex: none; width: 16px; height: 16px; }

.event-hero a:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

/* ---------- 介绍 ---------- */
.event-kicker {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--map-ink);
}
.event-about { padding-block: 88px 96px; }
.event-about__inner { display: grid; grid-template-columns: 240px minmax(0, 720px); column-gap: 60px; }
.event-about__inner .event-kicker { padding-top: 6px; }
.event-about__text p { font-size: 18px; line-height: 1.7; }
.event-about__text p + p { margin-top: 18px; }

/* ---------- 同系列往届 ---------- */
.event-more { padding-block: 72px 96px; background: var(--mist); }
.event-more__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.event-more__all { flex: none; font-size: 16px; line-height: 1.4; font-weight: 700; text-decoration: none; transition: color 0.2s; }
.event-more__all::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: 8px; transition: transform 0.2s; }
.event-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.event-more__card a { display: block; height: 100%; text-decoration: none; background: var(--paper); }
.event-more__card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.event-more__body { display: block; padding: 18px 22px 24px; }
.event-more__when { display: block; font-size: 16px; line-height: 1.4; color: var(--map-muted); }
.event-more__name { display: block; margin-top: 6px; font-size: 20px; line-height: 1.35; font-weight: 700; transition: color 0.2s; }
.event-more a:focus-visible { outline: 2px solid var(--map-ink); outline-offset: 3px; }

@media (hover: hover) {
  .event-hero__back:hover { color: var(--paper); }
  .event-hero__back:hover::before { transform: translateX(-3px); }
  .event-hero__poster:hover .event-hero__zoom { color: var(--paper); }
  .event-reg__btn:hover { background: var(--accent-bright); }
  .event-reg__btn:hover::after { transform: translateX(3px); }
  .event-cta__link:hover { text-decoration-color: var(--paper); }
  .event-more__card a:hover .event-more__name,
  .event-more__all:hover { color: var(--map-ink); }
  .event-more__all:hover::after { transform: translateX(3px); }
}

/* ---------- 窄屏:海报在上,名称、日期地点、报名接在下面 ----------
   手机扫不了自己屏幕上的码:有报名网址就只留一个整宽按钮,没有就留码并教他存图再扫 */
@media (max-width: 767px) {
  .event-hero { padding-block: calc(var(--header-h) + 8px) 56px; }
  .event-hero__ambient { top: 34%; left: 50%; width: calc(150 * var(--vw)); height: calc(150 * var(--vw)); }
  .event-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "back" "poster" "kicker" "title" "facts" "reg" "ended";
  }
  .event-hero__text { display: contents; }
  .event-hero__back { grid-area: back; justify-self: start; }
  .event-hero__poster { grid-area: poster; margin-top: 20px; }
  .event-hero__kicker { grid-area: kicker; margin-top: 28px; font-size: 18px; }
  .event-hero__title { grid-area: title; margin-top: 10px; font-size: 36px; }
  .event-facts { grid-area: facts; margin-top: 18px; }
  .event-facts li { font-size: 17px; }
  .event-reg,
  .event-cta { grid-area: reg; margin-top: 28px; }
  .event-cta .event-reg__btn { flex: 1 1 100%; }
  .event-ended { grid-area: ended; margin-top: 28px; }
  .event-reg:not(.event-reg--scan-only) { display: block; width: auto; padding: 0; background: none; border: 0; }
  .event-reg:not(.event-reg--scan-only) :is(.event-reg__qr, .event-reg__how) { display: none; }
  .event-reg__btn { display: block; justify-self: stretch; padding: 15px 18px; text-align: center; font-size: 18px; } /* 块级里 justify-self:start 也会让它缩成内容宽 */
  .event-reg--scan-only { grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; width: auto; padding-right: 16px; }
  .event-reg--scan-only .event-reg__qr { width: 112px; height: 112px; }
  .event-reg__scan { font-size: 19px; }
  .event-reg__hint--desk { display: none; }
  .event-reg__hint--phone { display: block; }

  .event-about { padding-block: 56px 64px; }
  .event-about__inner { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .event-about__inner .event-kicker { padding-top: 0; }
  .event-about__text p { font-size: 17px; }

  .event-more { padding-block: 56px 64px; }
  .event-more__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .event-more__card a { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: stretch; }
  .event-more__card img { height: 100%; min-height: 80px; aspect-ratio: auto; }
  .event-more__body { align-self: center; padding: 12px 16px; }
  .event-more__name { font-size: 17px; }
}

/* 收起靠 hidden 属性,上面几条 display 规则会把它顶掉(优先级一样时后写的赢),放在最后单写 */
.event-hero [hidden] { display: none; }