/* Секция «создай свой сценарий» на главной: тёмная панель с текстом слева
   и снимком редактора справа. Снимок вылезает за правый край панели и
   обрезается ею — так в макете. */

/* Секция целиком занята панелью. Свой вертикальный отступ она берёт общий,
   как остальные секции, и только на десктопе обнуляет его: там весь стык
   даёт соседняя секция. */

.create__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

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

/* Бейдж «скоро» в макете лежит внутри строки заголовка, а не отдельным рядом. */
.create__title { color: var(--neutral-white); }

/* Бейдж «скоро» стоит рядом с заголовком, инлайн в строке текста. Наклон
   уместен только у стикера, который налезает на картинку или блок — здесь
   бейдж не перекрывает ничего, поэтому он горизонтальный.

   На мобильном заголовок занимает всю ширину, и бейдж всё равно переносится
   на свою строку. Инлайновый отступ слева тогда сдвигает его от края колонки,
   поэтому там бейдж - блочный бокс своей строкой, без левого отступа. */
.create__badge {
  display: flex;
  width: fit-content;
  margin-top: var(--space-3);
  vertical-align: middle;
  padding: 7px var(--space-4);
  border-radius: var(--radius-full);
  background: var(--text-muted);
  box-shadow: 0 4px 12px -2px rgba(110, 108, 130, 0.2);
  font-weight: 700;
  font-size: var(--fs-2xs);
  line-height: 1;
  letter-spacing: var(--ls-badge);
  color: var(--neutral-white);
}

@media (min-width: 768px) {
  .create__badge {
    display: inline-flex;
    width: auto;
    margin-top: 0;
    margin-inline-start: var(--space-3);
  }
}

.create__lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.92);
}

.create__text {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.92);
}

.create__list {
  display: grid;
  gap: 0 var(--space-6);
  width: 100%;
  list-style: none;
}

.create__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.9);
}

.create__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--icon-xl);
  height: var(--icon-xl);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.14);
  color: var(--neutral-white);
}

.create__check .icon { width: var(--icon-sm); height: var(--icon-sm); }

/* Снимок редактора: на узких экранах он просто идёт следом за текстом. */
.create__shot {
  border-radius: var(--radius-xl);
  aspect-ratio: 700 / 601;
  box-shadow: -8px 24px 48px -8px rgba(13, 23, 41, 0.45);
}

@media (min-width: 768px) {
  /* Колонки заполняются сверху вниз: слева четыре пункта, справа три. */
  .create__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
  }

  .create__title { max-width: 560px; }
}

@media (min-width: 1024px) {
  /* Панельная секция: весь стык с соседями даёт соседняя секция. */
  .create { padding-block: 0; }

  .create__panel {
    flex-direction: row;
    gap: var(--space-16);
    align-items: flex-start;
  }

  .create__copy { flex: 0 0 640px; }

  .create__shot {
    position: absolute;
    top: 102px;
    inset-inline-start: 769px;
    width: 700px;
    height: 601px;
    aspect-ratio: auto;
  }
}