/* ============================================================
 * 视觉层 —— visual.css
 *
 * 由 server/tools/apply_visual.py 安装到每个站点（排在 base/pages/svg-assets/polish
 * 之后，因此同名权重下本文件生效）。**不要直接改站点里的副本**，改
 * server/tools/visual.css 后重新运行 apply_visual.py。
 *
 * 本文件只做视觉：
 *   1) 首页头图（AI banner，1600×600 按 8:3 展示，不裁切主体）
 *   2) 资讯/案例列表缩略图（album-*.jpg，1280×800 按 8:5 展示）
 *   3) 服务卡 / 商品卡配图（biz-*.jpg，contain 不变形）
 *   4) 相册位（album-*.jpg 挂到 .album-ph，不再是"图压在标题上"）
 *   5) 图标位兜底、底部固定条让位、极窄屏收敛
 * ============================================================ */

/* ---------- 1. 首页头图 ---------- */
.vc-banner {
  margin: 12px var(--sp-l, 16px) 0;
  aspect-ratio: 8 / 3;                 /* 1600×600 = 8:3，等比展示不裁切 */
  border-radius: 14px;
  background-color: #fff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 6px 18px rgba(17, 24, 39, .10);
  outline: 1px solid rgba(17, 24, 39, .05);
  outline-offset: -1px;
}
/* 头图后面紧跟的卡片原来常用负边距上提压住头屏（.stats / .cs-card / .overlap …），
   中间多了一张图后再叠压会把插图盖掉，这里统一把它推回正常间距 */
.vc-banner + * { margin-top: 12px !important; }
/* 头图插在 <main> 之前时（页头在 main 外面的站），main 里第一块也要断开负边距 */
.vc-banner + main.page > :first-child { margin-top: 12px !important; }

/* ---------- 2. 资讯 / 案例列表缩略图 ---------- */
.news-item.row-item.vc-hasthumb {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.news-item.row-item.vc-hasthumb .nbody { flex: 1 1 0; min-width: 0; }
.vc-thumb {
  flex: 0 0 76px;
  width: 76px;
  height: 48px;                          /* 1280×800 = 8:5，等比不裁主体 */
  border-radius: 10px;
  background-color: #eef2f8;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .05);
}
/* 多了缩略图后文字列变窄：元信息里的竖线分隔符让位，避免「阅读数」被挤到第二行 */
.news-item.row-item.vc-hasthumb .news-meta { gap: 6px; row-gap: 2px; }
.news-item.row-item.vc-hasthumb .news-meta .sp { display: none; }

/* ---------- 3. 服务卡 / 商品卡配图 ---------- */
.svc-thumb.vc-img,
.goods-thumb.vc-img,
.card-thumb.vc-img,
.thumb.vc-img,
.album-thumb.vc-img {
  background-color: #fff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;   /* contain：插画完整、不拉伸不变形 */
  color: transparent !important;
  font-size: 0 !important;               /* 藏掉原来的 emoji 字形 */
  line-height: 0 !important;
}
.svc-thumb.vc-img {
  flex: 0 0 76px !important;
  width: 76px !important;
  height: 76px !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(15, 91, 217, .08);
}
.svc-thumb.vc-img .dsh-ico,
.svc-thumb.vc-img svg,
.goods-thumb.vc-img .thumb-emoji { display: none !important; }
/* 商品卡缩略图统一成 1:1（插画是方形，方形图块不留白边），分类角标保留 */
.goods-thumb.vc-img {
  aspect-ratio: 1 / 1;
  background-color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .05);
}
.goods-thumb.vc-img .thumb-cate {
  background: rgba(0, 0, 0, .45);
  color: #fff;
}

/* ---------- 4. 相册位（12 / 13 站） ---------- */
.album-item { background-image: none !important; }        /* 旧规则把整张卡当底图，标题压在图上 */
.album-ph.vc-img {
  height: auto;
  aspect-ratio: 8 / 5;                   /* 与 1280×800 一致，整图显示不裁主体 */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #eef2f8;
  color: transparent;
}
.album-ph.vc-img::after { display: none; }                /* 关掉覆盖在照片上的格纹噪点 */
.album-ph.vc-img .ico { display: none; }

/* ---------- 5. 图标位兜底 ---------- */
/* 页头品牌位是空的（原设计留了个粉色空方框），补上矢量品牌标记 */
.sitehead-logo:empty,
.home-logo:empty,
.brand-logo:empty {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M24%2011%2011%2020v2.4h26V20L24%2011z%22%20fill%3D%22%23fff%22%20opacity%3D%22.95%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2225%22%20width%3D%224%22%20height%3D%2212%22%20rx%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%22.9%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2225%22%20width%3D%224%22%20height%3D%2212%22%20rx%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%22.9%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2225%22%20width%3D%224%22%20height%3D%2212%22%20rx%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%22.9%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2239%22%20width%3D%2226%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.8%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-size: 62% 62%;
  background-repeat: no-repeat;
}
/* 空图标位不要占地方（.hero-shield 之类已无内容的装饰位） */
.hero-shield:empty,
.face:empty { display: none !important; }

/* 行内图标位：文案开头的 emoji 被拆成「图标 + 文字」后，图标要跟文字基线居中对齐 */
.dsh-ico-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -.18em;
  margin-right: 5px;
}
.dsh-ico-slot .dsh-ico { display: block !important; margin: 0 !important; }

/* 图标位统一跟随品牌色：emoji 换成线性图标后若仍是纯黑描边，在浅色卡片里
   会比原来的彩色 emoji 更生硬，也和站点主色脱节 */
.m-ico, .p-ico, .pg-ico, .type-ico, .adv-ico, .card-ico, .goods-ico, .prod-ico { color: var(--brand, #0f5bd9); }

/* ---------- 6. 底部固定条让位（统一兜底） ---------- */
main.page {
  padding-bottom: calc(var(--tabbar-h, 52px) + var(--safe-b, 0px) + 16px);
}
main.page.has-cta {
  padding-bottom: calc(var(--tabbar-h, 52px) + 68px + var(--safe-b, 0px) + 16px) !important;
}
/* 26 / 27 站首页在 .page 之后还有「热门城市 / 站群互链」，让位由它们承担 */
main.page.has-cta.has-seofoot { padding-bottom: 20px !important; }

/* ---------- 7. 排版节奏收敛 ---------- */
/* 头图后第一个内容块不再额外上提，保持 12px 节奏 */
.vc-banner + .wrap,
.vc-banner + section.wrap { margin-top: 12px; }
/* 卡片标题与正文之间的节奏统一（原有 2-6px 不等） */
.card-title + .card-desc,
.sec-title + .f12 { margin-top: 6px; }
/* 两列等宽卡片内部元素不撑破 */
.grid-2 > *, .grid-3 > * { min-width: 0; }

/* ---------- 8. 极窄屏（320 / 360）收敛 ---------- */
@media (max-width: 360px) {
  .vc-thumb { flex: 0 0 80px; width: 80px; height: 50px; }
  .svc-thumb.vc-img {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
  }
  .vc-banner { margin-left: 12px; margin-right: 12px; border-radius: 12px; }
}