/*
 * ad-styles.css - 广告横幅样式文件（最终推荐版）
 * ✅ 横幅拉满宽度（100%）
 * ✅ 保留圆角、阴影，整体更有层次
 * ✅ 移动端自动切图，最大高度限制
 */

/* ===== 通用广告容器样式（已改为上下排序） ===== */
.ad-container {
  width: 100%;
  max-width: 100%;
  margin: 20px auto;
  padding: 0;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  text-align: center;

  /* ✅ 修改的部分 */
  display: flex;
  flex-direction: column; /* ⬅️ 垂直排列每个广告 */
  gap: 12px;               /* ⬅️ 广告之间的间距 */
  justify-content: center;
  align-items: center;
}


/* PC端广告图样式 */
.ad-container img.ad-image-pc {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
}

/* 默认隐藏移动图 */
.ad-container img.ad-image-mobile {
  display: none;
}

/* ===== 中等屏幕及以下（≤768px）===== */
@media (max-width: 768px) {
  .ad-container {
    margin: 14px auto;
    border-radius: 6px;
  }

  .ad-container img.ad-image-pc {
    display: none;
  }

  .ad-container img.ad-image-mobile {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    object-position: center;
    border-radius: 6px;
  }
}

/* ===== 小屏手机（≤480px）===== */
@media (max-width: 480px) {
  .ad-container {
    margin: 10px auto;
    border-radius: 4px;
  }

  .ad-container img.ad-image-mobile {
    max-height: 90px;
    border-radius: 4px;
  }
}