/* Minimal custom styles for Stats Block */
/* Most styles are handled by Tailwind CSS */

/* Break out of container to make full-width */
.stats-block {
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box;
}

/* Override Elementor container max-width when block is inside */
.e-con-inner:has(.stats-block),
.elementor-container:has(.stats-block),
main:has(.stats-block) {
    max-width: none !important;
    overflow-x: visible !important;
}

/* Fallback for browsers without :has() support */
.stats-block {
    max-width: 100vw !important;
}

/* Stat card styling */
.stat-card {
    /* No hover effects */
}

/* Stats grid mobile styling - max-width and center */
@media (max-width: 767px) {
    .stats-grid {
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Stat number - responsive font sizes, no spacing between elements */
.stat-number {
    font-size: 0; /* Remove whitespace between inline elements */
    line-height: 1.2;
}

.stat-prefix,
.stat-num,
.stat-suffix {
    display: inline;
    margin: 0;
    padding: 0;
    letter-spacing: 0;
    font-size: 32px; /* Restore font size */
}

@media (min-width: 768px) {
    .stat-prefix,
    .stat-num,
    .stat-suffix {
        font-size: 40px;
    }
}

@media (min-width: 1024px) {
    .stat-prefix,
    .stat-num,
    .stat-suffix {
        font-size: 48px;
    }
}

/* Eyebrow text - responsive font sizes */
.stats-eyebrow {
    font-size: 18px;
    line-height: 28px;
}

@media (min-width: 768px) {
    .stats-eyebrow {
        font-size: 24px;
        line-height: 37px;
    }
}

@media (min-width: 1024px) {
    .stats-eyebrow {
        font-size: 30px;
        line-height: 47px;
    }
}

/* Headline - match resources-headline responsiveness */
.stats-headline {
    font-size: 20px;
    line-height: 30px;
    max-width: 100%;
}

@media (min-width: 768px) {
    .stats-headline {
        font-size: 24px;
        line-height: 36px;
        max-width: 85%;
    }
}

@media (min-width: 1024px) {
    .stats-headline {
        font-size: 30px;
        line-height: 45px;
        max-width: 75%;
    }
}

/* CTA button hover - black background, white text */
.stats-cta-btn {
    color: #000000 !important;
    text-decoration: none !important;
}

.stats-cta-btn:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    text-decoration: none !important;
}