/* Компоненты страниц сайта поверх дизайн-системы.
   Токены и базовые классы живут в design-system/, здесь — только то,
   чего в системе нет: лесенка карточек, инфографики, таблицы, форма заявки.
   Радиусы не используются: в этой системе их нет вовсе (DESIGN.md §Shapes). */

/* ── Лесенка коллекций — фирменный приём раскладки ─────────────────── */
.stair {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-40) var(--gutter-lg);
  align-items: start;
}
.collection-card--offset { margin-top: var(--sp-96); }
.collection-card__link { display: block; color: inherit; text-decoration: none; }
.collection-card__designer { display: block; margin-top: var(--sp-4); }
.collection-card__link:hover .card__title { color: var(--text-accent); }

@media (max-width: 1024px) { .stair { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  /* На узком экране лесенка распрямляется: смещение читалось бы как сбой вёрстки */
  .stair { grid-template-columns: 1fr; gap: var(--sp-40); }
  .collection-card--offset { margin-top: 0; }
}

/* ── Инфографика ───────────────────────────────────────────────────── */
.infographic { margin: 0; }
.infographic__scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--sp-12); }

.process {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}
.process__step { position: relative; padding-top: var(--sp-40); }
.process__index {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--ff-num);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--text-accent);
}
.process__line {
  position: absolute;
  top: calc(var(--sp-12) + 2px);
  left: var(--sp-32);
  right: calc(var(--gutter) * -1);
  height: 1px;
  background: var(--border-subtle);
}
.process__step:last-child .process__line { display: none; }
.process__title { margin: 0 0 var(--sp-4); font-family: var(--ff-label); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; }

.layers { display: grid; gap: var(--sp-16); margin: 0; padding: 0; list-style: none; }
.layers__item { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-24); align-items: center; }
.layers__bar {
  height: 10px;
  /* Слой глубже — полоса плотнее: разрез сиденья сверху вниз */
  background: color-mix(in srgb, var(--c-olive) calc(100% - var(--layer-depth) * 18%), var(--bg-raised));
  border: 1px solid var(--border-subtle);
}
.layers__title { margin: 0; grid-column: 2; font-weight: 600; }
.layers__item p.t-small { grid-column: 2; margin: 0; }

@media (max-width: 720px) {
  .process { grid-template-columns: repeat(6, 74vw); }
  .layers__item { grid-template-columns: 56px 1fr; }
}

/* ── Таблицы ───────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table caption { text-align: left; padding-bottom: var(--sp-16); }
.table th,
.table td { padding: var(--sp-16) var(--sp-16) var(--sp-16) 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border-subtle); }
.table thead th {
  font-family: var(--ff-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--border-strong);
  white-space: nowrap;
}
.table tbody th { font-weight: 600; color: var(--text-primary); }
@media (max-width: 720px) { .table { min-width: 560px; } }

/* ── Карточка фактов на странице коллекции ─────────────────────────── */
.facts { border: 1px solid var(--border-subtle); padding: var(--sp-32); }
.facts__list { margin: 0; }
.facts__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16);
  padding: var(--sp-12) 0; border-bottom: 1px solid var(--border-subtle); }
.facts__row:last-child { border-bottom: none; }
.facts__row dt { margin: 0; color: var(--text-muted); }
.facts__row dd { margin: 0; }

/* ── Галерея ───────────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.gallery__item { margin: 0; grid-column: span 2; }
.gallery__item--wide { grid-column: span 4; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__item,
  .gallery__item--wide { grid-column: span 1; }
}

/* ── Предметы коллекции: студийные вырезки на подложке ─────────────── */
.pieces { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter);
  margin: 0; padding: 0; list-style: none; }
.pieces__item { display: grid; gap: var(--sp-8); justify-items: center; text-align: center;
  background: var(--bg-raised); padding: var(--sp-24) var(--sp-12); }
.pieces__img { width: 100%; height: auto; }
@media (max-width: 1024px) { .pieces { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .pieces { grid-template-columns: repeat(2, 1fr); } }

/* ── Форма заявки ──────────────────────────────────────────────────── */
.form__row { margin-bottom: var(--sp-24); }
.field__input {
  width: 100%;
  padding: var(--sp-12) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font: inherit;
  /* 16px — иначе iOS зумит страницу при фокусе, §4 мобильная */
  font-size: max(16px, var(--fs-body));
  transition: border-color var(--dur-base) var(--ease-out);
}
.field__input:hover { border-bottom-color: var(--border-strong); }
.field__input:focus-visible { outline: none; border-bottom-color: var(--accent); }
.field__input::placeholder { color: var(--text-muted); }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-24); margin-top: var(--sp-32); }
.form__promise { flex: 1 1 260px; margin: 0; }
.form__status { margin-top: var(--sp-16); min-height: 1.4em; }
.form__status[data-state="ok"] { color: var(--c-olive); }
.form__status[data-state="error"] { color: var(--error); }
.cf-turnstile { margin-top: var(--sp-24); }
@media (max-width: 720px) {
  .form__actions .btn { width: 100%; }
}

/* ── Мелочи ────────────────────────────────────────────────────────── */
.btn--sm { padding: var(--sp-8) var(--sp-16); font-size: var(--fs-label); }
.btn--block { display: block; width: 100%; text-align: center; }
.header__cta { margin-left: var(--sp-16); }
@media (max-width: 720px) { .header__cta { display: none; } }

.section--top { padding-top: calc(var(--header-h) + var(--sp-72)); }
.hero--collection .hero__content { max-width: var(--measure-display); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure-text); }
.designer--plain { display: block; }

.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter-lg);
  margin-top: var(--sp-56); }
.footer__list { list-style: none; margin: var(--sp-16) 0 0; padding: 0; display: grid; gap: var(--sp-8); }
.footer__link { color: var(--text-secondary); text-decoration: none; }
.footer__link:hover { color: var(--text-primary); }
.footer__tagline { font-family: var(--ff-display); font-size: var(--fs-h3); letter-spacing: var(--ls-display); }
.footer__legal { margin-top: var(--sp-56); }
@media (max-width: 720px) { .footer__cols { grid-template-columns: 1fr; gap: var(--sp-40); } }

/* Выключаем движение там, где человек об этом попросил системно */
@media (prefers-reduced-motion: reduce) {
  .collection-card--offset { margin-top: 0; }
}