/* Страница «О проекте». Методика, роль ИИ, что такое Learning Outcome и
   Action ID, миссия и команда. Карточка со списками «делает / не делает»
   берётся из блока страниц аудиторий. */

/* ============================================================
   МЕТОДИКА
   Карточка: рисунок слева, название и описание справа.
   ============================================================ */

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

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

.method-card__art {
  flex: none;
  width: 180px;
  height: 180px;
  background-image: var(--art-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.method-card__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.method-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);
}

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

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

@media (min-width: 1024px) {
  .method-card {
    flex-direction: row;
    align-items: flex-start;
  }
}

.art-situations   { --art-image: url("../../img/about/method-situations.svg"); }
.art-visual-novel { --art-image: url("../../img/about/method-visual-novel.svg"); }
.art-dialogues    { --art-image: url("../../img/about/method-dialogues.svg"); }
.art-minigames    { --art-image: url("../../img/about/method-minigames.svg"); }

/* ============================================================
   LEARNING OUTCOME И ACTION ID
   Две карточки с определениями и полоса с примером под ними.
   ============================================================ */

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

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

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

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

.example-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: 0 8px 24px -4px rgba(156, 141, 128, 0.1);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* В примечаниях из макета используется отдельный pill-бейдж, а не
   стандартный прямоугольный Badge с радиусом 8. */
.example-note .badge {
  align-self: flex-start;
  width: auto;
  border-radius: var(--radius-full);
  color: var(--action-secondary-text);
}

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

  .example-note {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }

  .example-note .badge { align-self: center; }
}

/* ============================================================
   МИССИЯ И КОМАНДА
   ============================================================ */

.mission {
  display: grid;
  gap: var(--space-6);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.team {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-9);
}

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

/* Место под снимок: пунктирная песочная рамка с подписью по центру. */
.team-card__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  border: var(--border-hairline) dashed var(--sand-300);
  border-radius: var(--radius-lg);
  background: var(--sand-50);
  font-weight: 500;
  font-size: var(--fs-2xs);
  line-height: 1;
  letter-spacing: var(--ls-badge);
  color: var(--sand-700);
}

.team-card__name {
  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);
}

.team-card__role {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

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

  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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