/* ============================================================
   首页广告位 · 卡片尺寸对齐「接口上新」API 卡片
   ------------------------------------------------------------
   theme.css 里广告卡片是紧凑版（min-height 170px / padding 18-20px），
   比 API 卡片（padding 20px、3 列、高度约 210px）明显小一号。
   这里统一放大到与 API 卡片同尺寸；列数由 home-ad-carousel.js 固定为 3。
   独立成文件的原因：theme.css 以核心 VS_VERSION 作版本号，核心版本不变时
   浏览器 / CDN 会一直用旧缓存，改动无法生效；本文件用 filemtime 作版本号。
   ============================================================ */

/* 广告位容器：与上方 4 步卡片、新用户横幅完全同宽（整屏铺满，只留整站 gutter）。
   theme.css 原本固定 max-width: 64rem 居中，之后虽放大到 80rem，在 1440 屏上
   左右仍各空约 80px，看起来像没铺满，这里直接取消上限。 */
.th5-ad__wrap {
  max-width: none;
  padding: 0 1rem;
}
@media (min-width: 640px) {
  .th5-ad__wrap { padding: 0 1.25rem; }
}
@media (min-width: 1024px) {
  .th5-ad__wrap { padding: 0 2rem; }
}

.th5-ad__inner {
  padding: 24px;
  border-radius: 14px;
  min-height: 228px;
  gap: 18px;
}

.th5-ad__badge {
  margin-bottom: 14px;
}
.th5-ad__badge i {
  width: 14px;
  height: 14px;
}

.th5-ad__title {
  font-size: 1.18rem;
  margin: 0 0 12px;
}
.th5-ad__desc {
  font-size: 0.9rem;
  margin: 0 0 16px;
}
.th5-ad__btn {
  padding: 8px 16px;
  font-size: 0.85rem;
}

/* 图文广告右侧图片：桌面端占卡片约一半宽度，高度贴着卡片内容区，不再缩成小图 */
.th5-ad__media {
  flex: 0 0 55%;
  max-width: 340px;
  min-height: 186px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.th5-ad__img {
  width: 100%;
  height: 186px;
  object-fit: cover;
  border-radius: 10px;
}

/* 单条广告：限宽与网格中一张卡片相当，避免拉成横幅 */
.th5-ad-carousel.is-single .th5-ad__inner {
  max-width: 420px;
}
/* 单条广告居中：slide 作为轨道(flex)子项需占满整行宽度，
   justify-content: center 才有剩余空间把卡片水平居中；
   否则 slide 只按内容宽贴左，卡片会停在屏幕左侧。 */
.th5-ad-carousel.is-single .th5-ad-carousel__slide {
  flex: 1 1 100%;
  justify-content: center;
}

/* 整卡可点击（目标由 data-th5-ad-href 提供，脚本见 home-ad-click.js） */
.th5-ad__inner[data-th5-ad-href] {
  cursor: pointer;
}

/* 窄屏切页时容器高度随当前卡片平滑过渡（高度由脚本按当前页计算） */
.th5-ad-carousel {
  transition: height 0.35s ease;
}

/* 窄屏：上下堆叠，图片落到文字下方并居中铺满整卡宽度 */
@media (max-width: 767px) {
  .th5-ad__inner {
    padding: 18px;
    min-height: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }
  /* 窄屏每页只放 1 张；页面高度按自身内容，容器高度由脚本跟随当前页 */
  .th5-ad-carousel__track {
    align-items: flex-start;
  }
  .th5-ad-carousel__slide {
    align-items: flex-start;
  }
  .th5-ad__body {
    width: 100%;
  }
  .th5-ad__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 14px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .th5-ad__img {
    width: 100%;
    max-width: 100%;
    max-height: 220px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
  }
  .th5-ad__title {
    font-size: 1.1rem;
  }
}