/* ============================================================
   Feature Columns — style.css
   Prefix: bkbg-fc-
   ============================================================ */

.bkbg-fc-wrap {
    box-sizing: border-box;
    width: 100%;
    padding: var(--bkbg-fc-pt, 0px) 0 var(--bkbg-fc-pb, 0px);
}

/* ---- Grid ---- */
.bkbg-fc-grid {
    display: grid;
    grid-template-columns: repeat(var(--bkbg-fc-cols, 3), 1fr);
    gap: var(--bkbg-fc-row-gap, 40px) var(--bkbg-fc-gap, 32px);
}

/* ---- Single feature ---- */
.bkbg-fc-feature {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Alignment variants */
.bkbg-fc-align--center .bkbg-fc-feature { align-items: center; text-align: center; }
.bkbg-fc-align--left   .bkbg-fc-feature { align-items: flex-start; text-align: left; }

/* ---- Icon wrap ---- */
.bkbg-fc-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .2s;
}
.bkbg-fc-feature:hover .bkbg-fc-icon-wrap { transform: scale(1.05); }

/* Icon style: box */
.bkbg-fc-icon-style--box.bkbg-fc-icon-wrap {
    width: calc(var(--bkbg-fc-icon-sz, 24px) * 1.8);
    height: calc(var(--bkbg-fc-icon-sz, 24px) * 1.8);
    border-radius: 10px;
    background: var(--bkbg-fc-icon-bg, #f0ebff);
}

/* Icon style: circle */
.bkbg-fc-icon-style--circle.bkbg-fc-icon-wrap {
    width: calc(var(--bkbg-fc-icon-sz, 24px) * 1.8);
    height: calc(var(--bkbg-fc-icon-sz, 24px) * 1.8);
    border-radius: 50%;
    background: var(--bkbg-fc-icon-bg, #f0ebff);
}

/* Icon style: line (underline accent) */
.bkbg-fc-icon-style--line.bkbg-fc-icon-wrap {
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bkbg-fc-accent, #6c3fb5);
    border-radius: 0;
    background: transparent;
    justify-content: flex-start;
}
.bkbg-fc-align--center .bkbg-fc-icon-style--line.bkbg-fc-icon-wrap { justify-content: center; }

/* Icon style: none */
.bkbg-fc-icon-style--none.bkbg-fc-icon-wrap {
    background: transparent;
    border-radius: 0;
}

.bkbg-fc-icon {
    font-size: var(--bkbg-fc-icon-sz, 24px);
    color: var(--bkbg-fc-icon-c, #6c3fb5);
    line-height: 1;
    width: var(--bkbg-fc-icon-sz, 24px);
    height: var(--bkbg-fc-icon-sz, 24px);
    display: flex;
    align-items: center;
}

/* ---- Number (step/ordered mode) ---- */
.bkbg-fc-number {
    font-size: var(--bkbg-fc-num-sz, 32px);
    font-weight: 900;
    color: var(--bkbg-fc-num-c, #6c3fb5);
    letter-spacing: -.04em;
    line-height: 1;
    flex-shrink: 0;
}

.bkbg-fc-number.bkbg-fc-icon-style--box,
.bkbg-fc-number.bkbg-fc-icon-style--circle {
    width: calc(var(--bkbg-fc-num-sz, 32px) * 1.5);
    height: calc(var(--bkbg-fc-num-sz, 32px) * 1.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bkbg-fc-icon-bg, #f0ebff);
    font-size: var(--bkbg-fc-num-sz, 32px);
}
.bkbg-fc-number.bkbg-fc-icon-style--circle { border-radius: 50%; }
.bkbg-fc-number.bkbg-fc-icon-style--box    { border-radius: 10px; }

/* ---- Text ---- */
.bkbg-fc-text { display: flex; flex-direction: column; gap: 6px; }

.bkbg-fc-wrap .bkbg-fc-title {
    margin: 0;
    font-family: var(--bkbg-fc-tt-font-family, inherit);
    font-size: var(--bkbg-fc-tt-font-size-d, 17px);
    font-weight: var(--bkbg-fc-tt-font-weight, 700);
    font-style: var(--bkbg-fc-tt-font-style, normal);
    text-transform: var(--bkbg-fc-tt-text-transform, none);
    text-decoration: var(--bkbg-fc-tt-text-decoration, none);
    line-height: var(--bkbg-fc-tt-line-height-d, 1.3);
    letter-spacing: var(--bkbg-fc-tt-letter-spacing-d, normal);
    word-spacing: var(--bkbg-fc-tt-word-spacing-d, normal);
    color: var(--bkbg-fc-title-c, #0f172a);
}

.bkbg-fc-body {
    margin: 0;
    font-family: var(--bkbg-fc-bd-font-family, inherit);
    font-size: var(--bkbg-fc-bd-font-size-d, 15px);
    font-weight: var(--bkbg-fc-bd-font-weight, 400);
    font-style: var(--bkbg-fc-bd-font-style, normal);
    text-transform: var(--bkbg-fc-bd-text-transform, none);
    text-decoration: var(--bkbg-fc-bd-text-decoration, none);
    line-height: var(--bkbg-fc-bd-line-height-d, 1.65);
    letter-spacing: var(--bkbg-fc-bd-letter-spacing-d, normal);
    word-spacing: var(--bkbg-fc-bd-word-spacing-d, normal);
    color: var(--bkbg-fc-body-c, #64748b);
}

/* ============================================================
   Style Variants
   ============================================================ */

/* plain — just the column (default) */
/* (no extra styles needed) */

/* card — white card with shadow */
.bkbg-fc-style--card .bkbg-fc-feature {
    background: var(--bkbg-fc-card-bg, #ffffff);
    border-radius: var(--bkbg-fc-card-r, 12px);
    padding: var(--bkbg-fc-card-p, 24px);
    box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.04);
    transition: box-shadow .18s, transform .18s;
}
.bkbg-fc-style--card .bkbg-fc-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,0,0,.09), 0 0 0 1px rgba(0,0,0,.03);
}

/* bordered — border around each card */
.bkbg-fc-style--bordered .bkbg-fc-feature {
    border: 1px solid var(--bkbg-fc-card-border, #e2e8f0);
    border-radius: var(--bkbg-fc-card-r, 12px);
    padding: var(--bkbg-fc-card-p, 24px);
    background: var(--bkbg-fc-card-bg, #ffffff);
    transition: border-color .18s, box-shadow .18s;
}
.bkbg-fc-style--bordered .bkbg-fc-feature:hover {
    border-color: var(--bkbg-fc-accent, #6c3fb5);
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

/* filled — accent icon bg fills full card tint */
.bkbg-fc-style--filled .bkbg-fc-feature {
    background: var(--bkbg-fc-icon-bg, #f0ebff);
    border-radius: var(--bkbg-fc-card-r, 12px);
    padding: var(--bkbg-fc-card-p, 24px);
    transition: background .18s;
}
.bkbg-fc-style--filled .bkbg-fc-feature:hover { background: color-mix(in srgb, var(--bkbg-fc-icon-bg, #f0ebff) 80%, var(--bkbg-fc-accent, #6c3fb5) 20%); }
.bkbg-fc-style--filled .bkbg-fc-icon-wrap { background: rgba(255,255,255,.6); }

/* numbered — large faded number behind each item */
.bkbg-fc-style--numbered .bkbg-fc-number {
    font-size: clamp(40px, 8vw, 72px);
    color: color-mix(in srgb, var(--bkbg-fc-accent, #6c3fb5) 12%, transparent);
    font-weight: 900;
}

/* Inspector helpers */
.bkbg-fc-feat-ctrl { border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 12px; }
.bkbg-fc-feat-head { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; }
.bkbg-fc-feat-actions { display: flex; gap: 4px; margin-top: 8px; }

/* Responsive */
@media (max-width: 1024px) {
    .bkbg-fc-wrap .bkbg-fc-title {
        font-size: var(--bkbg-fc-tt-font-size-t, var(--bkbg-fc-tt-font-size-d, 17px));
        line-height: var(--bkbg-fc-tt-line-height-t, var(--bkbg-fc-tt-line-height-d, 1.3));
        letter-spacing: var(--bkbg-fc-tt-letter-spacing-t, var(--bkbg-fc-tt-letter-spacing-d, normal));
        word-spacing: var(--bkbg-fc-tt-word-spacing-t, var(--bkbg-fc-tt-word-spacing-d, normal));
    }
    .bkbg-fc-body {
        font-size: var(--bkbg-fc-bd-font-size-t, var(--bkbg-fc-bd-font-size-d, 15px));
        line-height: var(--bkbg-fc-bd-line-height-t, var(--bkbg-fc-bd-line-height-d, 1.65));
        letter-spacing: var(--bkbg-fc-bd-letter-spacing-t, var(--bkbg-fc-bd-letter-spacing-d, normal));
        word-spacing: var(--bkbg-fc-bd-word-spacing-t, var(--bkbg-fc-bd-word-spacing-d, normal));
    }
}
@media (max-width: 900px) {
    .bkbg-fc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .bkbg-fc-wrap .bkbg-fc-title {
        font-size: var(--bkbg-fc-tt-font-size-m, var(--bkbg-fc-tt-font-size-t, var(--bkbg-fc-tt-font-size-d, 17px)));
        line-height: var(--bkbg-fc-tt-line-height-m, var(--bkbg-fc-tt-line-height-t, var(--bkbg-fc-tt-line-height-d, 1.3)));
        letter-spacing: var(--bkbg-fc-tt-letter-spacing-m, var(--bkbg-fc-tt-letter-spacing-t, var(--bkbg-fc-tt-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-fc-tt-word-spacing-m, var(--bkbg-fc-tt-word-spacing-t, var(--bkbg-fc-tt-word-spacing-d, normal)));
    }
    .bkbg-fc-body {
        font-size: var(--bkbg-fc-bd-font-size-m, var(--bkbg-fc-bd-font-size-t, var(--bkbg-fc-bd-font-size-d, 15px)));
        line-height: var(--bkbg-fc-bd-line-height-m, var(--bkbg-fc-bd-line-height-t, var(--bkbg-fc-bd-line-height-d, 1.65)));
        letter-spacing: var(--bkbg-fc-bd-letter-spacing-m, var(--bkbg-fc-bd-letter-spacing-t, var(--bkbg-fc-bd-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-fc-bd-word-spacing-m, var(--bkbg-fc-bd-word-spacing-t, var(--bkbg-fc-bd-word-spacing-d, normal)));
    }
}
@media (max-width: 520px) {
    .bkbg-fc-grid { grid-template-columns: 1fr; }
}