/* STW 中文站 · Bricks 表达不了的少量 CSS（关键帧、进入视口触发的过渡）。
   颜色、间距、字号等全部在 Bricks 全局类 / 变量 / 主题样式里，不在此处硬编码。 */

/* 同期展会彩条：6 段，进入视口后从 0 生长到 16.667%（英文站 .co-located--blocks 的动画） */
.stw-colocated-bar > * {
  width: 0;
  transition: width .3s ease-in-out;
}
.stw-colocated-bar.is-in > * { width: 16.6666%; }

/* 数据卡 SVG 边框描边绘制——照抄上海站 .article--border：dasharray 1025、dashoffset 1012，进入视口 1.3s 画出，
   结束时 dasharray 放大到 1075 盖住整条路径（桌面路径周长约 1049、手机约 845，都是 SVG 自身坐标）。
   2026-09-18 起边框换成原站同一条路径（按比例缩放、不再拉伸），数值随之改回原站的。 */
.stw-statcard svg path,
.stw-statcard svg rect {
  fill: none;
  stroke-miterlimit: 100;
  stroke-dasharray: 1025;
  stroke-dashoffset: 1012;
}
.stw-statcard.is-in svg path,
.stw-statcard.is-in svg rect {
  animation: stw-draw 1.3s ease-out forwards;
}
@keyframes stw-draw { to { stroke-dashoffset: 0; stroke-dasharray: 1075; } }

/* 页面加载遮罩：JS 兜底 3 秒后隐藏（正常由 Bricks 交互 contentLoaded → fadeOut → hide 处理） */
.stw-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease; }

/* 竖排文字（右侧「同期展会」抽屉标签里的文字；标签本身是横向 flex，箭头排在文字左边） */
.stw-vertical { writing-mode: vertical-rl; text-orientation: mixed; }

@media (prefers-reduced-motion: reduce) {
  .stw-colocated-bar > * { transition: none; width: 16.6666%; }
  .stw-statcard svg path, .stw-statcard svg rect { animation: none; stroke-dashoffset: 0; }
}

/* CJK 不折行：中文任意字符间都可断行，flex 项的 min-content 只有一个字宽，菜单项会被压成竖排。 */
.bricks-nav-menu > li > a,
.bricks-nav-menu .brx-submenu-toggle > a,
.bricks-nav-menu .sub-menu a,
.brxe-text-link,
.brxe-button,
.brxe-countdown .brxe-countdown__item,
.brxe-countdown__suffix { white-space: nowrap; }

/* 例外：右侧「同期展会」抽屉里的展会名要能折行（原站也是两行），
   否则上面那条 nowrap 会把「云与 AI 基础设施展」顶出面板宽度被裁掉。
   keep-all：中文只在空格处折——「云与 AI / 基础设施展」，不会剩一个「展」字单独一行。 */
#stw-drawer .brxe-text-link { white-space: normal; word-break: keep-all; }

/* 抽屉面板：Bricks 的 offcanvas 内层是贴右边的满高固定层（z-index 999），虽然透明，展开时会挡住右侧一整条页面的点击
   （页头菜单、社交图标……）。上海站只有中间 210×250 那块面板，页面其余部分照常可点——所以内层不接收点击，只有深色卡片接收。 */
#stw-drawer .brx-offcanvas-inner { pointer-events: none; }
#stw-drawer .brx-offcanvas-inner > .brxe-block { pointer-events: auto; }

/* 抽屉展开时，右侧竖条跟着面板一起往左移并压在面板之上——原站的竖条始终贴在面板左边，
   再点一次就能收起。不加这条的话竖条会被面板盖住，只能点背景关闭。
   ⚠ 这里不用 !important：本表是子主题的普通样式（未分层），而 Bricks 给元素生成的
   transform 在 `@layer bricks` 里，**未分层的永远赢过分层的**，与特异性无关。 */
/* 缓动曲线必须和 Bricks 给 offcanvas 面板生成的那条**一模一样**，否则时长虽同、
   中途仍会错开，看起来竖条追不上面板（2026-09-10 业主实测报的就是这个）。
   面板实测：transform .25s cubic-bezier(0.25, 0, 0.25, 1) */
.stw-drawer-tab { transition: transform .25s cubic-bezier(0.25, 0, 0.25, 1); }
body:has(#stw-drawer.brx-open) .stw-drawer-tab { transform: translate(-210px, -50%); z-index: 10000; } /* 210 = 面板宽（上海站 .panel--fixedcolocatedshows__body） */
/* 箭头：收起时「<」，展开后转 180° 成「>」——照上海站（标题 ::before 在展开态 rotate(180deg)，过渡 .25s ease-in、延迟 .25s，等面板滑完再转） */
.stw-drawer-tab .brxe-icon { transition: transform .25s ease-in .25s; }
body:has(#stw-drawer.brx-open) .stw-drawer-tab .brxe-icon { transform: rotate(180deg); }

/* 底部倒计时的数字：Montserrat Regular（SIL OFL，可免费商用），只含 0–9 的子集 2.7KB。
   为的是贴近英文站的 Nexa（Fontfabric 商用字体，我们不能用）。
   自托管，不向任何外部域名发请求；unicode-range 限定后，非数字字符自动落回思源黑体，
   所以「天/时/分」和全站其余文字都不受影响。选型依据见 assets/fonts/montserrat/README.md。 */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/montserrat-400-digits.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+30-39;
}

/* 展商分组徽章（[stw_tier_badge]）。底色来自分类词的 term meta `color`，由短代码写成内联样式；
   这里只管形状与排版。原站是圆角胶囊、12px 粗体、白字，卡片上居中。
   一家展商可能属于多个分组，所以容器允许换行。 */
.stw-badge {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 80px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.brxe-shortcode:has(> .stw-badge) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
/* 徽章之间的间距：:has() 不支持时的兜底 */
.stw-badge + .stw-badge { margin-left: 6px; }

/* 首页 Hero 文案与日期：中文只在空格处折行。否则「2027年4月26–27日 · 上海世博展览馆」在 360 / 375 宽的手机上会剩「馆」一个字单独成行 */
.stw-hero .brxe-text-basic { word-break: keep-all; }

/* ===== 三个展会页的主题（照上海站 _cloudaiinfrastructure.css / _bigdataaiworld.css / _datacentreworld.css）=====
   页面 body 类 stw-show stw-show--{cai|bd|dc}（build/44-show-pages.php 写进页面设置）。
   --show-1 = 原站 color-one（主色：按钮一、折叠条、右侧标签、返回顶部），--show-2 = color-two（辅色：下划线、按钮二、强调标题），
   颜色取 Bricks 全局变量（10-design-system.php），这里只做映射；装饰图是主题素材，放在子主题 assets/img/shows/{key}/。 */
.stw-show--cai {
  --show-1: var(--c-cloud-2); --show-2: var(--c-cloud-1);
  --show-grad: linear-gradient(to right, var(--c-cloud-1), var(--c-cloud-2) 20%, var(--c-cloud-2) 100%);
  --show-fade: rgba(239, 64, 54, 0.25);
  --show-graphic: url(/wp-content/themes/bricks-child/assets/img/shows/cai/section-graphic-blue.svg);
  --show-partial: url(/wp-content/themes/bricks-child/assets/img/shows/cai/partial-graphic.svg);
  --show-mask: url(/wp-content/themes/bricks-child/assets/img/shows/cai/partial-mask-no-opacity.png);
  --show-spot1: url(/wp-content/themes/bricks-child/assets/img/shows/cai/spotlight-one.png);
}
.stw-show--bd,
.stw-show--ds {
  --show-1: var(--c-data-2); --show-2: var(--c-data-1);
  --show-grad: linear-gradient(to right, var(--c-data-1), var(--c-data-2) 20%, var(--c-data-2) 100%);
  --show-fade: rgba(233, 162, 64, 0.25);
  --show-graphic: url(/wp-content/themes/bricks-child/assets/img/shows/bd/section-graphic-blue.svg);
  --show-partial: url(/wp-content/themes/bricks-child/assets/img/shows/bd/partial-graphic.svg);
  --show-mask: url(/wp-content/themes/bricks-child/assets/img/shows/bd/partial-mask.png);
  --show-spot1: url(/wp-content/themes/bricks-child/assets/img/shows/bd/spotlight-one.png);
  --show-spot2: url(/wp-content/themes/bricks-child/assets/img/shows/bd/spotlight-two.png);
}
.stw-show--dc {
  --show-1: var(--c-dcw-2); --show-2: var(--c-dcw-1);
  --show-grad: linear-gradient(to right, var(--c-dcw-1), var(--c-dcw-2) 20%, var(--c-dcw-2) 100%);
  --show-fade: rgba(0, 121, 60, 0.25);
  --show-graphic: url(/wp-content/themes/bricks-child/assets/img/shows/dc/section-graphic-blue.svg);
  --show-spot1: url(/wp-content/themes/bricks-child/assets/img/shows/dc/spotlight-one.png);
}
/* 展会页：标题下划线换成主题辅色（原站 color-two）。右侧「同期展会」标签、返回顶部按钮的主色写在模板里：
   底色 var(--show-1, 黑)——这里另写覆盖压不过模板的 #brxe-id 选择器（模板元素 CSS 不分层）。 */
.stw-show .stw-underline-left::before { background: var(--show-2); }
/* 展会页标题：中文只在空格、标点和 <wbr> 处折行（show-content.php 里手工放了折行点），避免「展」一个字落单；
   某一段在窄屏上实在放不下时再任意折（overflow-wrap: anywhere 兜底，不会横向溢出） */
.stw-show :is(h1, h2, h3) { word-break: keep-all; overflow-wrap: anywhere; }

/* ===== 表单下拉（stw.js makeDropdown / enhanceSelect / enhancePhone，只用于带 data-stw-selects 的表单）=====
   照上海英文站 HubSpot 表单实测（2026-09-18）：
   收起——与输入框同款：40 高、#f5f8fa 底、1px #959494 边、圆角 3；右侧黑色实心小三角 11×6、右端距边框 21px；没选时留空。
   展开——字段下方 10px 的面板：同宽、同底同边同圆角、无阴影；顶部搜索框（与输入框同款，四周留 10px），
   下面是列表：每行内边距 10、16px；悬停 / 键盘选中行 #dcdfe1；列表最高 283px（面板 345），电话列表 343px（面板 405）。
   原生 select 留在包裹层里、透明且不可点：必填校验时浏览器会聚焦它，提示气泡就出现在按钮的位置。 */
.stw-sel { position: relative; width: 100%; }
.stw-sel > select { position: absolute; left: 0; top: 0; width: 100%; height: 40px; opacity: 0; pointer-events: none; }
.stw-sel__btn {
  display: flex; align-items: center; width: 100%; height: 40px; margin: 0; padding: 10px 40px 10px 10px;
  font: inherit; font-size: 16px; line-height: 18px; color: #212d3a; text-align: left; cursor: pointer;
  background: #f5f8fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 6'%3E%3Cpath d='M0 0h11L5.5 6z' fill='%23000'/%3E%3C/svg%3E") no-repeat right 20px center / 11px 6px;
  border: 1px solid #959494; border-radius: 3px;
}
.stw-sel__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 聚焦：英文站不画粗框，只有一圈 3px 的灰色光晕（输入框、下拉按钮、搜索框同款） */
.stw-sel__btn:focus, .stw-sel__search:focus { outline: none; box-shadow: 0 0 3px 0 #959494; }
.stw-sel__panel { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 1000; background: #f5f8fa; border: 1px solid #959494; border-radius: 3px; overflow: hidden; }
.stw-sel__panel[hidden] { display: none; }
.stw-sel__search { display: block; width: calc(100% - 20px); margin: 10px; }
.stw-sel__search::placeholder { color: #8d9aaf; opacity: 1; }
.stw-sel__list { list-style: none; margin: 0; padding: 0; max-height: 283px; overflow-y: auto; }
.stw-sel__list > li { margin: 0; padding: 10px; font-size: 16px; line-height: 18px; color: #212d3a; cursor: pointer; }
.stw-sel__list > li[hidden] { display: none; }
.stw-sel__list > li.is-active { background: #dcdfe1; }
.stw-sel__list > .stw-sel__empty { color: #8d9aaf; cursor: default; }

/* 电话：「国旗 ▾」块 57 宽（含边框），左侧两角圆角，拼在号码框左边；国旗距左 11、三角 9×5 右端距右边框 10；
   号码框里显示当前区号（只是显示，框里的值只有号码）。面板挂在整行上，与整行同宽。 */
.stw-phone { position: relative; display: flex; width: 100%; }
.stw-phone > .stw-sel--flag { position: static; flex: 0 0 57px; width: 57px; }
.stw-phone > .stw-sel--flag > select { width: 57px; }
.stw-sel__btn--flag { padding: 10px 24px 10px 10px; border-radius: 3px 0 0 3px; background-position: right 9px center; background-size: 9px 5px; }
.stw-sel__flag { font-size: 16px; line-height: 18px; }
/* 列表里的国旗位：同宽（旗约 20 + 间隔 6），没有旗帜的项（台湾）也留出这块空位，文字左侧对齐 */
.stw-sel__list .stw-sel__flag { display: inline-block; width: 26px; }
.stw-phone__box { position: relative; flex: 1 1 auto; min-width: 0; }
.stw-phone__code { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 16px; line-height: 18px; color: #212d3a; pointer-events: none; }
.stw-phone .stw-sel__list { max-height: 343px; }
.stw-phone .stw-sel__list > li { line-height: 26px; }

/* ===== 手机端（≤767）同期展会：照上海站，改成正文开头一条可展开的横栏（stw.js mobileColocated 生成）=====
   上海站源样式：标题 14px 粗体居中、内边距 15 / 30，箭头（chevron-up 14px）在文字上方、间距 10，展开后转 180°（.25s ease-in，延迟 .25s）；
   面板 #1C1D24、高度 0 → 250（.25s ease-in，透明度同步），三项纵向 space-between；每项内边距 10、图标与文字间距 5、12px / 18px 常规体。
   展会页的标题底色用展会主色（同右侧竖条）。放置：首页在首屏之后；其余页面（含展会页）在正文最前、紧贴页头下方。
   JS 生成好之前（或没有 JS）不隐藏右侧竖条——手机上总有一个入口。 */
.stw-colo-m { display: none; }
@media (max-width: 767px) {
  .stw-colo-m { display: block; }
  body.stw-colo-m-ready .stw-drawer-tab, body.stw-colo-m-ready #stw-drawer { display: none !important; }
  /* 展会页：横栏插在正文最前，页头背后不再有标题带，透明页头改成深色实底（同上海站手机端，也同滚动后的颜色）。
     页头底色写在模板元素的 #brxe-id 规则里，只能用 !important 压过 */
  body.stw-show.stw-colo-m-ready #brx-header > .brxe-section { background-color: var(--c-dark, #1c1d24) !important; }
}
.stw-colo-m__title {
  display: block; width: 100%; margin: 0; padding: 15px 30px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--show-1, #000000); color: #ffffff; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; text-align: center;
}
.stw-colo-m__title svg { display: block; width: 14px; height: 14px; margin: 0 auto 10px; transition: transform .25s ease-in .25s; }
.stw-colo-m.is-open .stw-colo-m__title svg { transform: rotate(180deg); }
.stw-colo-m__body { height: 0; opacity: 0; overflow: hidden; background: #1c1d24; transition: height .25s ease-in, opacity .25s ease-in; }
.stw-colo-m.is-open .stw-colo-m__body { height: 280px; opacity: 1; }
.stw-colo-m__list { display: flex; flex-direction: column; justify-content: space-between; height: 280px; margin: 0; padding: 0; list-style: none; }
.stw-colo-m__item { display: flex; align-items: center; gap: 5px; padding: 10px; color: #ffffff; font-size: 12px; line-height: 18px; font-weight: 400; text-decoration: none; }
.stw-colo-m__item:hover { background: #060607; color: #ffffff; }
.stw-colo-m__item img { width: 45px; height: 45px; object-fit: contain; flex: none; }
/* 数据综合服务按合作方要求仅使用文字，不使用图形标识。 */
.stw-colo-m__item:not(:has(img)) { min-height: 65px; padding-left: 60px; }
.stw-ds-brand { display: flex; align-items: center; justify-content: center; flex: none; width: 150px; color: #fff; font-size: 22px; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; }
@media (max-width: 1023px) { .stw-ds-brand { width: 84px; font-size: 16px; } }
@media (max-width: 599px) { #brx-header .brxe-container:has(.stw-ds-brand) { column-gap: 16px; } }

/* 招展表单：本地 Logo 预览，等比显示，不提前上传。 */
form[data-stw-logo-preview] .stw-logo-preview {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 240px);
  max-height: 160px;
  object-fit: contain;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid #d5d9dd;
  border-radius: 4px;
  background: #fff;
}

/* 中文站公示邮箱：整段地址持续显示下划线，含 hover/focus 和换行。 */
body a[href^="mailto:techweek@cpitsh.org" i],
body a[href^="mailto:techweek%40cpitsh.org" i] {
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  overflow-wrap: anywhere;
}

/* 正文段落两端对齐；短段和段末行仍靠左，保持自然字距。 */
#brx-content .brxe-text,
#brx-content .brxe-text p,
#brx-content .brxe-text-basic p {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-ideograph;
}