/* принудительно подключаем Roboto Condensed — не зависим от того,
     как (и под каким именем) шрифт заведён в панели шрифтов Tilda */
  /* ---------- скрываем исходный ST340 (данные остаются в DOM) ---------- */
  #ST340-SOURCE-WRAPPER {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ---------- секция: заголовок + текст + сетка ---------- */
  /* --scale — все размеры блока рассчитаны под ширину 1200px и линейно
     масштабируются под ширину экрана (vw), как и было оговорено. */
  .team-section {
    --scale: calc(100vw / 1200);
    --scale-m: calc(100vw / 320);
    font-family: 'RobotoCondensed', 'Roboto Condensed', Arial, sans-serif;
    letter-spacing: -0.5px;
    padding-top: calc(80 * var(--scale));
  }

  .team-title {
    margin: 0;
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: calc(40 * var(--scale));
    line-height: 1.2;
  }

  .team-subtitle {
    margin: calc(12 * var(--scale)) auto 0;
    max-width: calc(580 * var(--scale));
    text-align: center;
    color: #bdbdbd;
    font-weight: 300;
    font-size: calc(15 * var(--scale));
    line-height: 1.4;
  }

  /* ---------- сетка карточек ---------- */
  .team-grid {
    margin: calc(37 * var(--scale)) auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: calc(20 * var(--scale));
    width: calc(1138 * var(--scale));
  }

  /* первая строка: большая карточка + колонка из двух средних */
  .team-row-1 {
    display: flex;
    gap: calc(20 * var(--scale));
    width: 100%;
  }
  .team-col-pair {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--scale));
    width: calc(538 * var(--scale));
    flex-shrink: 0;
  }

  .team-card {
    position: relative;
    background: #000;
    border-radius: calc(18 * var(--scale));
    overflow: hidden;
    cursor: pointer;
  }

  /* затемнение градиентом снизу поверх фото: внизу карточки — сплошной
     чёрный, примерно к середине высоты карточки уходит в прозрачность */
  .team-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .team-card__photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: transparent;
    pointer-events: none;
  }

  /* размеры трёх типов карточек */
  .team-card--xl {
    width: calc(580 * var(--scale));
    height: calc(636 * var(--scale));
    flex-shrink: 0;
  }
  .team-card--md {
    width: 100%;
    height: calc(308 * var(--scale));
  }
  .team-card--sm {
    width: calc(366 * var(--scale));
    height: calc(423 * var(--scale));
  }

  /* содержимое большой карточки (первый мастер) — выровнено по низу
     карточки (было фиксировано координатой top у имени, теперь блок
     растёт вверх от низа, если текста больше и он не помещается) */
  .team-card__info-xl {
    position: absolute;
    z-index: 2;
    bottom: calc(22 * var(--scale));
    left: calc(22 * var(--scale));
    right: calc(22 * var(--scale));
  }
  .team-card__name-xl {
    margin: 0;
    color: #fff;
    font-weight: 500;
    font-size: calc(40 * var(--scale));
    line-height: 1.1;
  }
  .team-card__desc {
    margin-top: calc(12 * var(--scale));
    color: #fff;
    font-weight: 300;
    font-size: calc(14 * var(--scale));
    line-height: 1.4;
  }
  .team-card__row {
    margin-top: calc(12 * var(--scale));
    display: flex;
    gap: calc(6 * var(--scale));
  }

  /* содержимое средних и маленьких карточек: плашка сверху-слева,
     имя + "посмотреть работы" снизу-слева */
  .team-card__top-left {
    position: absolute;
    z-index: 2;
    top: calc(12 * var(--scale));
    left: calc(12 * var(--scale));
  }
  .team-card__bottom-left {
    position: absolute;
    z-index: 2;
    left: calc(12 * var(--scale));
    bottom: calc(12 * var(--scale));
    display: flex;
    flex-direction: column;
    gap: calc(6 * var(--scale));
  }

  /* сама плашка — .element уже стилизован на сайте (фон/форма),
     здесь текст, отступы по ТЗ и белый цвет текста */
  .team-card__badge {
    display: inline-block;
    width: fit-content;
    font-family: 'RobotoCondensed', 'Roboto Condensed', Arial, sans-serif;
    font-weight: 400;
    font-size: calc(12 * var(--scale));
    padding: calc(6 * var(--scale)) calc(12 * var(--scale));
    color: #fff;
  }
  .team-card__badge--link {
    text-decoration: none;
  }

  /* ==========================================================
     МОБИЛЬНАЯ ВЕРСИЯ (320–480px), рассчитана под ширину 320px и
     линейно масштабируется тем же способом, что и десктоп, только
     от другой базы: --scale-m = 100vw / 320px
     ========================================================== */
  .team-mobile { display: none; }

  @media (max-width: 480px) {
    /* прячем десктопную сетку, показываем мобильную разметку */
    .team-grid { display: none; }
    .team-mobile { display: block; }

    .team-section {
      padding-top: calc(48 * var(--scale-m));
    }
    .team-title {
      font-size: calc(26 * var(--scale-m));
    }
    .team-subtitle {
      margin-top: calc(8 * var(--scale-m));
      max-width: calc(270 * var(--scale-m));
      font-size: calc(13 * var(--scale-m));
    }

    .team-mobile {
      margin-top: calc(40 * var(--scale-m));
      padding: 0 calc(12 * var(--scale-m));
      box-sizing: border-box;
    }

    /* первая (большая) карточка */
    .team-mobile-card {
      position: relative;
      background: #000;
      border-radius: calc(18 * var(--scale-m));
      overflow: hidden;
      cursor: pointer;
    }
    .team-mobile-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
      pointer-events: none;
      z-index: 1;
    }

    .team-mobile-card--big {
      width: calc(296 * var(--scale-m));
      height: calc(512 * var(--scale-m));
      margin: 0 auto;
    }
    .team-mobile-card__content {
      position: absolute;
      z-index: 2;
      left: calc(16 * var(--scale-m));
      right: calc(16 * var(--scale-m));
      bottom: calc(40 * var(--scale-m));
    }
    .team-mobile-card__name {
      margin: 0;
      color: #fff;
      font-weight: 500;
      font-size: calc(26 * var(--scale-m));
      line-height: 1.15;
      text-align: center;
      white-space: nowrap;
    }
    /* было: display:inline-block + фиксированная width/max-width 264px —
       родитель (.team-mobile-card__content) уже за счёт left/right:40px
       реально шире 264px, поэтому блок вылезал и "уезжал" вправо.
       Теперь блок = 100% ширины родителя, текст центрируется внутри неё */
    .team-mobile-card__desc {
      margin-top: calc(8 * var(--scale-m));
      color: #fff;
      font-weight: 300;
      font-size: calc(13 * var(--scale-m));
      line-height: 1.2;
      text-align: center;
      display: block;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .team-mobile-card__row {
      margin-top: calc(8 * var(--scale-m));
      display: flex;
      justify-content: center;
      gap: calc(4 * var(--scale-m));
    }

    /* плашки мобильной версии — .element уже стилизован на сайте */
    .team-mobile-badge {
      display: inline-block;
      width: fit-content;
      color: #fff;
      font-weight: 400;
      font-size: calc(13 * var(--scale-m));
      padding: calc(5 * var(--scale-m)) calc(10 * var(--scale-m));
    }
    /* у плашки должности в карточках слайдера текст меньше */
    .team-mobile-badge--pos {
      font-size: calc(10 * var(--scale-m));
    }

    /* слайдер остальных мастеров */
    .team-mobile-slider-wrap {
      margin-top: calc(12 * var(--scale-m));
    }
    .team-mobile-slider {
      display: flex;
      gap: calc(6 * var(--scale-m));
      overflow-x: auto;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .team-mobile-slider::-webkit-scrollbar { display: none; }

    .team-mobile-card--sm {
      flex: 0 0 auto;
      width: calc(205 * var(--scale-m));
      height: calc(238 * var(--scale-m));
      scroll-snap-align: start;
    }
    .team-mobile-card__top-left {
      position: absolute;
      z-index: 2;
      top: calc(8 * var(--scale-m));
      left: calc(8 * var(--scale-m));
    }
    .team-mobile-card__bottom-left {
      position: absolute;
      z-index: 2;
      left: calc(8 * var(--scale-m));
      bottom: calc(8 * var(--scale-m));
    }
    .team-mobile-card__bottom-right {
      position: absolute;
      z-index: 2;
      right: calc(8 * var(--scale-m));
      bottom: calc(8 * var(--scale-m));
    }

    /* декоративная стрелка-подсказка под слайдером — не управляет
       движением, просто намекает, что слайдер тянется вбок */
    .team-mobile-swipe-hint {
      display: flex;
      justify-content: flex-end;
      margin-top: calc(8 * var(--scale-m));
      color: #fff;
      opacity: .5;
      pointer-events: none;
    }
    .team-mobile-swipe-hint svg {
      width: calc(30 * var(--scale-m));
      height: auto;
      animation: teamSwipeHint 1.4s ease-in-out infinite;
    }
    @keyframes teamSwipeHint {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(calc(10 * var(--scale-m))); }
    }
  }

  /* ---------- попап ---------- */
  .team-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    font-family: 'RobotoCondensed', 'Roboto Condensed', Arial, sans-serif;
    letter-spacing: -0.5px;
    --scale: calc(100vw / 1200);
    --scale-m: calc(100vw / 320);
  }
  .team-modal.is-open { display: flex; }

  .team-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.7);
  }

  .team-modal__box {
    position: relative;
    width: calc(920 * var(--scale));
    background: rgba(24, 24, 24, .75);
    border-radius: calc(18 * var(--scale));
    backdrop-filter: blur(calc(50 * var(--scale)));
    -webkit-backdrop-filter: blur(calc(50 * var(--scale)));
    overflow: hidden;
    max-width: 92vw;
    max-height: 90vh;
  }

  .team-modal__close {
    position: absolute;
    top: calc(20 * var(--scale));
    right: calc(20 * var(--scale));
    background: none;
    border: none;
    color: #fff;
    font-size: calc(20 * var(--scale));
    cursor: pointer;
    z-index: 3;
  }

  /* фото — 485×395, прижато к правому краю и НИЗУ попапа: если попап
     вырастет по высоте (много специализаций), фото не тянется, а
     остаётся у нижнего края вместе с кнопкой */
  .team-modal__photo {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(485 * var(--scale));
    height: calc(395 * var(--scale));
    background-size: cover;
    background-position: center;
    background-color: transparent;
    pointer-events: none;
  }

  /* левая колонка теперь в обычном потоке (не absolute) — именно она
     задаёт высоту попапа. Мин. высота 395, но если контенту тесно —
     блок вырастет, и высота попапа подстроится сама.
     Ширину до фото НЕ ограничиваем — контент может заходить поверх
     изображения (текст ограничен своим max-width) */
  .team-modal__left {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: calc(395 * var(--scale));
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--scale));
    padding: calc(24 * var(--scale));
    box-sizing: border-box;
    color: #fff;
  }

  .team-modal__name {
    margin: 0;
    font-weight: 500;
    font-size: calc(32 * var(--scale));
    line-height: 1.15;
  }

  .team-modal__meta-row {
    margin-top: calc(24 * var(--scale));
    display: flex;
    gap: calc(8 * var(--scale));
  }
  .team-modal__meta-item { display: flex; flex-direction: column; }
  .team-modal__meta-label {
    display: block;
    font-weight: 400;
    font-size: calc(10 * var(--scale));
    color: #fff;
    opacity: .5;
    margin-bottom: calc(10 * var(--scale));
  }

  .team-modal__spec-block { margin-top: calc(8 * var(--scale)); }
  .team-modal__badges {
    display: flex;
    flex-wrap: wrap;
    gap: calc(4 * var(--scale));
    max-width: calc(450 * var(--scale));
  }

  /* плашки со значениями (дата рождения / в профессии / специализации) —
     .element уже стилизован на сайте, здесь текст и отступы */
  .team-modal__badge {
    display: inline-block;
    width: fit-content;
    color: #fff;
    font-weight: 400;
    font-size: calc(12 * var(--scale));
    padding: calc(6 * var(--scale)) calc(12 * var(--scale));
  }

  .team-modal__texts {
    display: flex;
    flex-direction: column;
    gap: calc(15 * var(--scale));
    min-width: 0;
  }

  /* прижимает блок "обо мне/хобби" к низу колонки, когда место есть;
     если контенту тесно — сожмётся не сильнее, чем до gap:24px
     родителя (.team-modal__left), а попап вырастет по высоте */
  .team-modal__bottom {
    margin-top: auto;
  }

  .team-modal__subtitle {
    margin: 0;
    color: #fff;
    font-weight: 500;
    font-size: calc(20 * var(--scale));
  }
  .team-modal__about,
  .team-modal__hobby {
    margin-top: calc(6 * var(--scale));
    color: #fff;
    font-weight: 300;
    font-size: calc(14 * var(--scale));
    line-height: 1.4;
    max-width: calc(520 * var(--scale));
  }

  /* кнопка — тот же нижний край, что и у фото (24px от низа попапа —
     это и есть отступ, соответствующий координате 340 при высоте 395),
     левый край фиксирован на 597, без заливки — она из .buttonClass12 */
  .team-modal__cta {
    position: absolute;
    left: calc(597 * var(--scale));
    bottom: calc(24 * var(--scale));
    z-index: 3;
    width: calc(160 * var(--scale));
    height: calc(31 * var(--scale));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 400;
    font-size: calc(12 * var(--scale));
    text-decoration: none;
    box-sizing: border-box;
  }

  /* ==========================================================
     МОБИЛЬНАЯ ВЕРСИЯ ПОПАПА (320-480px) — два отдельных блока:
     блок 1 (фото + имя + кнопка) и блок 2 (характеристики/тексты)
     ========================================================== */
  .team-modal__mobile { display: none; }

  @media (max-width: 480px) {
    .team-modal__photo,
    .team-modal__left,
    .team-modal__cta { display: none; }

    .team-modal__box {
      width: calc(288 * var(--scale-m));
      background: none;
      border-radius: 0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      overflow: visible;
      max-width: 92vw;
      max-height: 90vh;
      overflow-y: auto;
    }

    .team-modal__close {
      top: calc(20 * var(--scale-m));
      right: calc(20 * var(--scale-m));
      font-size: calc(20 * var(--scale-m));
    }

    .team-modal__mobile {
      display: flex;
      flex-direction: column;
      gap: calc(4 * var(--scale-m));
    }

    /* блок 1: фото + имя (по центру) + кнопка */
    .team-modal__m-block1 {
      position: relative;
      width: calc(288 * var(--scale-m));
      height: calc(333 * var(--scale-m));
      border-radius: calc(18 * var(--scale-m));
      overflow: hidden;
      background: rgba(24, 24, 24, .75);
      backdrop-filter: blur(calc(50 * var(--scale-m)));
      -webkit-backdrop-filter: blur(calc(50 * var(--scale-m)));
    }
    .team-modal__m-block1::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
      pointer-events: none;
      z-index: 1;
    }
    .team-modal__m-photo {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-color: transparent;
      pointer-events: none;
    }
    .team-modal__m-top {
      position: absolute;
      z-index: 2;
      top: calc(250 * var(--scale-m));
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .team-modal__m-name {
      margin: 0;
      color: #fff;
      font-weight: 500;
      font-size: calc(20 * var(--scale-m));
    }
    .team-modal__m-cta {
      margin-top: calc(12 * var(--scale-m));
      width: calc(160 * var(--scale-m));
      height: calc(31 * var(--scale-m));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-weight: 400;
      font-size: calc(12 * var(--scale-m));
      text-decoration: none;
      box-sizing: border-box;
    }

    /* блок 2: характеристики + тексты, высота под контент */
    .team-modal__m-block2 {
      width: calc(288 * var(--scale-m));
      padding: calc(12 * var(--scale-m));
      box-sizing: border-box;
      background: rgba(24, 24, 24, .75);
      border-radius: calc(18 * var(--scale-m));
      backdrop-filter: blur(calc(50 * var(--scale-m)));
      -webkit-backdrop-filter: blur(calc(50 * var(--scale-m)));
      color: #fff;
    }

    .team-modal__m-meta-row { display: flex; }
    .team-modal__m-meta-item { width: 50%; box-sizing: border-box; }
    .team-modal__m-meta-label {
      display: block;
      font-weight: 400;
      font-size: calc(10 * var(--scale-m));
      color: #fff;
      opacity: .5;
      margin-bottom: calc(4 * var(--scale-m));
    }
    .team-modal__m-badge {
      display: inline-block;
      width: fit-content;
      color: #fff;
      font-weight: 400;
      font-size: calc(12 * var(--scale-m));
      padding: calc(4 * var(--scale-m)) calc(8 * var(--scale-m));
    }

    .team-modal__m-spec-block { margin-top: calc(8 * var(--scale-m)); }
    .team-modal__m-badges {
      display: flex;
      flex-wrap: wrap;
      gap: calc(4 * var(--scale-m));
      margin-top: calc(4 * var(--scale-m));
    }

    .team-modal__m-texts {
      margin-top: calc(8 * var(--scale-m));
      display: flex;
      flex-direction: column;
      gap: calc(8 * var(--scale-m));
    }
    .team-modal__m-subtitle {
      margin: 0;
      color: #fff;
      font-weight: 500;
      font-size: calc(14 * var(--scale-m));
    }
    .team-modal__m-about,
    .team-modal__m-hobby {
      margin-top: calc(4 * var(--scale-m));
      color: #fff;
      font-weight: 300;
      font-size: calc(12 * var(--scale-m));
      line-height: 1.4;
    }
  }

/* бегущая линия по рамке карточки: без mask-composite она заливает всё фото */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .team-card__line{display:none}
}