/**
 * 广告样式文件
 * 提供优雅的广告展示效果
 */

/* ==========================================================================
    广告容器基础样式
    ========================================================================== */

.ad-container {
    position: relative;
    width: 100%;
    margin: var(--space-md) 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition-fast);
}

.ad-container:hover {
    box-shadow: var(--shadow-sm);
}

.ad-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.ad-wrapper ins.adsbygoogle {
    display: block !important;
    border: none !important;
    background: transparent !important;
}

.ad-code {
    width: 100%;
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ad-code ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 410px !important;
    min-height: 250px !important;
}

/* 广告标签 */
.ad-label {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    color: #999;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 10;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
    不同位置的广告样式
    ========================================================================== */

/* 侧边栏广告 */
.ad-sidebar {
    margin: var(--space-md) 0;
    border-radius: var(--radius-lg);
}

.ad-sidebar .ad-wrapper {
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
}

/* 文章内插入广告 */
.ad-inserted {
    margin: var(--space-lg) 0;
    border-radius: var(--radius-lg);
}

.ad-inserted .ad-wrapper {
    border-radius: var(--radius-lg);
}

/* 列表内联广告 */
.ad-list-inline {
    margin: var(--space-md) 0;
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
}

.ad-list-inline .ad-wrapper {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border-radius: var(--radius-md);
}

/* 顶部广告横幅 */
.ad-banner-top {
    margin: 0 0 var(--space-md) 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--color-border);
}

.ad-banner-top .ad-wrapper {
    border-radius: 0;
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
    padding: var(--space-sm) 0;
}

/* 底部广告 */
.ad-bottom {
    margin: var(--space-lg) 0;
    border-radius: var(--radius-lg);
}

.ad-bottom .ad-wrapper {
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
}

/* ==========================================================================
    侧边栏广告容器样式
    ========================================================================== */

.sidebar-ad-container {
    position: relative;
    width: 100%;
    margin: var(--space-md) 0;
}

.sidebar-ad-container .ad-container {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-white);
}

/* ==========================================================================
    列表广告包装器
    ========================================================================== */

.list-ad-wrapper {
    width: 100%;
    margin: var(--space-md) 0;
}

.list-inline-ad {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background-color: var(--color-bg-white);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
    display: flex;
    justify-content: center;
}

/* ==========================================================================
    加载动画效果
    ========================================================================== */

.ad-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: adShine 3s infinite;
}

@keyframes adShine {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.ad-container.loading {
    animation: none;
}

.ad-container.loaded::before {
    display: none;
}

/* ==========================================================================
    响应式广告样式
    ========================================================================== */

@media (max-width: 1200px) {
    .ad-sidebar .ad-wrapper {
        min-height: 200px;
    }
    
    .ad-sidebar ins.adsbygoogle {
        width: 100% !important;
        max-width: 360px !important;
        height: auto !important;
        min-height: 220px;
    }
}

@media (max-width: 991px) {
    .ad-sidebar {
        margin: var(--space-md) auto;
        max-width: 410px;
    }
    
    .ad-sidebar .ad-wrapper {
        min-height: 180px;
    }
    
    .ad-sidebar ins.adsbygoogle {
        width: 100% !important;
        max-width: 360px !important;
        height: auto !important;
        min-height: 220px;
    }
    
    .ad-inserted {
        margin: var(--space-md) auto;
        max-width: 100%;
    }
    
    .ad-inserted ins.adsbygoogle {
        width: 100% !important;
        max-width: 336px !important;
        height: auto !important;
    }
}

@media (max-width: 767px) {
    .ad-container {
        margin: var(--space-sm) 0;
        border-radius: var(--radius-md);
    }
    
    .ad-sidebar {
        border-radius: var(--radius-md);
        margin: var(--space-sm) auto;
        max-width: 100%;
    }
    
    .ad-sidebar .ad-wrapper {
        min-height: 150px;
        padding: var(--space-sm);
    }
    
    .ad-sidebar ins.adsbygoogle {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        min-height: 250px;
    }
    
    .ad-inserted {
        margin: var(--space-sm) auto;
        max-width: 100%;
    }
    
    .ad-inserted ins.adsbygoogle {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        min-height: 250px;
    }
    
    .list-inline-ad {
        padding: var(--space-sm);
        margin: var(--space-sm) 0;
    }
    
    .list-inline-ad .ad-container {
        max-width: 100%;
    }
    
    .list-inline-ad ins.adsbygoogle {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        min-height: 250px;
    }
}

@media (max-width: 480px) {
    .ad-container {
        border-radius: var(--radius-sm);
        border-width: 1px;
    }
    
    .ad-label {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    .ad-sidebar .ad-wrapper {
        min-height: 130px;
        padding: var(--space-xs);
    }
    
    .ad-sidebar ins.adsbygoogle {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 280px;
    }
    
    .ad-inserted ins.adsbygoogle {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 280px;
    }
    
    .ad-banner-top .ad-wrapper {
        padding: var(--space-xs) 0;
    }
}

/* ==========================================================================
    深色模式广告样式
    ========================================================================== */

html.dark-mode .ad-container {
    background-color: #2d2d2d;
    border-color: #404040;
}

html.dark-mode .ad-wrapper {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
}

html.dark-mode .ad-label {
    color: #888;
    background-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .ad-list-inline {
    background-color: #2d2d2d;
    border-color: #404040;
}

html.dark-mode .list-inline-ad {
    background-color: #2d2d2d;
    border-color: #404040;
}

html.dark-mode .ad-container:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
    广告位占位符（广告加载失败时显示）
    ========================================================================== */

.ad-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: #999;
    font-size: var(--font-size-sm);
    padding: var(--space-md);
    text-align: center;
}

.ad-placeholder svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-sm);
    opacity: 0.5;
}

html.dark-mode .ad-placeholder {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    border-color: #404040;
    color: #888;
}

/* ==========================================================================
    广告加载状态指示器
    ========================================================================== */

.ad-loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.ad-container.loaded .ad-loading-indicator {
    display: none;
}

/* ==========================================================================
    Google AdSense 推荐优化样式
    ========================================================================== */

/* 防止布局偏移 (CLS 优化) */
.ad-container {
    contain: layout style;
    overflow-clip-margin: 10px;
}

/* 广告加载失败状态 */
.ad-container.ad-error {
    background: linear-gradient(135deg, #fefefe 0%, #f5f5f5 100%);
    border: 1px dashed #e0e0e0;
}

.ad-container.ad-error::after {
    content: '广告加载失败';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #999;
}

/* 确保 ins 元素正确显示 */
.ad-container ins {
    text-decoration: none !important;
}

.ad-container ins::before {
    content: '' !important;
    display: none !important;
}

.ad-container ins::after {
    content: '' !important;
    display: none !important;
}

/* 响应式广告容器优化 */
@media (max-width: 768px) {
    .ad-container {
        /* 移动端广告容器优化 */
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    .ad-container ins {
        /* 确保触摸目标足够大 */
        min-height: 250px;
    }
}

/* 广告安全区域 - 避免被其他元素遮挡 */
.ad-container {
    z-index: 1;
    isolation: isolate;
}

/* 打印样式隐藏广告 */
@media print {
    .ad-container {
        display: none !important;
    }
}