/* --- Десктоп --- */
.team-block, .psychologists-block {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* FIX: у психологов центрируем "хвост" (когда в ряду 1-2 карточки) */
.psychologists-block {
    justify-content: center;
}

.teamSection_singleCard {
    width: calc(33.333% - 13.333px);
    box-sizing: border-box;
    /* FIX: чтобы flex не пытался ужимать/растягивать карточки */
    flex: 0 0 calc(33.333% - 13.333px);
}

.team-hidden {
    overflow: hidden;
    max-height: 0;
    transition: max-height 1.2s ease;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* FIX: скрытые карточки психологов тоже по центру */
.extra-psychologists {
    justify-content: center;
}

.team-hidden.open {
    max-height: 3000px;
}

.team-show-more-wrapper {
    width: 100%;
    text-align: center;
    margin-top: -100px;
}

.team-show-more {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #d6cbc2;
    background-color: #202020;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease;
}

.team-show-more::after {
    content: "▼";
    color: #d6cbc2;
    font-size: 28px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.team-show-more.open::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

.team-show-more:hover,
.team-show-more:active {
    animation: pulseScale 1.0s infinite alternate;
}

@keyframes pulseScale {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); } /* увеличиваем на 10% */
}

/* --- Мобильная версия --- */
@media (max-width: 768px) {
    .team-block, .psychologists-block {
        flex-direction: column;
        gap: 8px;
    }

    /* FIX: на мобиле центрирование не нужно, иначе может выглядеть странно */
    .psychologists-block {
        justify-content: flex-start;
    }

    .teamSection_singleCard {
        width: 100% !important;
        flex: 0 0 auto !important;
        margin: 0 auto;
    }

    /* Кнопка посередине между блоками */
    .team-show-more-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
    }
}
/* FIX: всегда 3 карточки в ряд на десктопе (и в hidden тоже) */
@media (min-width: 1024px){
  .team-block,
  .psychologists-block,
  .team-hidden{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    align-items: stretch;
  }

  .team-block > .teamSection_singleCard,
  .psychologists-block > .teamSection_singleCard,
  .team-hidden > .teamSection_singleCard{
    flex: 0 0 calc(33.333% - 13.333px) !important;
    max-width: calc(33.333% - 13.333px) !important;
    width: auto !important;  /* убираем старую логику width */
    box-sizing: border-box;
  }

  /* чтобы кнопка "показать ещё" не ломала сетку */
  .team-show-more-wrapper{
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}
/* === FIX: одинаковый размер фото-зоны у карточек (все ряды одинаковые) === */
.teamSection_singleCard-elem .imgWrapper{
  width: 100%;
  aspect-ratio: 1 / 1;          /* квадрат как в 1-м ряду */
  overflow: hidden;
}

/* если у тебя img внутри */
.teamSection_singleCard-elem .imgWrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* если img нет (пустая заглушка) - чтобы блок не “схлопывался” */
.teamSection_singleCard-elem .imgWrapper:empty{
  background: rgba(0,0,0,.03);
}
/* FIX: 2-й ряд (team-hidden) сжимается -> карточки становятся узкими */
.team-hidden{
  width: 100%;
  flex: 0 0 100%;
  box-sizing: border-box;
}

/* фиксируем ширину карточек одинаково везде (и в скрытом блоке тоже) */
.teamSection_singleCard{
  flex: 0 0 calc(33.333% - 13.333px);
  width: calc(33.333% - 13.333px);
  box-sizing: border-box;
}

/* на всякий случай: чтобы контейнеры не растягивали/не сжимали карточки */
.team-block,
.psychologists-block{
  align-items: flex-start;
}
/* Только для страницы "Специалисты" (PAGE=specialists) */
.specialistsPage__titleLeft{
  text-align: left;
  width: 100%;
  margin-bottom: 30px;
}