/**
 * DripSafe Theme - 文章底部CTA样式
 * Version: 1.0.0
 * 每篇文章底部显示的订阅引导组件
 */

/* ============================
   Article CTA Section
   ============================ */

.ds-article-cta {
    margin: var(--ds-spacing-10, 40px) 0;
    padding: var(--ds-spacing-8, 32px);
    background: linear-gradient(135deg, var(--ds-primary-light, #e8f4f8) 0%, var(--ds-secondary-light, #e0f2fe) 100%);
    border-radius: var(--ds-radius-xl, 16px);
    border: 1px solid var(--ds-primary-lighter, #d1e9f0);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ds-article-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.ds-article-cta__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--ds-spacing-4, 16px);
    background: white;
    border-radius: var(--ds-radius-xl, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ds-shadow-md);
    color: var(--ds-primary, #065a82);
}

.ds-article-cta__title {
    font-size: var(--ds-text-xl, 1.25rem);
    font-weight: var(--ds-font-bold, 700);
    color: var(--ds-text-primary, #111827);
    margin: 0 0 var(--ds-spacing-2, 8px);
}

.ds-article-cta__desc {
    font-size: var(--ds-text-sm, 0.875rem);
    color: var(--ds-text-secondary, #6b7280);
    margin: 0 0 var(--ds-spacing-5, 20px);
    line-height: var(--ds-leading-relaxed, 1.625);
}

.ds-article-cta__form {
    display: flex;
    gap: var(--ds-spacing-3, 12px);
    max-width: 400px;
    margin: 0 auto;
}

.ds-article-cta__input {
    flex: 1;
    padding: var(--ds-spacing-3, 12px) var(--ds-spacing-4, 16px);
    border: 1px solid var(--ds-border, #e5e7eb);
    border-radius: var(--ds-radius-md, 8px);
    font-size: var(--ds-text-sm, 0.875rem);
    background: white;
    color: var(--ds-text-primary, #111827);
    transition: border-color var(--ds-transition, 0.2s), box-shadow var(--ds-transition, 0.2s);
}

.ds-article-cta__input:focus {
    outline: none;
    border-color: var(--ds-primary, #065a82);
    box-shadow: 0 0 0 3px rgba(6, 90, 130, 0.1);
}

.ds-article-cta__input::placeholder {
    color: var(--ds-text-muted, #9ca3af);
}

.ds-article-cta__btn {
    padding: var(--ds-spacing-3, 12px) var(--ds-spacing-5, 20px);
    background: var(--ds-primary, #065a82);
    color: white;
    border: none;
    border-radius: var(--ds-radius-md, 8px);
    font-size: var(--ds-text-sm, 0.875rem);
    font-weight: var(--ds-font-semibold, 600);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ds-transition, 0.2s), transform var(--ds-transition, 0.2s);
}

.ds-article-cta__btn:hover {
    background: var(--ds-primary-dark, #044568);
    transform: translateY(-1px);
}

.ds-article-cta__btn:active {
    transform: translateY(0);
}

.ds-article-cta__privacy {
    font-size: var(--ds-text-xs, 0.75rem);
    color: var(--ds-text-muted, #9ca3af);
    margin: var(--ds-spacing-3, 12px) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-spacing-1, 4px);
}

/* ============================
   Footer Email Icon Enhancement
   ============================ */

.ds-footer-email-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-spacing-2, 8px);
    margin-top: var(--ds-spacing-3, 12px);
}

/* ============================
   Responsive
   ============================ */

@media (max-width: 640px) {
    .ds-article-cta {
        padding: var(--ds-spacing-6, 24px);
    }

    .ds-article-cta__form {
        flex-direction: column;
    }

    .ds-article-cta__btn {
        width: 100%;
    }
}

/* ============================
   Dark Mode
   ============================ */

[data-theme="dark"] .ds-article-cta {
    background: linear-gradient(135deg, var(--ds-primary-light, #0a3d5c) 0%, var(--ds-secondary-light, #0c4a6e) 100%);
    border-color: var(--ds-primary-dark, #0ea5e9);
}

[data-theme="dark"] .ds-article-cta__icon {
    background: var(--ds-bg-card, #1f1f1f);
    color: var(--ds-primary, #1a8bbf);
}

[data-theme="dark"] .ds-article-cta__title {
    color: var(--ds-text-primary, #e0e0e0);
}

[data-theme="dark"] .ds-article-cta__desc {
    color: var(--ds-text-secondary, #a0a0a0);
}

[data-theme="dark"] .ds-article-cta__input {
    background: var(--ds-bg-secondary, #1a1a1a);
    border-color: var(--ds-border, #333333);
    color: var(--ds-text-primary, #e0e0e0);
}

[data-theme="dark"] .ds-article-cta__input:focus {
    border-color: var(--ds-primary, #1a8bbf);
    box-shadow: 0 0 0 3px rgba(26, 139, 191, 0.15);
}

[data-theme="dark"] .ds-article-cta__btn {
    background: var(--ds-primary, #1a8bbf);
}

[data-theme="dark"] .ds-article-cta__btn:hover {
    background: var(--ds-primary-dark, #0ea5e9);
}