/* ==========================================================================
   Команда по разделам (11.2026) — sections/company-page/team.php
   Главная, страницы «О компании» и «Команда». Подключается после company.css.
   Сетка: desktop 4 колонки, tablet 2, mobile 1 (без горизонтального свайпа).
   ========================================================================== */

.team .team__groups {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 5.3vw, 104px);        /* вертикальный отступ между разделами */
}

.team .team__group-heading {
    margin: 0 0 clamp(20px, 2.05vw, 40px);
    font-weight: 500;
}

/* Сетка карточек раздела (перекрывает старые flex/scroll-правила .team__items) */
.team .team__items.team__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.12vw, 40px);          /* ≈29 px при 1366, как в макете */
    max-width: 1680px;                        /* 4 карточки до 390px + 3 промежутка по 40px */
    margin: 0;
    padding: 0;
    overflow: visible;
    align-items: stretch;
}

.team .team__grid .team__item.member {
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
    min-width: 0;
    flex: none;
}

/* Фото: пропорции как раньше, без искажения */
.team .team__grid .member__image {
    overflow: hidden;
    border-radius: 3px 3px 0 0;
    background: var(--color-hover, #e6e6e6);
}

.team .team__grid .member__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 386 / 495;
    object-fit: cover;
    object-position: center top;
}

.team .team__grid .member__image--empty {
    aspect-ratio: 386 / 495;
}

.team .team__grid .member__content__top {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.team .team__grid .member__title {
    margin: 0;
    font-weight: 400;
    color: var(--color-black, #1b1b1b);
    overflow-wrap: break-word;
}

.team .team__grid .member__subtitle {
    margin-bottom: clamp(14px, 1.3vw, 24px);
}

.team .team__grid .member__btn {
    margin-top: auto;
}

/* Вся карточка открывает биографию, но фокус и семантика — у настоящей кнопки */
.team .team__grid .member--has-bio { cursor: pointer; }
.team .team__grid .member--has-bio .member__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.team .team__grid .member__btn:focus-visible {
    outline: 2px solid var(--color-primary, #3493b3);
    outline-offset: 3px;
}

/* Кнопка закрытия модалки — теперь <button>: убираем браузерные стили, оформление из темы сохраняется */
.team-modal button.modal__close {
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.team-modal button.modal__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Планшет: 2 колонки */
@media (max-width: 991px) {
    .team .team__items.team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Телефон: 1 колонка, без горизонтальной прокрутки */
@media (max-width: 599px) {
    .team .team__items.team__grid {
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
        margin: 0;
        padding: 0;
    }
    .team .team__grid .team__item.member { width: 100%; flex-basis: auto; }
}