/* Stats Section Optimization */

/* Mobile optimization for stats items */
@media (max-width: 576px) {
    /* Rearrange stats items */
    .stats-section .stats-numbers {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* First row: Deti 3-4 and Deti 5-6 in one row */
    .stats-section .stats-numbers .stats-item:nth-child(1),
    .stats-section .stats-numbers .stats-item:nth-child(2) {
        width: 50%;
        text-align: center;
        padding: 0 5px;
        box-sizing: border-box;
    }
    
    /* Make sure the first row items are aligned */
    .stats-section .stats-numbers .stats-item:nth-child(1) .stats-title,
    .stats-section .stats-numbers .stats-item:nth-child(2) .stats-title,
    .stats-section .stats-numbers .stats-item:nth-child(1) .stats-description,
    .stats-section .stats-numbers .stats-item:nth-child(2) .stats-description {
        text-align: center;
    }
    
    /* Second row: 2800 Materských škôl */
    .stats-section .stats-numbers .stats-item:nth-child(3) {
        width: 100%;
        margin-top: 30px;
        text-align: center;
        clear: both;
    }
    
    /* Keep the font size the same as tablet for the third stats item */
    .stats-section .stats-numbers .stats-item:nth-child(3) .stats-title {
        font-size: 2rem; /* Same as tablet size */
        text-align: left; /* Align left like the other items */
    }
    
    .stats-section .stats-numbers .stats-item:nth-child(3) .stats-title span {
        font-size: 2rem; /* Same as tablet size */
        display: inline; /* Keep inline like the other items */
        text-align: left;
    }
    
    .stats-section .stats-numbers .stats-item:nth-child(3) .stats-description {
        font-size: 1rem; /* Same as tablet size */
        text-align: center; /* Only center the description text */
        display: block;
        width: 100%;
    }
    
    /* Split the heading into two lines */
    .stats-section .stats-heading {
        text-align: center;
        line-height: 1.3;
        hyphens: auto;
        word-wrap: break-word;
        margin-bottom: 15px;
    }
    
    /* Control line break visibility */
    .mobile-break {
        display: inline; /* Show on mobile */
    }
    
    /* Hide the line break on larger screens */
    @media (min-width: 577px) {
        .mobile-break {
            display: none;
        }
    }
    
    /* Keep the colored accent span (the dot) with the heading text */
    .stats-section .stats-heading span {
        display: inline; /* Keep inline with the text */
        text-align: left;
    }
    
    /* Add a centered dividing line after the heading */
    .stats-section .stats-heading::after {
        content: "";
        display: block;
        width: 80px; /* Increased width for better visibility */
        height: 4px; /* Increased height for better visibility */
        background-color: #cce242; /* Same color as the accent span */
        margin: 20px auto; /* Increased margin and ensure it's centered */
        position: relative; /* Add position relative */
        left: 0; /* Ensure it's centered */
        right: 0; /* Ensure it's centered */
    }
    
    /* Center the description text */
    .stats-section .stats-description-large {
        text-align: center;
        margin: 0 auto;
        max-width: 90%;
    }
    
    /* Reorganize partner logos into three rows */
    .stats-section .partner-logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto auto;
        gap: 25px;
        justify-items: center;
        align-items: center;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    
    /* Position the logos in the grid */
    /* First row: 2 logos */
    .stats-section .partner-logos img:nth-child(1) { grid-column: 1; grid-row: 1; }
    .stats-section .partner-logos img:nth-child(2) { grid-column: 2; grid-row: 1; }
    
    /* Second row: 2 logos */
    .stats-section .partner-logos img:nth-child(3) { grid-column: 1; grid-row: 2; }
    .stats-section .partner-logos img:nth-child(4) { grid-column: 2; grid-row: 2; }
    
    /* Third row: 1 logo centered */
    .stats-section .partner-logos img:nth-child(5) {
        grid-column: 1 / span 2;
        grid-row: 3;
        justify-self: center;
    }
    
    /* Make the logos twice as large */
    .stats-section .partner-logo {
        height: 80px; /* Double the current mobile height (40px) */
        max-width: none; /* Override max-width constraints */
        width: auto;
    }
}