/* =========================================================
   广告位样式（Google AdSense · 日夜自适应 · 多端自适应）
   ---------------------------------------------------------
   设计原则：
   1. 每个 .ad-slot 都用 --ad-h 预留高度 → 广告加载前后不跳动（CLS≈0）；
   2. 投放成功（.is-filled）后撤掉预留高度，由广告自己决定高度；
   3. 无广告可投 / 被拦截（.is-unfilled）时收起整个空槽位，不留白；
   4. 各断点单独调预留高度，手机端不会撑出一大块空白。
   ---------------------------------------------------------
   ★ 状态类 .is-filled / .is-unfilled 由 js/ads.js 打上，
     不依赖 :has()，老浏览器也能正确收起占位框。
   ========================================================= */

/* 广告位统一高度：全站只在这里定义一次，改高度就改这一行。
   首页的 Hero 大图位在 home.css 里单独覆盖（.ad-slot.ad-slot-hero）。
   ★ 这里只用作【未投放前】的高度预留，投放成功后由 .is-filled 撤掉。 */
:root { --ad-h: 160px; }

.ad-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: var(--ad-h, 160px);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-gray);
    color: var(--text-muted);
}
[data-theme="dark"] .ad-slot { background: rgba(90, 138, 255, .05); }

/* =========================================================
   ★ 核心修复：让 <ins class="adsbygoogle"> 真正拿到宽度
   ---------------------------------------------------------
   症状（Google Chrome 控制台实测）：
       Uncaught TagError: adsbygoogle.push() error:
       No slot size for availableWidth=0

   成因：.ad-slot 是 display:flex（为了让占位文案居中），
   而空的 <ins class="adsbygoogle"> 既无内容也无宽度，
   作为 flex item 的可用宽度就是 0；AdSense 量到 0 立即抛错。

   实测数据：修复前，全站 66 个槽位在 1440/1180/1024/900/768/390
   六档视口宽度下【无一例外】ins 宽度全是 0，父容器宽度却是 316~1160px。

   修复：width:100% 撑满 + flex:1 1 auto 允许收缩（手机上不被挤出），
   并用 align-self:stretch 让它在交叉轴方向也铺开。
   min-width:0 不可省：flex item 默认 min-width:auto，
   内部有 iframe 时会被撑破，导致横向溢出。 */
.ad-slot > ins.adsbygoogle,
.ad-wrap > ins.adsbygoogle {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    align-self: stretch;
}

/* 投放成功 → 撤掉预留高度，让 data-ad-format="auto" 返回多高就长多高。
   ★ 必须用 min-height 而非 height：响应式广告实测可到 280~400px，
     .ad-slot 又是 overflow:hidden，写死高度会把超出部分直接裁掉。
   此处不再需要 :has() —— js/ads.js 会打好 .is-filled 类，
   老浏览器同样生效（原先只靠 :has()，不支持的浏览器占位虚线框不消失）。 */
.ad-slot.is-filled {
    border: 0;
    background: transparent;
    border-radius: 0;
    min-height: 0;
    padding: 0;
}

/* 无广告可投（unfilled）或被广告拦截插件挡住 → 收起整个空槽位。
   手机上尤其重要：否则会留一大块约 160~260px 的空白。 */
.ad-slot.is-unfilled { display: none; }

/* 兜底：不支持 :has() 的浏览器靠 .is-filled；支持的老规则继续保留，
   两条并存不冲突（都做同一件事）。 */
.ad-slot:has(ins.adsbygoogle[data-ad-status="filled"]) {
    border: 0;
    background: transparent;
    border-radius: 0;
    height: auto;
    min-height: 0;
    padding: 0;
}
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* 占位文案与角标 */
.ad-slot .ad-label {
    font-size: .74rem;
    letter-spacing: .5px;
    opacity: .7;
    text-align: center;
    padding: 0 40px;
}
.ad-slot .ad-tag {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 1px 6px;
    font-size: .6rem;
    letter-spacing: 1px;
    color: var(--text-muted);
    opacity: .6;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* 槽内已有真实广告 → 去掉占位外壳，并让高度由广告自己决定。
   ★ height:auto 是必须的：首页 .ad-slot-banner / .ad-slot-hero 在 home.css 里写死了
     height:160px / min-height:260px，而 .ad-slot 又是 overflow:hidden。
     响应式广告（data-ad-format="auto"）返回的高度并不固定，实测可到 280~400px，
     若保留固定高度，超出部分会被直接裁掉 —— 既影响观感也白白损失广告内容。
   ★ 特异性陷阱：`.ad-slot.is-filled` (0,2,0) 与 home.css 的
     `.ad-slot.ad-slot-banner` (0,2,0) 【完全相同】，靠加载顺序决胜 ——
     ads.css 在首页里位于 home.css 之后，所以这里能覆盖它。
     若哪天调整了 CSS 引入顺序，这条会静默失效（广告被裁一半）。 */
.ad-slot.is-filled,
.ad-slot:has(ins.adsbygoogle) {
    border: 0;
    background: transparent;
    border-radius: 0;
    height: auto;
    min-height: 0;
    padding: 0;
}
.ad-slot.is-filled .ad-label,
.ad-slot.is-filled .ad-tag,
.ad-slot:has(ins.adsbygoogle) .ad-label,
.ad-slot:has(ins.adsbygoogle) .ad-tag { display: none; }

/* ---------------------------------------------------------
   尺寸 / 位置变体（高度统一由上面的 --ad-h 控制，这里只管宽度）
   --------------------------------------------------------- */

/* 横幅：宽度自适应，高度 160px（与首页 .ad-slot-banner 一致） */
.ad-banner { width: 100%; }

/* 侧栏广告：宽度跟随侧栏（≥1180px 时为 250px），高度同样是 160px */
.ad-square { width: 100%; }

/* 间距 */
.ad-list-top { margin-bottom: 20px; }
.ad-list-bottom { margin: 26px 0 0; }
.ad-block { margin: 32px 0; }

/* ---------------------------------------------------------
   多端高度预留（未投放前的高度占位，避免布局跳动）
   ---------------------------------------------------------
   ★ 一律写 min-height，不写 height：
     响应式广告（data-ad-format="auto"）返回多高就让它长多高，
     写死 height 会被 .ad-slot 的 overflow:hidden 裁掉。
   手机端预留高度逐步减小，避免首屏被一大块空白占据。 */
@media (max-width: 1024px) {
    :root { --ad-h: 150px; }
}

@media (max-width: 767px) {
    :root { --ad-h: 130px; }
}

@media (max-width: 575px) {
    :root { --ad-h: 100px; }
}

/* ---------------------------------------------------------
   教程文章页（/ps-tutorial/1101–1211）
   ---------------------------------------------------------
   111 篇文章的广告位【完全复用】上面的 .ad-slot 组件：
     <div class="ad-slot ad-banner" data-ad-slot="article-top"    ...>
     <div class="ad-slot ad-banner" data-ad-slot="article-bottom" ...>
   高度同样只由 :root 的 --ad-h 决定，改一行三处（列表页 3 个 + 文章页 2 个）一起变。
   文章页特有的「在正文流里的位置与留白」写在 tutorial.css 第 8 节的
   `.tut-article > .ad-slot`，与组件本身解耦。
   注意：文章页的槽位直接是 .tut-article 的子元素，不再自带左右 padding，
   因此宽度与正文卡片严格对齐（此前 .tut-ad-slot 额外加了 20px 内边距，广告比正文窄 40px）。 */

/* 备注：如需在卡片网格里插入「信息流原生广告」，给槽位加 .ad-infeed
   （--ad-h: 250px + align-self: stretch，多列时高度会自动对齐同排卡片），
   手机单列下建议只保留 1 个；手机吸底锚定广告可加 .ad-anchor
   （fixed 吸底 + .ad-close 关闭按钮）。当前均已按要求移除。 */