:root {
    --Accent-Default: #00B1BA;
    --BG-Gray: #F3F4F5;
    --Text-Dark: #292A2A;
    --Text-Dark-Gray: #878D91;
    --Gray: #DEE2E3;
    --White: white;
}

/* Главный контейнер с отступом 40px снизу чтобы не прилипал к подвалу */
.employees-accordion-container {
    max-width: 1360px;
    margin: 0 auto 40px auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Сам аккордеон */
.department-accordion {
    display: flex;
    flex-direction: column;
}

/* ШАПКА АККОРДЕОНА (Серый блок) */
.department-header {
    align-self: stretch;
    padding: 12px 20px;
    background: var(--BG-Gray);
    border-radius: 12px;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
    display: inline-flex;
    cursor: pointer;
}

/* Заголовок отдела (по умолчанию свернут - темно-серый) */
.department-title {
    flex: 1 1 0;
    color: var(--Text-Dark);
    font-size: 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 28.80px;
    word-wrap: break-word;
    transition: color 0.2s ease;
}

/* Когда аккордеон развернут - заголовок бирюзовый */
.department-accordion.is-open .department-title {
    color: var(--Accent-Default);
}

/* Кружок для иконки */
.department-icon {
    width: 48px;
    height: 48px;
    border-radius: 60px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Иконка ПЛЮС (когда свернут) - в белом круге */
.department-accordion .department-icon {
    background: var(--White);
}

/* Иконка МИНУС (когда развернут) - без белого фона, только легкая обводка */
.department-accordion.is-open .department-icon {
    background: transparent;
    outline: 1px rgba(0, 177, 186, 0.20) solid;
    outline-offset: -1px;
}

/* Переключение иконок */
.department-accordion .icon-minus { display: none; }
.department-accordion .icon-plus { display: flex; }
.department-accordion.is-open .icon-minus { display: flex; }
.department-accordion.is-open .icon-plus { display: none; }

/* КОНТЕНТНАЯ ОБЛАСТЬ (Карточки на белом фоне) */
.department-content {
    display: none;
    padding-top: 20px;
    /* Белый фон наследуется от страницы, поэтому не задаем серый */
}

.department-accordion.is-open .department-content {
    display: block;
}

.employees-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Карточка сотрудника */
.employee-card {
    width: 325px;
    min-height: 382px;
    background: var(--White);
    border-radius: 12px;
    border: 1px solid var(--Gray);
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.employee-photo-wrap {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 16px;
}

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

.employee-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}

.employee-name {
    color: var(--Text-Dark);
    font-size: 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    word-wrap: break-word;
}

.employee-job {
    color: var(--Text-Dark-Gray);
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 22.40px;
    word-wrap: break-word;
}

.employee-contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.contact-link {
    color: var(--Accent-Default);
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-decoration: none;
    word-wrap: break-word;
}

.contact-link:hover {
    text-decoration: underline;
}