/* ============================================================
   广告位（后台「广告管理」配置；支持多页面多位置复用）
   - .adslot           外层，铺满所在栏宽度（无内边距，图片通栏）
   - .adslider         图片区，固定高度时高度写在它身上（内联，来自后台位置配置）
   - .adslide          单条广告；.on 为当前展示项
   - .adslider-dots    轮播圆点（多条广告时渲染）

   用法：模板里先 {assign} 好 adSlotAds / adSlotHeight，再
        {include file="public/ad_slot" /}
   轮播脚本 /skin/js/ad-slider.js 在 footer 统一加载（无广告位时自动空转）。
   ============================================================ */
.adslot {
  position: relative;
  width: 100%;
  float: left;
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 20px;
  background: #f2f2f2;
}
.adslot .adslider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.adslot .adslide { display: none; }
.adslot .adslide.on { display: block; }
.adslot .adslide img { display: block; width: 100%; height: auto; border: 0; }

/* 固定高度：图片按 cover 铺满，多张淡入淡出 */
.adslot-fixed .adslide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .45s ease;
}
.adslot-fixed .adslide.on { opacity: 1; z-index: 2; }
.adslot-fixed .adslide a { display: block; height: 100%; }
.adslot-fixed .adslide img { height: 100%; object-fit: cover; }

/* 轮播圆点 */
.adslot .adslider-dots {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 5;
  display: flex;
  gap: 6px;
}
.adslot .adslider-dots i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 2px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: background .3s;
}
.adslot .adslider-dots i.on { background: #ff4800; }

@media screen and (max-width: 768px) {
  .adslot { margin-bottom: 12px; }
  .adslot .adslider-dots { right: 6px; bottom: 6px; }
}