/* ==========================================================================
   Кастомные стили
   --------------------------------------------------------------------------
   1. Переменные
   2. Хедер            .uc-header
   3. Преимущества     .uc-benefits
   4. Карта            .uc-map
   5. Табы             .nl-tabs
   6. Ссылки           .nl-link
   7. Утилиты          .full-shape

   Брейкпоинты: 768px / 1280px / 1920px (mobile-first)
   ========================================================================== */


/* ==========================================================================
   1. Переменные
   ========================================================================== */

:root {
    /* Ширина контейнеров */
    --container-xs: 343px;
    --container-sm: 704px;
    --container-md: 1100px;
    --container-lg: 1680px;

    /* Скругления */
    --radius-sm: 30px;
    --radius-md: 50px;
    --radius-lg: 60px;

    /* Цвета */
    --color-accent: #7520ef;

    /* Анимация */
    --transition-base: 0.3s ease;
}


/* ==========================================================================
   2. Хедер
   ========================================================================== */

/* --- Контейнер меню --- */
.uc-header .t-menu-base__maincontainer {
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
}

/* --- Список пунктов --- */
.uc-header .t-menu-base__list {
    margin-left: 16px !important;
    gap: 16px !important;
}

/* --- Кнопки --- */
.uc-header .t-menu-base__buttons {
    gap: 8px !important;
}
.uc-header .t-menu-base .t-btn {
    padding: 10px !important;
}

/* --- Планшет / небольшой десктоп --- */
@media (min-width: 1280px) {
    .uc-header .t-menu-base__maincontainer {
        max-width: var(--container-md) !important;
    }
    .uc-header .t-menu-base__list {
        margin-left: 24px !important;
        gap: 20px !important;
    }
    .uc-header .t-menu-base .t-btn {
        padding: 10px 20px !important;
    }
}

/* --- Большой десктоп --- */
@media (min-width: 1920px) {
    .uc-header .t-menu-base__maincontainer {
        max-width: var(--container-lg) !important;
    }
    .uc-header .t-menu-base__buttons {
        gap: 16px !important;
    }
    .uc-header .t-menu-base__list {
        margin-left: 36px !important;
        gap: 36px !important;
    }
}


/* ==========================================================================
   3. Преимущества
   ========================================================================== */

.uc-benefits {
    overflow: hidden;
    border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
    .uc-benefits {
        border-radius: var(--radius-md);
    }
}

@media (min-width: 1280px) {
    .uc-benefits {
        border-radius: var(--radius-lg);
    }
}


/* ==========================================================================
   4. Карта
   ========================================================================== */

.uc-map {
    width: 100%;
    max-width: var(--container-xs);
    margin-inline: auto;
}

.uc-map .t-map {
    height: 436px !important;
}

@media (min-width: 768px) {
    .uc-map {
        max-width: var(--container-sm);
    }
}

@media (min-width: 1280px) {
    .uc-map {
        max-width: var(--container-md);
    }
}

@media (min-width: 1920px) {
    .uc-map {
        max-width: var(--container-lg);
    }
    
    .uc-map .t-map {
        height: 582px !important;
    }
}


/* ==========================================================================
   5. Табы (блок с переключением карточек)
   ========================================================================== */

.nl-block-tabs {
    overflow: hidden !important;
}

/* --- Горизонтальная прокрутка без видимого скроллбара --- */
.nl-block-tabs .tn-molecule {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -ms-overflow-style: none;   /* IE / старый Edge */
    scrollbar-width: none;      /* Firefox */
}

.nl-block-tabs .tn-molecule::-webkit-scrollbar {
    display: none;              /* Chrome / Safari */
}


/* ==========================================================================
   6. Ссылки
   ========================================================================== */

.nl-link a {
    transition: color var(--transition-base) !important;
}

.nl-link a:hover {
    color: var(--color-accent) !important;
}


/* ==========================================================================
   7. Утилиты
   ========================================================================== */

/* Растягивание блока на всю ширину экрана */
.full-shape,
.full-shape .tn-atom {
    width: 100% !important;
    left: 0 !important;
}