/* ============================================================
   首页广告位（v6.9）—— 独立样式，不依赖任何模板变量
   在 header.php 中于 template-*.css 之后加载，
   保证 default / elegant / mint / modern 四套模板样式下布局一致。
   列数由后台配置，通过 CSS 自定义属性下发：
     --ad-text-cols   桌面文字列数
     --ad-tab-cols    平板文字列数
     --ad-mob-cols    手机文字列数
     --ad-banner-cols 桌面横幅列数
     --ad-banner-tab-cols 平板横幅列数
     --ad-gap         卡片间距
   ============================================================ */
.adslot {
  display: block;
  position: relative;              /* v6.9：右下角「广告」标识的定位基准 */
  width: 100%;
  padding: clamp(40px, 6vw, 72px) 0;
  box-sizing: border-box;
  color: #fff;
  overflow: hidden;
}
.adslot *,
.adslot *::before,
.adslot *::after { box-sizing: border-box; }

.adslot .adslot-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

/* ---------- 标题区 ---------- */
.adslot .adslot-header { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.adslot .adslot-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
}
.adslot .adslot-subtitle {
  margin: 10px 0 0;
  font-size: clamp(.85rem, 1.4vw, 1rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}
.adslot .adslot-line {
  display: block;
  width: 46px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, .45);
}

/* 浅色 / 透明背景：文字改为深色 */
.adslot.adslot-light { color: #0f172a; }
.adslot.adslot-light .adslot-title { color: #0f172a; }
.adslot.adslot-light .adslot-subtitle { color: #475569; }
.adslot.adslot-light .adslot-line { background: #94a3b8; }

/* ---------- 横幅广告 ---------- */
.adslot .adslot-banners {
  display: grid;
  grid-template-columns: repeat(var(--ad-banner-cols, 1), minmax(0, 1fr));
  gap: var(--ad-gap, 20px);
  margin-bottom: var(--ad-gap, 20px);
}
.adslot .adslot-banners:last-child { margin-bottom: 0; }
.adslot .adslot-banner {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  transition: transform .25s ease, box-shadow .25s ease;
}
a.adslot-banner:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }
.adslot .adslot-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border: 0;
}
.adslot .adslot-banner-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 20px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0));
  color: #fff;
}
.adslot .adslot-banner-caption strong { font-size: clamp(1rem, 1.8vw, 1.3rem); line-height: 1.35; }
.adslot .adslot-banner-caption small { font-size: .85rem; opacity: .85; line-height: 1.4; }

/* ---------- 文字广告（行列网格） ---------- */
.adslot .adslot-texts {
  display: grid;
  grid-template-columns: repeat(var(--ad-text-cols, 4), minmax(0, 1fr));
  gap: var(--ad-gap, 20px);
  align-items: stretch;
}
.adslot .adslot-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(110px, 14vw, 168px);
  padding: clamp(18px, 2.6vw, 30px) 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  text-align: center;
  text-decoration: none;
  word-break: break-word;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
a.adslot-text:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}
.adslot.adslot-light .adslot-text {
  background: #fff;
  border-color: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}
.adslot.adslot-light a.adslot-text:hover { background: #f8fafc; }
.adslot .adslot-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1.6;
  background: rgba(255, 255, 255, .22);
  color: inherit;
}
.adslot.adslot-light .adslot-badge { background: #eef2ff; color: #3730a3; }
.adslot .adslot-text-main {
  display: block;
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  color: inherit;
}
.adslot .adslot-text-sub {
  display: block;
  margin-top: 10px;
  font-size: clamp(.8rem, 1.3vw, .95rem);
  line-height: 1.55;
  opacity: .82;
  color: inherit;
}

/* ---------- 平板 / iPad（769px ~ 1024px） ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .adslot .adslot-texts { grid-template-columns: repeat(var(--ad-tab-cols, 2), minmax(0, 1fr)); }
  .adslot .adslot-banners { grid-template-columns: repeat(var(--ad-banner-tab-cols, 1), minmax(0, 1fr)); }
  .adslot .adslot-text { min-height: 128px; }
}

/* ---------- 手机（≤768px） ---------- */
@media (max-width: 768px) {
  .adslot { padding: 36px 0; }
  .adslot .adslot-texts { grid-template-columns: repeat(var(--ad-mob-cols, 1), minmax(0, 1fr)); }
  .adslot .adslot-banners { grid-template-columns: minmax(0, 1fr); }
  .adslot .adslot-text { min-height: 104px; padding: 18px 12px; }
  .adslot .adslot-text-main { font-size: clamp(1.35rem, 6vw, 2rem); }
  .adslot .adslot-banner img { max-height: 260px; }
  .adslot .adslot-banner-caption { padding: 22px 14px 12px; }
}

/* ---------- 2026-11-11 手机端可见性加固（负责人反馈「精选推荐手机端空白」） ----------
   静态排查结论：全站样式表（style/模板×4/custom/responsive）无任何规则在手机断点
   命中 .adslot，桌面与手机共享同一 HTML+CSS 逻辑——空白最可能来自数据态
   （空广告位 fallback + 透明/淡背景 + 无标题 = 视觉纯空白）或旧缓存。
   本节为防御性加固：任何数据态下手机端广告位均可见、不塌陷、不破图。 */
@media (max-width: 768px) {
  section.adslot { min-height: 96px !important; }
  section.adslot.adslot-empty { min-height: 72px !important; }
  /* 透明/无背景的空位兜底淡蓝底，避免「纯空白」观感 */
  section.adslot.adslot-empty.adslot-bg-none {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
  }
  section.adslot.adslot-empty.adslot-light,
  section.adslot.adslot-empty.adslot-bg-none { color: #fff !important; }
  section.adslot.adslot-empty.adslot-light .adslot-title,
  section.adslot.adslot-empty.adslot-bg-none .adslot-title { color: #fff !important; }
  .adslot .adslot-banner img { display: block; width: 100%; }
}

/* ---------- 超窄屏（≤360px） ---------- */
@media (max-width: 360px) {
  .adslot .adslot-texts,
  .adslot .adslot-banners { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ------------------------------------------------------------
   v6.6 模板隔离：style.css 在 992/768/480 断点用 !important 改写
   全局 h1/h2/h3 字号，会把广告位标题压小；模板 CSS 里的 .section
   也可能改写区块间距。这里用更高优先级 + !important 锁定广告位
   自身版式，保证 default / elegant / mint / modern 四套模板，
   以及手机 / iPad / 桌面三端表现完全一致。
   ------------------------------------------------------------ */
section.adslot { padding: clamp(40px, 6vw, 72px) 0 !important; margin: 0 !important; }
section.adslot .adslot-container { max-width: 1200px !important; }
.adslot h2.adslot-title {
  font-size: clamp(1.35rem, 2.6vw, 2rem) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  font-weight: 800 !important;
}
.adslot p.adslot-subtitle {
  font-size: clamp(.85rem, 1.4vw, 1rem) !important;
  line-height: 1.6 !important;
  margin: 10px 0 0 !important;
}
.adslot .adslot-text-main { font-size: clamp(1.4rem, 3vw, 2.5rem) !important; }
.adslot .adslot-text-sub  { font-size: clamp(.8rem, 1.3vw, .95rem) !important; }

@media (max-width: 992px) {
  .adslot h2.adslot-title { font-size: clamp(1.3rem, 3.2vw, 1.75rem) !important; }
}
@media (max-width: 768px) {
  section.adslot { padding: 36px 0 !important; }
  .adslot h2.adslot-title { font-size: clamp(1.3rem, 5vw, 1.7rem) !important; }
  .adslot .adslot-text-main { font-size: clamp(1.35rem, 6vw, 2rem) !important; }
}

/* ------------------------------------------------------------
   v6.9 「广告」标识：《广告法》要求广告具有可识别性。
   固定在整个广告位右下角，四套模板 / 手机 / iPad / 桌面表现一致；
   pointer-events:none 避免遮挡广告卡片的点击。
   ------------------------------------------------------------ */
section.adslot { position: relative !important; }
section.adslot .adslot-watermark {
  position: absolute !important;
  right: clamp(12px, 2vw, 24px) !important;
  bottom: clamp(10px, 1.6vw, 18px) !important;
  z-index: 6;
  pointer-events: none;
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 3px;
  background: rgba(0, 0, 0, .10);
  color: rgba(255, 255, 255, .90) !important;
  font-size: 11px !important;
  line-height: 1.2;
  letter-spacing: .1em;
  font-weight: 400;
  opacity: .85;
}
section.adslot.adslot-light .adslot-watermark {
  border-color: rgba(15, 23, 42, .32) !important;
  background: rgba(255, 255, 255, .35) !important;
  color: rgba(15, 23, 42, .62) !important;
}
/* 空广告位：无广告条目时给一个舒适高度，避免出现突兀的细条 */
section.adslot.adslot-empty { padding: clamp(36px, 5vw, 56px) 0 !important; }
section.adslot.adslot-empty .adslot-header { margin-bottom: 0 !important; }
@media (max-width: 480px) {
  section.adslot .adslot-watermark {
    font-size: 10px !important; right: 10px !important; bottom: 8px !important;
  }
}

/* ============================================
   v7.2 首页图片 Banner 自适应（PC / iPad / 手机，四套模板统一）
   ------------------------------------------------------------
   v7.1 修复了旧模板 min-height 造成的大块空白，但手机/iPad 仍用
   height:30vw/52vw + object-fit:cover + object-position:left center，
   把 1920x420 横图放大后裁掉右侧约 60%，用户只看到左侧三分之一。
   v7.2 改为：<=1100px 时高度完全交给图片自身比例（aspect-ratio:auto +
   height:auto + object-fit:contain），整图完整显示、不裁切、无空白；
   <=768px 由 index.php 的 <picture> 切换到 750x720 竖版专用图，
   因此手机端既完整显示又有足够高度和可读字号。
   本段在 style.css / 四套 template-*.css / ads.css 中逐字一致，
   无论模板是否加载、加载顺序如何，表现一致。
   ============================================ */

.banner.banner-has-images {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: normal !important;
    justify-content: normal !important;
    text-align: left !important;
    background: #0b6b2c !important;
    border: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.banner-has-images .banner-slide-image {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background: #0b6b2c !important;
    line-height: 0 !important;
    overflow: hidden !important;
    animation: none !important;
    transition: opacity 0.6s ease !important;
}
.banner-has-images .banner-slide-image.active {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1 !important;
}
.banner-has-images .banner-slide-image::before,
.banner-has-images .banner-slide-image::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* v7.2：<picture> 默认是 inline，会产生基线间隙，必须块级化 */
.banner-has-images .banner-picture {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
}

/* 桌面 >1100px：按 1920:420 原比例完整显示 */
.banner-has-images .banner-slide-image .banner-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1920 / 420 !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.banner-has-images .banner-dots {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 5 !important;
    line-height: 1 !important;
    list-style: none !important;
}
.banner-has-images .banner-image-link { z-index: 2 !important; }

/* v7.2 核心：iPad / 手机 / 超小屏一律按图片自身比例完整显示，绝不裁切。
   桌面横图 1920x420 → 屏宽 x 0.21875；手机竖图 750x720 → 屏宽 x 0.96。
   容器高度 = 当前帧图片高度，既无大块空白也不会只露出三分之一。 */
@media (max-width: 1100px) {
    .banner-has-images .banner-slide-image .banner-image {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

@media (max-width: 768px) {
    .banner.banner-has-images { min-height: 0 !important; }
    .banner-has-images .banner-dots { bottom: 10px !important; gap: 6px !important; }
    .banner-has-images .banner-dots span { width: 8px !important; height: 8px !important; }
    .banner-has-images .banner-dots span.active { width: 22px !important; }
}