/* ================================================================================
   STATS SECTION - MOBILE RESPONSIVE ADDITIONS ONLY
   
   This file adds ONLY mobile responsive improvements to the stats section
   without touching the existing desktop design.
   ================================================================================ */

/* Mobile-Only Improvements for Stats Section */
@media (max-width: 767px) {
    /* Stats section mobile spacing */
    .stats-section {
        padding: 40px 0; /* Reduced from 80px for mobile */
    }
    
    .stats-section .container {
        padding: 0 16px; /* More mobile-friendly padding */
        gap: 32px; /* Reduced from 60px for mobile */
    }
    
    /* Stats intro text mobile sizing */
    .stats-intro-text {
        font-size: 20px; /* Reduced from 32px for mobile readability */
        line-height: 28px; /* Better mobile line height */
    }
    
    /* Stats grid mobile layout */
    .stats-grid {
        grid-template-columns: 1fr; /* Force single column */
        gap: 16px; /* Smaller gap for mobile */
    }
    
    /* Stats cards mobile optimization */
    .stat-card {
        padding: 20px; /* More reasonable mobile padding */
        height: auto; /* Let height be flexible on mobile */
        min-height: 140px; /* Minimum viable height */
    }
    
    /* Stats numbers mobile sizing */
    .stat-number {
        font-size: 32px; /* Reduced from 52px */
        line-height: 40px; /* Proportional line height */
    }
    
    /* Stats labels mobile sizing */
    .stat-label {
        font-size: 16px; /* Increased from 14px for better readability */
        line-height: 20px; /* Better mobile line height */
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .stats-section {
        padding: 32px 0; /* Even more compact for small phones */
    }
    
    .stats-section .container {
        padding: 0 12px; /* Minimal padding for small screens */
        gap: 24px;
    }
    
    .stats-intro-text {
        font-size: 18px; /* Smaller for very small screens */
        line-height: 24px;
    }
    
    .stat-card {
        padding: 16px; /* Compact padding for small screens */
        min-height: 120px;
    }
    
    .stat-number {
        font-size: 28px; /* Smaller numbers for small screens */
        line-height: 36px;
    }
    
    .stat-label {
        font-size: 14px; /* Standard mobile text size */
        line-height: 18px;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    .stat-card {
        /* Ensure adequate touch targets */
        min-height: 120px;
    }
    
    .stat-card:hover {
        /* Disable hover effects on touch devices */
        transform: none;
        background: #faf7f5;
        border-color: #397396;
        box-shadow: none;
    }
}

/* ================================================================================
   TABLET IMPROVEMENTS (leave desktop unchanged)
   ================================================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet-specific improvements */
    .stats-section {
        padding: 60px 0; /* Between mobile and desktop */
    }
    
    .stats-section .container {
        padding: 0 32px; /* Reasonable tablet padding */
        gap: 48px; /* Between mobile and desktop */
    }
    
    .stats-intro-text {
        font-size: 28px; /* Between mobile and desktop */
        line-height: 36px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
        gap: 24px;
    }
    
    .stat-card {
        padding: 24px 20px; /* Optimized tablet padding */
        min-height: 180px; /* Between mobile and desktop */
    }
    
    .stat-number {
        font-size: 42px; /* Between mobile and desktop */
        line-height: 50px;
    }
    
    .stat-label {
        font-size: 18px; /* Better tablet readability */
        line-height: 22px;
    }
}