/* ============================================================
   解决方案-行业解决-列表 (page-solutions) — 设计稿 393:1570, 1920 基准
   白色头部 + 深色banner + 深色列表 (半图半文交替 + 通栏大图)
   ============================================================ */

/* ---------- 顶部导航: 设计稿「顶部-无底子」= 透明底白字, 滚动后白底深字
   (「顶部-白色底子」在设计稿中 visible: False, 隐藏) ---------- */
body.page-solutions .site-header { background: transparent; }
body.page-solutions .site-header .navbar > li > a { color: #fff; }
body.page-solutions .site-header .navbar > li.active > a { color: #2168E5; }
body.page-solutions .site-header .navbar > li > a:hover { color: rgba(255, 255, 255, .75); }
body.page-solutions .site-header .vr-pill { border-color: rgba(255, 255, 255, .6); color: #fff; }
body.page-solutions .site-header:not(.is-scrolled):not(.dd-open) .icon-btn img { filter: brightness(0) invert(1); }
body.page-solutions .site-header:not(.is-scrolled):not(.dd-open) .nav-toggle span { background: #fff; }
body.page-solutions .site-header.is-scrolled,
body.page-solutions .site-header.dd-open { background: #fff; box-shadow: inset 0 -1px 0 0 #EBEBEB; }
body.page-solutions .site-header.is-scrolled .navbar > li > a,
body.page-solutions .site-header.dd-open .navbar > li > a { color: #2E3033; }
body.page-solutions .site-header.is-scrolled .navbar > li.active > a,
body.page-solutions .site-header.dd-open .navbar > li.active > a { color: #2168E5; }
body.page-solutions .site-header.is-scrolled .navbar > li > a:hover,
body.page-solutions .site-header.dd-open .navbar > li > a:hover { color: #2168E5; }
/* 滚动/下拉白底时 vr-pill 变深色 (否则白字白框在白底不可见) */
body.page-solutions .site-header.is-scrolled .vr-pill,
body.page-solutions .site-header.dd-open .vr-pill {
  border-color: #5C6066;
  color: #2E3033;
}

/* ============================================================
   区块1: banner (1920×760, 深色遮罩 + 标题)
   ============================================================ */
.sol-banner {
  position: relative;
  height: 760px;
  overflow: hidden;
  background: #656565;
}
.sol-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sol-banner-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .43);   /* 设计稿 #000 a0.43 */
}
.sol-banner-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.sol-banner-title {
  font-size: 56px;
  font-weight: 749;
  line-height: 84px;
  color: #fff;
  text-align: center;
}
.sol-banner-sub {
  font-size: 22px;
  font-weight: 489;
  line-height: 28px;
  color: #fff;
  text-align: center;
}

/* ============================================================
   区块2: 行业列表 (#1B1C1F, 半图半文交替 + 通栏大图)
   ============================================================ */
.sol-list {
  background: #1B1C1F;
  padding: 120px 0 152px;
}
.sol-item {
  display: flex;
  align-items: center;
  gap: 56px;
}
.sol-item + .sol-item { margin-top: 136px; }
/* 半图半文: 图在右 (文案在左) */
.sol-item--reverse {
  flex-direction: row-reverse;
  justify-content: space-between;
}
/* 通栏大图: 文案头行 + 整宽图 */
.sol-item--wide {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.sol-img {
  flex: none;
  width: 853px;
}
.sol-img a {
  display: block;
}
.sol-img img {
  display: block;
  width: 100%;
  aspect-ratio: 853 / 480;
  object-fit: cover;
  border-radius: 16px;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.sol-img a:hover img {
  transform: scale(1.02);
  opacity: .9;
}
.sol-item--reverse .sol-img { width: 853px; }
.sol-item--wide .sol-img { width: 100%; }
.sol-item--wide .sol-img img { aspect-ratio: 1440 / 600; }

.sol-body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 450px;
}
.sol-item--wide .sol-body {
  max-width: none;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 32px;
}
.sol-body-left { max-width: 481px; }
.sol-name {
  font-size: 36px;
  font-weight: 666;
  line-height: 48px;
  color: #fff;
}
.sol-desc {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 354;
  line-height: 28px;
  color: #fff;
}
/* 标签胶囊 */
.sol-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}
.sol-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 22px;
  border-radius: 100px;
  background: rgba(56, 136, 252, .2);
  font-size: 14px;
  font-weight: 666;
  color: #C7DEFF;
}
/* 分隔线 (虚线: 1px 实线在深色底上看不出断续, 用重复渐变控制 6px 线 / 6px 间隔) */
.sol-divider {
  display: block;
  height: 1px;
  margin-top: 40px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 6px, transparent 6px 12px);
}
/* 适用场景 */
.sol-scene { margin-top: 40px;     min-width: 450px;}
@media (max-width: 1600px) {
  .sol-scene { min-width: 0; width: 100%; }
  .sol-scene-box { grid-template-columns: repeat(2, 1fr); }
}
.sol-scene-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sol-scene-label {
  font-size: 22px;
  font-weight: 666;
  color: #fff;
}
.sol-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 489;
  color: rgba(255, 255, 255, .85);
  transition: color .3s var(--ease);
}
.sol-more:hover { color: #fff; }
.sol-more svg { width: 20px; height: 20px; flex: none; }
.sol-scene-box {
  margin-top: 20px;
  padding: 20px;
  border-radius: 8px;
  background: #2C2E33;
  display: grid;
  /* 按容器实际宽度自适应列数: 窄卡片(sol-body 限宽 450px)得 2 列, 宽卡片仍 3 列。
     原来是写死的 3 列, 在 450px 容器里每列仅约 129px, 英文标签放不下会被 overflow 裁掉 */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  overflow: hidden;
  min-width: 0;
}
.sol-scene-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 513;
  color: #fff;
  white-space: normal;             /* 放不下时换行, 而不是被 overflow:hidden 硬裁 (原 nowrap 会把长标签截成 "Bu…") */
}
.sol-scene-item .sol-scene-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

/* ============================================================
   响应式 (≤1100 / ≤900 / ≤767 / ≤400)
   ============================================================ */
@media (max-width: 1100px) {
  .sol-banner { height: 560px; }
  .sol-banner-title { font-size: 40px; line-height: 60px; }
  .sol-banner-sub { font-size: 18px; }
  .sol-list { padding: 80px 0 100px; }
  .sol-item, .sol-item--reverse { gap: 32px; }
  .sol-img, .sol-item--reverse .sol-img { width: 55%; }
  .sol-body { max-width: none; }
  .sol-name { font-size: 32px; }
  /* 通栏大图: 头部左右两列改上下堆叠, 避免 901~1019 溢出 */
  .sol-item--wide .sol-body { flex-direction: column; gap: 24px; }
  .sol-body-left { max-width: none; }
}
@media (max-width: 900px) {
  .sol-banner { height: 480px; }
  /* 半图半文改单列: 图在上文案在下 */
  .sol-item, .sol-item--reverse {
    flex-direction: column;
    align-items: flex-start;
  }
  .sol-img, .sol-item--reverse .sol-img { width: 100%; }
}
@media (max-width: 767px) {
  /* 客户要求: 酒店物业(Hospitality & Property) / 交通物流(Transport & Logistics)
     —— 移动端改为「方案图在上, 文字内容在下」(DOM 里是文字在前, 故用 order 调换) */
  .sol-item--wide .sol-img { order: -1; }
  /* 图片提到前面后, 原用于「文字与图之间」的 32px 下边距会跑到项尾,
     导致该项与下一项间距变 88px (其他项 56px), 故在移动端清零 */
  .sol-item--wide .sol-body { margin-bottom: 0; }

  .sol-banner { height: 420px; }
  .sol-banner-title { font-size: 30px; line-height: 44px; padding: 0 20px; }
  .sol-banner-sub { font-size: 16px; line-height: 24px; padding: 0 24px; }
  .sol-list { padding: 56px 0 72px; }
  .sol-item + .sol-item { margin-top: 72px; }
  .sol-name { font-size: 28px; line-height: 40px; }
  .sol-desc { font-size: 15px; line-height: 26px; margin-top: 16px; }
  .sol-tags { gap: 10px; margin-top: 16px; }
  .sol-tag { height: 34px; padding: 0 18px; font-size: 13px; }
  .sol-divider { margin-top: 28px; }
  .sol-scene { margin-top: 28px;         min-width: unset;}
  .sol-scene-box { grid-template-columns: repeat(2, 1fr); }
  .sol-scene-label { font-size: 20px; }
  .sol-scene-item { font-size: 15px; }
  .sol-scene-item .sol-scene-icon { width: 20px; height: 20px; }
  .sol-img img { aspect-ratio: 4 / 3; }
  .sol-item--wide .sol-img img { aspect-ratio: 16 / 9; }
}
@media (max-width: 400px) {
  .sol-banner { height: 360px; }
  .sol-banner-title { font-size: 26px; line-height: 38px; }
  .sol-banner-sub { font-size: 14px; line-height: 22px; padding: 0 16px; }
  .sol-list { padding: 48px 0 60px; }
  .sol-item + .sol-item { margin-top: 56px; }
  .sol-name { font-size: 25px; line-height: 36px; }
  .sol-tags { gap: 8px; }
  .sol-tag { height: 30px; padding: 0 14px; font-size: 12px; }
  .sol-scene-box { padding: 14px; gap: 10px; }
  .sol-scene-item { font-size: 14px; }
  .sol-scene-label { font-size: 18px; }
}