/* =========================================================
   IMPACT SECTION
   CodNesta Impact in Numbers
   ========================================================= */


/*--------------------------------------------------
Section Container
--------------------------------------------------*/

.impact-section {
    position: relative;
    overflow: hidden;

    background: var(--color-white);
}


/*--------------------------------------------------
Background Decoration
--------------------------------------------------*/

.impact-section::before {
    content: "";

    position: absolute;
    top: -160px;
    left: -160px;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background: rgba(10, 56, 87, 0.05);

    filter: blur(45px);

    pointer-events: none;
}


/*--------------------------------------------------
Section Header
--------------------------------------------------*/

.impact-section__header {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.7fr);

    align-items: end;
    gap: clamp(2rem, 7vw, 6rem);

    margin-bottom: var(--space-7);
}

.impact-section__header .section__title {
    max-width: 760px;
}

.impact-section__header .section__text {
    margin: 0;
}


/*--------------------------------------------------
Main Layout
--------------------------------------------------*/

.impact-section__content {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: stretch;
    gap: clamp(2rem, 5vw, 5rem);
}


/*--------------------------------------------------
Feature Card
--------------------------------------------------*/

.impact-feature {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 520px;

    padding: clamp(2rem, 4vw, 3.5rem);

    border-radius: var(--radius-xl);

    background: var(--color-navy);

    box-shadow:
        0 22px 60px rgba(10, 56, 87, 0.16);
}

.impact-feature__number {
    color: var(--color-gold);

    font-size: clamp(4.5rem, 10vw, 8rem);

    font-weight: var(--font-weight-bold);

    line-height: .9;

    letter-spacing: -.065em;
}

.impact-feature__body {
    max-width: 500px;
}

.impact-feature__label {
    display: block;

    margin-bottom: var(--space-4);

    color: var(--color-white);

    font-size: clamp(1.5rem, 3vw, 2.2rem);

    font-weight: var(--font-weight-semibold);

    line-height: 1.2;
}

.impact-feature p {
    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: var(--font-size-md);

    line-height: 1.75;
}


/*--------------------------------------------------
Statistics Grid
--------------------------------------------------*/

.impact-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: var(--space-4);
}

.impact-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 250px;

    padding: clamp(1.5rem,3vw,2rem);

    border-radius: var(--radius-lg);

    background: var(--color-background-soft);

    transition:
        transform 360ms cubic-bezier(.22,1,.36,1),
        box-shadow 360ms cubic-bezier(.22,1,.36,1),
        background-color 360ms ease;
}

.impact-stat__number {
    display: block;

    margin-bottom: var(--space-7);

    color: var(--color-navy);

    font-size: clamp(2.8rem,5vw,4.2rem);

    font-weight: var(--font-weight-bold);

    line-height: 1;

    letter-spacing: -.05em;
}

.impact-stat h3 {
    margin-bottom: var(--space-3);

    color: var(--color-navy);

    font-size: var(--font-size-lg);
}

.impact-stat p {
    margin: 0;

    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);

    line-height: 1.65;
}


/*--------------------------------------------------
Interactive States
--------------------------------------------------*/

.impact-stat:hover {
    transform: translateY(-6px);

    background: var(--color-white);

    box-shadow:
        0 18px 45px rgba(10,56,87,.1);
}


/*--------------------------------------------------
Tablet
--------------------------------------------------*/

@media (max-width:950px){

    .impact-section__header,
    .impact-section__content{

        grid-template-columns:1fr;

    }

    .impact-feature{

        min-height:440px;

    }

}


/*--------------------------------------------------
Mobile
--------------------------------------------------*/

@media (max-width:650px){

    .impact-stats{

        grid-template-columns:1fr;

    }

    .impact-feature{

        min-height:390px;

        padding:var(--space-5);

    }

    .impact-stat{

        min-height:220px;

    }

}


/*--------------------------------------------------
Reduced Motion
--------------------------------------------------*/

@media (prefers-reduced-motion:reduce){

    .impact-stat{

        transition:none;

    }

    .impact-stat:hover{

        transform:none;

    }

}