/* ===========================================================================
   广告位
   规则只有一条：容器先把自己撑到广告尺寸，内容晚到也不许推挤页面（CLS）。
   颜色全部走主题变量，四种皮肤与深色模式都不用单独覆盖。
   =========================================================================== */

.ad-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  margin: 18px 0;
}

/* 没配广告、也没开占位时整个位子消失，不留空白 */
.ad-slot.is-off { display: none; }

.ad-slot.is-ph {
  min-height: 90px;
  border: 1px dashed var(--surface-3);
  border-radius: 10px;
  background: var(--surface-2);
}

.ad-ph-txt {
  font-size: 12px;
  color: var(--gray-500);
  letter-spacing: .5px;
}

/* 「广告」角标：《广告法》要求可识别，位置固定右上，不遮内容 */
.ad-tag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  padding: 0 6px;
  font-size: 11px;
  line-height: 17px;
  color: var(--gray-600);
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 6px;
  pointer-events: none;
}

.ad-body { width: 100%; display: flex; justify-content: center; }
/* 素材尺寸写错也不许把位子撑高：高度由容器说了算，图按比例缩 */
.ad-body img { max-width: 100%; max-height: 90px; width: auto; height: auto; }
.ad-body iframe { max-width: 100%; border: 0; }

/* 详情页：两个横幅位夹在纸面里，左右与正文对齐，不额外加边框 */
.dt-page .ad-slot { margin: 20px 0 24px; }
.dt-page .ad-slot.is-ph { background: transparent; }

/* 栏目页原生卡：和工具卡同尺寸，虚线描边以示区分 */
.tools-grid .ad-card { border-style: dashed; }
.ad-card .cat-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ad-card .ad-tag { top: 6px; right: 6px; border-radius: 6px; }

/* 首页信息流位：夹在分类区块之间，与区块的节奏对齐 */
.home-page .ad-slot { margin: 8px 0 26px; }

@media (max-width: 768px) {
  .ad-slot, .ad-slot.is-ph { min-height: 100px; margin: 14px 0; }
  .dt-page .ad-slot { margin: 16px 0 20px; }
  .ad-body img { max-height: 100px; }
}