/* ============================================================
   首页专属样式
   栅格参数取自盖德首页实测（容器 1200px）：
       顶部通栏      1200 × 90
       首屏三栏      200 / 680 / 292（+ 2×14 间距 = 1200）
       轮播          680 × 303
       广告位 4 连   4 × 291 × 76
       市场区块      200 / 690 / 310
   ============================================================ */

/* ---------------------------------------------------------- 顶部通栏 */
.top-banner {
  padding: 10px 0 0;
  line-height: 0;
  /* 通栏与首屏三栏之间的间距在这里给。以前是 portal-layout 自己 padding-top
     顶出来的，元素盒子实际贴在一起（外间距 0px），一改栅格就露出空隙。 */
  margin-bottom: var(--block-gap);
}
.top-banner img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}

/* ---------------------------------------------------------- 轮播 */
.carousel {
  position: relative;
  width: 680px;
  max-width: 100%;
  height: 303px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #E9F3F5;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.carousel-track { position: relative; width: 100%; height: 100%; }
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.carousel-slide.active { opacity: 1; pointer-events: auto; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 56px;
  border: none;
  background: rgba(0, 0, 0, .26);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s, background-color .2s;
}
.carousel:hover .carousel-arrow { opacity: 1; }
.carousel-arrow:hover { background: rgba(0, 0, 0, .46); }
.carousel-arrow.prev { left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.carousel-arrow.next { right: 0; border-radius: var(--radius) 0 0 var(--radius); }

.carousel-dots {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.carousel-dot {
  width: 9px; height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: all .2s;
}
.carousel-dot:hover { background: rgba(255, 255, 255, .85); }
.carousel-dot.active {
  width: 22px;
  border-radius: 5px;
  background: #fff;
}

/* ---------------------------------------------------------- 首屏实单采购面板 */
.quick-panel { margin-bottom: 0; }
.quick-panel .data-table td { padding: 9px 12px; }

/* ---------------------------------------------------------- 广告位 4 连 */
.ad-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  /* 上下间距由相邻区块的 margin 提供，这里不再用 padding 顶，
     否则「资讯行 → 广告位 → 市场区块」会出现 14 + 16 = 30px 的空档。 */
  padding: 0;
}
.ad-cell {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
  transition: transform .16s, box-shadow .16s;
}
.ad-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ad-cell img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------- 服务保障条
   替换原来的 4 张「广告位」图：那几张图本身画着分类名（中间体/试剂试验设备…）
   却 4 张全链到同一个页面，既误导用户又只覆盖部分分类。
   这里用浅底 + 单色图标，刻意克制 —— 首页下面已经有 6 个彩色楼层，
   再堆一排高饱和色块只会更花。 */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: var(--block-gap);
}
/* 图标与整块内容垂直居中（用户选定的方案）。
   左右内边距 20px：原先 15px 时图标离左边框只有 16px，用户反馈"左边需要间距"。
   gap 12px：图标与文字之间也留宽一点（原 10px）。 */
.trust-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
/* 图标（无底色）——原先是一个浅蓝圆底，按用户要求取消，只留图标本身。
   盒子仍是 34×34：它决定图标与文字的水平间距，尺寸动了几何就变。
   padding-top 是像素级实测调出的补偿（见下），与底色无关。 */
.trust-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 实测三点定线：padding 8px → 偏下 3.75px，padding 1px → 偏上 3.25px，
     即 padding 与位移约 1:1。取 4px 使墨迹落在视觉中心
     （四个字形实测偏差 ≤0.5px）。数值全部来自像素级复测，不靠推理。 */
  padding-top: 4px;
  line-height: 1;
  color: var(--brand-600);
  font-size: 16px;
}
.trust-cell b {
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
}
.trust-cell span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
/* 图标字号必须写在 .trust-cell .trust-icon 里（权重 0,2,0）——
   只写 .trust-icon（0,1,0）会被上面的 `.trust-cell span`（0,1,1）盖掉，
   实测那样算出来是 12px，34px 的圆里字符偏小。 */
.trust-cell .trust-icon {
  font-size: 16px;
  color: var(--brand-600);
}

/* ---------------------------------------------------------- 市场区块 */
.market-block {
  /* 与广告位、与彼此之间的统一间距（--block-gap） */
  margin-top: var(--block-gap);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.market-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #FBFDFE 0%, #FFFFFF 100%);
}
.market-title { margin: 0; font-size: 17px; }
.market-title a { color: var(--ink-900); }
.market-title a:hover { color: var(--brand-700); }
.market-meta { display: flex; align-items: center; gap: 14px; }

.market-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 310px;
  align-items: stretch;
}

/* ---- 左：彩色品类栏 ---- */
.market-rail { padding: 10px 0; }
.market-rail ul { list-style: none; margin: 0; padding: 0; }
/* 楼层左栏改为浅底 + 主色描边（背景与描边由模板内联给出，见 market_block.html）。
   文字色必须跟着从「白字」改成深色 —— 只改背景会变成浅底白字、直接不可读。 */
.market-rail a {
  display: block;
  padding: 7px 16px;
  color: var(--ink-700);
  font-size: 13px;
  /* 品类名完整显示、允许折行：原来是单行 + 模板 elide:11，
     整列变成「1-异丁基-2-甲基…」这种碎片。行长由 padding 定，
     折行时行距 1.45 保证两行不粘在一起。 */
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: background-color .14s, padding-left .14s, color .14s;
}
.market-rail a:hover {
  background: rgba(0, 0, 0, .045);
  color: var(--brand-700);
  text-decoration: none;
  padding-left: 22px;
}

/* ---- 中：产品卡网格 ---- */
.market-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);       /* 用 1px 背景色做出分隔线效果 */
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 12px 12px 10px;
  color: var(--ink-900);
  transition: background-color .15s;
}
.product-card:hover { background: #FCFEFF; text-decoration: none; }
/* 楼层产品图位。
   真实商品图是 800×800 的深色产品卡（白字产品名 + 青色 CAS 徽章），
   实测平均亮度只有 40–52/255。原来用 `cover` 把它塞进 139×118 的扁矩形，
   左右被裁掉，海报上的产品名从中间被截断（"二甲基咪唑-丙…"）。
   改成 `contain` + 与海报同色的深底：整张图完整显示，
   留白与海报融成一体（白色留白反而显廉价），再给个圆角让它读起来是"一张图"。 */
.pc-thumb {
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 9px;
  /* 与海报底色同色系，让 contain 的留白看不出来 */
  background: #16243a;
  border-radius: 4px;
}
/* 同 .cc-thumb：真实商品图是方形海报，用 cover 铺满扁矩形图位 */
.pc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .22s;
}
.product-card:hover .pc-thumb img { transform: scale(1.05); }
/* 注：原 .pc-noimg（无图时显示产品名文字）已由通用的 .thumb-empty 取代，
   定义在 components.css —— 化合物卡片与市场区块共用同一套占位样式。 */
.pc-name {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 5px;
  color: var(--ink-900);
  /* 完整显示（取数已按名字长度排序，短名在前）。
     给 2 行空间：绝大多数名字一行放得下，个别长的折成两行。
     min-height 固定 2 行高度，保证同行卡片的名字区高度一致、价格行不参差。 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-height: 39px;
}
.product-card:hover .pc-name { color: var(--brand-700); }
.pc-price { font-size: 13px; color: var(--accent-600); font-weight: 600; }
.pc-price b { font-size: 15px; }
.pc-cas { font-size: 11.5px; margin-top: 2px; }

/* ---- 右：优质供应商 ---- */
.market-enterprises { padding: 12px 14px; display: flex; flex-direction: column; }
.me-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
  padding-bottom: 9px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.me-list { list-style: none; margin: 0 0 12px; padding: 0; flex: 1; }
.me-list li {
  padding: 8px 0;
  border-bottom: 1px dashed #F0F4F7;
}
.me-list li:last-child { border-bottom: none; }
.me-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 3px;
}
.me-name:hover { color: var(--brand-700); }
.me-products { font-size: 12px; margin-top: 3px; line-height: 1.5; }

/* ============================================================
   滚动条组件（对齐盖德 #scrollDiv / #scrollDiv1）
   盖德用 JS 改 margin-top 实现；这里用纯 CSS @keyframes + 内容复制，
   不引入 JS，能悬停暂停，并尊重 prefers-reduced-motion。
   ============================================================ */

/* ---- 表头（产品名称 / 价格 / 更新时间）---- */
.ticker-head {
  display: grid;
  grid-template-columns: 1fr 82px 58px;
  gap: 6px;
  padding: 7px 8px;
  background: #F7FAFB;
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 12px;
  color: var(--ink-500);
}
.th-price, .th-time { text-align: center; }

/* ---- 滚动视口 ---- */
.ticker-viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: #fff;
}
.ticker-v { height: 208px; }          /* 与盖德一致：208px ≈ 4 行 × 51px */
.ticker-v-single { height: 28px; }    /* 与盖德 #scrollDiv1 的 28px 一致 */

/* 上下边缘渐隐：滚动时行是「淡出」而不是被硬切一刀，观感更连贯。
   单行条太矮，加遮罩会看不清，故只用于多行条。 */
.ticker-v {
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

.ticker-track {
  display: flex;
  flex-direction: column;
  animation: ticker-scroll-up 26s linear infinite;
  will-change: transform;
}
.ticker-v-single .ticker-track { animation-duration: 16s; }

/* 悬停暂停：用户想看清某一行时不会被滚走 */
.ticker-viewport:hover .ticker-track { animation-play-state: paused; }

/* 内容渲染两遍，位移 50% 即无缝衔接 */
@keyframes ticker-scroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* 无障碍：用户系统设置了「减少动态效果」就停止滚动 */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-v { height: auto; max-height: 208px; overflow-y: auto; }
}

/* ---- 单行报价行 ---- */
.ticker-row {
  display: grid;
  grid-template-columns: 1fr 82px 58px;
  gap: 6px;
  align-items: center;
  height: 51px;
  padding: 0 8px;
  border-bottom: 1px solid #F2F6F9;
  color: var(--ink-700);
  box-sizing: border-box;
}
.ticker-row:hover { background: #FCFEFF; text-decoration: none; }
.tr-main { min-width: 0; display: block; }
.tr-name {
  position: relative;
  display: block;
  font-size: 12.5px;
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-700);
}
/* 行首小圆点，对齐盖德的视觉 */
.tr-name::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--brand);
}
.ticker-row:hover .tr-name { color: var(--brand-700); }
.tr-sub {
  display: block;
  padding-left: 10px;
  font-size: 11px;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tr-price { text-align: center; line-height: 1.3; }
.tr-price b {                        /* 有真实价格时才用红色 */
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--price);
  white-space: nowrap;
}
.tr-price b.neg {                    /* 电议同样用红色（按业务要求统一标价位配色） */
  color: var(--price);
  font-weight: 500;
  font-size: 12px;
}
.tr-price i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tr-time {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-400);
  white-space: nowrap;
}

/* ---- 单行通告取（最新求购）---- */
.notice-ticker {
  display: flex;
  align-items: center;
  gap: 6px;
  /* 右栏是 flex 列、间距 14px，这里不能再加 margin-bottom，
     否则会员面板到通告条之间会变成 26px，和左中两栏对不齐。 */
  margin-bottom: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-xs);
}
.nt-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--price);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  white-space: nowrap;
}
.notice-ticker .ticker-viewport {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
}
.nt-row {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  font-size: 12px;
  color: var(--ink-500);
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}
.nt-row:hover { color: var(--brand-700); text-decoration: none; }
.nt-tag { color: var(--brand-700); flex: 0 0 auto; }
.nt-row em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.nt-row i { font-style: normal; color: var(--price); font-weight: 600; flex: 0 0 auto; }

/* ---- 市场区块内产品卡价格改红 ---- */
.pc-price { color: var(--price); }

/* ============================================================
   左栏「快速采购」（对齐盖德：放在产品导航正下方）
   ============================================================ */
.quick-buy { margin-bottom: 0; padding: 0; overflow: hidden; }
.qb-head {
  font-size: 15px;
  font-weight: 600;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
  padding-left: 24px;
}
/* 标题前的品牌色竖条，与其它 panel-title 保持一致 */
.qb-head::before {
  content: "";
  position: absolute;
  left: 13px; top: 14px;
  width: 3px; height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
}
.qb-tip {
  font-size: 12px;
  color: var(--ink-400);
  line-height: 1.65;
  padding: 11px 14px 0;
  margin: 0;
}
.qb-form { display: grid; gap: 7px; padding: 10px 14px 14px; }
.qb-form input {
  height: 32px;
  padding: 0 9px;
  font-size: 12.5px;
}

/* ============================================================
   供应商广告条（对齐盖德轮播下方那排 logo，带「广告」角标）
   ============================================================ */
/* 用 flex 而非固定 5 列 grid：商家数量不定（当前只有 3 家），
   grid 会留下空白格，flex 让现有单元格等分铺满整行。 */
.supplier-strip {
  display: flex;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
}
.supplier-cell {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px 9px;
  transition: background-color .15s;
}
.supplier-cell:hover { background: #FCFEFF; text-decoration: none; }
/* 商家还没上传 logo，先用 img/logo-ph.png 占位（厂房剪影）。
   注意这是**商家 logo**，与商品图无关 —— 商品图一律用真实图片。
   商家传了真 logo 后把这里换成 {{ m.logo.url }} 即可。 */
.sc-logo {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 5px;
}
.sc-name {
  font-size: 12.5px;
  color: var(--ink-700);
  text-align: center;
  line-height: 1.4;
  max-width: 100%;
  /* 一行 + 省略号：格子高度固定 76px，两行名称会把 logo 挤出去 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.supplier-cell:hover .sc-name { color: var(--brand-700); }
.sc-ad {
  position: absolute;
  right: 4px; bottom: 3px;
  font-size: 10px;
  color: var(--ink-400);
  background: #F2F6F9;
  border-radius: 2px;
  padding: 0 3px;
  line-height: 1.5;
}

/* ============================================================
   实单采购：标题行内嵌类目标签页
   ============================================================ */
/* 「实单采购」头部。
   量测过：容器只有 614px（首屏中栏），标题 60 + 「发布采购」57 之后
   标签只剩 458px，而 7 个标签需要 474px —— 差 16px，于是最后一个分类
   落单到第二行，把标题夹在中间，基线全乱。
   所以让**标签条独占一行**（614px 放 474px 余量充足），
   并加 nowrap + 横向滚动兜底：将来分类变多时是滚动，而不是撑破布局。 */
.quick-title { gap: 8px 14px; flex-wrap: wrap; }
.quick-title > span:first-child { flex: 0 0 auto; }
/* 「发布采购」推到第一行右侧 */
.quick-title > .more { margin-left: auto; flex: 0 0 auto; }
.inquiry-tabs {
  flex: 0 0 100%;          /* 独占一行 */
  order: 3;
  display: flex;
  flex-wrap: nowrap;       /* 一行到底，不再折行 */
  gap: 0 14px;
  font-size: 13px;
  font-weight: 400;
  overflow-x: auto;
  padding-bottom: 2px;
  /* 细滚动条：只在真的放不下时才出现，不占视觉 */
  scrollbar-width: thin;
}
.inquiry-tabs a { flex: 0 0 auto; white-space: nowrap; }
.inquiry-tabs::-webkit-scrollbar { height: 4px; }
.inquiry-tabs::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 2px;
}
.inquiry-tabs a {
  color: var(--ink-500);
  padding: 1px 0;
  border-bottom: 2px solid transparent;
  transition: all .14s;
}
.inquiry-tabs a:hover { color: var(--brand-700); text-decoration: none; }
.inquiry-tabs a.active {
  color: var(--brand-700);
  font-weight: 600;
  border-bottom-color: var(--brand);
}

/* 采购表格里的行首小圆点 */
.inq-dot {
  display: inline-block;
  width: 3px; height: 3px;
  margin-right: 7px;
  vertical-align: 3px;
  border-radius: 50%;
  background: var(--brand);
}

/* 数量与时间用红色 —— 采购方最关心的两个字段（对齐盖德） */
.data-table td.hl {
  color: var(--price);
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   注：原「平台数据 / 供应商分布 / 热门产品」全宽三栏条（.stat-row）
   已按需求整体删除。那三块信息量低（平台数据是几个数字、供应商分布只有
   2 个地区、热门产品与右栏「实时报价」高度重叠），只是在拉长页面。
   ============================================================ */

/* ---------------------------------------------------------- 响应式 */
@media (max-width: 1220px) {
  .carousel { width: 100%; height: auto; aspect-ratio: 680 / 303; }
}
@media (max-width: 1180px) {
  .market-body { grid-template-columns: 180px minmax(0, 1fr); }
  .market-enterprises {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
  }
  .me-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
  .ad-row-4, .trust-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .market-body { grid-template-columns: 1fr; }
  .market-rail { display: none; }             /* 小屏隐藏彩色品类栏，避免占满首屏 */
  .market-products { grid-template-columns: repeat(2, 1fr); border-left: none; border-right: none; }
  .market-enterprises { grid-column: auto; grid-template-columns: 1fr; }
  .ad-row-4, .trust-strip { grid-template-columns: 1fr; }
  .carousel-arrow { opacity: 1; }
  .supplier-strip { flex-wrap: wrap; }
  .supplier-cell { flex: 1 1 45%; }
  /* 标签条已在桌面端独占一行，这里不再重复定义（避免两处漂移） */
}

/* ============================================================
   轮播文字层（底图改为 GPT 生成的摄影图后新增）
   ------------------------------------------------------------
   生成图按提示词要求「主体在右、左侧留干净留白」，所以左侧是明亮的 ——
   原本的白字在上面看不清。改为：
     1. 左侧一层由白到透明的水平渐变罩 → 任何底图上都能保证文字对比度
     2. 文字用品牌深色（也与通栏原本的深色字风格一致）
   ============================================================ */
.carousel-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* 对比度实测（隐藏文字层后采样文字区像素）：
     原来这一版把副标题压在照片亮部上只有 2.91:1，不合格。
     现在把不透明度整体提高、衰减推后到 58% 才开始快速透明，
     文字区（左侧约 45%）始终有足够遮盖，主体（在右侧）仍完整可见。 */
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .94) 34%,
    rgba(255, 255, 255, .72) 46%,
    rgba(255, 255, 255, .28) 58%,
    rgba(255, 255, 255, 0) 72%);
}
.slide-copy {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 58%;
  /* 渐变罩已保证对比度，这里只补一点点描边式阴影兜底 */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.slide-title {
  position: relative;
  font-size: 25px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--brand-800, #0B5C8A);
  padding-left: 13px;
  letter-spacing: .5px;
}
/* 标题左侧的品牌色竖条（沿用原设计的视觉锚点） */
.slide-title::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
}
.slide-sub {
  font-size: 13.5px;
  /* 原为 --brand-700，实测在照片亮部上只有 2.91:1。
     中性深色在彩色照片上比同亮度的品牌色更稳。 */
  color: var(--ink-700);
  line-height: 1.5;
  font-weight: 500;
}
.slide-pill {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-700);
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(24, 154, 237, .28);
  border-radius: 999px;
}

/* 通栏的文字层 */
.top-banner-link { position: relative; display: block; line-height: 0; }
/* 通栏底图是虚焦光斑，左侧亮、右侧偏蓝。文字只占左侧，
   加一层向左加厚的浅色罩，保证文字区始终够亮。 */
.top-banner-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .88) 0%,
    rgba(255, 255, 255, .78) 45%,
    rgba(255, 255, 255, .35) 68%,
    rgba(255, 255, 255, 0) 88%);
}
.tb-copy {
  position: absolute;
  left: 34px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  line-height: 1.3;
  z-index: 1;
}
.tb-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--brand-800, #0B5C8A);
  letter-spacing: .3px;
}
.tb-sub {
  font-size: 13px;
  /* 同上：底图是虚焦光斑，浅色字实测只有 3.45:1 */
  color: var(--ink-700);
  font-weight: 500;
}

/* 手机上收起副标题，避免文字压到图上的主体 */
@media (max-width: 860px) {
  .slide-copy { left: 18px; max-width: 76%; }
  .slide-title { font-size: 19px; }
  .slide-sub { display: none; }
  .tb-copy { left: 16px; gap: 8px; }
  .tb-title { font-size: 15px; }
  .tb-sub { display: none; }
}