schema: ai-cjm-component-contract/v1
id: card
version: 1.0.0
status: stable
owner: AI CJM Design
purpose: Группирует один самостоятельный объект — кейс, проект, артефакт или формат.
use_when:
- Контент повторяется в каталоге или модульной сетке.
evidence:
- id: production-style
  url: https://aicjm.ru/edu/styles.css?v=20260811-edu-canon
  locator: .case-card, .case-card:hover, .project-grid article, .format-grid article, .person-card
  supports:
  - anatomy
  - variant:case
  - variant:project
  - variant:format
  - variant:person
  - size:default
  - state:default
  - state:hover
  - state:focus-visible
- id: production-dom
  url: https://aicjm.ru/edu/cases/
  locator: .case-grid .case-card, .project-grid article, .format-grid article and .team-grid .person-card
  supports:
  - approved-example
  - content
anatomy:
- id: header
  required: false
  role: Категория, логотип или метаданные.
- id: title
  required: true
  role: Название объекта.
- id: body
  required: true
  role: Задача, работа или результат.
- id: metric
  required: false
  role: Подтверждённая метрика.
- id: action
  required: false
  role: Переход к detail.
variants:
- id: case
  status: stable
  description: Кейс клиента.
  evidence_refs:
  - production-style
- id: project
  status: stable
  description: Проект или output.
  evidence_refs:
  - production-style
- id: format
  status: stable
  description: Формат обучения.
  evidence_refs:
  - production-style
- id: person
  status: stable
  description: Композиция people contract.
  evidence_refs:
  - production-style
sizes:
- id: default
  status: stable
  description: Размер определяется содержимым и перечисленными semantic/component tokens; raw dimensions запрещены.
  evidence_refs:
  - production-style
states:
  default:
    status: stable
    basis: observed
    description: default is observed at the exact production locator in evidence_refs.
    evidence_refs:
    - production-style
  hover:
    status: stable
    basis: observed
    description: hover is observed at the exact production locator in evidence_refs.
    evidence_refs:
    - production-style
  focus-visible:
    status: stable
    basis: observed
    description: focus-visible is observed at the exact production locator in evidence_refs.
    evidence_refs:
    - production-style
  active:
    status: not-applicable
    basis: not-applicable
    description: active is not owned by card.
  selected:
    status: not-applicable
    basis: not-applicable
    description: selected is not owned by card.
  open:
    status: not-applicable
    basis: not-applicable
    description: open is not owned by card.
  disabled:
    status: not-applicable
    basis: not-applicable
    description: disabled is not owned by card.
  loading:
    status: not-applicable
    basis: not-applicable
    description: Loading belongs to the containing catalog pattern, not a rendered card.
  success:
    status: not-applicable
    basis: not-applicable
    description: success is not owned by card.
  error:
    status: not-applicable
    basis: not-applicable
    description: error is not owned by card.
  empty:
    status: not-applicable
    basis: not-applicable
    description: Empty belongs to the containing catalog pattern, not a rendered card.
responsive:
  mode: grid-cell-to-single-column-card
  reading_order: DOM order remains authoritative in every mode.
  rules:
  - 'Preserve card internal order: metadata, heading, body, proof/action.'
  - Reduce padding through component.card.padding-mobile and collapse containing grids to one column.
  - Do not crop evidence or hide the primary card action.
accessibility:
  pattern: article-or-linked-card
  semantics:
  - Use article for content cards; if the whole card is a link, expose one primary accessible name.
  keyboard:
  - Tab reaches only real card actions; Enter follows a linked card.
  focus:
  - A linked card uses focus.ring on the outer interactive element and avoids nested interactive controls.
  motion:
  - Hover/entrance effects are removed under reduced motion without hiding content.
tokens:
- component.card.background
- component.card.text
- component.card.border
- component.card.border-width
- component.card.radius
- component.card.padding-desktop
- component.card.padding-mobile
- focus.ring
content:
  required:
  - Один объект.
  - Понятный title.
  - Evidence-backed detail.
  constraints:
  - Вся карточка имеет одну основную цель.
  - Логотип и метрика имеют source.
do:
- Использовать структурные линии и острые углы.
dont:
- Не добавлять локальную тень или скругление.
examples:
  approved:
    status: stable
    description: Компонент card в указанном scoped production locator.
    evidence: https://aicjm.ru/edu/cases/
  prohibited:
    description: Не добавлять локальную тень или скругление.
acceptance:
- id: card-1
  criterion: Interactive card имеет один корректный link target.
  method: manual
- id: card-2
  criterion: Mobile order совпадает с DOM.
  method: manual