.stats {
    position: relative;
    width: 100%;
    min-height: clamp(20rem, 30.625vw, 30.625rem);
    height: clamp(20rem, 30.625vw, 30.625rem);
    background-image: url('../../assets/images/project-1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 4vw, 4rem) 0;
}

.stats-container {
    position: relative;
    max-width: min(1425px, 95%);
    padding: 0 clamp(1.25rem, 2.5vw, 2.5rem);
    width: 100%;
}

.stats-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2rem, 3.438vw, 3.438rem);
    font-weight: 500;
    line-height: 1.223;
    color: var(--color-white);
    margin-bottom: clamp(2rem, 4vw, 4rem);
    padding-left: 0;
}

.stats-title-bold {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
}

.stats-title-light {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500;
}

.stats-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(1rem, 2vw, 2rem) !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

.stats-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: clamp(0.75rem, 1.25vw, 1.25rem) !important;
    flex: 0 1 auto !important;
    justify-content: center !important;
    min-width: min(100%, 200px) !important;
    order: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

.stats-separator-wrapper {
    margin: 0 !important;
    display: flex !important;
    flex: 0 0 auto !important;
}

/* Мобильные стили для лучшего выравнивания */
body.mobile-only .stats-grid,
html.mobile-only .stats-grid,
body.mobile-only .stats-container .stats-grid,
html.mobile-only .stats-container .stats-grid {
    display: grid !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem) !important;
    align-items: start !important;
    justify-items: stretch !important;
    width: 100% !important;
    align-content: start !important;
}

/* На мобильных элементы должны быть в сетке 2x2 */
body.mobile-only .stats-item,
html.mobile-only .stats-item {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: clamp(0.5rem, 1vw, 1rem) !important;
    display: flex !important;
    flex-direction: row !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

/* Выравниваем цифры по одной линии на мобильных */
body.mobile-only .stats-number,
html.mobile-only .stats-number,
body.mobile-only .stats-infinity,
html.mobile-only .stats-infinity,
body.mobile-only .stats-item .stats-number,
html.mobile-only .stats-item .stats-number,
body.mobile-only .stats-item .stats-infinity,
html.mobile-only .stats-item .stats-infinity {
    min-height: clamp(3rem, 5vw, 5rem) !important;
    height: clamp(3rem, 5vw, 5rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

body.mobile-only .stats-item:last-child,
html.mobile-only .stats-item:last-child {
    margin-bottom: 0 !important;
}

.stats-number {
    font-size: clamp(2rem, 4.375vw, 4.375rem);
    font-weight: 500;
    line-height: 1.223;
    color: var(--color-beige);
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.stats-infinity {
    font-size: clamp(2rem, 4.375vw, 4.375rem);
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
}

.stats-separator-wrapper {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: clamp(1px, 0.5vw, 1px);
    width: clamp(1px, 0.5vw, 1px);
    height: 100%;
}

/* Скрываем разделители только на мобильных */
body.mobile-only .stats-separator-wrapper,
html.mobile-only .stats-separator-wrapper {
    display: none !important;
}

.stats-separator {
    width: 1px;
    height: clamp(5rem, 8.125vw, 8.125rem);
    background-color: var(--color-white);
    flex-shrink: 0;
}

.stats-description {
    font-size: clamp(0.875rem, 1vw, 1rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-white);
    margin: 0;
    flex-shrink: 1;
    white-space: normal;
    min-width: 0;
}

/* На мобильных выравниваем описание по верхнему краю цифры */
body.mobile-only .stats-description,
html.mobile-only .stats-description {
    align-self: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
}

/* На мобильных устанавливаем одинаковую ширину для цифр и разделителей */
body.mobile-only .stats-number,
html.mobile-only .stats-number,
body.mobile-only .stats-infinity,
html.mobile-only .stats-infinity {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: clamp(3rem, 5vw, 5rem) !important;
}

.stats-note {
    margin-top: clamp(1.25rem, 1.875vw, 1.875rem);
    font-size: clamp(0.625rem, 0.75vw, 0.75rem);
    font-weight: 400;
    color: var(--color-white);
}