/* ========================================
   Feature Split Block Styles
   Prefix: bkbg-fsp-
   ======================================== */

.bkbg-fsp-wrap {
    --bkbg-fsp-gap:          64px;
    --bkbg-fsp-img-w:        50%;
    --bkbg-fsp-img-radius:   16px;
    --bkbg-fsp-btn-radius:   50px;
    --bkbg-fsp-pt:           64px;
    --bkbg-fsp-pb:           64px;
    --bkbg-fsp-content-max:  540px;
    --bkbg-fsp-eyebrow-bg:   #ede9fe;
    --bkbg-fsp-eyebrow-clr:  #6c3fb5;
    --bkbg-fsp-h-color:      #0f172a;
    --bkbg-fsp-body-color:   #475569;
    --bkbg-fsp-feat-color:   #334155;
    --bkbg-fsp-prim-bg:      #6c3fb5;
    --bkbg-fsp-prim-color:   #ffffff;
    --bkbg-fsp-sec-color:    #6c3fb5;
    --bkbg-fsp-accent:       #6c3fb5;

    display: flex;
    align-items: center;
    gap: var(--bkbg-fsp-gap);
    padding-top: var(--bkbg-fsp-pt);
    padding-bottom: var(--bkbg-fsp-pb);
    box-sizing: border-box;
}

/* ── Columns ── */
.bkbg-fsp-content {
    flex: 1 1 0;
    max-width: var(--bkbg-fsp-content-max);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bkbg-fsp-image-wrap {
    flex: 0 0 var(--bkbg-fsp-img-w);
    width: var(--bkbg-fsp-img-w);
    position: relative;
    border-radius: var(--bkbg-fsp-img-radius);
    overflow: hidden;
}

.bkbg-fsp-shadow {
    box-shadow: 0 20px 60px rgba(0,0,0,0.16);
}

.bkbg-fsp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--bkbg-fsp-img-radius);
}

/* Image placeholder in editor */
.bkbg-fsp-img-placeholder {
    width: 100%;
    min-height: 280px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #f1f5f9 !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: var(--bkbg-fsp-img-radius) !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
}

.bkbg-fsp-img-actions {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* ── Content elements ── */
.bkbg-fsp-eyebrow {
    display: inline-block;
    background: var(--bkbg-fsp-eyebrow-bg);
    color: var(--bkbg-fsp-eyebrow-clr);
    font-family: var(--bkbg-fsp-eb-font-family, inherit);
    font-size: var(--bkbg-fsp-eb-font-size-d, 12px);
    font-weight: var(--bkbg-fsp-eb-font-weight, 700);
    font-style: var(--bkbg-fsp-eb-font-style, normal);
    text-transform: var(--bkbg-fsp-eb-text-transform, uppercase);
    text-decoration: var(--bkbg-fsp-eb-text-decoration, none);
    line-height: var(--bkbg-fsp-eb-line-height-d, 1.2);
    letter-spacing: var(--bkbg-fsp-eb-letter-spacing-d, 0.1em);
    word-spacing: var(--bkbg-fsp-eb-word-spacing-d, normal);
    padding: 4px 12px;
    border-radius: 50px;
}

.bkbg-fsp-wrap .bkbg-fsp-headline {
    font-family: var(--bkbg-fsp-hl-font-family, inherit);
    font-size: var(--bkbg-fsp-hl-font-size-d, 36px);
    font-weight: var(--bkbg-fsp-hl-font-weight, 700);
    font-style: var(--bkbg-fsp-hl-font-style, normal);
    text-transform: var(--bkbg-fsp-hl-text-transform, none);
    text-decoration: var(--bkbg-fsp-hl-text-decoration, none);
    line-height: var(--bkbg-fsp-hl-line-height-d, 1.2);
    letter-spacing: var(--bkbg-fsp-hl-letter-spacing-d, normal);
    word-spacing: var(--bkbg-fsp-hl-word-spacing-d, normal);
    color: var(--bkbg-fsp-h-color);
    margin: 0;
}

.bkbg-fsp-body {
    font-family: var(--bkbg-fsp-bd-font-family, inherit);
    font-size: var(--bkbg-fsp-bd-font-size-d, 17px);
    font-weight: var(--bkbg-fsp-bd-font-weight, 400);
    font-style: var(--bkbg-fsp-bd-font-style, normal);
    text-transform: var(--bkbg-fsp-bd-text-transform, none);
    text-decoration: var(--bkbg-fsp-bd-text-decoration, none);
    line-height: var(--bkbg-fsp-bd-line-height-d, 1.7);
    letter-spacing: var(--bkbg-fsp-bd-letter-spacing-d, normal);
    word-spacing: var(--bkbg-fsp-bd-word-spacing-d, normal);
    color: var(--bkbg-fsp-body-color);
    margin: 0;
}

/* ── Feature list ── */
.bkbg-fsp-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bkbg-fsp-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--bkbg-fsp-ft-font-family, inherit);
    font-size: var(--bkbg-fsp-ft-font-size-d, 15px);
    font-weight: var(--bkbg-fsp-ft-font-weight, 500);
    font-style: var(--bkbg-fsp-ft-font-style, normal);
    text-transform: var(--bkbg-fsp-ft-text-transform, none);
    text-decoration: var(--bkbg-fsp-ft-text-decoration, none);
    line-height: var(--bkbg-fsp-ft-line-height-d, 1.5);
    letter-spacing: var(--bkbg-fsp-ft-letter-spacing-d, normal);
    word-spacing: var(--bkbg-fsp-ft-word-spacing-d, normal);
    color: var(--bkbg-fsp-feat-color);
}

.bkbg-fsp-feature-icon {
    flex-shrink: 0;
    margin-top: 1px;
}
.bkbg-fsp-feature-icon svg { width: 1em; height: 1em; fill: currentColor; }
.bkbg-fsp-feature-icon .dashicons { font-size: inherit; width: 1em; height: 1em; line-height: 1; }
.bkbg-fsp-feature-icon .bkbg-icon-img { width: 1em; height: 1em; object-fit: contain; }

/* ── Buttons ── */
.bkbg-fsp-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.bkbg-fsp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bkbg-fsp-btn-radius);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
    cursor: pointer;
}

.bkbg-fsp-btn--primary {
    background: var(--bkbg-fsp-prim-bg);
    color: var(--bkbg-fsp-prim-color);
    padding: 12px 28px;
    font-size: 15px;
}

.bkbg-fsp-btn--primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.bkbg-fsp-btn--secondary {
    background: transparent;
    color: var(--bkbg-fsp-sec-color);
    padding: 12px 20px;
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bkbg-fsp-btn--secondary:hover {
    opacity: 0.75;
}

/* ── Style: Dark ── */
.bkbg-fsp-style--dark {
    background: #0f172a;
    --bkbg-fsp-h-color:    #f1f5f9;
    --bkbg-fsp-body-color: #94a3b8;
    --bkbg-fsp-feat-color: #cbd5e1;
}

/* ── Style: Gradient ── */
.bkbg-fsp-style--gradient {
    background: linear-gradient(135deg, #f5f3ff 0%, #eff6ff 100%);
}

/* ── Style: Accent ── */
.bkbg-fsp-style--accent {
    background: var(--bkbg-fsp-accent);
    --bkbg-fsp-h-color:      #ffffff;
    --bkbg-fsp-body-color:   rgba(255,255,255,0.8);
    --bkbg-fsp-feat-color:   rgba(255,255,255,0.9);
    --bkbg-fsp-eyebrow-bg:   rgba(255,255,255,0.2);
    --bkbg-fsp-eyebrow-clr:  #ffffff;
    --bkbg-fsp-prim-bg:      #ffffff;
    --bkbg-fsp-prim-color:   var(--bkbg-fsp-accent);
    --bkbg-fsp-sec-color:    rgba(255,255,255,0.85);
}

/* ── Image right (default) ── */
.bkbg-fsp-img-right .bkbg-fsp-content { order: 0; }
.bkbg-fsp-img-right .bkbg-fsp-image-wrap { order: 1; }

/* ── Image left ── */
.bkbg-fsp-img-left .bkbg-fsp-image-wrap { order: 0; }
.bkbg-fsp-img-left .bkbg-fsp-content { order: 1; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .bkbg-fsp-eyebrow {
        font-size: var(--bkbg-fsp-eb-font-size-t, var(--bkbg-fsp-eb-font-size-d, 12px));
        line-height: var(--bkbg-fsp-eb-line-height-t, var(--bkbg-fsp-eb-line-height-d, 1.2));
        letter-spacing: var(--bkbg-fsp-eb-letter-spacing-t, var(--bkbg-fsp-eb-letter-spacing-d, 0.1em));
        word-spacing: var(--bkbg-fsp-eb-word-spacing-t, var(--bkbg-fsp-eb-word-spacing-d, normal));
    }
    .bkbg-fsp-wrap .bkbg-fsp-headline {
        font-size: var(--bkbg-fsp-hl-font-size-t, var(--bkbg-fsp-hl-font-size-d, 36px));
        line-height: var(--bkbg-fsp-hl-line-height-t, var(--bkbg-fsp-hl-line-height-d, 1.2));
        letter-spacing: var(--bkbg-fsp-hl-letter-spacing-t, var(--bkbg-fsp-hl-letter-spacing-d, normal));
        word-spacing: var(--bkbg-fsp-hl-word-spacing-t, var(--bkbg-fsp-hl-word-spacing-d, normal));
    }
    .bkbg-fsp-body {
        font-size: var(--bkbg-fsp-bd-font-size-t, var(--bkbg-fsp-bd-font-size-d, 17px));
        line-height: var(--bkbg-fsp-bd-line-height-t, var(--bkbg-fsp-bd-line-height-d, 1.7));
        letter-spacing: var(--bkbg-fsp-bd-letter-spacing-t, var(--bkbg-fsp-bd-letter-spacing-d, normal));
        word-spacing: var(--bkbg-fsp-bd-word-spacing-t, var(--bkbg-fsp-bd-word-spacing-d, normal));
    }
    .bkbg-fsp-feature {
        font-size: var(--bkbg-fsp-ft-font-size-t, var(--bkbg-fsp-ft-font-size-d, 15px));
        line-height: var(--bkbg-fsp-ft-line-height-t, var(--bkbg-fsp-ft-line-height-d, 1.5));
        letter-spacing: var(--bkbg-fsp-ft-letter-spacing-t, var(--bkbg-fsp-ft-letter-spacing-d, normal));
        word-spacing: var(--bkbg-fsp-ft-word-spacing-t, var(--bkbg-fsp-ft-word-spacing-d, normal));
    }
}

@media (max-width: 900px) {
    .bkbg-fsp-wrap {
        flex-direction: column;
        --bkbg-fsp-gap: 40px;
    }

    .bkbg-fsp-image-wrap {
        width: 100%;
        flex: 0 0 auto;
        max-height: 400px;
        overflow: hidden;
    }

    .bkbg-fsp-content {
        max-width: 100%;
    }

    .bkbg-fsp-wrap .bkbg-fsp-image-wrap,
    .bkbg-fsp-wrap .bkbg-fsp-content {
        order: unset !important;
    }

    .bkbg-fsp-wrap .bkbg-fsp-image-wrap { order: 0 !important; }
    .bkbg-fsp-wrap .bkbg-fsp-content    { order: 1 !important; }
}

@media (max-width: 767px) {
    .bkbg-fsp-eyebrow {
        font-size: var(--bkbg-fsp-eb-font-size-m, var(--bkbg-fsp-eb-font-size-t, var(--bkbg-fsp-eb-font-size-d, 12px)));
        line-height: var(--bkbg-fsp-eb-line-height-m, var(--bkbg-fsp-eb-line-height-t, var(--bkbg-fsp-eb-line-height-d, 1.2)));
        letter-spacing: var(--bkbg-fsp-eb-letter-spacing-m, var(--bkbg-fsp-eb-letter-spacing-t, var(--bkbg-fsp-eb-letter-spacing-d, 0.1em)));
        word-spacing: var(--bkbg-fsp-eb-word-spacing-m, var(--bkbg-fsp-eb-word-spacing-t, var(--bkbg-fsp-eb-word-spacing-d, normal)));
    }
    .bkbg-fsp-wrap .bkbg-fsp-headline {
        font-size: var(--bkbg-fsp-hl-font-size-m, var(--bkbg-fsp-hl-font-size-t, var(--bkbg-fsp-hl-font-size-d, 36px)));
        line-height: var(--bkbg-fsp-hl-line-height-m, var(--bkbg-fsp-hl-line-height-t, var(--bkbg-fsp-hl-line-height-d, 1.2)));
        letter-spacing: var(--bkbg-fsp-hl-letter-spacing-m, var(--bkbg-fsp-hl-letter-spacing-t, var(--bkbg-fsp-hl-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-fsp-hl-word-spacing-m, var(--bkbg-fsp-hl-word-spacing-t, var(--bkbg-fsp-hl-word-spacing-d, normal)));
    }
    .bkbg-fsp-body {
        font-size: var(--bkbg-fsp-bd-font-size-m, var(--bkbg-fsp-bd-font-size-t, var(--bkbg-fsp-bd-font-size-d, 17px)));
        line-height: var(--bkbg-fsp-bd-line-height-m, var(--bkbg-fsp-bd-line-height-t, var(--bkbg-fsp-bd-line-height-d, 1.7)));
        letter-spacing: var(--bkbg-fsp-bd-letter-spacing-m, var(--bkbg-fsp-bd-letter-spacing-t, var(--bkbg-fsp-bd-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-fsp-bd-word-spacing-m, var(--bkbg-fsp-bd-word-spacing-t, var(--bkbg-fsp-bd-word-spacing-d, normal)));
    }
    .bkbg-fsp-feature {
        font-size: var(--bkbg-fsp-ft-font-size-m, var(--bkbg-fsp-ft-font-size-t, var(--bkbg-fsp-ft-font-size-d, 15px)));
        line-height: var(--bkbg-fsp-ft-line-height-m, var(--bkbg-fsp-ft-line-height-t, var(--bkbg-fsp-ft-line-height-d, 1.5)));
        letter-spacing: var(--bkbg-fsp-ft-letter-spacing-m, var(--bkbg-fsp-ft-letter-spacing-t, var(--bkbg-fsp-ft-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-fsp-ft-word-spacing-m, var(--bkbg-fsp-ft-word-spacing-t, var(--bkbg-fsp-ft-word-spacing-d, normal)));
    }
}

@media (max-width: 580px) {
    .bkbg-fsp-wrap {
        --bkbg-fsp-pt: 40px;
        --bkbg-fsp-pb: 40px;
    }
}