/**
 * Edufin - Numbers Section Component Styles
 * Key statistics section with gradient background
 * Matches Figma design node 1016:13570
 */

/* =================================
   NUMBERS SECTION
   ================================= */

.numbers {
    padding: 0 var(--space-30);
}

.numbers-card {
    position: relative;
    background: linear-gradient(241.6deg, #114E3C 11.92%, #19664F 54.52%, #124E3C 97.97%);
    border-radius: var(--space-5);
    padding: 3.875rem 4.9375rem;
    overflow: hidden;
    max-width: var(--container-width);
    margin: 0 auto;
    min-height: 26rem;
}

/* Decorative vector */
.numbers-vector {
    position: absolute;
    right: -5.5rem;
    bottom: -6.25rem;
    width: 21.6875rem;
    height: 21.8125rem;
    pointer-events: none;
}

.numbers-vector img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content container */
.numbers-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-width: 49.9375rem;
}

/* Heading section */
.numbers-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.numbers-title {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    line-height: 2.625rem;
    color: var(--color-primary-green-light);
    text-transform: capitalize;
    margin: 0;
}

/* Desktop: smaller title to fit on one line */
@media (min-width: 64rem) {
    .numbers-title {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

.numbers-description {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-regular);
    line-height: 2.25rem;
    color: var(--color-base-white);
    margin: 0;
}

/* Divider line */
.numbers-divider {
    width: 100%;
    height: 0.0625rem;
    background: rgba(255, 255, 255, 0.2);
}

/* Stats grid */
.numbers-stats {
    display: flex;
    gap: 4.5rem;
}

.numbers-stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.numbers-stat-number {
    font-family: var(--font-primary);
    font-size: var(--text-4xl);
    font-weight: var(--font-semibold);
    line-height: 4rem;
    letter-spacing: -0.125rem;
    color: var(--color-primary-green-light);
    text-transform: capitalize;
}

.numbers-stat-label {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: 1.625rem;
    color: var(--color-base-white);
}

/* =================================
   RESPONSIVE - TABLET
   ================================= */

@media (max-width: 64rem) {
    .numbers {
        padding: 0 1.875rem;
    }
    
    .numbers-card {
        padding: var(--space-12) 1.875rem;
        min-height: auto;
    }
    
    .numbers-vector {
        display: none;
    }
    
    .numbers-content {
        max-width: 100%;
    }
    
    .numbers-title {
        text-align: center;
    }
    
    .numbers-description {
        text-align: center;
    }
    
    .numbers-stats {
        justify-content: space-around;
        gap: var(--space-8);
    }
    
    .numbers-stat-item {
        text-align: center;
        align-items: center;
    }
    
    .numbers-stat-number {
        font-size: var(--space-12);
        line-height: 3.5rem;
    }
}

/* =================================
   RESPONSIVE - MOBILE
   ================================= */

@media (max-width: 48rem) {
    .numbers {
        padding: 0 var(--space-4);
    }
    
    .numbers-card {
        padding: var(--space-8) var(--space-4);
        border-radius: var(--space-4);
    }
    
    .numbers-heading {
        gap: var(--space-3);
    }
    
    .numbers-title {
        font-size: var(--text-2xl);
        line-height: 2.125rem;
        letter-spacing: -0.03125rem;
    }
    
    .numbers-description {
        font-size: var(--text-sm);
        line-height: 1.625rem;
    }
    
    .numbers-stats {
        flex-direction: column;
        align-items: center;
        gap: var(--space-6);
    }
    
    .numbers-stat-item {
        width: 100%;
    }
    
    .numbers-stat-number {
        font-size: var(--space-10);
        line-height: var(--space-12);
        letter-spacing: -0.09375rem;
    }
    
    .numbers-stat-label {
        font-size: var(--text-sm);
        line-height: 1.375rem;
    }
}