/**
 * Component: Stats
 * 
 * Styles for the Stats component.
 *
 * @package SCDA-2025
 */

/* Basic component styling */
.stats {
    .section-heading {
        margin-bottom: 5px;
    }
    .stat-box {
        .stat-box-inner {
            background-color: #E9EEEB;
            border-radius: var(--border-radius);
            padding: 40px;
            text-align: center;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: center;

            @media screen and (max-width: 1100px) {
                padding: 30px;
            }
            @media screen and (max-width: 576px) {
                padding: 25px;
            }
            .stat-icon {
                img {
                    display: block;
                    margin: 0px auto 8px;
                }
            }
            span {
                display: block;

                &.line-1, &.line-3 {
                    font-weight: bold;
                    color: var(--color-scda-moss);
                }
                &.line-2 {
                    font-size: 2.5rem;
                    line-height: 1.3;
                    letter-spacing: 0.125rem;
                    color: var(--color-scda-blue);
                    margin-bottom: 0;

                    @media screen and (max-width: 768px) {
                        font-size: 2rem;
                        line-height: 2.625rem;
                        letter-spacing: .1rem;
                    }
                }
                &.line-2, &.line-3 {
                    margin-top: 15px;

                    @media screen and (max-width: 768px) {
                        margin-top: 10px;
                    }
                }
            }
        }
    }
    .callout-box {
        .callout-box-inner {
            background-color: var(--color-scda-beige);
            border-radius: var(--border-radius);
            padding: 40px;

            @media screen and (max-width: 1100px) {
                padding: 30px;
            }
            @media screen and (max-width: 576px) {
                padding: 25px;
            }
        }
        .callout-box-text {
            h3 {
                &.h4 {
                    @media screen and (max-width: 768px) {
                        letter-spacing: 0.0169rem;
                    }
                    br {
                        @media screen and (max-width: 768px) {
                            display: none;
                        }
                    }
                }
            }
            p {
                font-size: .9rem;
                line-height: 1.45;
                margin: 0;
            }
        }
    }
}


.is-preview .stats .row {
    /* Allow natural wrapping for stat boxes */
    flex-wrap: wrap !important;
    
    /* Use standard Bootstrap gutters */
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;

}

/* Reset specific column width overrides from preview.css */
.is-preview .stats .row > .col-lg-4,
.is-preview .stats .row > .col-md-4,
.is-preview .stats .row > .col-md-6,
.is-preview .stats .row > .col-lg-6,
.is-preview .stats .row > .col-lg-8 {
    /* Use Bootstrap's default flex values, not preview.css overrides */
    flex: 0 0 auto !important;
    height: 100%;
}

.is-preview .stats .row > .col-lg-4 {
    width: calc((100% / 3) - 40px);
}

.is-preview .stats .row > .col-md-6 {
    @media screen and (max-width: 768px) {
        width: calc(50% - 40px);
    }
}

.is-preview .stats .row > .col-lg-8 {
    width: calc(((100% / 3) * 2) - 40px);
}