/* =========================================
   1. Base Styles (Global Defaults)
   ========================================= */

/* Header (Year Number & Description) */
.year-stats-header {
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
}
.year-stats-label {
    font-size: 36px;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}
.year-stats-desc {
    font-size: 18px;
    margin: 5px 0 0;
    color: #ffffff;
    opacity: 0.9;
}

/* Container Default (Home Page / PC) - Flex row */
.year-stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

/* Item styling */
.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Icons: Default White & Size */
.stat-icon img, 
.stat-icon svg {
    height: 48px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

/* Text: Default White & Size */
.stat-details {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}
.year-stats-container--home .stat-details {
    max-width: 145px;
}
.stat-number {
    font-size: 28px;
    font-weight: 500;
    color: #ffffff;
}
.stat-title {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
}

/* =========================================
   2. "Our Impact" Page Layout (PC Only)
   Logic: 
   - Row 1: 3 Items
   - Row 2: 2 Items (Large Gap)
   - Row 3: 2 Items (Medium Gap)
   - Row 4+: 2 Items (Small Gap)
   - Last item centered automatically via Flexbox
   ========================================= */
@media (min-width: 769px) {
    .year-stats-container--our-impact {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* We disable the global gap to control it manually per row */
        gap: 0; 
    }

    /* Common vertical spacing for all items on this page */
    .year-stats-container--our-impact .stat-item {
        margin-bottom: 70px; 
    }

    /* -------------------------------
       ROW 1: Items 1, 2, 3
       Action: 3 per row, standard spacing
       ------------------------------- */
    .year-stats-container--our-impact .stat-item:nth-child(-n+3) {
        /* Width ~33% minus margins ensures 3 fit */
        width: 30%; 
        margin-left: 1.66%;
        margin-right: 1.66%;
    }

    /* -------------------------------
       ROW 2: Items 4, 5
       Action: 2 per row, WIDEST spacing
       ------------------------------- */
    .year-stats-container--our-impact .stat-item:nth-child(n+4):nth-child(-n+5) {
        width: 30%; /* Narrow width keeps them apart */
        margin-left: 10%; /* Huge margin pushes them apart */
        margin-right: 10%;
    }

    /* -------------------------------
       ROW 3: Items 6, 7
       Action: 2 per row, MEDIUM spacing
       ------------------------------- */
    .year-stats-container--our-impact .stat-item:nth-child(n+6):nth-child(-n+7) {
        width: 35%; /* Slightly wider item = closer together */
        margin-left: 5%; /* Medium margin */
        margin-right: 5%;
    }

    /* -------------------------------
       ROW 4+: Items 8, 9, etc...
       Action: 2 per row, SMALLEST spacing
       ------------------------------- */
    .year-stats-container--our-impact .stat-item:nth-child(n+8) {
        width: 45%; /* Wide item = very close together */
        margin-left: 1.5%; /* Tiny margin */
        margin-right: 1.5%;
    }
}

/* Our Impact - Visual Styling (Vertical Stack) */
.year-stats-container--our-impact .stat-item {
    flex-direction: column;
}

.year-stats-container--our-impact .stat-details {
    align-items: center;
}
.year-stats-container--our-impact .stat-title {
    text-align: center;
}

/* =========================================
   3. Mobile Layout (Applies to ALL pages)
   Logic: Always 2 per row
   ========================================= */
@media (max-width: 768px) {
	.stat-item{
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
    /* Target all container types */
    .year-stats-container,
    .year-stats-container--home,
    .year-stats-container--our-impact {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 columns equal width */
        gap: 30px;
        justify-content: center;
    }

    /* If odd number of items, center the last one */
    .year-stats-container > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
    }

    /* Smaller icons for mobile */
    .stat-icon img {
        width: 40px;
        height: auto;
    }
}