/**
 * SI163 广告位布局样式
 * ① 首页右栏：节日小工具下方的自适应横幅（栏宽 310px）
 * ② 网址详情页：.site-content 变成「预览图 + 内容 + 广告」三栏
 *
 * ⚠️ 分档（v1.0.3 修的 bug）：v1.0.2 用了写死的 340px + 300px，
 *    在 768~1280px 的窗口里容器只有 800~1000px，内容列被压到 126px，
 *    大标题直接被左边预览图盖住（用户截图）。现在：
 *      < 768px    竖排：内容 → 预览图 → 广告（占满一行）
 *      768~1199   两栏 + 广告换行独占一行（保持主题原样）
 *      ≥ 1200px   三栏：预览图 32%（260~360px）+ 内容自适应 + 广告固定 300px
 */

.si163-ad {
    margin: 0;
    line-height: 0;
    text-align: center;
}

/* ① 首页右栏：节日小工具下方的正方形广告位
   宽度跟小工具一致（跟随 .theiaStickySidebar 栏宽，实测 310px），
   高度 = 宽度（aspect-ratio:1/1），卡片外观与小工具一致。 */
.si163-ad-sidebar {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 12px 0 4px;
    padding: 8px;
    box-sizing: border-box;
    background: var(--main-bg-color, #fff);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* AdSense 的脚本会给 <ins> 写内联 width/height（未填充时会给很小的值，如
   165px × 0），且可能带 !important，普通 width/height 压不住。
   改用 min-width/min-height —— 不同属性，Google 改不了，广告位尺寸就稳定在
   250×250；外层卡片仍是 310×310 正方形，与小工具同宽。 */
.si163-ad-sidebar ins {
    width: 250px;
    height: 250px;
    min-width: 250px !important;
    min-height: 250px !important;
    max-width: 100%;
    margin: 0 auto;
}

/* ② 详情页：默认（移动端）广告占满一行、排最后 */
.si163-ad-detail {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 16px 0 0;
}
.si163-ad-detail ins {
    max-width: 100%;
}
/* 内容列永远允许收缩，避免内容把 flex 行撑破 */
.site-content.si163-ad-3col > .site-body {
    min-width: 0;
}

/* 中等宽度：主题原生两栏，广告换行独占一行 */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .site-content.si163-ad-3col {
        flex-wrap: wrap;
    }
    .site-content.si163-ad-3col > .si163-ad-detail {
        flex: 0 0 100%;
        width: 100%;
        margin: 16px 0 0;
        text-align: left;
    }
}

/* 宽屏三栏（≥1280：再窄的话预览列只有 ~280px，Google 会选 600px 高的竖版广告把卡片撑爆） */
@media (min-width: 1280px) {
    .site-content.si163-ad-3col > .sites-preview {
        order: 1;
        flex: 0 1 32%;
        width: auto;
        min-width: 260px;
        max-width: 360px;
        margin-left: 0 !important;
        overflow: hidden;   /* 兜底：内部再有超宽元素也不会画到内容列上 */
    }
    /* ★关键：主题把预览图内层写死成 width/min-width:400px，
       列被压窄后它仍占 400px 并向右溢出，正好盖住左边内容列的大标题。
       这里把内层宽度交回容器控制，预览图随列宽缩放。 */
    .site-content.si163-ad-3col > .sites-preview .preview-body {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .site-content.si163-ad-3col > .sites-preview .site-img,
    .site-content.si163-ad-3col > .sites-preview .site-img.img-website {
        width: auto;
        max-width: 100%;
    }
    .site-content.si163-ad-3col > .sites-preview .site-img img {
        max-width: 100%;
        height: auto;
    }
    .site-content.si163-ad-3col > .site-body {
        order: 2;
        flex: 1 1 auto;
        min-width: 260px;
        margin: 0 16px;
    }
    .site-content.si163-ad-3col > .si163-ad-detail {
        order: 3;
        /* ★与预览图列完全同宽：同一套 flex 基准 → 两张卡片宽度一致 */
        flex: 0 1 32%;
        width: auto;
        min-width: 260px;
        max-width: 360px;
        margin: 0;
        /* 套上与预览框相同的卡片外观（背景色走主题变量，自动适配深色模式） */
        background: var(--main-bg-color, #fff);
        border-radius: 16px;
        padding: 8px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
    }
    .site-content.si163-ad-3col > .si163-ad-detail ins {
        width: 100%;
        max-width: 100%;
        /* 兜底：极窄容器下 Google 可能选 600px 竖版，限制高度避免撑爆卡片 */
        max-height: 330px;
    }
}