/* ================================================================
   NEWSLETTER CTA — 20 display variants (responsive)
   Base styles live in cta.css; variants override layout/appearance.
   ================================================================ */

/* 1. classic-overlap — default (cta.css handles overlap) */
.hpb-cta-newsletter--variant-classic-overlap .hpb-cta-newsletter__shell {
    /* inherits base grid + overlap margins */
}

/* 2. stack-vertical — single column on all viewports */
.hpb-cta-newsletter--variant-stack-vertical .hpb-cta-newsletter__shell,
.hpb-cta-newsletter--variant-stack-vertical.hpb-cta-newsletter--form-end .hpb-cta-newsletter__shell {
    grid-template-columns: 1fr;
    gap: 24px;
}

.hpb-cta-newsletter--variant-stack-vertical .hpb-cta-newsletter__form-card {
    margin-inline: 0;
    max-width: none;
}

/* 3. stack-reverse — form above content on mobile & desktop */
.hpb-cta-newsletter--variant-stack-reverse .hpb-cta-newsletter__shell {
    grid-template-columns: 1fr;
    gap: 20px;
}

.hpb-cta-newsletter--variant-stack-reverse.hpb-cta-newsletter--form-start .hpb-cta-newsletter__shell {
    direction: ltr;
}

.hpb-cta-newsletter--variant-stack-reverse.hpb-cta-newsletter--form-start .hpb-cta-newsletter__shell > * {
    direction: rtl;
}

.hpb-cta-newsletter--variant-stack-reverse .hpb-cta-newsletter__form-card {
    margin-inline: 0;
    order: -1;
}

/* 4. centered-box — centered text and card */
.hpb-cta-newsletter--variant-centered-box .hpb-cta-newsletter__shell {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}

.hpb-cta-newsletter--variant-centered-box .hpb-cta-newsletter__content {
    align-items: center;
}

.hpb-cta-newsletter--variant-centered-box .hpb-cta-newsletter__form-card {
    margin-inline: auto;
}

.hpb-cta-newsletter--variant-centered-box .hpb-cta-newsletter__form-intro {
    text-align: center;
}

/* 5. inline-form — horizontal input + button */
.hpb-cta-newsletter--variant-inline-form .hpb-cta-newsletter__form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.hpb-cta-newsletter--variant-inline-form .hpb-cta-newsletter__input {
    flex: 1 1 180px;
    min-width: 0;
}

.hpb-cta-newsletter--variant-inline-form .hpb-cta-newsletter__submit {
    flex: 0 0 auto;
    width: auto;
    min-width: 120px;
    padding-inline: 28px;
}

@media (max-width: 540px) {
    .hpb-cta-newsletter--variant-inline-form .hpb-cta-newsletter__form {
        flex-direction: column;
    }

    .hpb-cta-newsletter--variant-inline-form .hpb-cta-newsletter__submit {
        width: 100%;
    }
}

/* 6. floating-card — elevated card */
.hpb-cta-newsletter--variant-floating-card .hpb-cta-newsletter__form-card {
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15, 23, 42, 0.1);
    transform: translateY(-8px);
}

.hpb-cta-newsletter--variant-floating-card .hpb-cta-newsletter__shell {
    overflow: visible;
    padding-bottom: clamp(32px, 5vw, 56px);
}

/* 7. gradient-shell — gradient background on shell */
.hpb-cta-newsletter--variant-gradient-shell .hpb-cta-newsletter__shell {
    background: linear-gradient(135deg, var(--hpb-nl-box-bg, #a470b5) 0%, color-mix(in srgb, var(--hpb-nl-box-bg, #a470b5) 60%, #1e293b) 100%);
}

/* 8. dark-mode — dark shell and card */
.hpb-cta-newsletter--variant-dark-mode .hpb-cta-newsletter__shell {
    background: #0f172a;
    color: #f1f5f9;
}

.hpb-cta-newsletter--variant-dark-mode .hpb-cta-newsletter__form-card {
    background: #1e293b;
    color: #f8fafc;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.hpb-cta-newsletter--variant-dark-mode .hpb-cta-newsletter__form-intro {
    color: #e2e8f0;
}

.hpb-cta-newsletter--variant-dark-mode .hpb-cta-newsletter__input {
    background: #334155;
    border-color: #475569;
    color: #f8fafc;
}

/* 9. pill-inputs — extra-rounded inputs and shell */
.hpb-cta-newsletter--variant-pill-inputs .hpb-cta-newsletter__shell {
    border-radius: 999px;
    padding: clamp(28px, 5vw, 52px) clamp(24px, 4vw, 48px);
}

.hpb-cta-newsletter--variant-pill-inputs .hpb-cta-newsletter__form-card {
    border-radius: 999px;
    padding: clamp(24px, 4vw, 36px) clamp(28px, 5vw, 40px);
}

.hpb-cta-newsletter--variant-pill-inputs .hpb-cta-newsletter__input,
.hpb-cta-newsletter--variant-pill-inputs .hpb-cta-newsletter__submit {
    border-radius: 999px;
}

/* 10. split-equal — equal columns */
.hpb-cta-newsletter--variant-split-equal .hpb-cta-newsletter__shell,
.hpb-cta-newsletter--variant-split-equal.hpb-cta-newsletter--form-end .hpb-cta-newsletter__shell {
    grid-template-columns: 1fr 1fr;
}

.hpb-cta-newsletter--variant-split-equal .hpb-cta-newsletter__form-card {
    margin-inline: 0;
    max-width: none;
}

@media (max-width: 900px) {
    .hpb-cta-newsletter--variant-split-equal .hpb-cta-newsletter__shell {
        grid-template-columns: 1fr;
    }
}

/* 11. full-width-form — form card spans full width below content */
.hpb-cta-newsletter--variant-full-width-form .hpb-cta-newsletter__shell {
    grid-template-columns: 1fr;
    gap: 16px;
}

.hpb-cta-newsletter--variant-full-width-form .hpb-cta-newsletter__form-card {
    max-width: none;
    margin-inline: 0;
    width: 100%;
}

.hpb-cta-newsletter--variant-full-width-form .hpb-cta-newsletter__form {
    flex-direction: row;
    flex-wrap: wrap;
}

.hpb-cta-newsletter--variant-full-width-form .hpb-cta-newsletter__input {
    flex: 1 1 240px;
}

.hpb-cta-newsletter--variant-full-width-form .hpb-cta-newsletter__submit {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
}

@media (max-width: 600px) {
    .hpb-cta-newsletter--variant-full-width-form .hpb-cta-newsletter__form {
        flex-direction: column;
    }

    .hpb-cta-newsletter--variant-full-width-form .hpb-cta-newsletter__submit {
        width: 100%;
    }
}

/* 12. compact — tighter spacing for mobile-first */
.hpb-cta-newsletter--variant-compact .hpb-cta-newsletter__shell {
    padding: clamp(16px, 3vw, 28px);
    gap: 12px;
}

.hpb-cta-newsletter--variant-compact .hpb-cta-newsletter__title {
    font-size: clamp(18px, 2.5vw, 24px);
}

.hpb-cta-newsletter--variant-compact .hpb-cta-newsletter__form-card {
    padding: clamp(14px, 2.5vw, 22px);
}

.hpb-cta-newsletter--variant-compact .hpb-cta-newsletter__input,
.hpb-cta-newsletter--variant-compact .hpb-cta-newsletter__submit {
    padding: 10px 16px;
    font-size: 14px;
}

@media (max-width: 900px) {
    .hpb-cta-newsletter--variant-compact .hpb-cta-newsletter__shell {
        grid-template-columns: 1fr;
    }
}

/* 13. bordered-card — outline style form card */
.hpb-cta-newsletter--variant-bordered-card .hpb-cta-newsletter__form-card {
    box-shadow: none;
    border: 2px solid var(--hpb-nl-input-border, #d1d5db);
    background: var(--hpb-nl-card-bg, #fff);
}

.hpb-cta-newsletter--variant-bordered-card .hpb-cta-newsletter__form-card:hover {
    border-color: var(--hpb-nl-btn-bg, #812990);
}

/* 14. glass-card — glassmorphism on form card */
.hpb-cta-newsletter--variant-glass-card .hpb-cta-newsletter__form-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

/* 15. overlap-heavy — stronger card overlap */
.hpb-cta-newsletter--variant-overlap-heavy .hpb-cta-newsletter__shell {
    --hpb-nl-card-overlap: 80px;
}

.hpb-cta-newsletter--variant-overlap-heavy.hpb-cta-newsletter--form-start .hpb-cta-newsletter__form-card {
    margin-inline-end: calc(var(--hpb-nl-card-overlap, 80px) * -0.55);
}

.hpb-cta-newsletter--variant-overlap-heavy.hpb-cta-newsletter--form-end .hpb-cta-newsletter__form-card {
    margin-inline-start: calc(var(--hpb-nl-card-overlap, 80px) * -0.55);
}

@media (max-width: 900px) {
    .hpb-cta-newsletter--variant-overlap-heavy .hpb-cta-newsletter__form-card {
        margin-inline: 0;
    }
}

/* 16. content-wide — wider content column */
.hpb-cta-newsletter--variant-content-wide .hpb-cta-newsletter__shell {
    grid-template-columns: minmax(320px, 1.5fr) minmax(240px, 0.85fr);
}

.hpb-cta-newsletter--variant-content-wide.hpb-cta-newsletter--form-end .hpb-cta-newsletter__shell {
    grid-template-columns: minmax(240px, 0.85fr) minmax(320px, 1.5fr);
}

/* 17. form-wide — wider form column */
.hpb-cta-newsletter--variant-form-wide .hpb-cta-newsletter__shell {
    grid-template-columns: minmax(240px, 0.85fr) minmax(320px, 1.5fr);
}

.hpb-cta-newsletter--variant-form-wide.hpb-cta-newsletter--form-end .hpb-cta-newsletter__shell {
    grid-template-columns: minmax(320px, 1.5fr) minmax(240px, 0.85fr);
}

.hpb-cta-newsletter--variant-form-wide .hpb-cta-newsletter__form-card {
    max-width: none;
}

/* 18. minimal-clean — transparent shell, no colored box */
.hpb-cta-newsletter--variant-minimal-clean .hpb-cta-newsletter__shell {
    background: transparent;
    color: #1e293b;
    padding: 0;
    border-radius: 0;
}

.hpb-cta-newsletter--variant-minimal-clean .hpb-cta-newsletter__content {
    padding: 0;
}

.hpb-cta-newsletter--variant-minimal-clean .hpb-cta-newsletter__title {
    color: #0f172a;
}

.hpb-cta-newsletter--variant-minimal-clean .hpb-cta-newsletter__paragraph {
    color: #475569;
    opacity: 1;
}

/* 19. accent-start — accent bar on start (RTL right) */
.hpb-cta-newsletter--variant-accent-start .hpb-cta-newsletter__shell {
    border-inline-start: 6px solid var(--hpb-nl-btn-bg, #812990);
    padding-inline-start: clamp(20px, 3vw, 36px);
}

/* 20. accent-end — accent bar on end (RTL left) */
.hpb-cta-newsletter--variant-accent-end .hpb-cta-newsletter__shell {
    border-inline-end: 6px solid var(--hpb-nl-btn-bg, #812990);
    padding-inline-end: clamp(20px, 3vw, 36px);
}