/**
 * 补丁样式 —— 给 assets/tailwind.css 里没有、但模板在用的工具类。
 *
 * 背景：tailwind.css 是从客户原始 React 站**编译出来的产物**，只包含那一刻
 * 用到过的类。后来我们在主题里新写模板，随手用了一些当时没有的类
 * （lg:grid-cols-[260px_1fr] 之类），它们在产物里根本不存在 ——
 * 表现是布局静默失效（筛选栏撑满整行、两栏变一栏），不报错、很难查。
 *
 * 这里只补实际用到的那几个，写法照 Tailwind 的产出对齐。
 * 新加类之前先 grep 一下 tailwind.css 有没有，没有就加到这里。
 */

/* ─────────────────────────────────────────────────────────────
 * 字号体系（font scale）
 *
 * 背景：客户反馈「字体太大、体系不统一」。对照了客户原设计、fairplus、
 * 我们三个站（视口 1727px）后发现真正出问题的是**中间那一档**：
 *   区块标题  原设计 56px / fairplus 24px → 我们原本也是 56px，大了一倍多
 *   卡片标题  原设计 24px / fairplus 16px → 我们原本 24px
 * 整页因此「头重脚轻」：hero 很大，中间那档也跟着很大，正文却很小。
 *
 * 另一层放大因素：PingFang SC 等中文字体是全角、笔画密，**同样 px 数
 * 视觉上比拉丁字体大一圈**。所以每一档的上限都按纯拉丁场景再收 10–15%。
 *
 * 模板里散落的 18 种 clamp() 值已全部收敛到下面这 7 档（内联写法改成
 * font-size:var(--fs-x)）。以后新写模板**只许引用变量**，不要再写裸 clamp。
 *
 * 1727px 视口实测（括号内为旧值）：
 *   --fs-hero     43px  (48)  首页首屏大标题
 *   --fs-h1       44px  (72)  页面 / 详情页大标题
 *   --fs-h2       30px  (56)  区块标题
 *   --fs-h3       20px  (24)  卡片标题、表单卡标题
 *   --fs-body     17px  (20)  正文
 *   --fs-meta     15px  (16)  辅助文字 / 标签 / 页脚
 *   --fs-display  40px  (64)  统计数字（12,000㎡ / 260 亿元 那种）
 * ───────────────────────────────────────────────────────────── */
:root {
  --fs-hero:    clamp(28px, 2.8vw,  43px);  /* 首页首屏大标题 */
  --fs-h1:      clamp(28px, 2.9vw,  44px);  /* 页面 / 详情页大标题 */
  --fs-h2:      clamp(21px, 1.75vw, 30px);  /* 区块标题 */
  --fs-h3:      clamp(16px, 1.18vw, 20px);  /* 卡片标题 */
  --fs-body:    clamp(15px, 1.05vw, 17px);  /* 正文 */
  --fs-meta:    clamp(12px, 0.9vw,  15px);  /* 辅助文字 / 标签 */
  --fs-display: clamp(26px, 2.35vw, 40px);  /* 统计数字 */
}

/* ─────────────────────────────────────────────────────────────
 * 中间档的「补收敛」
 *
 * 上一段只改了模板里的内联 clamp()。但字号还散在两处改不到的地方：
 *
 *   1) tailwind.css 里客户原站的**组件类**（.accordion-heading 48px、
 *      .platform-accordion .accordion-card h3 38px、.accordion-tab 22px、
 *      .text-2xl 24px）。tailwind.css 是编译产物、不许改，只能在**这里**
 *      用同选择器 + 后加载覆盖。
 *   2) 模板里手写的 <style>（如 media.php 的 .news-title）—— 那几处已直接
 *      改成 var()。
 *
 * 不覆盖的后果：首页 hero 43px / 区块标题 30px 收小了，紧跟着的accordion
 * 区块还是 48px + 38px，比 hero 还大 —— 正是客户说的「某一块突然很大」。
 *
 * 只改 font-size，不动 line-height/间距，避免连带改版式。
 * ⚠ 选择器必须和 tailwind.css 里**一模一样**（它带 `.platform-accordion `
 *   前缀，比裸类名高一档），否则被后者按优先级压掉，静默失效。
 * ───────────────────────────────────────────────────────────── */
.platform-accordion .accordion-heading      { font-size: var(--fs-h2); }    /* 48 → 30 */
.platform-accordion .accordion-heading span { font-size: var(--fs-body); }  /* 24 → 17 */
.platform-accordion .accordion-card h3      { font-size: var(--fs-h3); }    /* 38 → 20 */
.platform-accordion .accordion-card p       { font-size: var(--fs-body); }  /* 22 → 17 */
.platform-accordion .accordion-tab          { font-size: var(--fs-body); }  /* 22 → 17 */
.text-\[24px\]                              { font-size: var(--fs-h3); }    /* 24 → 20 */
.text-2xl                                   { font-size: var(--fs-h3); }    /* 24 → 20 */

/* 任意值网格列 —— Tailwind 产物里不会有，必须手写 */
.lg\:grid-cols-\[260px_1fr\] { grid-template-columns: 260px 1fr; }   /* 活动页：左筛选 + 右列表 */
.md\:grid-cols-\[1fr_320px\] { grid-template-columns: 1fr 320px; }   /* 详情页：正文 + 侧栏 */
.md\:grid-cols-\[120px_180px_1fr\] { grid-template-columns: 120px 180px 1fr; }  /* 日历：时间 / 类型 / 标题 */

/* 断点工具类 */
@media (min-width: 1024px) {
  .lg\:sticky { position: sticky; }
  .lg\:top-28 { top: 7rem; }
}
@media (min-width: 768px) {
  .md\:p-8 { padding: 2rem; }
}

/* 尺寸 / 定位 */
.h-20 { height: 5rem; }
.w-20 { width: 5rem; }
.top-1\/2 { top: 50%; }
.left-3 { left: 0.75rem; }
.right-3 { right: 0.75rem; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

/* ─────────────────────────────────────────────────────────────
 * 中文字体回退
 *
 * Mazzard H（客户原站的主字体）是**纯拉丁字体** —— 文件只有 26KB，不含任何汉字。
 * 所以中文一直落在浏览器的默认 sans-serif 上，和拉丁字母**不是同一套字**：
 * 同一行里「慧联制造」和「HuiLink」字形、字重、x-height 都不一样，
 * 看起来就是「一个区域大、一个区域小」。
 *
 * 这里按中文平台的常见优先级补上回退链：
 *   PingFang SC       macOS / iOS
 *   Microsoft YaHei   Windows
 *   思源 / Noto       部分 Linux 与安卓
 * 不下载中文字体文件是刻意的 —— 一套中文字重动辄 2–5MB，而这个站的
 * 目标用户在境内，首屏加载代价太大。
 * ───────────────────────────────────────────────────────────── */
html, body, * {
  font-family: "Mazzard H", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
}

/* ─────────────────────────────────────────────────────────────
 * 登录态：让开 WordPress 顶部工具条（admin bar）
 *
 * 现象：管理员登录后 #wpadminbar 和固定导航叠在一起，导航顶部 16px 被压住
 * （圆角被切、Logo 上沿被盖）。实测 2026-10-09：
 *   #wpadminbar   fixed / top 0 / 高 32px / z-index 99999
 *   导航外层 div   fixed / top 16px / 高 77.5px / z-index 50
 * 高度和层级都压不过它，只能把导航整体挪下去。
 *
 * WP 自己给 <html> 加了 margin-top:32px（"bump"），那招只推移文档流，
 * 对 position:fixed 的导航完全无效 —— 所以这里必须单独处理。
 *
 * 高度取 WP 的 CSS 变量 --wp-admin--admin-bar--height（7.1 起定义在 html 上，
 * ≤782px 自动变 46px），不手写 32/46 两个魔数。变量只在工具条显示时存在，
 * 所以整条规则挂在 body.admin-bar 下：未登录时它不生效，导航仍是 top:1rem
 * （即使变量缺失，calc 里也有 32px 兜底，不会把 top 打回 auto）。
 *
 * 已知边界：≤600px 时 WP 把工具条改成 position:absolute（滚动即消失），
 * 而导航的让位会一直留着，表现为滚动后导航上方露出一条内容。
 * 「登录态 + 手机」是少见组合，不值得为它给 nav.js 加滚动分支 ——
 * nav.js 是 Navbar.tsx 的逐字移植，原则见该文件头部。
 * ───────────────────────────────────────────────────────────── */
body.admin-bar [data-nav-shell] {
  top: calc(1rem + var(--wp-admin--admin-bar--height, 32px));
}

/* ─────────────────────────────────────────────────────────────
 * Fluent Forms 皮肤
 *
 * 四个前台表单（/contact、/visit、/exhibit/booth、/media/register）由
 * Fluent Forms 渲染，它输出的是一套自己的 class（ff-el-group /
 * ff-el-input--label / ff-el-form-control / ff-btn-submit…）。这一节把它们
 * 压回本站的表单外观 —— 对着 flu-ff 的实际输出写的，不是照猜：
 *
 *   <div class="fluentform ff-default fluentform_wrapper_3 ainanjing-form …">
 *     <form class="frm-fluent-form … ff-el-form-top">
 *       <fieldset>                    ← 每页一次，字段和提交按钮都在这层
 *         <legend class="ff_screen_reader_title" style="…height:0…">  ← 内联隐藏
 *         <div class="ff-el-group">
 *           <div class="ff-el-input--label ff-el-is-required asterisk-right"><label>…</label></div>
 *           <div class="ff-el-input--content"><input class="ff-el-form-control"></div>
 *         </div>
 *         <div class="ff-el-group ff-text-left ff_submit_btn_wrapper"><button class="ff-btn ff-btn-submit">…</button></div>
 *       </fieldset>
 *     </form>
 *   </div>
 *
 * ── 这一节不是「覆盖 Fluent Forms 的皮肤」，它就是唯一的皮肤 ──────
 *
 * 实测 2026-10-09：这些页面上 Fluent Forms 的两张样式表
 * （fluent-forms-public.css / fluentform-public-default.css）**根本没有加载** ——
 * 页面里只有 fonts / tailwind / extra / TranslatePress 四张。
 *
 * 原因是它的加载方式：FF 靠「文章正文里有没有 fluentform 短代码」来决定要不要
 * 入队样式（maybeLoadFluentFormStyles），而我们的表单是模板里 do_shortcode()
 * 调的，正文里没有那个短代码 —— 它检测不到。renderForm() 里还有一次兜底入队，
 * 但那次发生在 wp_head 之后，WordPress 不会再打印。
 *
 * 所以输入框、标签、按钮、错误提示、成功卡片的外观**全部**由这一节负责，
 * 没有第二处兜着。改动前先确认没有 FF 的规则在跟它叠加。
 *
 * 那为什么选择器还要带 .fluentform.ff-default 这一层？两个理由：
 *   1. 万一以后表单改成写进正文（或 FF 改了加载策略），它的样式表就会真的加载。
 *      带上这一层，权重稳定高过它那套 .fluentform .ff-el-*，与加载顺序无关 ——
 *      不会出现「某天突然变样」这种最难查的问题。
 *   2. tailwind.css 是编译产物、里面没有的类会静默失效（见本文件头部），
 *      所以这里的每个值都写死或引用确定存在的变量，不指望任何现成的组件类。
 *
 * 顺带：FF 的皮肤表里定义了 --fluentform-danger / --fluentform-primary 等变量，
 * 现在这个页面没有它，变量是空的。下面照样重映射一遍 —— 一是无害，二是万一
 * 上面第 1 条发生，布局表 fluent-forms-public.css 里那 13 处引用能拿到正确的颜色。
 * ───────────────────────────────────────────────────────────── */

.fluentform.ff-default {
  --nj-ink:      rgb(26, 11, 84);
  --nj-muted:    rgb(131, 121, 158);
  --nj-line:     rgba(26, 11, 84, 0.12);
  --nj-surface:  rgb(249, 249, 249);
  --nj-required: rgb(200, 111, 255);
  --nj-danger:   rgb(196, 43, 67);
  --nj-focus:    rgba(26, 11, 84, 0.28);

  /* Fluent Forms 自己的变量也重映射一遍：错误提示色、下拉加载态那几处它内部在用 */
  --fluentform-primary:       rgb(28, 78, 255);
  --fluentform-secondary:     rgb(26, 11, 84);
  --fluentform-danger:        rgb(196, 43, 67);
  --fluentform-border-color:  rgba(26, 11, 84, 0.12);
  --fluentform-border-radius: var(--radius-control);
}

/* ── 字段块 ───────────────────────────────────────────────────
 * 间距对应设计稿的 space-y-5（20px）。Fluent Forms 布局表里对
 * .ff-el-group 有 20px 和 0 两条规则，哪条生效取决于源码顺序 ——
 * 显式写死，免得它哪天改动就让整页间距静默错位。 */
.fluentform.ff-default .ff-el-group {
  margin-bottom: 20px;
}

/* ── 标签 ─────────────────────────────────────────────────────
 * 设计稿：<span class="text-sm font-medium"> + space-y-2（8px）。
 * Fluent Forms 默认是 inline-block + 5px，要改。 */
.fluentform.ff-default .ff-el-input--label {
  display: block;
  margin-bottom: 8px;
}
.fluentform.ff-default .ff-el-input--label > label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--nj-ink);
}

/* ── 必填星号 ─────────────────────────────────────────────────
 * Fluent Forms 用纯 CSS 的 ::after 生成，颜色取自 --fluentform-danger，
 * 但那个变量同时管着**错误提示**的颜色（设计稿里错误是红的）。
 * 所以变量保持红，星号单独用更高权重改紫。 */
.fluentform.ff-default .ff-el-input--label.ff-el-is-required.asterisk-right > label:after {
  content: " *";
  margin-left: 3px;
  color: var(--nj-required);
}
.fluentform.ff-default .ff-el-input--label.ff-el-is-required.asterisk-left > label:before {
  content: "* ";
  margin-right: 3px;
  color: var(--nj-required);
}

/* ── 输入框 / 下拉 / 多行文本 ─────────────────────────────────
 * 对应模板里原来那两个变量：
 *   class "w-full rounded-control px-4 py-3 text-sm outline-none border transition-colors"
 *   style "background:rgb(249,249,249);border-color:rgba(26,11,84,.12);color:rgb(26,11,84)" */
.fluentform.ff-default .ff-el-form-control {
  width: 100%;
  background: var(--nj-surface);
  border: 1px solid var(--nj-line);
  border-radius: var(--radius-control);
  color: var(--nj-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  outline: none;
  box-shadow: none;
  transition: border-color .2s ease;
}
/* 下拉保持浏览器原生外观（设计稿就是这么用的），不用自己画箭头 */
.fluentform.ff-default select.ff-el-form-control {
  padding-right: 1rem;
}
.fluentform.ff-default .ff-el-form-control:focus {
  border-color: var(--nj-focus);
}
.fluentform.ff-default .ff-el-form-control::placeholder {
  color: var(--nj-muted);
  opacity: 1;
}

/* ── 校验错误 ─────────────────────────────────────────────────
 * Fluent Forms 给字段块加 .ff-el-is-error，并在 .ff-el-input--content 里
 * 插一个 <div class="error text-danger">。设计稿是一条浅红底的通告条。 */
.fluentform.ff-default .ff-el-is-error .ff-el-form-control {
  border-color: var(--nj-danger);
}
.fluentform.ff-default .ff-el-is-error .ff-el-input--content .text-danger {
  margin-top: 8px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-control);
  background: rgba(196, 43, 67, 0.08);
  color: var(--nj-danger);
  font-size: 14px;
  line-height: 1.5;
}

/* ── 提交按钮 ─────────────────────────────────────────────────
 * Fluent Forms 输出的是裸 <button class="ff-btn ff-btn-submit ff_btn_no_style">
 * （button_style=no_style，所以它不会往页面里塞自己那段按钮样式）。
 * 设计稿的按钮是「外层 1px 渐变底 + 内层白字」两层结构；这里只有一层，
 * 把渐变直接画在按钮上，视觉等价。 */
.fluentform.ff-default .ff_submit_btn_wrapper {
  margin-bottom: 0;
  /* 显式左对齐：FF 的布局表里有 .ff_submit_btn_wrapper{text-align:right}，
     现在那张表没加载，但写死更稳（见本节头部说明）。 */
  text-align: left;
}
.fluentform.ff-default .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-control);
  background-image: linear-gradient(90deg, rgb(28, 78, 255), rgb(172, 36, 255) 50%, rgb(254, 136, 27));
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  padding: 0.75rem 1.75rem;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .3s ease;
}
.fluentform.ff-default .ff-btn-submit:hover,
.fluentform.ff-default .ff-btn-submit:focus-visible {
  opacity: .9;
}
.fluentform.ff-default .ff-btn-submit:disabled {
  opacity: .6;
  cursor: default;
}
/* Fluent Forms 提交时会在按钮上叠一层白色进度条，跟设计稿不符 */
.fluentform.ff-default .ff-btn.ff-working:after {
  display: none;
}

/* ── 成功卡片 ─────────────────────────────────────────────────
 * 提交成功后 Fluent Forms 把 confirmation 里那段 HTML 塞进它自己新建的
 * div.ff-message-success（接在表单后面），并把表单隐藏。
 * 它自带边框/内边距/阴影，先拆掉，再让 .nj-form-done 自己成一整张卡片。 */
.fluentform.ff-default .ff-message-success {
  margin-top: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.nj-form-done {
  border-radius: var(--radius-card);
  background: #fff;
  padding: 2.5rem;
  text-align: center;
  box-shadow: 0 1px 29px #3f4a7e1a;
  color: var(--nj-ink);
}
.nj-form-done__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--nj-ink);
}
.nj-form-done__note {
  margin: 1rem 0 0;
  color: var(--nj-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.nj-form-done__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  border-radius: var(--radius-control);
  background-image: linear-gradient(90deg, rgb(28, 78, 255), rgb(172, 36, 255) 50%, rgb(254, 136, 27));
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 500;
  padding: 0.75rem 1.75rem;
  text-decoration: none;
  transition: opacity .3s ease;
}
.nj-form-done__btn:hover {
  opacity: .9;
}

/* ── 联系页表单：前四个字段两列 ───────────────────────────────
 * 设计稿是 <div class="grid sm:grid-cols-2 gap-5"> 只包住前四个字段，
 * 关注方向 / 补充说明 / 提交按钮在网格外。Fluent Forms 把字段直接铺在
 * fieldset 里，所以网格画在 fieldset 上，靠 .nj-span-2（字段定义里
 * 用 container_class 挂上去的）让后两项占满整行 —— 比数 :nth-child 稳，
 * 因为 fieldset 里还夹着隐藏 input 和蜜罐字段。 */
@media (min-width: 640px) {
  .ainanjing-form-contact .frm-fluent-form fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  /* legend 是给读屏用的表单标题，Fluent Forms 用内联样式把它压成 0×0 但仍是
     display:block —— 那会占掉一个网格格。absolute 让它脱离网格流，
     同时留在无障碍树里（比 display:none 正确）。 */
  .ainanjing-form-contact .frm-fluent-form fieldset > legend {
    position: absolute;
  }
  /* 间距交给 grid 的 gap。⚠ 选择器必须写成 .fluentform.ff-default.ainanjing-form-contact
     四个类 —— 上面那条 .fluentform.ff-default .ff-el-group 是三个类，
     只写 .ainanjing-form-contact .ff-el-group 会压不过它，20px 外边距和 20px
     gap 会叠成 40px 行距（这个坑踩过，实测行距 119px 而设计是 99px）。 */
  .fluentform.ff-default.ainanjing-form-contact .ff-el-group {
    margin-bottom: 0;
  }
  .fluentform.ff-default.ainanjing-form-contact .ff-el-group.nj-span-2,
  .fluentform.ff-default.ainanjing-form-contact .ff_submit_btn_wrapper {
    grid-column: 1 / -1;
  }
}

/* ─────────────────────────────────────────────────────────────
 * 导航：品牌 Logo 与移动端菜单（2027 换标时加）
 * ───────────────────────────────────────────────────────────── */

/* 导航里的品牌锁定组合（4:1 横版：图标 + 三行文字）。
   ⚠ 尺寸连同响应式断点必须收在**一个类**里，不能像其它条目那样拆成 Tailwind 工具类：
   nav.js 的滚动收缩是按列表**增删**类，md: 那档一旦写进表里，
   收缩时旧高度被移除、md 那档却还在，会在 ≥768px 静默压住新值 = 收缩失效。
   滚动前后由 nav.js 在 .nav-logo / .nav-logo--compact 之间整类切换。
   尺寸对齐客户参考站：h-10 / md:h-12，宽度上限只是防客户传了超宽自定义 Logo。 */
.nav-logo {
  height: 2.5rem;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left;
}
.nav-logo--compact {
  height: 2.25rem;
  max-width: 150px;
}
@media (min-width: 768px) {
  .nav-logo { height: 3rem; max-width: 220px; }
  .nav-logo--compact { height: 2.5rem; max-width: 180px; }
}

/* 移动端菜单：一级项一组，组间一条细分隔线。
   线画在组的**上边**（相邻兄弟选择器），第一个分组天然没有线。
   不要改成 :last-of-type —— 面板底部那行「语言切换 + 展位预订」也是 div，
   会把 last-of-type 抢走，最后一条分隔线就永远去不掉。 */
.nav-mobile-group { padding: 0.75rem 0; }
.nav-mobile-group + .nav-mobile-group { border-top: 1px solid rgba(26, 11, 84, 0.08); }

/* ─────────────────────────────────────────────────────────────
 * 合作媒体页（/media/press）
 *
 * 版式参照 fairplus.cn/media-partners/：按类别分节，每节一个 logo 网格。
 * 网格这一层没法用现成的工具类表达 —— auto-fill / minmax / aspect-ratio
 * 都不在编译好的 tailwind.css 里 —— 所以写在这里。
 * 字号仍按主题的规矩在模板里内联 font-size:var(--fs-x)。
 * ───────────────────────────────────────────────────────────── */

.media-partner-section { margin-bottom: 3rem; }
.media-partner-section:last-of-type { margin-bottom: 0; }
.media-partner-section-title { margin-bottom: 1.25rem; }
.media-partner-section-note {
  font-size: var(--fs-meta);
  font-weight: 400;
  color: rgb(131, 121, 158);
  margin-left: 0.5em;
}

/* 每格最小 140px，宽度富余就多排几列 —— 和 fairplus 一致 */
.media-partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.25rem;
}
.media-partner-item { text-align: center; }

.media-partner-logo {
  background: #fff;
  border: 1px solid rgba(26, 11, 84, 0.1);
  border-radius: var(--radius-control);
  padding: 1rem;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.media-partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.media-partner-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 没传 Logo 时的文字占位：用媒体名顶着，不塞随机图 */
.media-partner-logo-text {
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: rgb(131, 121, 158);
  word-break: break-word;
}

/* hover 抬升**所有条目都有**（和 fairplus 一致）—— 它是「这块是活的」的视觉反馈，
   和「能不能点」是两回事：能不能点只由手型和是否真的包了 <a> 决定。
   （一开始只给有链接的项加了抬升，是想避免「有反应却点不动」的错觉，
     但那样整片网格大半是死的，看着更糟。） */
.media-partner-logo:hover {
  border-color: rgb(28, 78, 255);
  box-shadow: 0 10px 24px rgba(63, 74, 126, 0.12);
  transform: translateY(-2px);
}
/* 手型只给有链接的 —— 它才是「这里能点」的暗示 */
.media-partner-item--linked { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .media-partner-logo { transition: none; }
  .media-partner-logo:hover { transform: none; }
}

.media-partner-name {
  font-size: var(--fs-meta);
  color: rgb(26, 11, 84);
  margin-top: 0.625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-partner-name a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.media-partner-item--linked .media-partner-name a:hover { color: rgb(28, 78, 255); }