/* Events 页:活动卡片(标题 + 视频 + 自动滚动相册)、GCS X、城市。
   视频是「封面 + 点了才加载 YouTube」,相册跑马灯由 js/site.js 接管(data-marquee)。 */

.events-block { padding-block: 10px 11px; }
.next-up + .events-block { padding-top: 44px; } /* 「下一场」那条和下面的 LATEST EDITION 挨太近 */
.events-block--tour { padding-block: 5px 6px; }
.events-block--formats { padding-block: 115px 111px; }
.events-block--formats [role="tabpanel"] + [role="tabpanel"] { margin-top: 62px; }
/* 一个系列有好几届时包成一个面板(.formats__panel),面板里新的在上 */
.formats__panel > .event-card + .event-card { margin-top: 40px; }

/* ---------- 活动卡片 ---------- */
.event-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 545px;
  column-gap: 29px;
  row-gap: 21px;
  padding: 20px;
  border: 1px solid var(--line-soft);
}
/* 标签切换靠 hidden 属性收起面板,而 [hidden] 的 display:none 来自浏览器默认样式,
   上面这条 .event-card{display:grid} 优先级更高、会把它顶掉 —— 不写这一句,卡片根本收不起来 */
.event-card[hidden] { display: none; }
/* 没有视频的卡片:文字限宽,相册照样铺满整张卡片(网格列不能限宽,否则相册也被卡在文字宽度里) */
.event-card--wide { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
.event-card--wide .event-card__text { max-width: 634px; }
/* 回顾卡片(小字、文案长):文字和视频各占一半 —— 2026-09-16 用户要求文字和视频同宽。
   原来文字只有 364px 宽、视频 545px,文字比视频长出一截,视频底下空着。
   标题放哪由 HTML 决定:顶上「Latest edition」那张文案最长,标题是卡片的直接子元素 → 单独占一行,两栏才对得齐;
   挪进「Our event formats」的标签后,标题放回 .event-card__text 里,和标签里其它卡片一样(文案短,放在栏里反而齐)。
   相册离文字 11px、底部留白 27px 是原站量的 */
.event-card--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 11px; padding-bottom: 27px; }
.event-card--compact > .event-card__title { grid-column: 1 / -1; max-width: none; margin-bottom: 5px; }

/* 原站所有活动卡片的标题框都只有约 350px 宽,标题固定在「Show」后换行 */
.event-card__title { max-width: 360px; margin-top: 3px; font-size: clamp(26px, calc(2.36 * var(--vw)), 34px); line-height: 1.4; font-weight: 700; }
.event-card__text p { font-size: 16px; line-height: 25.6px; }
.event-card__title + p { margin-top: 16px; }
.event-card--compact .event-card__text p { font-size: 13px; line-height: 18.2px; }

/* 卡片 / GCS X 底下的「回顾文章」链接(2026-09-14 加,原站没有:Events 和 News Centre 原来互不相连)
   字用正文色、下划线用品牌青 —— 青色当字在白底上对比度不够 */
.event-card__text .event-card__more { margin-top: 16px; }
.event-card__more a,
.gcsx__recaps a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.event-card__more a::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: 6px; transition: transform 0.2s; }
.gcsx__body .gcsx__recaps { margin-top: 20px; }
/* 手机上别把一篇文章名拆成两行:inline-block 让整个名字一起换行;
   名字本身比一行还长(360 宽手机上的 FAVS x GCSx Executive Forum @IFA 2026)才在名字内部折行。
   原来是 white-space:nowrap,长名字会伸出屏幕,被 .pinned 的裁切切掉末尾(2026-09-16 实测) */
.gcsx__recaps a { display: inline-block; max-width: 100%; text-wrap: balance; }
@media (hover: hover) {
  .event-card__more a:hover { color: var(--accent); }
  .event-card__more a:hover::after { transform: translateX(3px); }
  .gcsx__recaps a:hover { color: var(--accent-bright); }
}

/* 第一段前面那条短横线 */
.event-card__lead::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1.5px;
  margin-right: 7px;
  vertical-align: middle;
  background: currentColor;
}

/* ---------- 视频:封面 + 点了才加载 ---------- */
.video { position: relative; aspect-ratio: 545 / 360; background: var(--ink); overflow: hidden; }
.video__cover { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video__cover img { width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 35px;
  margin: -17.5px 0 0 -25px;
  border-radius: 10px;
  background: #ff0000;
  transition: transform 0.2s;
}
.video__play::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 10px;
  border-style: solid;
  border-width: 7.5px 0 7.5px 13px;
  border-color: transparent transparent transparent var(--paper);
}
.video__cover:hover .video__play { transform: scale(1.08); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 相册跑马灯 ----------
   每张图的宽度用 --item-w 调(原站各相册不一样:327 / 273 / 297)。
   用 overflow:clip 不用 hidden:hidden 的盒子是滚动容器,键盘 Tab 到一张还没露出来的照片时浏览器会去滚它,
   和跑马灯的位移叠在一起就错位了。clip 滚不动,照片由 js/site.js 翻进视野(hidden 留给不认 clip 的旧浏览器)。 */
.gallery { position: relative; grid-column: 1 / -1; overflow: hidden; overflow: clip; }
.gallery__track { display: flex; gap: 20px; width: max-content; list-style: none; padding: 0; }
.gallery__track a { display: block; cursor: zoom-in; }
.gallery__track a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.gallery__track img { width: var(--item-w, 327px); height: 218px; object-fit: cover; }

/* 两侧翻页按钮:相册真的滚起来才由 js/site.js 加上。常驻显示 ——
   只在悬停时才出现的按钮用户找不到(启动台卡片上的按钮 2026-09-03 就是这么被退回的) */
.gallery__nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--ink);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__nav svg { width: 20px; height: 20px; }
.gallery__nav--prev svg,
.viewer__prev svg { transform: scaleX(-1); }
.gallery__nav:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .gallery__nav:hover { background: var(--ink); color: var(--paper); }
}

/* ---------- 看大图:点相册里的照片(弹层由 js/site.js 生成) ----------
   768–1254 宽时整页被 body 的 zoom 缩小(js/fit.js),这一层要按真实大小显示:
   --u 是「屏幕上的 1px」,尺寸一律写成 calc(N * var(--u));照片的显示尺寸由脚本算。
   不用 em:用户的 Safari 设了最小字号 18px,缩放后不到 18 的字号会被抬高,
   靠 em 算的按钮和边距跟着大了 1.125 倍(2026-09-16 在他的 Safari 里实测)。
   别给 .viewer 写 display —— 关着的 <dialog> 靠浏览器默认的 display:none 藏起来。 */
.viewer {
  --u: calc(1px / var(--fit, 1));
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgb(var(--night) / 0.97); /* 0.95 时背后页面的标题还隐约看得见,和底下的说明文字抢眼 */
  color: var(--paper);
  font-size: calc(16 * var(--u));
  line-height: 1.4;
}
.viewer:focus { outline: none; }
.viewer::backdrop { background: transparent; }
html.is-viewing { overflow: hidden; }

.viewer__count {
  position: absolute;
  top: calc(21 * var(--u));
  left: calc(24 * var(--u));
  font-family: var(--font-number);
  font-size: calc(15 * var(--u));
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 0.78);
}
.viewer__figure { position: absolute; inset: 0; margin: 0; touch-action: pinch-zoom; }
.viewer__stage {
  position: absolute;
  inset: calc(72 * var(--u)) calc(88 * var(--u)) calc(76 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.viewer__img {
  max-width: none;
  box-shadow: 0 calc(12 * var(--u)) calc(40 * var(--u)) rgb(0 0 0 / 0.5);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.viewer__img.is-loading { visibility: hidden; }
.viewer__caption {
  position: absolute;
  bottom: calc(22 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 48 * var(--u));
  text-align: center;
  font-size: calc(15 * var(--u));
  color: rgb(255 255 255 / 0.82);
}
.viewer__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: var(--paper);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s;
}
.viewer__btn[hidden] { display: none; } /* 上面的 display:grid 会顶掉 hidden 属性 */
.viewer__btn svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.viewer__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.viewer__close { top: calc(12 * var(--u)); right: calc(16 * var(--u)); }
.viewer__prev,
.viewer__next { top: 50%; margin-top: calc(-24 * var(--u)); }
.viewer__prev { left: calc(20 * var(--u)); }
.viewer__next { right: calc(20 * var(--u)); }
@media (hover: hover) {
  .viewer__btn:hover { background: rgb(255 255 255 / 0.26); }
}
@media (max-width: 767px) {
  .viewer__stage { inset: calc(64 * var(--u)) calc(12 * var(--u)) calc(88 * var(--u)); }
  .viewer__prev,
  .viewer__next { top: auto; bottom: calc(16 * var(--u)); margin-top: 0; }
  .viewer__caption { bottom: calc(32 * var(--u)); max-width: calc(100% - 144 * var(--u)); font-size: calc(13 * var(--u)); }
}

/* ---------- GCS X ---------- */
.gcsx { height: 500px; text-align: center; }
.gcsx__body { position: relative; padding-top: 147px; }
.gcsx__title { font-size: clamp(30px, calc(2.78 * var(--vw)), 40px); line-height: normal; font-weight: 700; color: var(--accent-bright); }
.gcsx__body p { max-width: 734px; margin: 28px auto 0; font-size: 18px; line-height: 28.8px; }

/* ---------- 城市 ---------- */
.cities { padding-block: 111px 100px; }
.cities__title { text-align: center; font-size: clamp(28px, calc(2.64 * var(--vw)), 38px); line-height: 1.4; font-weight: 700; }

.cities__row { list-style: none; padding: 0; margin-top: 56.8px; display: flex; justify-content: center; gap: 20px; }
.cities__row + .cities__row { margin-top: 45px; }

.city img { width: 230px; height: 190px; object-fit: cover; }
.city figcaption { margin-top: 27px; text-align: center; font-size: 18px; line-height: 25.2px; }

/* ---------- 下一场:来的人最先问的是「下一场在哪」,所以放在大图正下方 ---------- */
.next-up { padding-block: 48px 0; }
.next-up__card {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 22px 26px;
  background: var(--mist);
  border-left: 3px solid var(--accent);
}
.next-up__tag {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--map-ink); /* 青色小字要用这个,--accent 在白底只有 2.6:1 */
}
.next-up__name { font-size: clamp(20px, calc(1.6 * var(--vw)), 23px); line-height: 1.3; font-weight: 700; }
.next-up__meta { margin-left: auto; font-size: 18px; line-height: 1.4; color: var(--map-muted); }

/* ---------- 区块标题 ---------- */
.block-kicker {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--map-ink);
}
.block-title { font-size: clamp(28px, calc(2.64 * var(--vw)), 38px); line-height: 1.4; font-weight: 700; }
.block-kicker + .block-title { margin-top: 8px; }

/* ---------- 系列:一次只展开一个 ----------
   系列就那几个、基本不变,所以做成标签;每一场活动在下面的「所有场次」里各占一格。
   没有脚本时所有面板照常一张张展开(内容默认可见),js/site.js 接管后才折起来。 */
.events-block .block-kicker { margin-bottom: 14px; }
.formats .block-title { margin-bottom: 30px; }
.formats.js-tabs .block-title { margin-bottom: 0; }
.formats__tabs { display: none; }
.formats.js-tabs .formats__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line-soft);
}
.formats__tab {
  padding: 12px 16px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.3;
  color: var(--map-muted);
}
.formats__tab[aria-selected="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
.formats.js-tabs [role="tabpanel"] + [role="tabpanel"] { margin-top: 0; }
@media (hover: hover) { .formats__tab:hover { color: var(--ink); } }

/* ---------- 所有场次:加一场 = 多一格 ----------
   数据来自 site.json 的 eventMap.timeline(和 News Centre 那张活动地图同一份),由 tools/sync.js 生成。 */
.editions { padding-block: 104px 0; }
.editions__filters { display: none; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.editions.js-editions .editions__filters { display: flex; }
.editions__filter {
  padding: 9px 16px;
  border: 1px solid var(--line-soft);
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.3;
  color: var(--map-muted);
}
.editions__filter[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.editions__count { margin-left: 8px; font-weight: 400; color: var(--map-muted); }

.editions__list {
  list-style: none;
  padding: 0;
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 16px;
}
/* 同 .event-card[hidden]:筛选和「先露几格」靠 hidden 属性,下面这条 display:flex 会把它顶掉 */
.edition[hidden] { display: none; }
.edition {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
}
.edition__when { font-size: 18px; line-height: 1.3; color: var(--map-muted); }
.edition__name { font-size: 20px; line-height: 1.35; font-weight: 700; }
.edition__badge { margin-top: 2px; padding: 3px 10px; font-size: 18px; line-height: 1.4; }
.edition__badge--gcs { background: var(--ink); color: var(--paper); }
.edition__badge--gcsx { background: rgb(var(--map-glow) / 0.14); color: var(--map-ink); }
.edition__link {
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.editions__more {
  margin-top: 26px;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.3;
}
@media (hover: hover) {
  .editions__filter:hover { color: var(--ink); border-color: var(--ink); }
  .edition__link:hover { color: var(--accent); }
  .editions__more:hover { background: var(--ink); color: var(--paper); }
}

/* ---------- 窄屏 ---------- */
@media (max-width: 767px) {
  .events-block { padding-inline: 0; }
  .events-block--formats { padding-block: 72px; }
  .event-card,
  .event-card--wide,
  .event-card--compact { grid-template-columns: minmax(0, 1fr); }
  .gcsx { height: auto; padding-bottom: 72px; }
  .gcsx__body { padding-top: 96px; }
  .cities__row { flex-wrap: wrap; }
  .next-up__meta { margin-left: 0; }
  .editions { padding-block: 64px 0; }
  /* 390px 宽也要排成两列(一列的话 12 格就是 1800px,页面反而更长了) */
  .editions__list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .edition { padding: 14px 16px; }
}

@media (max-width: 640px) {
  .cities__row li { width: calc(50% - 10px); }
  .city img { width: 100%; height: auto; aspect-ratio: 23 / 19; }
}