/* Блок «clients» — стили не зависят от страницы. Правила перенесены из css/styles.css без изменений. */

/*
 * Макет Figma 297:8202. Шапка секции по центру, ниже полоса карты 293px
 * с пятью пинами на абсолютных позициях. Подсказка показывается только
 * у активного пина — поведение обеспечивает initClientsHover.
 */
.clients {
    position: relative;
    z-index: 2;
}

.clients__wrapper {
    gap: 64px;
}

.clients__top {
    display: flex;
    justify-content: center;
    width: 100%;
}

/*
 * В макете 2380:23130 бейдж секции стоит по центру, а не слева. Общий
 * `.section__badge` задаёт `align-self: flex-start`, поэтому переопределяем
 * внутри секции — на /solutions/ и /pricing-matrix/ бейдж остаётся слева.
 */
.clients__top-info .section__badge {
    align-self: center;
}

.clients__top-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
}

.clients__top-info .section__content {
    gap: 24px;
    align-items: center;
    text-align: center;
    width: 100%;
}

/* Специфичность выше, чем у общего `body.home .section__title-block` (gap 16). */
body.home .clients__top-info .section__title-block {
    gap: 12px;
    max-width: none;
    width: 100%;
}

/*
 * В макете описание разбито на две строки. Вместо принудительного <br>
 * ограничиваем ширину — перенос получается тот же, а на узких экранах
 * текст продолжает течь нормально.
 */
.clients__top-info .section__description {
    max-width: 760px;
    color: var(--nv-object-1);
    font-size: var(--Text-Body-Text-Size-Medium, 18px);
    font-weight: 400;
    line-height: 155.556%;
}

/*
 * Полоса карты, 293px по всем трём макетам (FullHD 2380:23177,
 * Desktop 297:8268, Tablet 2376:17005). Карта и затухание выходят за полосу,
 * поэтому полоса обрезает.
 */
.clients__content {
    position: relative;
    height: 293px;
    width: 100%;
}

/*
 * Карта мира. Собрана из тех же 406 векторов, что и в Figma (фрейм Map),
 * и отрисована в растр с прозрачностью; цвета оригинальные #F2F2F2/#F8F8F8.
 * В макете карта выше полосы — файл обрезан по верхним 340px из 679
 * (50.07% высоты), этого хватает всем трём макетам. Поэтому высота слоя
 * здесь — высота карты из Figma, умноженная на 0.5007.
 *
 * FullHD (2380:23178): x 100.3 / 1856 = 5.4042%, ширина 1655.4 / 1856 = 89.1918%,
 * высота 605.386 x 0.5007 = 303.12px.
 */
.clients__map {
    position: absolute;
    top: 0.6265px;
    left: 5.4042%;
    width: 89.1918%;
    height: 303.12px;
    object-fit: fill;
    /*
     * Обрезаем карту по нижнему краю полосы. Полосе `overflow: hidden` давать
     * нельзя: подсказки пинов по макету выходят выше полосы и были бы срезаны.
     * Видимая высота = 293 - 0.6265 отступа сверху.
     */
    clip-path: inset(0 0 calc(100% - 292.3735px) 0);
    pointer-events: none;
    user-select: none;
}

/*
 * Затухание карты к низу полосы. В макете это растровый прямоугольник
 * Rectangle 3922 (y 208.28, высота 149) с градиентом от прозрачного
 * к #F8F8F8 — воспроизводим средствами CSS, отдельный файл не нужен.
 */
.clients__content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 208px;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(248, 248, 248, 0) 0, var(--nv-surface-1) 149px);
    pointer-events: none;
    z-index: 3;
}

/*
 * Пины. В макете это блок шириной 1376 — на FullHD он не растягивается,
 * а центрируется (x каждого пина ровно +240 = (1856 - 1376) / 2,
 * y совпадают). Поэтому список ограничен 1376 и центрируется, а проценты
 * внутри считаются от 1376.
 */
.clients__list {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1376px;
}

/*
 * Пин: подложка-капля 68x83 из макета, внутри бокс 60x60 со смещением 4.
 * Подложка одна для обоих состояний, меняется только бокс и цвет иконки.
 */
.clients__item {
    position: absolute;
    width: 68px;
    height: 83px;
    padding: 4px 4px 0;
    background-image: url('../../img/clients__pin.svg');
    background-repeat: no-repeat;
    background-position: center top;
    cursor: pointer;
    z-index: 4;
}

.clients__item-icon {
    display: flex;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--nv-surface-2);
    color: var(--nv-object-3);
    transition: background-color .2s ease, color .2s ease;
}

.clients__item-icon svg {
    display: block;
    width: 40px;
    height: 40px;
}

/* Подсказка: 76px над нижним краем пина, по центру. */
.clients__item-info {
    position: absolute;
    bottom: 95px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 160px;
    padding: 12px 8px;
    border-radius: 16px;
    border: 1px solid var(--nv-surface-4);
    background: var(--nv-surface-1);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.clients__item-title {
    color: var(--nv-object-1);
    font-size: var(--Text-Title-Size-H5, 20px);
    font-weight: 700;
    line-height: 140%;
}

.clients__item-description {
    color: var(--nv-object-2);
    font-size: var(--Text-Body-Text-Size-Small, 14px);
    font-weight: 500;
    line-height: 142.857%;
}

.clients__item--active,
.clients__item:focus-visible {
    z-index: 5;
}

.clients__item--active .clients__item-info,
.clients__item:focus-visible .clients__item-info {
    opacity: 1;
    visibility: visible;
}

.clients__item--active .clients__item-icon,
.clients__item:focus-visible .clients__item-icon {
    background: linear-gradient(135deg, var(--nv-primary) 15%, var(--nv-primary-2) 100%);
    color: var(--nv-constant-1);
}

.clients__item:focus-visible {
    outline: 2px solid var(--nv-object-1);
    outline-offset: 2px;
}

/*
 * Позиции пинов по Desktop-фрейму 297:8268 (блок 1376x293).
 * В макете координата — это бокс иконки 60x60; наш элемент — капля 68x83
 * с отступом 4, поэтому left/top = координата из Figma минус 4.
 */
.clients__item--bank {
    left: 11.5552%;
    top: 45.0512%;
}

.clients__item--crypto {
    left: 27.2529%;
    top: 9.8976%;
}

.clients__item--goverment {
    left: 47.8198%;
    top: 29.3515%;
}

.clients__item--insurance {
    left: 67.4419%;
    top: 28.6689%;
}

.clients__item--gambling {
    left: 82.4128%;
    top: 20.1365%;
}

/*
 * Правила ниже исторически лежали в этой секции, хотя к ней не относятся.
 * Восстановлены при переписывании секции без изменений, чтобы не трогать
 * поведение. Перенос в подходящую секцию — отдельная задача (BACKLOG R-15).
 */
.company__item {
    width: calc(20% - 12.8px);
    padding: 24px;
    border-radius: var(--Frame-Card-Padding-Corner, 24px);
    border: 1px solid var(--stroke-white-15, rgba(251, 251, 251, 0.15));
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 260px;
}

.company__item-logo {
    width: 100%;
}

.company__item-logo img {
    width: 100%;
    object-fit: cover;
}

.company__item--more {
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.company__item-icon {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--island-orange-20, rgba(249, 170, 102, 0.20));
}

.company__item-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.company__item-title {

}

.company__item-title p {
    color: var(--text-white-50, rgba(251, 251, 251, 0.50));
    font-size: var(--Text-Title-Size-H4, 24px);
    font-weight: 700;
    line-height: 150%;
    text-align: center;
}

.company__item-title p span {
    color: #F9AA66;
}

.company__item-text {
    color: var(--text-white-50, rgba(251, 251, 251, 0.50));
    text-align: center;
    font-size: var(--Text-Body-Text-Size-Regular, 16px);
    font-weight: 400;
    line-height: 150%;
}

@media (max-width: 1599.98px) {
    /*
     * Desktop 297:8268 и Tablet 2376:17005: карта занимает всю ширину полосы.
     * Высота карты в Figma 678.747 -> слой 678.747 x 0.5007 = 339.86px.
     */
    .clients__map {
        left: 0;
        width: 100%;
        height: 339.86px;
    }
}

@media (max-width: 991.98px) {
    /* восстановлено из прежней версии секции (BACKLOG R-15) */
    .company__item {
    width: calc(33.33% - 10.67px);
    padding: 16px;
    border-radius: 16px;
    min-width: 230px;
    }

    .company__item-title p {
    font-size: 22px;
    }

    .company__item-text {
    font-size: 15px;
    }

    /* Планшетный фрейм 2376:16958: карта 776x293, пины расставлены иначе. */
    .clients__item--bank {
        left: 9.278%;
        top: 45.051%;
    }

    .clients__item--crypto {
        left: 23.711%;
        top: 9.898%;
    }

    .clients__item--goverment {
        left: 44.201%;
        top: 25.939%;
    }

    .clients__item--insurance {
        left: 66.881%;
        top: 39.249%;
    }

    .clients__item--gambling {
        left: 86.340%;
        top: 13.311%;
    }
}

@media (max-width: 767.98px) {
    /* восстановлено из прежней версии секции (BACKLOG R-15) */
    .company__item {
    width: calc(50% - 8px);
    max-width: 260px;
    }

    .company__item:nth-child(odd):last-child {
    width: 100%;
    max-width: 536px;
    flex-direction: row-reverse;
    gap: 16px;
    }

    .company__item:nth-child(odd):last-child .company__item-title p {
    font-size: 24px;
    }

    .company__item:nth-child(odd):last-child .company__item-text {
    font-size: 16px;
    }

    .company__item:nth-child(odd):last-child .company__item-icon {
    align-self: flex-start;
    }

    .company__item-info {
    justify-content: flex-start;
    text-align: left;
    }

    /*
     * Макета для телефонов нет. Пины на карте перестают читаться и
     * налезают друг на друга, поэтому переходим к простому списку.
     */
    .clients__content {
        height: auto;
        background-image: none;
        padding-top: 0;
    }

    .clients__map,
    .clients__content::after {
        display: none;
    }

    .clients__list {
        position: static;
        transform: none;
        max-width: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .clients__item {
        position: static;
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: auto;
        padding: 12px;
        border-radius: 16px;
        border: 1px solid var(--nv-surface-4);
        background: var(--nv-surface-2);
        background-image: none;
    }

    .clients__item-icon {
        /* В разметке иконка идёт после подсказки — в списке ставим её первой. */
        order: -1;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        background: linear-gradient(135deg, var(--nv-primary) 15%, var(--nv-primary-2) 100%);
        color: var(--nv-constant-1);
    }

    .clients__item-icon svg {
        width: 28px;
        height: 28px;
    }

    .clients__item-info {
        position: static;
        transform: none;
        width: auto;
        padding: 0;
        border: 0;
        background: none;
        text-align: left;
        align-items: flex-start;
        gap: 4px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .clients__item-title {
        font-size: 18px;
        line-height: 133.333%;
    }
}

@media (max-width: 575.98px) {
    /* восстановлено из прежней версии секции (BACKLOG R-15) */
    .company__item {
    width: calc(50% - 4px);
    padding: 12px;
    border-radius: 12px;
    min-width: unset;
    max-width: unset;
    height: 140px;
    }

    .company__item:nth-child(odd):last-child  {
    height: 100px;
    }

    .company__item:nth-child(odd):last-child .company__item-info {
    align-self: flex-end;
    }
}

@media (max-width: 478.98px) {
    /* восстановлено из прежней версии секции (BACKLOG R-15) */
    .company__item {
    height: 100px;
    }
}