/* ========== JuicyAds 广告样式 ========== */

/* 广告文章容器 */
.ad-article {
    min-height: 380px;
    position: relative;
}

/* 广告标签（赞助内容） */
.ad-article .ad-label {
    opacity: 0.7;
    font-size: 14px;
    color: #666;
    font-weight: normal;
    text-align: center;
}

/* AD 徽章 */
.ad-article .ad-badge {
    display: inline-block;
    background: #ff6b6b;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 8px;
    text-transform: uppercase;
}

/* 广告底部信息 */
.ad-article .ad-footer {
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* JuicyAds ins 元素 */
.ad-article ins {
    display: block;
    margin: 0 auto;
}


/* ========== 备用文章样式（广告被拦截时）========== */

/* 备用文章容器（替换广告时使用） */
.fallback-article {
    /* 继承 excerpt excerpt-c4 的所有样式，无需额外设置 */
}

/* 推荐徽章（显示在备用文章标题旁） */
.fallback-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    margin-left: 8px;
    text-transform: uppercase;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
    animation: fadeIn 0.3s ease-in-out;
}

/* 淡入动画（备用内容显示时） */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 备用文章容器的淡入动画 */
.fallback-article {
    animation: fadeIn 0.5s ease-in-out;
}


/* ==================== Clickadu Banner 广告样式 ==================== */
/* 文档: docs/ads-management-architecture.md */
/* 位置: templates/ads/_platforms/clickadu/banner.html */

.clickadu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    padding: 0;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

/* 桌面端样式 */
@media (min-width: 768px) {
    .clickadu-container {
        width: 728px;
        height: 250px;
    }
    .ad-placeholder {
        width: 300px;
        height: 250px;
        margin: 0 auto;
    }
}

/* 手机端样式 */
@media (max-width: 767px) {
    .clickadu-container {
        width: 300px;
        height: 250px;
    }
    .ad-placeholder {
        width: 100%;
        height: 100%;
    }
}