@layer components;

@layer components {
  /*
   * Внутренние страницы: «Решения», «Проекты», «Сервис», «О компании»,
   * «Контакты».
   *
   * Собственных цветов, теней и радиусов здесь нет ни одного — всё
   * берётся из токенов и уже существующих компонентов (.panel, .card,
   * .btn, .badge). Это не экономия, а условие: страницы обязаны
   * выглядеть продолжением главной, а не похожим на неё отдельным
   * сайтом. Новые правила описывают только раскладку, которой на
   * главной не было, — шапку страницы и ритм текстовых блоков.
   */

  .page-head {
    padding-block: var(--mp-space-16) var(--mp-space-10);
  }

  .page-head__eyebrow {
    display: block;
    font-size: var(--mp-fs-xs);
    font-weight: var(--mp-fw-semibold);
    letter-spacing: var(--mp-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--mp-cyan);
    margin-bottom: var(--mp-space-4);
  }

  .page-head__title {
    font-family: var(--mp-font-display, inherit);
    font-size: var(--mp-fs-title);
    line-height: var(--mp-lh-tight);
    margin: 0 0 var(--mp-space-5);
    /* Длина строки заголовка ограничена не ради красоты: на широком
       экране строка в 1400px физически неудобна — глаз теряет начало
       следующей. */
    max-width: 16ch;
  }

  .page-head__lead {
    font-size: var(--mp-fs-lg);
    line-height: var(--mp-lh-body);
    color: var(--mp-text-soft);
    max-width: 62ch;
  }

  .page-section {
    padding-block: var(--mp-section-pad-y);
  }

  .page-section__title {
    font-size: var(--mp-fs-h2);
    line-height: var(--mp-lh-heading);
    margin: 0 0 var(--mp-space-6);
  }

  .prose {
    max-width: 68ch;
    font-size: var(--mp-fs-body);
    line-height: var(--mp-lh-body);
    color: var(--mp-text-soft);
  }

  .prose p { margin: 0 0 var(--mp-space-4); }
  .prose p:last-child { margin-bottom: 0; }
  .prose strong { color: var(--mp-text); font-weight: var(--mp-fw-semibold); }

  /* Список с галочками — для «что входит». */
  .check-list {
    display: grid;
    gap: var(--mp-space-3);
    max-width: 68ch;
  }

  .check-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--mp-space-3);
    align-items: start;
    font-size: var(--mp-fs-body);
    line-height: var(--mp-lh-body);
    color: var(--mp-text-soft);
  }

  .check-list .icon {
    color: var(--mp-cyan);
    margin-top: 3px;
  }

  /* Сетка карточек внутренних страниц. */
  .page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--mp-space-4);
  }

  .page-card {
    padding: var(--mp-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-3);
  }

  .page-card__title {
    font-size: var(--mp-fs-h3);
    line-height: var(--mp-lh-heading);
    margin: 0;
  }

  .page-card__text {
    font-size: var(--mp-fs-sm);
    line-height: var(--mp-lh-body);
    color: var(--mp-text-muted);
  }

  .page-card .icon { color: var(--mp-icon-line); }

  /*
   * Пометка «здесь будет ваш материал».
   *
   * Намеренно заметная, а не стилизованная под готовый контент:
   * страница с каркасом не должна выглядеть законченной — иначе её
   * выложат как есть, и посетитель увидит пустоту вместо проектов.
   */
  .content-pending {
    border: 1px dashed var(--mp-border-bright);
    border-radius: var(--mp-radius-md);
    padding: var(--mp-space-6);
    background: var(--mp-cyan-004);
    max-width: 68ch;
  }

  .content-pending__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--mp-fs-2xs);
    font-weight: var(--mp-fw-semibold);
    letter-spacing: var(--mp-tracking-label);
    text-transform: uppercase;
    color: var(--mp-cyan);
    margin-bottom: var(--mp-space-3);
  }

  .content-pending p {
    font-size: var(--mp-fs-sm);
    line-height: var(--mp-lh-body);
    color: var(--mp-text-soft);
    margin: 0 0 var(--mp-space-2);
  }

  .content-pending ul {
    font-size: var(--mp-fs-sm);
    line-height: var(--mp-lh-body);
    color: var(--mp-text-muted);
    display: grid;
    gap: 4px;
    margin-top: var(--mp-space-3);
  }

  .content-pending li::before {
    content: "— ";
    color: var(--mp-cyan);
  }

  @media (max-width: 767px) {
    .page-head {
      padding-block: var(--mp-space-10) var(--mp-space-6);
    }

    .page-head__title {
      font-size: var(--mp-fs-h2);
      max-width: none;
    }

    .page-card { padding: var(--mp-space-5); }
  }
}