/* Страница «Create Your Scenario»: чем помогает ИИ, три карточки редактора,
   снимок редактора с перечнем и уровни доступа. Карточки уровней доступа —
   это .method-card со страницы About. */

/* ============================================================
   ТРИ КАРТОЧКИ: КОНТЕКСТ, ВЗАИМОДЕЙСТВИЕ, ГЕНЕРАЦИЯ
   ============================================================ */

.create-cards {
  display: grid;
  gap: var(--space-6);
}

.create-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: 0 8px 24px -4px rgba(156, 141, 128, 0.1);
}

.create-card__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.create-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--text-strong);
}

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

@media (min-width: 768px) and (max-width: 1023px) {
  .create-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .create-card:last-child { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .create-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   ВИЗУАЛЬНЫЙ РЕДАКТОР
   Слева текст и перечень, справа снимок редактора.
   ============================================================ */

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

.editor__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
  min-width: 0;
}

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

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

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

.editor__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: var(--space-2);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.editor__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: var(--sky-100);
  color: var(--sky-600);
}

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

/* Снимок редактора: кадр приходит из .shot-editor, здесь только рамка. */
.editor__shot {
  width: 100%;
  aspect-ratio: 640 / 549;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px -8px rgba(156, 141, 128, 0.18);
}

@media (max-width: 767px) {
  .create-page .create-card { gap: var(--space-4); padding: var(--space-6); }
  .create-page .need-card .check-item { font-size: var(--fs-base); line-height: var(--lh-relaxed); }
  .create-page .editor__copy { gap: var(--space-4); }
  .create-page .editor__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); }
  .create-page .editor__item { align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-normal); }
  .create-page .editor__check { width: var(--icon-lg); height: var(--icon-lg); }
  .create-page .editor__shot { display: none; }
  .create-page .method-card { gap: var(--space-4); }
  .create-page .method-card__art { width: 100%; background-position: left center; }
  [dir="rtl"] .create-page .method-card__art { background-position: right center; }
  .create-page .art-access-private .method-card__art { height: 112px; }
  .create-page .art-access-friends .method-card__art { height: 142px; }
  .create-page .art-access-team .method-card__art { height: 140px; }
  .create-page .art-access-community .method-card__art { height: 136px; }
  .create-page .method-card__copy { gap: var(--space-4); }
}

@media (min-width: 768px) {
  .editor__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .create-page .editor__shot {
    background-position: center;
    background-size: 100% 100%;
  }
}

@media (min-width: 1024px) {
  .editor__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-14);
  }

  .editor__copy { flex: 0 0 620px; }

  .editor__shot { flex: 1 1 auto; }
}