/* ─────────────────────────────────────────────────────────────────────────────
   Feature Grid — bkbg-fg-
   ───────────────────────────────────────────────────────────────────────────── */

/* Wrapper */
.bkbg-fg-wrapper {
    box-sizing: border-box;
}

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

/* Card base */
.bkbg-fg-card {
    background: var(--bkbg-fg-card-bg, #ffffff);
    border-radius: var(--bkbg-fg-radius, 12px);
    padding: var(--bkbg-fg-pad, 32px);
    text-align: var(--bkbg-fg-text-align, center);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ── Card styles ──────────────────────────────────────────────────────────── */
.bkbg-fg-card-shadow .bkbg-fg-card {
    box-shadow: var(--bkbg-fg-shadow, 0 2px 12px rgba(0,0,0,0.1));
}

.bkbg-fg-card-outlined .bkbg-fg-card {
    border: 1.5px solid var(--bkbg-fg-card-border, #e5e7eb);
    box-shadow: none;
}

.bkbg-fg-card-flat .bkbg-fg-card {
    background: var(--bkbg-fg-card-bg, #f9fafb);
    box-shadow: none;
}

.bkbg-fg-card-plain .bkbg-fg-card {
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* ── Hover effects ────────────────────────────────────────────────────────── */
.bkbg-fg-hover-lift .bkbg-fg-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.13);
}

.bkbg-fg-hover-scale .bkbg-fg-card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

.bkbg-fg-hover-glow .bkbg-fg-card:hover {
    border-color: var(--bkbg-fg-icon-color, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bkbg-fg-icon-color, #3b82f6) 18%, transparent);
}

/* ── Icon position: top (column) ──────────────────────────────────────────── */
.bkbg-fg-icon-pos-top .bkbg-fg-card {
    flex-direction: column;
    align-items: center;
}

.bkbg-fg-icon-pos-top .bkbg-fg-icon-area {
    display: flex;
    justify-content: var(--bkbg-fg-text-align, center);
    margin-bottom: 16px;
}

/* ── Icon position: left (row) ────────────────────────────────────────────── */
.bkbg-fg-icon-pos-left .bkbg-fg-card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
}

.bkbg-fg-icon-pos-left .bkbg-fg-icon-area {
    margin-right: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

/* ── Icon wrap (shape background) ───────────────────────────────────────────── */
.bkbg-fg-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--bkbg-fg-shape-size, 72px);
    height: var(--bkbg-fg-shape-size, 72px);
    background: var(--bkbg-fg-icon-bg, #eff6ff);
    flex-shrink: 0;
}

/* None / shape override via JS inline styles takes precedence */

.bkbg-fg-icon-pos-top .bkbg-fg-icon-wrap {
    margin: 0 auto;
}
.bkbg-fg-icon-pos-left .bkbg-fg-icon-wrap {
    margin: 0;
}

.bkbg-fg-icon-area .dashicons {
    color: var(--bkbg-fg-icon-color, #3b82f6);
    font-size: var(--bkbg-fg-icon-size, 42px) !important;
    width: var(--bkbg-fg-icon-size, 42px) !important;
    height: var(--bkbg-fg-icon-size, 42px) !important;
    line-height: 1;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
.bkbg-fg-body {
    flex: 1;
    min-width: 0;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
.bkbg-fg-wrapper .bkbg-fg-title {
    font-family: var(--bkbg-fg-tt-font-family, inherit);
    font-size: var(--bkbg-fg-tt-font-size-d, 18px);
    font-weight: var(--bkbg-fg-tt-font-weight, 700);
    font-style: var(--bkbg-fg-tt-font-style, normal);
    text-transform: var(--bkbg-fg-tt-text-transform, none);
    text-decoration: var(--bkbg-fg-tt-text-decoration, none);
    line-height: var(--bkbg-fg-tt-line-height-d, 1.3);
    letter-spacing: var(--bkbg-fg-tt-letter-spacing-d, normal);
    word-spacing: var(--bkbg-fg-tt-word-spacing-d, normal);
    color: var(--bkbg-fg-title-color, #111827);
    margin: 0 0 10px;
}

.bkbg-fg-text {
    font-family: var(--bkbg-fg-tx-font-family, inherit);
    font-size: var(--bkbg-fg-tx-font-size-d, 14px);
    font-weight: var(--bkbg-fg-tx-font-weight, 400);
    font-style: var(--bkbg-fg-tx-font-style, normal);
    text-transform: var(--bkbg-fg-tx-text-transform, none);
    text-decoration: var(--bkbg-fg-tx-text-decoration, none);
    line-height: var(--bkbg-fg-tx-line-height-d, 1.65);
    letter-spacing: var(--bkbg-fg-tx-letter-spacing-d, normal);
    word-spacing: var(--bkbg-fg-tx-word-spacing-d, normal);
    color: var(--bkbg-fg-text-color, #6b7280);
    margin: 0 0 12px;
}

.bkbg-fg-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--bkbg-fg-lk-font-family, inherit);
    font-size: var(--bkbg-fg-lk-font-size-d, 14px);
    font-weight: var(--bkbg-fg-lk-font-weight, 600);
    font-style: var(--bkbg-fg-lk-font-style, normal);
    text-transform: var(--bkbg-fg-lk-text-transform, none);
    text-decoration: var(--bkbg-fg-lk-text-decoration, none);
    line-height: var(--bkbg-fg-lk-line-height-d, 1.4);
    letter-spacing: var(--bkbg-fg-lk-letter-spacing-d, normal);
    word-spacing: var(--bkbg-fg-lk-word-spacing-d, normal);
    color: var(--bkbg-fg-link-color, #3b82f6);
    transition: gap 0.2s ease, opacity 0.2s ease;
}

.bkbg-fg-link:hover {
    opacity: 0.8;
    gap: 8px;
}

.bkbg-fg-link-arrow {
    font-style: normal;
    transition: transform 0.2s ease;
}

.bkbg-fg-link:hover .bkbg-fg-link-arrow {
    transform: translateX(3px);
}

/* ── Scroll reveal animation ──────────────────────────────────────────────── */
.bkbg-fg-card.bkbg-fg-anim {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.bkbg-fg-card.bkbg-fg-anim.bkbg-fg-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay for each card position */
.bkbg-fg-card.bkbg-fg-anim:nth-child(2) { transition-delay: 0.08s; }
.bkbg-fg-card.bkbg-fg-anim:nth-child(3) { transition-delay: 0.16s; }
.bkbg-fg-card.bkbg-fg-anim:nth-child(4) { transition-delay: 0.24s; }
.bkbg-fg-card.bkbg-fg-anim:nth-child(5) { transition-delay: 0.32s; }
.bkbg-fg-card.bkbg-fg-anim:nth-child(6) { transition-delay: 0.40s; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .bkbg-fg-grid {
        grid-template-columns: repeat(var(--bkbg-fg-cols-tab, 2), 1fr);
    }
    .bkbg-fg-wrapper .bkbg-fg-title {
        font-size: var(--bkbg-fg-tt-font-size-t, var(--bkbg-fg-tt-font-size-d, 18px));
        line-height: var(--bkbg-fg-tt-line-height-t, var(--bkbg-fg-tt-line-height-d, 1.3));
        letter-spacing: var(--bkbg-fg-tt-letter-spacing-t, var(--bkbg-fg-tt-letter-spacing-d, normal));
        word-spacing: var(--bkbg-fg-tt-word-spacing-t, var(--bkbg-fg-tt-word-spacing-d, normal));
    }
    .bkbg-fg-text {
        font-size: var(--bkbg-fg-tx-font-size-t, var(--bkbg-fg-tx-font-size-d, 14px));
        line-height: var(--bkbg-fg-tx-line-height-t, var(--bkbg-fg-tx-line-height-d, 1.65));
        letter-spacing: var(--bkbg-fg-tx-letter-spacing-t, var(--bkbg-fg-tx-letter-spacing-d, normal));
        word-spacing: var(--bkbg-fg-tx-word-spacing-t, var(--bkbg-fg-tx-word-spacing-d, normal));
    }
    .bkbg-fg-link {
        font-size: var(--bkbg-fg-lk-font-size-t, var(--bkbg-fg-lk-font-size-d, 14px));
        line-height: var(--bkbg-fg-lk-line-height-t, var(--bkbg-fg-lk-line-height-d, 1.4));
        letter-spacing: var(--bkbg-fg-lk-letter-spacing-t, var(--bkbg-fg-lk-letter-spacing-d, normal));
        word-spacing: var(--bkbg-fg-lk-word-spacing-t, var(--bkbg-fg-lk-word-spacing-d, normal));
    }
}

@media (max-width: 480px) {
    .bkbg-fg-grid {
        grid-template-columns: repeat(var(--bkbg-fg-cols-mob, 1), 1fr);
    }
    .bkbg-fg-icon-pos-left .bkbg-fg-card {
        flex-direction: column;
        text-align: var(--bkbg-fg-text-align, center);
    }
    .bkbg-fg-icon-pos-left .bkbg-fg-icon-area {
        margin-right: 0;
        margin-bottom: 14px;
        justify-content: center;
        align-items: center;
    }
    .bkbg-fg-wrapper .bkbg-fg-title {
        font-size: var(--bkbg-fg-tt-font-size-m, var(--bkbg-fg-tt-font-size-t, var(--bkbg-fg-tt-font-size-d, 18px)));
        line-height: var(--bkbg-fg-tt-line-height-m, var(--bkbg-fg-tt-line-height-t, var(--bkbg-fg-tt-line-height-d, 1.3)));
        letter-spacing: var(--bkbg-fg-tt-letter-spacing-m, var(--bkbg-fg-tt-letter-spacing-t, var(--bkbg-fg-tt-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-fg-tt-word-spacing-m, var(--bkbg-fg-tt-word-spacing-t, var(--bkbg-fg-tt-word-spacing-d, normal)));
    }
    .bkbg-fg-text {
        font-size: var(--bkbg-fg-tx-font-size-m, var(--bkbg-fg-tx-font-size-t, var(--bkbg-fg-tx-font-size-d, 14px)));
        line-height: var(--bkbg-fg-tx-line-height-m, var(--bkbg-fg-tx-line-height-t, var(--bkbg-fg-tx-line-height-d, 1.65)));
        letter-spacing: var(--bkbg-fg-tx-letter-spacing-m, var(--bkbg-fg-tx-letter-spacing-t, var(--bkbg-fg-tx-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-fg-tx-word-spacing-m, var(--bkbg-fg-tx-word-spacing-t, var(--bkbg-fg-tx-word-spacing-d, normal)));
    }
    .bkbg-fg-link {
        font-size: var(--bkbg-fg-lk-font-size-m, var(--bkbg-fg-lk-font-size-t, var(--bkbg-fg-lk-font-size-d, 14px)));
        line-height: var(--bkbg-fg-lk-line-height-m, var(--bkbg-fg-lk-line-height-t, var(--bkbg-fg-lk-line-height-d, 1.4)));
        letter-spacing: var(--bkbg-fg-lk-letter-spacing-m, var(--bkbg-fg-lk-letter-spacing-t, var(--bkbg-fg-lk-letter-spacing-d, normal)));
        word-spacing: var(--bkbg-fg-lk-word-spacing-m, var(--bkbg-fg-lk-word-spacing-t, var(--bkbg-fg-lk-word-spacing-d, normal)));
    }
}

/* ── Editor: keep cards readable at any width ─────────────────────────────── */
.wp-block-blockenberg-feature-grid .bkbg-fg-title {
    min-height: 1em;
}