: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: 199px; /* Или как требуется */
    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) {
    .staff-slide {
        width: 100%; /* Одна карточка на всю ширину */
    }
}


/* --- Стили для карточки сотрудника (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);
}