/* ==================== JOBS PAGE HERO STATS - DEFINITIVE FIX ==================== */
/* DELETE all previous hero stats CSS and use ONLY this */

/* Target all possible stat container classes */
.jobs-page .page-header .header-stats,
.jobs-page .page-header .hero-stats,
.jobs-page .hero-content .header-stats,
.jobs-page .hero-content .hero-stats {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem !important;
    margin-top: 1.5rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* Force stat items to stay horizontal */
.jobs-page .stat-item,
.jobs-page .stat {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 100px !important;
    max-width: 140px !important;
    text-align: center !important;
    padding: 0.75rem 1.25rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    margin: 0 !important;
}

.jobs-page .stat-number,
.jobs-page .stat-item .stat-number {
    display: block !important;
    font-size: 1.75rem !important;
    color: white !important;
    margin-bottom: 0.25rem !important;
    text-align: center !important;
}

.jobs-page .stat-label,
.jobs-page .stat-item .stat-label {
    display: block !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-align: center !important;
}

/* Mobile - allow wrap but keep horizontal */
@media (max-width: 640px) {
    .jobs-page .page-header .header-stats,
    .jobs-page .page-header .hero-stats {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
    
    .jobs-page .stat-item,
    .jobs-page .stat {
        min-width: 85px !important;
    }
}