/**
 * Component: Results and Outcomes Section
 * Styling for key results data with counters, pie charts, and progress bars
 * Compatible with section-based animation system
 */

/* ===== MAIN LAYOUT GRID ===== */

.key-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em 2.5em;
    margin-bottom: 2em;
}

.key-result-item {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
}

.key-results-grid p {
    padding-bottom: 1em;
}

/* ===== HEADERS AND CONTENT ===== */

.key-result-header {
    padding-bottom: 0;
    margin-bottom: 0;
}

.key-result-summary {
}

.key-result-summary p {
    margin-bottom: 1em;
}

.key-result-summary p:last-child {
    margin-bottom: 0;
}

/* ===== MIXED GRID (COUNTERS + PIE CHARTS) ===== */

.key-result-mixed-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em 2em;
    width: 100%;
    margin-bottom: 1.5em;
}

/* ===== COUNTER COMPONENTS ===== */

.key-result-counter {
    text-align: left;
    /* font-family now inherited from design system classes */
    /* color now inherited from design system classes */
}



/* ===== PIE CHART COMPONENTS ===== */

.key-result-chart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}





/* ===== PROGRESS BAR SECTION ===== */

.key-result-progress-section {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-top: 0.5em;
}



/* ===== RESPONSIVE DESIGN ===== */

/* Mobile devices */
@media (max-width: 767px) {
    .key-results-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }
    
    .key-result-item {
        width: 100%;
        max-width: 88%;
        margin: 0 auto;
    }
    
    .key-result-mixed-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }
    
    .key-result-counter .counter-display {
        /* font-size now inherited from design system classes */
    }
    
    .key-result-chart .pie-chart-svg {
        width: 50%;
    }
    
    .key-result-progress-section .progress-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8em;
    }
    
    .key-result-progress-section .progress-value {
        font-size: 1.6rem;
        min-width: auto;
    }
}

/* Tablet devices */
@media (min-width: 768px) and (max-width: 1141px) {
    .key-results-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }
    
    .key-result-item {
        max-width: 80%;
    }
    
    .key-result-mixed-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8em;
    }
}

/* Large desktop adjustments */
@media (min-width: 1400px) {
    .key-results-grid {
        gap: 1em 3em;
    }
    
    .key-result-mixed-grid {
        gap: 2.5em 2.5em;
    }
}