/* Mobile Optimization for "Interaktívne neformálne vzdelávanie pre najmenších" Section */

/* General mobile optimizations */
@media (max-width: 576px) {
    /* Improve spacing for the stats section on mobile */
    .stats-section {
        padding: 40px 15px 60px; /* Reduced padding on all sides */
    }
    
    /* Optimize the stats row that contains our target heading */
    .stats-section .stats-row {
        flex-direction: column; /* Stack columns vertically */
        gap: 20px; /* Add space between stacked elements */
        margin-bottom: 30px; /* Reduce bottom margin */
    }
    
    /* Make columns full width and properly spaced */
    .stats-section .stats-row .col-6 {
        width: 100%;
        padding: 0 5px; /* Reduce side padding */
    }
    
    /* Optimize the main heading */
    .stats-section .stats-heading {
        font-size: 1.6rem; /* Smaller font size for better fit */
        line-height: 1.3; /* Improved line height for readability */
        margin-bottom: 10px; /* Add space below heading */
        text-align: center; /* Center the heading on mobile */
        word-wrap: break-word; /* Ensure long words don't overflow */
        hyphens: auto; /* Enable hyphenation for better text flow */
    }
    
    /* Style the accent span in the heading */
    .stats-section .stats-heading span {
        font-size: 1.6rem; /* Match the heading size */
    }
    
    /* Optimize the description text */
    .stats-section .stats-description-large {
        font-size: 0.9rem; /* Slightly smaller text */
        line-height: 1.6; /* Improved line height for readability */
        text-align: center; /* Center the text on mobile */
        margin: 0 auto; /* Center the block */
    }
    
    /* Optimize partner logos section */
    .stats-section .partner-logos {
        flex-wrap: wrap; /* Allow logos to wrap */
        justify-content: center; /* Center the logos */
        gap: 15px; /* Space between logos */
        margin-top: 20px; /* Add space above logos */
    }
    
    /* Adjust individual partner logos */
    .stats-section .partner-logo {
        max-width: 80px; /* Limit logo size */
        height: auto; /* Maintain aspect ratio */
    }
}

/* Extra small devices (phones less than 375px) */
@media (max-width: 374px) {
    /* Further reduce font sizes for very small screens */
    .stats-section .stats-heading,
    .stats-section .stats-heading span {
        font-size: 1.4rem; /* Even smaller font size */
    }
    
    .stats-section .stats-description-large {
        font-size: 0.85rem; /* Slightly smaller text */
    }
    
    /* Adjust partner logos for very small screens */
    .stats-section .partner-logo {
        max-width: 70px; /* Smaller logos */
    }
}