/* ==========================================================================
   Блок «Покупателю» (buyer). Табы по центру + панель (текст | медиа).
   Использует компонент .tabs (tabs.js), пилюли .chip, ссылки .btn--stroke
   и .btn--download, бейдж .icon-card — всё из ui-kit.

   В макете 375 правая колонка (фото, карточка загрузок, рендер) скрыта:
   остаётся только текстовая часть, а лента табов уезжает за край экрана
   и скроллится по горизонтали. Оверлеи включаются с 1024.
   ========================================================================== */

/* --- Лента табов ---------------------------------------------------------*/
/* На 375 переключатель шире экрана (436 против 335) — прокручиваем его,
   вынося за поля контейнера, чтобы первый таб стоял на сетке контента. */
.buyer__nav {
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: var(--container-pad);
  scrollbar-width: none;
}

.buyer__nav::-webkit-scrollbar { display: none; }

.buyer__nav .tab { flex: 0 0 auto; }

.buyer__panels { margin-top: var(--space-20); }

/* --- Панель вкладки --------------------------------------------------------*/
.buyer__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--color-light-grey);
  border-radius: var(--radius-lg);
}

.buyer__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  padding: var(--space-24) var(--space-20) var(--space-20);
}

/* Заголовок с подзаголовком — своя группа: между ними 20 при общем шаге 30/50/60 */
.buyer__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
}

/* Кегль H2, но межстрочный — «natural» (в макете 100%, реально ~1.15) */
.buyer__title {
  font-size: var(--fs-h2);
  line-height: normal;
}

.buyer__sub {
  font-size: var(--fs-s);
  line-height: 22px;
}

/* --- Фичи (пилюли .chip с галочкой) ---------------------------------------*/
.buyer__features {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Низ пилюли на 2px больше верха — так в макете */
.buyer__feature {
  gap: 10px;
  padding: 10px 16px 12px;
  font-size: 14px;
  line-height: normal;
}

/* Подпись приходит из контента: снимаем nowrap у .btn, чтобы длинная строка
   переносилась внутри панели, а не вылезала за неё */
.buyer__link {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.buyer__feature-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 13px;
  color: var(--color-orange);
}

/* --- Медиа: фото + карточка загрузок --------------------------------------*/
/* До 1024 правой колонки в макете нет */
.buyer__media,
.buyer__render { display: none; }

.buyer__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.buyer__docs {
  background-color: var(--color-white);
  border-radius: 10px;
}

.buyer__docs-title {
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: normal;
  color: var(--color-dark-blue);
}

.buyer__docs-list {
  display: flex;
  flex-direction: column;
}

.buyer__doc-icon {
  color: var(--color-orange);
}

/* --- Карточка с рендером станции ------------------------------------------*/
.buyer__render {
  position: absolute;
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: 10px;
}

.buyer__render-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.buyer__render-badge {
  position: absolute;
  width: 30px;
  height: 30px;
}

.buyer__render-badge .icon-card__icon {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Планшет ≥1024: две колонки, карточка загрузок и рендер — оверлеями
   ========================================================================== */
@media (min-width: 768px) {
  .buyer__nav {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .buyer__panels { margin-top: var(--space-16); }

  /* Доли колонок из макета: 489 / 964 */
  .buyer__panel { grid-template-columns: 50.7% 1fr; }

  .buyer__text {
    gap: 50px;
    padding: 28px;
  }

  .buyer__sub { max-width: 376px; }

  .buyer__media,
  .buyer__render { display: block; }

  .buyer__media {
    position: relative;
    padding: var(--space-20);
  }

  .buyer__docs {
    position: absolute;
    top: 36px;
    right: 36px;             /* 20 padding + 16 отступ от края фото */
    width: 200px;
    padding: var(--space-16);
  }

  .buyer__docs-title { margin-bottom: var(--space-8); }
  .buyer__docs-list { gap: var(--space-4); }

  /* Рендер лежит поверх стыка колонок: 434 / 964 от левого края панели */
  .buyer__render {
    left: 45%;
    bottom: 53px;
    width: 149px;
    height: 149px;
    padding: var(--space-20);
  }

  .buyer__render-badge { top: 8px; left: 8px; }
}

@media (min-width: 1025px) {
  .buyer__panels { margin-top: var(--space-20); }

  /* 720 / 1340 */
  .buyer__panel { grid-template-columns: 53.7% 1fr; }

  .buyer__text {
    gap: 50px;
    padding: var(--space-40);
  }

  /* Ширина сетки пилюль в макете задана жёстко (521), иначе в строку влезает
     лишняя пилюля и раскладка расходится с макетом */
  .buyer__features { max-width: 521px; }

  .buyer__docs {
    top: var(--space-40);    /* 20 padding + 20 отступ от края фото */
    right: var(--space-40);
    width: 216px;
    padding: var(--space-20) var(--space-24);
  }

  .buyer__docs-title { margin-bottom: var(--space-12); }
  .buyer__docs-list { gap: var(--space-8); }

  /* 596 / 1340 */
  .buyer__render {
    left: 44.5%;
    width: 248px;
    height: 248px;
    padding: 30px;
  }

  .buyer__render-badge { top: var(--space-20); left: var(--space-20); }
}

@media (min-width: 1441px) {
  /* 968 / 1820 */
  .buyer__panel { grid-template-columns: 53.2% 1fr; }

  .buyer__text {
    gap: var(--space-60);
    padding: var(--space-60);
  }

  .buyer__sub {
    max-width: 505px;
    line-height: 30px;
  }

  .buyer__features { max-width: 532px; }

  .buyer__feature { font-size: 16px; }

  .buyer__docs {
    top: 44px;               /* 20 padding + 24 отступ от края фото */
    right: 44px;
    width: 255px;
  }

  .buyer__docs-title {
    margin-bottom: var(--space-16);
    font-size: var(--fs-xs);
  }

  .buyer__doc-icon { width: 22px; height: 22px; }

  /* 736 / 1820 */
  .buyer__render {
    left: 40.4%;
    bottom: 56px;
    width: 347px;
    height: 347px;
  }

  .buyer__render-badge {
    width: 40px;
    height: 40px;
  }

  .buyer__render-badge .icon-card__icon {
    width: 22px;
    height: 22px;
  }
}