/* Секция «программа авторов» на главной: описание слева, нумерованный
   перечень возможностей справа. */

/* Бейдж стоит вне ряда с колонками: так его высота никогда не влияет на то,
   с чем перечень выравнивается по верху (с заголовком, а не с бейджем), и
   бейдж не съедает отступ, который секция получает от соседа сверху. */
.creator__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.creator__row {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-10);
}

.creator__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}

.creator__lead {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.creator__text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.creator__list { list-style: none; }

/* На планшете перечень встаёт в две колонки. */
@media (min-width: 768px) {
  .creator__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .creator__item:nth-child(2) { border-top: 0; }

  /* В макете строка перечня на планшете выше: подпись там переносится. */
  .creator__item { min-height: 80px; align-items: center; }
}

/* Пункт перечня: номер голубым и подпись, между пунктами пунктирная линия. */
.creator__item {
  display: flex;
  gap: var(--space-4);
  padding-block: 14px;
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--neutral-900);
}

.creator__item + .creator__item {
  border-top: var(--border-hairline) dashed var(--sand-300);
}

.creator__index {
  flex: none;
  width: 35px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  /* Было --action-sky-bg-hover (sky-300): контраст 1.79 при норме 3 для
     крупного текста. Тот же голубой ряд, на два шага темнее - 3.61. */
  color: var(--sky-500);
}

@media (min-width: 1024px) {
  .creator__row {
    flex-direction: row;
    gap: var(--space-14);
    /* Растягиваем колонки на одну высоту, чтобы кнопку можно было
       прижать к низу вровень с последним пунктом перечня. */
    align-items: stretch;
  }

  .creator__copy {
    flex: 1 1 620px;
    min-width: 0;
  }

  /* Колонка выше перечня — остаток высоты забирает кнопка. */
  .creator__copy > .btn { margin-top: auto; }

  .creator__lead,
  .creator__text { font-size: var(--fs-lg); }

  .creator__list {
    display: block;
    flex: 1 1 515px;
    min-width: 0;
  }

  .creator__item:nth-child(2) { border-top: var(--border-hairline) dashed var(--sand-300); }

  .creator__item { min-height: 0; }
}

@media (min-width: 1440px) {
  .creator__row { gap: 120px; }

  .creator__copy { flex: 0 0 620px; }

  .creator__list { flex: 0 0 515px; }
}