/**
 * WebToolsHUB — 广告位样式
 *
 * 目标：
 * 1. 避免 CLS。广告加载前后尺寸不变，用 min-height 预留常见高度。
 * 2. 不干扰工具界面。广告放在工具交互区之外（正文下方、页脚之上）。
 * 3. 可识别。Google 政策要求广告必须让用户看得出是广告，不能与站点
 *    内容或导航混为一谈，因此加"广告"文字标签与分隔线。
 * 4. 暗色模式与主 CSS 变量保持一致。
 */

.wth-ad {
    display: block;
    margin: 28px auto 8px;
    padding: 0;
    min-height: 280px;          /* 预留常见横幅/矩形高度，防止布局跳动 */
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    padding-top: 12px;
}

/* 广告标签：明确标示这是广告 */
.wth-ad-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary, #5F5E5A);
}

/* 广告未填充时不要留下空白边框与标签 */
.wth-ad:empty {
    min-height: 0;
    margin: 0;
    border-top: 0;
    padding-top: 0;
}

/* 移动端：常见 320x100 / 300x250，缩小预留高度 */
@media (max-width: 640px) {
    .wth-ad {
        min-height: 250px;
        margin: 20px auto 8px;
    }
}

/* 暗色模式下广告容器不加背景色，让 Google 广告的自适应样式决定 */
[data-theme="dark"] .wth-ad {
    background-color: transparent;
    border-top-color: rgba(255, 255, 255, 0.12);
}