/* AdSense ad slot 樣式
 * - CLS 保留 min-height 避免 layout shift
 * - .ad-slot-empty 由 ads.js 在 ad blocker / 未填充時自動加上
 * - developer-tab 啟用時自動隱藏 .ad-slot-footer 避免兩個廣告貼太近
 */

.ad-slot {
    margin: 24px auto;
    min-height: 100px;
    max-width: 728px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

.ad-slot-incontent { max-width: 728px; }
.ad-slot-bottom    { max-width: 970px; }

.ad-slot-label {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    opacity: 0.7;
}

/* Ad blocker / 未填充時整塊收起 */
.ad-slot-empty {
    display: none !important;
}

/* 本地開發預覽：localhost 自動套上，看得到 12 個位置在哪 */
.ad-slot-dev-preview {
    border: 2px dashed #4caf50;
    background: rgba(76, 175, 80, 0.05);
    padding: 16px 8px;
}
.ad-slot-dev-preview::before {
    content: "[DEV] 廣告位置 (slot=" attr(data-ad-lazy) ")";
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #4caf50;
    margin-bottom: 8px;
}

/* 手機放大 min-height（responsive 廣告手機常吃 100-200px） */
@media (max-width: 768px) {
    .ad-slot {
        min-height: 120px;
        max-width: 100%;
        padding: 0 8px;
    }
}