/* ==========================================================================
   «Отделы» на странице «О компании» (Figma: О компании → Покупателю).
   Mobile-first: база 375, далее 1024 / 1440 / 1820.

   Два принципиально разных кадра при одной разметке:
     <1024  — фото уходит в подложку панели, поверх него белый заголовок и
              карточки пунктов;
     >=1024 — фото слева отдельной колонкой, справа белая карточка с тем же
              заголовком (уже тёмно-синим) и пунктами.

   Пропорции колонок с 1024 взяты из макета (453:451 / 554:726 / 792:968) —
   отсюда дробные fr вместо круглых долей.
   ========================================================================== */

/* Табы по центру; зазор 4, а не общий kit-овый 8.
   На 375 два таба (365) шире контента (335) — строка скроллится и подтекает
   под края экрана, как лента карточек в objects. */
.about-team__nav {
  flex-wrap: nowrap;
  gap: var(--space-4);
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad);
  overflow-x: auto;
  scrollbar-width: none;
}

.about-team__nav::-webkit-scrollbar {
  display: none;
}

.about-team__nav .tab {
  flex: 0 0 auto;
}

/* Отбивка «табы → панель» в макете 20 на всех кадрах (у kit-а 24) */
.about-team__panels {
  margin-top: var(--space-20);
}

.about-team__panel {
  display: flex;
  padding: 10px;
  background-color: var(--color-light-grey);
  border-radius: var(--radius-lg);
}

.about-team__inner {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--color-white-bg);
}

.about-team__media {
  position: absolute;
  inset: 0;
}

.about-team__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затемнение кадра из макета — только пока фото служит подложкой */
.about-team__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.about-team__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 24px 20px 20px;
}

.about-team__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  text-transform: uppercase;
  color: var(--color-white);
}

.about-team__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Планшет 1024 ---------------------------------------------------------*/
@media (min-width: 768px) {
  .about-team__nav {
    justify-content: center;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
  }

  .about-team__panel {
    padding: var(--space-20);
  }

  /* Фото возвращается в колонку слева, текст — белой карточкой справа */
  .about-team__inner {
    display: grid;
    grid-template-columns: 453fr 451fr;
    gap: var(--space-20);
    align-items: stretch;
    overflow: visible;
    border-radius: 0;
    background: none;
  }

  .about-team__media {
    position: relative;
    inset: auto;
    overflow: hidden;
    border-radius: 10px;
  }

  .about-team__media::after {
    content: none;
  }

  .about-team__body {
    gap: var(--space-32);
    padding: 30px;
    background-color: var(--color-white-bg);
    border-radius: 10px;
  }

  .about-team__title {
    color: var(--color-dark-blue);
  }
}

/* --- Ноутбук 1440 ---------------------------------------------------------*/
@media (min-width: 1025px) {
  .about-team__inner {
    grid-template-columns: 554fr 726fr;
  }

  .about-team__body {
    padding: var(--space-40);
  }

  /* Поля карточки пункта в этом блоке свои (24×32), у kit-овой .card-text — 24×30 */
  .about-team .card-text {
    gap: var(--space-12);
    padding: 24px 32px;
  }
}

/* --- Десктоп 1920 ---------------------------------------------------------*/
@media (min-width: 1441px) {
  .about-team__inner {
    grid-template-columns: 792fr 968fr;
  }

  .about-team .card-text {
    gap: var(--space-16);
    padding: 24px 32px;
  }
}