:root{

}
.employee-card {
    position: relative;
    height: 580px;
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
}
:root {
    --card-min-width: 220px;
    --card-active-width: 380px;
    --card-mini-width: 220px;
    --gap-width: 24px;
    --slide-width: calc(var(--card-active-width) + (var(--card-mini-width) * 4) + (var(--gap-width) * 4));
}
/* Лицевая часть */
.employee-card__front {
    position: absolute;
    inset: 0;
    transition: opacity 0.4s ease, visibility 0.4s;
    z-index: 2;
    visibility: visible;
}

.employee-card__image {
    width: 100%;
    height: 100%;
    position: relative;
}

.employee-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(126, 87, 197, 0.2) 0%, rgba(126, 87, 197, 0.8) 100%);
}

.employee-card__badge-top {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.employee-card__bottom-info {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: #fff;
}

.employee-card__name { font-size: 35px; font-weight: 600; margin-bottom: 5px; }
.employee-card__post { font-size: 20px; opacity: 0.9; }

/* Обратная часть (Hover) */
.employee-card__back {
    position: absolute;
    inset: 0;
    background: #7E57C5;
    color: #fff;
    padding: 40px 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.employee-card:hover .employee-card__back { opacity: 1; visibility: visible; z-index: 3; }

.card-back-name { font-size: 35px; font-weight: 600; margin-bottom: 5px; }
.card-back-post { font-size: 20px; opacity: 0.8; margin-bottom: 30px; }

.card-back-experience {
    font-size: 22px;
    line-height: 1.3;
    color: #F2EEFF;
    margin-bottom: 30px;
}

.card-back-contacts { margin-bottom: 30px; }
.contact-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.contact-item a { color: #fff; text-decoration: none; font-size: 18px; }

.card-back-phone { display: flex; align-items: center; gap: 15px; margin-top: auto; margin-bottom: 30px; }
.short-number { font-size: 60px; font-weight: 600; color: #FBE122; line-height: 1; }

.card-back-footer { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; opacity: 0.9; }
.q-icon {
    width: 22px; height: 22px; border: 1px solid #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Навигация и прогресс-бар */
.slider-nav-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
}





.slider-arrow { background: none; border: none; cursor: pointer; padding: 0; }

/* --- Стили для секции и основных элементов (если они отличаются от старых) --- */
.objects-section {
    margin-top: 300px; /* Или как требуется */
    margin-bottom: 0 !important;
    /* ... другие стили секции ... */
}


@media (max-width: 770px) {
    .objects-section {
        margin-top: 10px;
        /* Или как требуется */
        margin-bottom: 0 !important;
        /* ... другие стили секции ... */
    }
}
/* --- Стили для контейнера слайдера --- */
.slider-main-container {
    /* Дополнительные стили, если нужны, например, для отступов */
}

.slider-viewport {
    width: var(--slide-width, 100%); /* Установите переменную или явное значение */
    max-width: 95vw; /* Может быть 100% или конкретное значение */
    margin: 0 auto;
    overflow: hidden;
}

.slider-track {
    display: flex;
    gap: 24px; /* Отступ между карточками */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Стили для отдельных слайдов (карточек) --- */
.staff-slide {
    flex-shrink: 0; /* Важно! Предотвращает сжатие карточек */
    width: 380px; /* Фиксированная ширина карточки. Отрегулируйте по дизайну. */
    /* Для адаптивности рассмотрите: */
    /* width: calc((100% - 2 * 24px) / 3); */ /* Например, 3 карточки в ряд с gap */
}

/* Адаптивность для staff-slide (пример) */
@media (max-width: 1400px) {
    .staff-slide {
        width: 350px; /* Немного меньше */
    }
}
@media (max-width: 1200px) {
    .staff-slide {
        width: calc((100% - 24px) / 2); /* 2 карточки в ряд */
    }
}
@media (max-width: 768px) {
    .objects-section .container-custom.vakansii-slider {
        padding-right: 0 !important;
    }

    .objects-section .vakansii-slider .slider-main-container,
    .objects-section .vakansii-slider .position-relative,
    .objects-section .vakansii-slider .slider-viewport {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    .vakansii-slider .slider-viewport {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        margin-left: 0 !important;
        margin-right: 0 !important;
        touch-action: pan-y;
    }

    .staff-slide {
        width: calc((100% - 24px) / 1.8);
        min-width: calc((100% - 24px) / 1.8);
    }

    .employee-card__name {
        font-family: 'Mulish', sans-serif;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 15px;
        letter-spacing: 0;
    }
}

/* --- Стили для карточки сотрудника (employee-card) --- */
.employee-card {
    position: relative;
    height: 580px; /* Высота карточки, задана в ТЗ */
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
    width: 100%; /* Карточка занимает всю ширину staff-slide */
}

/* Лицевая часть */
.employee-card__front {
    position: absolute;
    inset: 0;
    transition: opacity 0.4s ease, visibility 0.4s;
    z-index: 2;
    visibility: visible;
}

.employee-card__image {
    width: 100%;
    height: 100%;
    position: relative;
}

.employee-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employee-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(126, 87, 197, 0.2) 0%, rgba(126, 87, 197, 0.8) 100%);
}

.employee-card__badge-top {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.employee-card__bottom-info {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: #fff;
}

.employee-card__name { font-size: 35px; font-weight: 600; margin-bottom: 5px; }
.employee-card__post { font-size: 20px; opacity: 0.9; }

/* Обратная часть (Hover) */
.employee-card__back {
    position: absolute;
    inset: 0;
    background: #7E57C5;
    color: #fff;
    padding: 40px 30px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.employee-card:hover .employee-card__back { opacity: 1; visibility: visible; z-index: 3; }
.employee-card:hover .employee-card__front { opacity: 0; visibility: hidden; } /* Скрыть лицевую часть при наведении */

.card-back-name { font-size: 35px; font-weight: 600; margin-bottom: 5px; }
.card-back-post { font-size: 20px; opacity: 0.8; margin-bottom: 30px; }

.card-back-experience {
    font-size: 22px;
    line-height: 1.3;
    color: #F2EEFF;
    margin-bottom: 30px;
}

.card-back-contacts { margin-bottom: 30px; }
.contact-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.contact-item a { color: #fff; text-decoration: none; font-size: 18px; }

.card-back-phone { display: flex; align-items: center; gap: 15px; margin-top: auto; margin-bottom: 30px; }
.short-number { font-size: 60px; font-weight: 600; color: #FBE122; line-height: 1; }

.card-back-footer { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; opacity: 0.9; }
.q-icon {
    width: 22px; height: 22px; border: 1px solid #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* --- Стили для элементов управления слайдером --- */
.slider-controls-wrapper { /* Соответствует slider-nav-container из ТЗ по функционалу */
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 50px; /* Отступ сверху от блока с карточками */
    justify-content: space-between; /* Распределяет элементы */
}

.slider-progress-track {
    width: 100%;
    height: 20px;
    background: #7E57C5;
    border-radius: 20px;
    position: relative;
    /* overflow: hidden; — можно оставить, если края трека скруглены */
    overflow: hidden;
    user-select: none;
    cursor: pointer;
    box-sizing: border-box; /* Важно для правильного расчета ширины */
}

.slider-progress-bar {
    position: absolute;
    /* Центрирование: трек 20px, бар 10px. (20 - 10) / 2 = 5px */
    top: 5px; 
    height: 10px;
    background: #FFD600;
    border-radius: 20px;
    pointer-events: none;
    /* Убираем transform, так как используем top: 5px */
    transition: left 0.3s ease, width 0.3s ease;
    left: 7px; /* Начальная позиция */
}

.slider-arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    /* Дополнительные стили, если стрелки должны быть неактивны */
    transition: opacity 0.3s ease;
}

.slider-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Очистка старых, более не нужных стилей --- */
/* Убедитесь, что эти стили удалены или переопределены, если они были в вашем общем CSS */
/*
.object-card, .object-card.active-card { }
.object-card__title, .active-card .object-card__title { }
.object-card__hidden-content, .card-tags, .active-card .object-card__hidden-content, .active-card .card-tags { }
.object-card__img, .active-card .object-card__img { }
.object-card__overlay { }
*/

/* Старые медиа-запросы, которые меняли логику аккордеона, должны быть удалены или переработаны */
/*
@media (max-width: 1265px) {
    .objects-wrapper { flex-direction: column; width: 100%; }
    .object-card { width: 100% !important; height: 50px; }
    .object-card.active-card { height: 120px; }
    .object-card__title { font-size: 18px; }
    .object-card__hidden-content, .card-tags { display: none !important; }
}
*/
/* --- Обновленная анимация карточки --- */

.employee-card {
    position: relative;
    height: 580px;
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(126, 87, 197, 0.2) 0%, rgba(126, 87, 197, 0.8) 100%);
}

/* Лицевая часть */
.employee-card__front {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); */
}

.employee-card__bottom-info {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: #fff;
    transition: transform 0.5s ease, opacity 0.4s ease;
    z-index: 3;
}

/* Обратная часть */
.employee-card__back {
    position: absolute;
    inset: 0;
    background: #7E57C5;
    color: #fff;
    padding: 40px 30px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    /* Изначально скрыта внизу */
    transform: translateY(102%); 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Эффект при наведении */
.employee-card:hover .employee-card__front {
    /* Можно слегка сдвинуть или оставить */
}

.employee-card:hover .employee-card__bottom-info {
    transform: translateY(-100px); /* Текст уезжает вверх */
    /* opacity: 0; */
}

.employee-card:hover .employee-card__back {
    transform: translateY(0); /* Фиолетовый блок выезжает снизу */
}

/* Плавное появление текста внутри обратной стороны */
.card-back-content {
    /* opacity: 0; */
    transform: translateY(20px);
    transition: all 0.4s ease 0.2s; /* Задержка 0.2с */
}

.employee-card:hover .card-back-content {
    opacity: 1;
    transform: translateY(0);
}



@media (max-width: 768px) {
    .objects-section .vakansii-slider .staff-slide,
    .objects-section .vakansii-slider .employee-card {
        height: 260px !important;
        max-height: 260px !important;
    }

    .objects-section .vakansii-slider .employee-card__badge-top {
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: "Mulish", sans-serif !important;
        font-size: 25px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: 100% !important;
        letter-spacing: 0 !important;
        text-align: center !important;
    }

    .objects-section .vakansii-slider .employee-card__name {
        font-family: "Mulish", sans-serif !important;
        font-size: 15px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: 15px !important;
        letter-spacing: 0 !important;
    }

    .objects-section .vakansii-slider .employee-card__post {
        font-family: "Mulish", sans-serif !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 300 !important;
        line-height: 12px !important;
        letter-spacing: 0 !important;
    }

    .objects-section .vakansii-slider .employee-card__back {
        padding: 12px !important;
    }

    .objects-section .vakansii-slider .card-back-name {
        font-family: "Mulish", sans-serif !important;
        font-size: 15px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: 15px !important;
        letter-spacing: 0 !important;
        margin-bottom: 4px !important;
    }

    .objects-section .vakansii-slider .card-back-post {
        font-family: "Mulish", sans-serif !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 300 !important;
        line-height: 12px !important;
        letter-spacing: 0 !important;
        margin-bottom: 8px !important;
    }

    .objects-section .vakansii-slider .card-back-experience {
        font-size: 10px !important;
        line-height: 12px !important;
        margin-bottom: 8px !important;
    }

    .objects-section .vakansii-slider .card-back-contacts {
        margin-bottom: 8px !important;
    }

    .objects-section .vakansii-slider .contact-item {
        gap: 6px !important;
        margin-bottom: 4px !important;
    }

    .objects-section .vakansii-slider .contact-item a {
        font-size: 10px !important;
        line-height: 12px !important;
    }

    .objects-section .vakansii-slider .contact-item svg {
        width: 12px !important;
        height: 10px !important;
        flex: 0 0 12px !important;
    }

    .objects-section .vakansii-slider .card-back-phone {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .objects-section .vakansii-slider .card-back-phone svg {
        width: 12px !important;
        height: 12px !important;
        flex: 0 0 12px !important;
    }

    .objects-section .vakansii-slider .short-number {
        font-size: 20px !important;
        line-height: 20px !important;
    }

    .objects-section .vakansii-slider .card-back-footer {
        gap: 6px !important;
        font-size: 9px !important;
        line-height: 11px !important;
    }

    .objects-section .vakansii-slider .card-back-footer .q-icon {
        width: 12px !important;
        height: 12px !important;
        font-size: 8px !important;
        line-height: 12px !important;
    }
}


@media (max-width: 768px) {
    .objects-section .vakansii-slider .svc-mobile-controls {
        display: flex !important;
        align-items: center;
        gap: 14px;
        margin: 32px 0 0 !important;
        padding-right: 0 !important;
    }

    .objects-section .vakansii-slider .svc-mobile-controls .svc-arrow {
        width: 28px;
        height: 44px;
        min-width: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        padding: 0;
    }

    .objects-section .vakansii-slider .svc-mobile-controls .svc-arrow svg {
        width: 19px;
        height: 35px;
        display: block;
    }

    .objects-section .vakansii-slider .svc-mobile-controls .svc-progress-wrap {
        position: relative;
        flex: 1;
        height: 6px;
        background: rgba(255, 255, 255, 0.35);
        border-radius: 999px;
        overflow: hidden;
    }

    .objects-section .vakansii-slider .svc-mobile-controls .svc-progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        background: #fbe122;
        border-radius: 999px;
        transition: width 0.35s ease;
    }

    .objects-section .vakansii-slider .slider-controls-wrapper .slider-arrow {
        opacity: 1 !important;
    }
}

/* Isolated mobile controls (1:1 like obekty-obsluzhivaniya) */
.objects-section .vakansii-slider .svc-mobile-controls {
    display: none !important;
}

@media (max-width: 768px) {
    .objects-section .vakansii-slider .svc-mobile-controls {
        display: flex !important;
        position: static !important;
        align-items: center !important;
        gap: 14px !important;
        margin: 32px 0 0 !important;
        padding: 0 20px 0 0 !important;
        width: 100% !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }

    .objects-section .vakansii-slider .svc-mobile-controls .svc-arrow {
        width: 28px !important;
        height: 44px !important;
        min-width: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        position: static !important;
    }

    .objects-section .vakansii-slider .svc-mobile-controls .svc-arrow svg {
        width: 19px !important;
        height: 35px !important;
        display: block !important;
        transform: none !important;
    }

    .objects-section .vakansii-slider .svc-mobile-controls .svc-arrow svg path {
        stroke: #7E57C5 !important;
    }

    .objects-section .vakansii-slider .svc-mobile-controls .svc-progress-wrap {
        position: relative !important;
        flex: 1 !important;
        width: auto !important;
        height: 20px !important;
        background: #7E57C5 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .objects-section .vakansii-slider .svc-mobile-controls .svc-progress-bar {
        position: absolute !important;
        top: 5px !important;
        height: 10px !important;
        background: #FFD600 !important;
        border-radius: 20px !important;
        transition: width 0.35s ease !important;
    }
}

/* Desktop/Mobile controls split */
@media (max-width: 768px) {
    .objects-section .vakansii-slider .slider-controls-wrapper {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .objects-section .vakansii-slider .svc-mobile-controls {
        display: none !important;
    }
}