/* Lead Capture CTA — "Article-Matched" skin
 * ─────────────────────────────────────────────
 * Applies only to CTAs/modals with Design Style = "Article-Matched"
 * (class .lcc-style-article, added by PHP in lead-capture-cta.php).
 * Everything else keeps using the original inline-style "Classic" look
 * in frontend.css untouched.
 *
 * Tokens read the article page's own --da-* custom properties when
 * present (var(--da-x, fallback)) and fall back to the same fixed
 * values otherwise, so this looks right wherever it's dropped on site.
 */

.lcc-style-article {
    --lcc-ink:       var(--da-ink, #141414);
    --lcc-ink-2:     var(--da-ink-2, #585856);
    --lcc-ink-3:     var(--da-ink-3, #8A8A87);
    --lcc-line:      var(--da-line, #EAEAE7);
    --lcc-bg-soft:   var(--da-bg-soft, #FAFAF8);
    --lcc-radius:    var(--da-radius, 16px);
    --lcc-teal:      var(--da-teal, #0E9384);
    --lcc-teal-ink:  var(--da-teal-ink, #0B6E63);
    --lcc-teal-soft: var(--da-teal-soft, #E6F5F3);
    --lcc-coral:     var(--da-coral, #E8564A);
    --lcc-coral-ink: var(--da-coral-ink, #C43D32);
    --lcc-gold:      var(--da-gold, #D9932A);
    --lcc-gold-ink:  var(--da-gold-ink, #A66C15);
    font-family: 'Inter', system-ui, sans-serif;
}

/* Accent choice — drives the kicker, buttons, progress bar, focus ring */
.lcc-accent-coral { --lcc-accent: var(--lcc-coral); --lcc-accent-ink: var(--lcc-coral-ink); --lcc-accent-hover: #D8473B; --lcc-accent-shadow: rgba(232,86,74,.16); }
.lcc-accent-teal  { --lcc-accent: var(--lcc-teal);  --lcc-accent-ink: var(--lcc-teal-ink);  --lcc-accent-hover: #0C8074; --lcc-accent-shadow: rgba(14,147,132,.16); }
.lcc-accent-gold  { --lcc-accent: var(--lcc-gold);  --lcc-accent-ink: var(--lcc-gold-ink);  --lcc-accent-hover: #C2851F; --lcc-accent-shadow: rgba(217,147,42,.16); }

/* ═══════════════════════════════════════════
   CTA CARD
   ═══════════════════════════════════════════ */

.lcc-cta-box.lcc-style-article {
    background: var(--lcc-bg-soft);
    border: 1px solid var(--lcc-line);
    border-radius: var(--lcc-radius);
    box-shadow: none;
    color: var(--lcc-ink);
}

.lcc-style-article .lcc-cta-content {
    padding: 26px 28px;
}

.lcc-style-article .lcc-cta-kicker {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lcc-accent-ink, var(--lcc-coral-ink));
    margin: 0 0 8px;
}

.lcc-style-article .lcc-cta-headline {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--lcc-ink);
    margin: 0 0 8px;
    text-align: left;
}

.lcc-style-article .lcc-cta-text {
    font-size: .88rem;
    color: var(--lcc-ink-2);
    line-height: 1.55;
    margin: 0 0 18px;
    text-align: left;
}

.lcc-style-article .lcc-cta-btn-wrap {
    display: block;
}

.lcc-style-article .lcc-open-modal-btn {
    background: var(--lcc-accent, var(--lcc-coral));
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    padding: 12px 22px;
    border-radius: 10px;
    letter-spacing: 0;
}
.lcc-style-article .lcc-open-modal-btn:hover {
    background: var(--lcc-accent-hover, #D8473B);
    opacity: 1;
}

/* ── Layout: Full — image left, split card (base .lcc-cta-box is
   already a flex row, so this only needs to size the image rail) ── */

.lcc-style-article.lcc-layout-full .lcc-cta-img-wrap {
    width: 200px;
    flex: 0 0 200px;
}
/* Slide-in stays narrow no matter which layout is chosen — keep the
   base plugin's stack-image-on-top-at-130px slide-in behaviour, since
   our 3-class rule above would otherwise out-specificity it. */
.lcc-slidein-box.lcc-style-article.lcc-layout-full .lcc-cta-img-wrap {
    width: 100%;
    flex: 0 0 130px;
}

/* ── Layout: Compact — no image, headline/text left + button right ── */

.lcc-style-article.lcc-layout-compact .lcc-cta-img-wrap {
    display: none;
}
.lcc-style-article.lcc-layout-compact .lcc-cta-content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "k btn"
        "h btn"
        "p btn";
    align-items: center;
    column-gap: 20px;
    padding: 22px 24px;
}
.lcc-style-article.lcc-layout-compact .lcc-cta-kicker   { grid-area: k; margin: 0; }
.lcc-style-article.lcc-layout-compact .lcc-cta-headline { grid-area: h; font-size: 1.05rem; margin: 2px 0 4px; }
.lcc-style-article.lcc-layout-compact .lcc-cta-text     { grid-area: p; margin: 0; }
.lcc-style-article.lcc-layout-compact .lcc-cta-btn-wrap { grid-area: btn; align-self: center; }

/* ── Layout: Rail — narrow vertical card, full-width button ── */

.lcc-style-article.lcc-layout-rail {
    max-width: 260px;
}
.lcc-style-article.lcc-layout-rail .lcc-cta-img-wrap {
    display: none;
}
.lcc-style-article.lcc-layout-rail .lcc-cta-content {
    padding: 18px 20px;
}
.lcc-style-article.lcc-layout-rail .lcc-cta-headline {
    font-size: .98rem;
}
.lcc-style-article.lcc-layout-rail .lcc-cta-text {
    font-size: .82rem;
    margin-bottom: 14px;
}
.lcc-style-article.lcc-layout-rail .lcc-open-modal-btn {
    width: 100%;
    text-align: center;
    padding: 10px;
}

/* ═══════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════ */

.lcc-modal-overlay.lcc-style-article .lcc-modal-box {
    background: #fff;
    border-radius: var(--lcc-radius);
    box-shadow: 0 20px 44px -18px rgba(0,0,0,.28);
}

.lcc-modal-overlay.lcc-style-article .lcc-modal-close {
    background: var(--lcc-bg-soft);
    color: var(--lcc-ink-2);
}
.lcc-modal-overlay.lcc-style-article .lcc-modal-close:hover {
    background: var(--lcc-line);
    color: var(--lcc-ink);
}

.lcc-modal-overlay.lcc-style-article .lcc-modal-header {
    border-bottom-color: var(--lcc-line);
    padding: 28px 28px 4px;
}

.lcc-modal-overlay.lcc-style-article .lcc-modal-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: 1.3rem;
    color: var(--lcc-ink);
}

.lcc-modal-overlay.lcc-style-article .lcc-modal-subtitle {
    color: var(--lcc-ink-2);
    font-size: .86rem;
}

/* Slide/wizard progress */

.lcc-modal-overlay.lcc-style-article .lcc-slide-progress {
    background: var(--lcc-line);
    height: 4px;
    margin: 12px 0 0;
}
.lcc-modal-overlay.lcc-style-article .lcc-slide-progress-bar {
    background: var(--lcc-accent, var(--lcc-coral));
}
.lcc-modal-overlay.lcc-style-article .lcc-slide-counter {
    color: var(--lcc-ink-3);
    font-size: .72rem;
}

.lcc-modal-overlay.lcc-style-article .lcc-lead-form {
    padding: 20px 28px 28px;
}

.lcc-modal-overlay.lcc-style-article .lcc-field-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--lcc-ink-2);
}
.lcc-modal-overlay.lcc-style-article .lcc-req {
    color: var(--lcc-coral-ink);
}

.lcc-modal-overlay.lcc-style-article .lcc-input {
    border: 1px solid var(--lcc-line);
    border-radius: 10px;
    font-size: .9rem;
    color: var(--lcc-ink);
}
.lcc-modal-overlay.lcc-style-article .lcc-input:focus {
    border-color: var(--lcc-accent, var(--lcc-teal));
    box-shadow: 0 0 0 3px var(--lcc-accent-shadow, rgba(14,147,132,.16));
}

.lcc-modal-overlay.lcc-style-article .lcc-radio-label,
.lcc-modal-overlay.lcc-style-article .lcc-checkbox-label {
    color: var(--lcc-ink-2);
    font-size: .85rem;
}
.lcc-modal-overlay.lcc-style-article .lcc-radio-label input,
.lcc-modal-overlay.lcc-style-article .lcc-checkbox-label input {
    accent-color: var(--lcc-accent, var(--lcc-teal));
}

.lcc-modal-overlay.lcc-style-article .lcc-form-footer,
.lcc-modal-overlay.lcc-style-article .lcc-slide-nav {
    border-top-color: var(--lcc-line);
}

.lcc-modal-overlay.lcc-style-article .lcc-submit-btn,
.lcc-modal-overlay.lcc-style-article .lcc-slide-submit,
.lcc-modal-overlay.lcc-style-article .lcc-slide-next {
    background: var(--lcc-accent, var(--lcc-coral));
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0;
}
.lcc-modal-overlay.lcc-style-article .lcc-submit-btn:hover,
.lcc-modal-overlay.lcc-style-article .lcc-slide-submit:hover,
.lcc-modal-overlay.lcc-style-article .lcc-slide-next:hover {
    background: var(--lcc-accent-hover, #D8473B);
    opacity: 1;
}

.lcc-modal-overlay.lcc-style-article .lcc-slide-back {
    border: 1px solid var(--lcc-line);
    color: var(--lcc-ink-2);
    border-radius: 10px;
    font-weight: 600;
    background: none;
}
.lcc-modal-overlay.lcc-style-article .lcc-slide-back:hover {
    border-color: var(--lcc-ink-3);
    color: var(--lcc-ink);
}

.lcc-modal-overlay.lcc-style-article .lcc-success-icon {
    background: var(--lcc-teal-soft);
    color: var(--lcc-teal-ink);
}
.lcc-modal-overlay.lcc-style-article .lcc-success-message p {
    color: var(--lcc-ink-2);
    font-size: .95rem;
}