// FAQ Builder summary stat cards (FAQ Groups / Total FAQs / Published / Drafts).
// Mirrors the dashboard overview cards: white card, big number, and a tinted
// icon, with the same blurred-triangle SVG glow anchored to the top-left corner
// (the SVG + tint is set inline in FaqStats.js, matching `.betterdocs-card-wrapper`).
.bd-faq-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 20px;

    .bd-faq-stat-card {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        background: var(--base-background, #fff);
        border: 1px solid var(--text-color-200);
        border-radius: 8px;
        padding: 20px 22px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        background-position: left top;
        background-repeat: no-repeat;

        &__body {
            position: relative;
            z-index: 1;
        }

        &__value {
            margin: 0;
            font-size: 30px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -0.5px;
            color: var(--text-color-900);
        }

        &__label {
            margin: 8px 0 0;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-color-600);
            white-space: nowrap;
        }

        // Rounded icon tile (inline style sets background tint + color).
        &__icon {
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            // Colour/background live at top level in bd-faq.scss so they also
            // reach the portaled modal-header icons (this block is scoped under
            // .betterdocs-faq-wrapper and wouldn't match them).

            svg {
                width: 20px;
                height: 20px;
            }
        }
    }
}

@media (max-width: 1100px) {
    .bd-faq-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .bd-faq-stats {
        grid-template-columns: 1fr;
    }
}