/* ============================================================
   ARCHIX — Components
   Переиспользуемые UI-компоненты.
   Только var(--...) — никаких захардкоженных значений.
   ============================================================ */

/* ── Типографические утилиты ─────────────────────────────────── */
.h1 { font: var(--text-display-lg); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); }
.h2 { font: var(--text-display-md); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); }
.h3 { font: var(--text-display-sm); letter-spacing: var(--tracking-normal); color: var(--color-text-primary); }
.h4 { font: 600 var(--fs-xl)/var(--lh-snug) var(--font-body); color: var(--color-text-primary); }

.body-xl  { font: var(--text-body-xl);  color: var(--color-text-primary); }
.body-lg  { font: var(--text-body-lg);  color: var(--color-text-primary); }
.body-md  { font: var(--text-body-md);  color: var(--color-text-primary); }
.body-sm  { font: var(--text-body-sm);  color: var(--color-text-secondary); }
.body-xs  { font: var(--text-body-xs);  color: var(--color-text-muted); }

.mono     { font: var(--text-meta-md); color: var(--color-text-muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.label    { font: var(--text-meta-sm); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }

/* ── Кнопки ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-5);
  font: 500 var(--fs-sm)/var(--lh-tight) var(--font-body);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--duration-fast),
    color var(--duration-fast),
    border-color var(--duration-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn:disabled { opacity: 0.55; cursor: default; pointer-events: none; }

/* Primary — графитовый (основное действие) */
.btn-primary {
  background: var(--ink-400);
  color: var(--color-text-inverse);
  border-color: var(--ink-400);
}
.btn-primary:hover { background: var(--ink-300); border-color: var(--ink-300); }

/* Accent — красный (главный CTA, ≤1 на экран) */
.btn-accent {
  background: var(--color-accent);
  color: var(--cold-100);
  border-color: var(--color-accent);
}
.btn-accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* Outline — контурная (вторичное действие) */
.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn-outline:hover { background: var(--color-surface); border-color: var(--color-border-dark); }

/* Ghost — без рамки (третичное, навигационное) */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--color-text-primary); }

/* Размеры */
.btn-sm { height: 32px; padding: 0 var(--space-4); font-size: var(--fs-ui-sm); }
.btn-lg { height: 48px; padding: 0 var(--space-8); font-size: var(--fs-ui-lg); }

/* ── Форма / Инпут ───────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-label {
  font: 500 var(--fs-ui-sm)/var(--lh-tight) var(--font-body);
  color: var(--color-text-primary);
}
.form-input,
.form-select,
.form-textarea {
  font: var(--text-body-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  outline: none;
  transition: border-color var(--duration-fast);
  appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-border-focus);
}
.form-input::placeholder { color: var(--color-text-muted); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-note {
  font: var(--text-body-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Тег / Чип ───────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  font: 400 var(--fs-tag)/var(--lh-tight) var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Варианты по шкале Stone — вложенность/важность */
.tag-default  { background: var(--cold-400); color: var(--stone-500); }
.tag-muted    { background: var(--cold-500); color: var(--stone-400); }
.tag-sale     { background: var(--color-accent-subtle); color: var(--color-accent); }
.tag-success  { background: var(--color-success-bg); color: var(--color-success); }

/* ── Карточка ────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color var(--duration-fast),
    transform var(--duration-fast);
}
.card:hover {
  border-color: var(--color-border-dark);
  transform: translateY(-2px);
}

/* Уровни вложенности карточки через шкалу */
.card--nested   { background: var(--color-surface-2); }
.card--inset    { background: var(--color-surface-3); border-color: var(--stone-300); }

.card__body     { padding: var(--space-4); }
.card__footer   { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }
.card__header   { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }

/* ── Разделитель ─────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--color-border); }

/* ── Панель статистики ───────────────────────────────────────── */
.stat-group { display: flex; gap: var(--space-10); }
.stat__value {
  font: 800 var(--fs-num-xl)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
.stat__label {
  font: var(--text-meta-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  display: block;
  margin-top: var(--space-1);
}

/* ── Изображения ─────────────────────────────────────────────── */

/* Обложки карточек */
.img-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.img-cover--compact { aspect-ratio: 2 / 1; }

/* Заглушка — заменяет .img-cover когда фото нет */
.img-placeholder {
  background: var(--color-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Герой — обложка детальной страницы */
.img-hero {
  width: 100%;
  aspect-ratio: var(--ratio-article);
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

/* Аватары авторов */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.avatar--sm { width: 40px; height: 40px; }
.avatar--md { width: 60px; height: 60px; }
.avatar--lg { width: 80px; height: 80px; }

/* Иллюстрации внутри статьи */
.article-figure--side {
  display: flex;
  gap: var(--comp-2);
  margin: var(--comp-2) 0;
  align-items: flex-start;
}
.article-figure--side img {
  width: 260px;
  aspect-ratio: var(--ratio-article);
  flex-shrink: 0;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.article-figure--side.align-right { flex-direction: row; }
.article-figure--side.align-left  { flex-direction: row-reverse; }
.article-figure--side figcaption  { font: var(--text-body-sm); color: var(--color-text-secondary); line-height: var(--lh-body); }
.article-figure--block { margin: var(--comp-2) 0; }
.article-figure--block img { width: 100%; aspect-ratio: var(--ratio-article); object-fit: cover; border-radius: var(--radius-md); }
.article-figure--block figcaption { font: var(--text-meta-md); color: var(--color-text-muted); margin-top: var(--micro-2); }

@media (max-width: 640px) {
  .article-figure--side { flex-direction: column !important; }
  .article-figure--side img { width: 100%; }
}