/* Path: /wp-content/plugins/jct-meta-tags/assets/css/jct-ad-inserter.css */
/**
 * JCT Ad Inserter - 前端 CSS (CLS & Skeleton Layouts)
 *
 * Version: 1.0.3
 * Description: 將排版改為 display: block，並將骨架屏改為真實 DOM 結構，以防止 LiteSpeed UCSS 快取優化移除 class.loaded 樣式導致 Loading 殘留的問題，並合併原全域 WP.css 內的所有廣告佔位防護 CSS 規則。
 */

.jct-ad-wrapper {
    position: relative;
    display: block; /* 💡 改為標準 block 以確保 100% 繼承父層寬度，防止 AdSense 偵測寬度為 0 */
    text-align: center; /* 置中廣告 */
    width: 100%;
    max-width: 100%;
    margin: 25px auto;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f5f6f9;
    box-sizing: border-box;
    transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 確保 AdSense 原生標籤作為 block 置中並完整延伸 */
.jct-ad-wrapper ins.adsbygoogle {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

/* 💡 真實 DOM 骨架屏載入器 (解決 UCSS 移除 class.loaded 導致 Loading 殘留問題) */
.jct-ad-skeleton-loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, #f5f6f9 25%, #eceef3 50%, #f5f6f9 75%);
    background-size: 200% 100%;
    animation: jct-ad-skeleton-pulse 1.6s infinite linear;
    z-index: 10; /* 高於廣告原生內容，確保置頂顯示 */
    pointer-events: none;
    box-sizing: border-box;
}

.jct-ad-skeleton-loader::after {
    content: "Advertisement Loading...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #a0a5ba;
    letter-spacing: 0.05em;
}

/* 廣告實際載入完成後的狀態 */
.jct-ad-wrapper.jct-ad-loaded {
    background-color: transparent;
}

/* 骨架屏背景移動動畫 */
@keyframes jct-ad-skeleton-pulse {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 手機版自適應微調 (Mobile Responsive) */
@media screen and (max-width: 767px) {
}

/* ============================================================
   ── 合併自全域 WP.css 之廣告 CLS 與載入效能優化樣式 ──
   ============================================================ */

/* 1. 對所有廣告 ins 元素本身預設安全的最小高度 */
ins.adsbygoogle {
    display: block;
    min-height: 90px; /* 安全底線，符合最小的橫幅廣告高度 */
    background-color: rgba(0, 0, 0, 0.02); /* 骨架屏背景 */
    position: relative;
}

/* 2. 廣告骨架屏文字（僅在廣告尚未載入時作為背景提示） */
.article-body-ad,
.stream-item-above-post-content,
.stream-item-below-post,
#block-81,
.google-auto-placed {
    position: relative;
    background-color: rgba(0, 0, 0, 0.02) !important;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.article-body-ad::before,
.stream-item-above-post-content::before,
.stream-item-below-post::before,
#block-81::before {
    content: "ADVERTISEMENT";
    font-size: 10px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.15);
    letter-spacing: 0.2em;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 3. 未填充廣告：優雅淡出並收攏高度，避免使用 display: none !important 導致 AdSense 腳本失去重試或刷新機制 */
ins.adsbygoogle[data-ad-status*="unfill"],
ins.adsbygoogle[data-adsbygoogle-status="done"]:not(:has(iframe)) {
    opacity: 0;
    height: 0;
    min-height: 0 !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    transition: opacity 0.3s ease;
}

/* 當廣告確認無填充 (unfilled) 時，將外層包裝容器與載入文字一併隱藏，避免畫面上卡著 "Advertisement Loading..." 空白灰色框 */
.article-body-ad:has(ins.adsbygoogle[data-ad-status*="unfill"]),
.stream-item-above-post-content:has(ins.adsbygoogle[data-ad-status*="unfill"]),
.stream-item-below-post:has(ins.adsbygoogle[data-ad-status*="unfill"]),
#block-81:has(ins.adsbygoogle[data-ad-status*="unfill"]),
.google-auto-placed:has(ins.adsbygoogle[data-ad-status*="unfill"]),
.jl-manual-rect-ad:has(ins.adsbygoogle[data-ad-status*="unfill"]),
.jct-v2-timeline-ad-wrapper:has(ins.adsbygoogle[data-ad-status*="unfill"]),
.jct-ad-wrapper:has(ins.adsbygoogle[data-ad-status*="unfill"]) {
    display: none !important;
}

/* 當廣告處理完成 (done) 但內部無 iframe 元素（代表未成功載入廣告）時，隱藏外層包裝容器，防止空白佔位 */
.article-body-ad:has(ins.adsbygoogle[data-adsbygoogle-status="done"]):not(:has(iframe)),
.stream-item-above-post-content:has(ins.adsbygoogle[data-adsbygoogle-status="done"]):not(:has(iframe)),
.stream-item-below-post:has(ins.adsbygoogle[data-adsbygoogle-status="done"]):not(:has(iframe)),
#block-81:has(ins.adsbygoogle[data-adsbygoogle-status="done"]):not(:has(iframe)),
.google-auto-placed:has(ins.adsbygoogle[data-adsbygoogle-status="done"]):not(:has(iframe)),
.jl-manual-rect-ad:has(ins.adsbygoogle[data-adsbygoogle-status="done"]):not(:has(iframe)),
.jct-v2-timeline-ad-wrapper:has(ins.adsbygoogle[data-adsbygoogle-status="done"]):not(:has(iframe)),
.jct-ad-wrapper:has(ins.adsbygoogle[data-adsbygoogle-status="done"]):not(:has(iframe)) {
    display: none !important;
}

/* 4. 手動文章內文廣告（預留 300x250 或 336x280） */
.article-body-ad {
    display: block;
    width: 100%;
    text-align: center;
    margin: 18px 0;
    min-height: 250px;
    max-height: 320px;
}

.article-body-ad ins.adsbygoogle {
    min-height: 250px;
}

@media (min-width: 768px) {
    .article-body-ad {
        min-height: 280px;
        max-height: 320px;
    }
    .article-body-ad ins.adsbygoogle {
        min-height: 280px;
    }
}

/* 5. Google 自動廣告 (Auto Placed) 容器優化 */
.google-auto-placed {
    min-height: 250px;
    margin-bottom: 20px;
}

.google-auto-placed ins.adsbygoogle {
    min-height: 250px;
}

@media (min-width: 768px) {
    .google-auto-placed {
        min-height: 280px;
    }
    .google-auto-placed ins.adsbygoogle {
        min-height: 280px;
    }
}

/* 6. 文章上下方廣告橫幅串流容器（預留 320x100 或 728x90/970x90 橫幅） */
.stream-item-above-post-content,
.stream-item-below-post,
.stream-item-below-post .stream-item-size {
    min-height: 100px;
    display: block;
}

.stream-item-above-post-content ins.adsbygoogle,
.stream-item-below-post ins.adsbygoogle {
    min-height: 100px;
}

@media (min-width: 768px) {
    .stream-item-above-post-content,
    .stream-item-below-post,
    .stream-item-below-post .stream-item-size {
        min-height: 90px; /* 桌機橫幅高度通常為 90px */
    }
    .stream-item-above-post-content ins.adsbygoogle,
    .stream-item-below-post ins.adsbygoogle {
        min-height: 90px;
    }
}

/* 7. Dable 推薦文章容器 */
div[id^="dablewidget_"] {
    min-height: 270px;
}

/* 8. 側邊欄廣告區塊 (預留桌機 300x250 / 300x600) */
#block-81 {
    min-height: 250px !important;
    display: block !important;
    margin-bottom: 30px;
}

#block-81 ins.adsbygoogle {
    min-height: 250px;
}

@media (min-width: 768px) {
    #block-81 {
        min-height: 280px !important; /* 如果放置 300x600 廣告，可微調至 600px */
    }
    #block-81 ins.adsbygoogle {
        min-height: 280px;
    }
}

/* ── 手動插入矩形廣告優化容器 (長方形廣告最佳化) ─────────────────── */
.jl-manual-rect-ad {
    display: block;
    position: relative;
    width: 100%;
    margin: 24px auto;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02); /* 質感淡灰骨架屏底色 */
    border-radius: 8px;
    overflow: hidden;
    
    /* 手機版預設：預留長方形廣告高度（如 300x250） */
    min-height: 250px;
    max-width: 336px; /* 限制寬度避免跑版 */
}

/* 桌機版放大（如 336x280） */
@media (min-width: 768px) {
    .jl-manual-rect-ad {
        min-height: 280px;
        max-width: 336px;
    }
}

/* 廣告載入前的質感 "ADVERTISEMENT" 骨架屏字樣 */
.jl-manual-rect-ad::before {
    content: "ADVERTISEMENT";
    font-size: 10px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.15);
    letter-spacing: 0.2em;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 內部 Google AdSense 元素設置 */
.jl-manual-rect-ad ins.adsbygoogle {
    min-height: 250px;
}
@media (min-width: 768px) {
    .jl-manual-rect-ad ins.adsbygoogle {
        min-height: 280px;
    }
}