/* ============================================
   广告业务 ad.css（仅首页）
   参考：
     · 老站 G:\1\index.html「广告服务」.oneBs —— 鼠标经过分类切换内容，
       切换后保持（鼠标移到图片上不会回到默认）；用 JS 给标题加 .is-active
     · G:\chankao\index.html「多元化产品与服务」—— 整个栏目外层整块背景色，
       标题/图片之间留白，图片方形居中、四周留空、下面文字介绍
   本版做法：
     · 六个分类标题，第一个默认激活（红底白字）；鼠标经过任一标题 → 该标题激活，
       切换到对应图组；激活态保持（鼠标离开标题、移到图片上仍停在该组），
       直到悬停别的标题 —— 由 scripts/homepage/ad-tabs.js 控制 .is-active
     · 图组：6 组，每组 12 张（桌面 4 列 × 3 行），纯 flex，悬停不闪烁
     · 卡片：竖式长形框 —— 上方方形图片区（四周留白、图片水平垂直居中，
       横图上下留空、竖图左右留空），下方文字介绍两行
     · 栏目外层整块背景色 #f7f7f7（与 chankao 同款），内边距直接写在板块上，
       不设 96% 内缩，所以背景色一直铺到板块左右边缘，不会两侧留白
   ============================================ */

/* ---------- 1. 板块外层：整块背景色铺满视口宽度（两侧不留白） ----------
   板块本身在 .container（版心 80%）内，背景色直接写在板块上只会铺到版心边缘，
   视口两侧会露白。用 ::before 伪元素向左向右各扩出 (50vw - 50%)，
   让背景色铺满整个视口宽度；内容仍留在版心内，对齐不变。
   isolation:isolate 建立层叠上下文，保证伪元素 z-index:-1 不被 body 背景盖住。
---------------------------------------------------------------- */
.ad-section {
  position: relative;
  isolation: isolate;
  margin-top: 1.5rem;
  padding: 1.25rem 0 1.75rem;
}

.ad-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: #f7f7f7;               /* 整块浅灰底（chankao my-background-1 同色） */
  z-index: -1;
}

/* 内部容器：宽度铺满板块版心，背景色由伪元素负责 */
.ad-block {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ---------- 2. 六个分类标题（chankao .index-nav：白底块、间距 1rem） ---------- */
.ad-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 手机：2 列 */
  /* 标题块之间的间距：手机 1rem，桌面约 1.35rem（2026-10-23 在 1rem 基础上再开一点） */
  gap: clamp(1rem, 0.75rem + 0.5vw, 1.6rem);
}

.ad-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2.25rem + 1vw);
  padding: 0.6em 0.5em;
  background-color: #fff;
  color: var(--text-dark);
  /* 字号对齐 chankao 正文量级（其 body 为 calc(1.3rem+0.2vw)，1920 屏约 16.8px）：
     用本站的 clamp 流式写法实现 —— 14px 起步、992px 约 16px、≥1234px 封顶 16.8px */
  font-size: clamp(0.875rem, 0.78rem + 0.35vw, 1.05rem);
  line-height: 1.35;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 激活态（第一个默认激活，悬停/聚焦时由 JS 切换 .is-active） */
.ad-tab.is-active {
  background-color: var(--color-primary);
  color: #fff;
}

/* 键盘聚焦可见轮廓 */
.ad-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ---------- 3. 图片网格：6 组，每组 10 张（5 列 × 2 行） ---------- */
.ad-gallery {
  margin-top: calc(0.6rem + 0.4vw);        /* 与标题区的距离（随屏温和放大，原 0.6vw 偏大） */
}

.ad-panel {
  display: none;                           /* 默认全部隐藏，由 JS 给激活组加 .is-active */
  flex-wrap: wrap;
  justify-content: center;
  /* 卡片间距（2026-10-23 按参考站 szcaad 放大）：
     同行（列）间距 = 原来 calc(0.5rem + 0.4vw) 的两倍；
     行间间距再大一档，上下不显挤 */
  --ad-gap: calc(1rem + 0.8vw);
  column-gap: var(--ad-gap);
  row-gap: calc(1.25rem + 1vw);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-panel.is-active {
  display: flex;
}

/* 单张卡片：竖式长形框（白底）
   2026-10-23 恢复原状：不给 li 加 padding，避免 flex + aspect-ratio 组合下框变形。
   改用给 .ad-img-wrap 加 margin 让它自己往里缩（见下方）。 */
.ad-panel li {
  flex: 0 0 calc((100% - var(--ad-gap)) / 2);  /* 手机：2 列（与列间距同步） */
  display: flex;
  flex-direction: column;
  background-color: #fff;
  overflow: hidden;
}

.ad-panel a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

/* 图片区：去掉中间的灰色边框框层（2026-10-23）
   2026-10-24：图片四周外边距统一为 1.5rem（由原来上/左/右 2rem、下 0 改为四边一致），
     图片随之放大一点，且与下方文字介绍的间距也等于 1.5rem，四方边距统一 */
.ad-img-wrap {
  aspect-ratio: 1 / 1;                      /* 正方形图片区 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem;                           /* 四边统一 1.5rem：上/右/下/左均等 */
  overflow: hidden;                          /* 裁切悬停时的轻微放大 */
}

/* 图片（孙层）：铺满框的内容区 = 框尺寸 - 1rem，按原比例缩放、不裁切 */
.ad-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;                      /* 等比缩放居中，横图上下留空、竖图左右留空 */
  transition: transform 0.4s ease;
}

.ad-panel a:hover .ad-img-wrap img {
  transform: scale(1.03);
}

/* 鼠标经过：文字介绍变红（图片框边框已去掉，不再需要边框变色） */
.ad-panel a:hover .ad-caption {
  color: var(--color-primary);
}

/* 文字介绍：两行，超出省略；字号与分类标题同一量级
   2026-10-24 第 2 轮：改为 flex 容器 + flex:1，让文字在图片下方剩余空间里垂直居中 */
.ad-caption {
  display: flex;
  align-items: center;                       /* 垂直居中 */
  justify-content: center;                   /* 水平居中 */
  flex: 1;                                   /* 吃掉图片下方剩余高度，文字垂直居中 */
  margin: 0 1.5rem 1.5rem;                   /* 左右各 1.5rem（与图片对齐），底部 1.5rem */
  padding: 0;                                /* 去掉顶部 padding，间距由图片下边距承担 */
  font-size: var(--font-size-caption);      /* 全站统一图片标题字号（见 base.css 令牌） */
  line-height: 1.5;
  color: #333;
  text-align: center;
  transition: color 0.25s ease;
}

.ad-caption span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ---------- 4. 断点 ---------- */
@media (min-width: 480px) {
  .ad-tabs { grid-template-columns: repeat(3, 1fr); }

  /* 3 列图片：左右共 2 个列距 */
  .ad-panel li { flex: 0 0 calc((100% - 2 * var(--ad-gap)) / 3); }
}

/* ≥768px：一排 4 列（12 张 = 4 × 3，正好三行） */
@media (min-width: 768px) {
  .ad-panel li { flex: 0 0 calc((100% - 3 * var(--ad-gap)) / 4); }
}

/* ≥992px：六个标题排成一行 */
@media (min-width: 992px) {
  .ad-tabs { grid-template-columns: repeat(6, 1fr); }
}