/* Start:/local/templates/ipotekatmpl/components/ipotekabank/html.content/esg-hero/style.css?17866212021774*/
/* ============================================================
   Первый экран ESG-страницы «Строим будущее с нулевыми выбросами»
   ============================================================ */

.esg-hero-section.esg-section {
    padding: 2rem 0;
}

.esg-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.esg-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
}

.esg-hero__title {
    margin: 0;
    font-family: var(--esg-font-head);
    font-size: 2.1875rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.0125rem;
    color: var(--esg-ink-strong);
}

.esg-hero__text {
    margin: 0;
    font-family: var(--esg-font-head);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--esg-ink);
}

.esg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.esg-hero__art {
    width: 100%;
    border-radius: 2rem;
    overflow: hidden;
}

.esg-hero__img {
    display: block;
    width: 100%;
    aspect-ratio: 343 / 257;
    object-fit: cover;
}

@media (min-width: 768px) {
    .esg-hero-section.esg-section {
        padding: 4rem 0 3.75rem;
    }

    .esg-hero {
        gap: 2rem;
    }

    .esg-hero__content {
        gap: 1rem;
        max-width: 52.75rem;
    }

    .esg-hero__title {
        font-size: clamp(2.75rem, 4.86vw, 4.375rem);
        line-height: 1;
        color: var(--esg-ink);
    }

    .esg-hero__text {
        font-size: 1.25rem;
    }

    .esg-hero__art {
        border-radius: 3.75rem;
    }

    .esg-hero__img {
        aspect-ratio: 1360 / 638;
    }
}
/* End */


/* Start:/local/templates/ipotekatmpl/components/ipotekabank/html.content/esg-path/style.css?17866212881895*/
/* ============================================================
   Секция «Путь к нулевому углеродному следу»
   Текст слева, изображение-стадион справа
   ============================================================ */

.esg-path-section.esg-section {
    padding: 2rem 0 4rem;
}

.esg-path {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.esg-path__body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

.esg-path__title {
    margin: 0;
    font-family: var(--esg-font-head);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.0125rem;
    color: var(--esg-ink);
}

.esg-path__text {
    margin: 0;
    font-family: var(--esg-font-head);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--esg-ink);
}

.esg-path__art {
    min-width: 0;
    border-radius: 2rem;
    overflow: hidden;
}

.esg-path__img {
    display: block;
    width: 100%;
    aspect-ratio: 343 / 248;
    object-fit: cover;
}

@media (min-width: 768px) {
    .esg-path-section.esg-section {
        padding: clamp(2rem, 4.17vw, 3.75rem) 0 clamp(4rem, 8.33vw, 7.5rem);
    }

    .esg-path__body {
        gap: 1rem;
    }

    .esg-path__title {
        font-size: clamp(2.5rem, 4.86vw, 4.375rem);
    }

    .esg-path__text {
        font-size: 1.25rem;
    }
}

/* Две колонки — только когда для них реально хватает ширины */
@media (min-width: 992px) {
    .esg-path {
        flex-direction: row;
        align-items: center;
        gap: 4rem;
    }

    .esg-path__body {
        flex: 1 1 55%;
    }

    .esg-path__art {
        flex: 0 1 40%;
        max-width: 34.1875rem;
        border-radius: 999px;
    }

    .esg-path__img {
        aspect-ratio: 547 / 400;
    }
}
/* End */


/* Start:/local/templates/ipotekatmpl/components/ipotekabank/html.content/esg-goals/style.css?17866212532747*/
/* ============================================================
   Секция «Поддерживаем климатические цели Узбекистана»
   Тёмный фон, карточки-стадионы с обводкой.
   До 992px — горизонтальная лента с прокруткой.
   ============================================================ */

.esg-goals-section {
    background: var(--esg-dark);
}

.esg-goals {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.esg-goals .esg-head--invert .esg-head__title {
    color: var(--esg-surface);
}

.esg-goals .esg-head--invert .esg-head__text {
    color: #fff;
}

/* ---------- Лента карточек ---------- */

.esg-goals__row {
    display: flex;
    gap: .75rem;
    margin: 0 -1rem;
    padding: 0 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.esg-goals__row::-webkit-scrollbar {
    display: none;
}

.esg-goals__card {
    display: flex;
    flex: 0 0 18.75rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2.5rem 1.875rem;
    border: 1px solid var(--esg-dark-border);
    border-radius: 999px;
    scroll-snap-align: center;
}

.esg-goals__icon {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
}

.esg-goals__card-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    text-align: center;
}

.esg-goals__card-title {
    margin: 0;
    font-family: var(--esg-font-head);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
}

.esg-goals__card-text {
    margin: 0;
    font-family: var(--esg-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.37;
    color: #fff;
}

.esg-goals__card-text b,
.esg-goals__card-text strong {
    font-weight: 700;
    color: var(--esg-green);
}

@media (min-width: 768px) {
    .esg-goals {
        gap: clamp(2rem, 4.17vw, 3.75rem);
    }

    .esg-goals__row {
        margin: 0 -2.5rem;
        padding: 0 2.5rem;
    }
}

/* Три колонки — только когда карточки не становятся уже макетных */
@media (min-width: 992px) {
    .esg-goals__row {
        gap: 1rem;
        margin: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    .esg-goals__card {
        flex: 1 1 0;
        min-width: 0;
        padding: 1.5rem clamp(1.25rem, 2.22vw, 2rem);
    }

    .esg-goals__card-title {
        font-size: 1.5rem;
        line-height: 1.17;
    }

    .esg-goals__card-text {
        line-height: 1.5;
    }
}

/* End */


/* Start:/local/templates/ipotekatmpl/components/ipotekabank/html.content/esg-results/style.css?17866214573718*/
/* ============================================================
   Секция «Наши результаты за 2025 год»
   Карточки-стадионы на светлом фоне.
   До 992px — круглые карточки в горизонтальной ленте.
   ============================================================ */

.esg-results-section {
    background: #fff;
}

.esg-results {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ---------- Лента карточек ---------- */

.esg-results__row {
    display: flex;
    gap: 1rem;
    margin: 0 -1rem;
    padding: 0 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.esg-results__row::-webkit-scrollbar {
    display: none;
}

.esg-results__card {
    display: flex;
    flex: 0 0 18.75rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 18.75rem;
    padding: 2rem 2.5rem;
    border-radius: 999px;
    background: var(--esg-surface);
    text-align: center;
    scroll-snap-align: center;
}

.esg-results__metric {
    margin: 0;
    font-family: var(--esg-font-head);
    font-weight: 600;
    color: var(--esg-green-text);
}

.esg-results__value {
    display: block;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.025rem;
}

.esg-results__unit {
    display: block;
    font-family: var(--esg-font-body);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.28;
}

.esg-results__card-body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
}

.esg-results__card-title {
    margin: 0;
    font-family: var(--esg-font-head);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--esg-ink);
}

.esg-results__card-text {
    margin: 0;
    font-family: var(--esg-font-body);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.28;
    color: var(--esg-text-2);
}

@media (min-width: 768px) {
    .esg-results {
        gap: clamp(2rem, 4.17vw, 3.75rem);
    }

    .esg-results__row {
        margin: 0 -2.5rem;
        padding: 0 2.5rem;
    }
}

/* Три колонки — только когда карточки не становятся уже макетных */
@media (min-width: 992px) {

    /* В макете шапка этой секции уже, чем у остальных */
    .esg-results .esg-head__title,
    .esg-results .esg-head__text {
        max-width: 37.5rem;
    }

    .esg-results__row {
        margin: 0;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    .esg-results__card {
        flex: 1 1 0;
        min-width: 0;
        gap: .75rem;
        min-height: 17.625rem;
        padding: 2rem clamp(1.5rem, 2.78vw, 2.5rem);
    }

    /* Градиентная заливка цифры — на широком макете */
    .esg-results__metric {
        background: linear-gradient(180deg, var(--esg-green-dark) 0%, var(--esg-green) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .esg-results__value {
        font-size: 3.125rem;
        line-height: 1.2;
        letter-spacing: 0;
    }

    .esg-results__unit {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.333;
    }

    .esg-results__card-body {
        gap: .5rem;
    }

    .esg-results__card-title {
        font-size: 1.5rem;
        line-height: 1.17;
    }

    .esg-results__card-text {
        font-size: 1rem;
        line-height: 1.5;
    }
}
/* End */
/* /local/templates/ipotekatmpl/components/ipotekabank/html.content/esg-hero/style.css?17866212021774 */
/* /local/templates/ipotekatmpl/components/ipotekabank/html.content/esg-path/style.css?17866212881895 */
/* /local/templates/ipotekatmpl/components/ipotekabank/html.content/esg-goals/style.css?17866212532747 */
/* /local/templates/ipotekatmpl/components/ipotekabank/html.content/esg-results/style.css?17866214573718 */