/* ==========================================================================
   PAGES-JOURNAL — журнал, FAQ, глоссарий, материалы, технологии, оборудование,
   требования к макетам, экология, 3D-конструктор.
   Подключается ПОСЛЕ pages.css и pages-static.css. Использует токены и
   компоненты из tokens.css / components.css — здесь только композиция.
   ========================================================================== */

/* ── Общая "рубрика" статьи/страницы поверх заголовка ────────────────── */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.doc-meta .caption { color: var(--color-text-faint); }
.doc-meta .caption + .caption::before { content: '\00B7'; margin-right: var(--space-3); color: var(--color-border); }

/* ══════════════════════════════════════════════════════════════════════
   ЖУРНАЛ — СТАТЬЯ
   ══════════════════════════════════════════════════════════════════════ */
.article-hero {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24)) var(--space-10);
}
.article-hero__title {
  grid-column: 1 / span 10;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 3.4vw + 1.75rem, 6rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-8);
}
.article-hero__lede {
  grid-column: 1 / span 7;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}
@media (max-width: 900px) {
  .article-hero__title, .article-hero__lede { grid-column: 1 / -1; }
}

.article-cover {
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
}
.article-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.article-body {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.article-body .prose-grid > .prose { grid-column: 3 / span 7; }
@media (max-width: 900px) {
  .article-body .prose-grid > .prose { grid-column: 1 / -1; }
}
.article-body .prose h2 { font-size: var(--text-xl); }
.article-body .prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0 var(--space-6);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.article-body .prose th,
.article-body .prose td {
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.article-body .prose th {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: 500;
  border-bottom: 1px solid var(--color-text);
}
.article-body .prose .quote { margin: var(--space-8) 0; }
.article-body .prose .spec-list { margin: var(--space-2) 0 var(--space-8); max-width: 60ch; }
.article-mid-photo {
  margin: clamp(var(--space-10), 6vw, var(--space-16)) calc(50% - 50vw);
  width: 100vw;
}
.article-mid-photo img { display: block; width: 100%; height: auto; border-radius: 0; }
.article-mid-photo figcaption {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-10)) 0;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
}

.article-next {
  padding-block: clamp(var(--space-14), 7vw, var(--space-20));
  border-top: 1px solid var(--color-divider);
}
.article-next__service {
  margin-top: var(--space-10);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.article-next__service a { color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════════════════
   ЖУРНАЛ — ОГЛАВЛЕНИЕ
   ══════════════════════════════════════════════════════════════════════ */
.journal-lead {
  grid-column: 1 / span 8;
}
@media (max-width: 900px) { .journal-lead { grid-column: 1 / -1; } }

.journal-featured {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-8);
  align-items: end;
  margin-bottom: clamp(var(--space-12), 6vw, var(--space-20));
}
.journal-featured__photo { grid-column: 1 / span 7; }
.journal-featured__photo img { display: block; width: 100%; height: auto; border-radius: 0; }
.journal-featured__text { grid-column: 8 / span 5; }
.journal-featured__num { font-family: var(--font-body); font-size: var(--text-caption); letter-spacing: var(--tracking-caps); color: var(--color-primary); text-transform: uppercase; }
.journal-featured__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.2vw + 1.4rem, 3.5rem);
  line-height: 1.02;
  margin: var(--space-3) 0 var(--space-4);
}
.journal-featured__title a { color: inherit; text-decoration: none; }
.journal-featured__title a:hover { text-decoration: underline; text-underline-offset: 6px; }
.journal-featured__desc { color: var(--color-text-muted); line-height: 1.6; max-width: 48ch; }
@media (max-width: 900px) {
  .journal-featured__photo, .journal-featured__text { grid-column: 1 / -1; }
}

.journal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-8) 0 var(--space-10);
}
.journal-filters button {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.45em 0.9em;
  cursor: pointer;
  border-radius: 0;
}
.journal-filters button.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.journal-empty {
  display: none;
  padding: var(--space-8) 0;
  color: var(--color-text-muted);
}
.journal-empty.is-visible { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════════ */
.faq-search {
  margin: var(--space-8) 0;
  max-width: 46ch;
}
.faq-search input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  padding: var(--space-3) 0;
}
.faq-search input:focus { outline: none; border-bottom-color: var(--color-primary); }

.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-12);
}
.faq-jump a { color: var(--color-text-muted); }
.faq-jump a:hover { color: var(--color-primary); }

.faq-group { margin-bottom: clamp(var(--space-12), 6vw, var(--space-16)); scroll-margin-top: 6rem; }
.faq-group__head { margin-bottom: var(--space-6); }
.faq-group__title { font-family: var(--font-display); font-size: var(--text-2xl); margin: var(--space-2) 0 var(--space-2); }
.faq-group__note { color: var(--color-text-muted); max-width: 60ch; }
.faq[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   ГЛОССАРИЙ
   ══════════════════════════════════════════════════════════════════════ */
.gl-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin: var(--space-8) 0 var(--space-6);
}
.gl-search { flex: 1 1 260px; max-width: 46ch; }
.gl-search input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  font-size: var(--text-base);
  color: var(--color-text);
  padding: var(--space-3) 0;
}
.gl-search input:focus { outline: none; border-bottom-color: var(--color-primary); }
.gl-count { font-variant-numeric: tabular-nums; }
.gl-reset {
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
}

.gl-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-10);
  position: sticky;
  top: 73px;
  background: var(--color-bg);
  z-index: 5;
}
.gl-alpha a {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
  width: 1.9em;
  height: 1.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.gl-alpha a:hover { color: var(--color-primary); }
.gl-alpha a[aria-disabled="true"] { color: var(--color-text-faint); opacity: 0.4; pointer-events: none; }

.gl-group { margin-bottom: clamp(var(--space-10), 5vw, var(--space-14)); scroll-margin-top: 5rem; }
.gl-group__letter {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-primary);
  line-height: 1;
  margin: 0 0 var(--space-4);
}
.gl-term {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  display: grid;
  grid-template-columns: minmax(14ch, 26ch) 1fr;
  gap: var(--space-6);
}
.gl-term:first-of-type { border-top: 1px solid var(--color-divider); }
.gl-term__head { display: flex; flex-direction: column; gap: 2px; }
.gl-term__title { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.1; }
.gl-term__lat { font-size: var(--text-xs); color: var(--color-text-faint); font-style: italic; }
.gl-term__def { color: var(--color-text-muted); line-height: 1.6; }
.gl-term__see { margin-top: var(--space-3); font-size: var(--text-sm); }
.gl-term__see span { color: var(--color-text-faint); margin-right: var(--space-2); }
.gl-term__see a { color: var(--color-primary); margin-right: var(--space-3); }
@media (max-width: 780px) {
  .gl-term { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ══════════════════════════════════════════════════════════════════════
   МАТЕРИАЛЫ
   ══════════════════════════════════════════════════════════════════════ */
.mat-tools { margin: var(--space-8) 0 var(--space-6); }
.mat-search { max-width: 46ch; margin-bottom: var(--space-5); }
.mat-search input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  font-size: var(--text-base);
  color: var(--color-text);
  padding: var(--space-3) 0;
}
.mat-search input:focus { outline: none; border-bottom-color: var(--color-primary); }
.mat-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.mat-filters button {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.4em 0.85em;
  cursor: pointer;
  border-radius: 0;
}
.mat-filters button.is-active { border-color: var(--color-primary); color: var(--color-primary); }
.mat-count { color: var(--color-text-faint); font-size: var(--text-sm); }
.mat-reset {
  background: none; border: none; border-bottom: 1px solid currentColor;
  color: var(--color-primary); font-size: var(--text-sm); cursor: pointer; padding: 0;
  margin-left: var(--space-3);
}

.mat-group { margin-bottom: clamp(var(--space-10), 5vw, var(--space-14)); }
.mat-group__title { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-5); }
.mat-card {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: var(--space-6);
}
.mat-card:first-of-type { border-top: 1px solid var(--color-divider); }
.mat-card__title { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.mat-card__meta { font-size: var(--text-caption); letter-spacing: 0.04em; color: var(--color-text-faint); text-transform: uppercase; }
.mat-card__tags { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1); }
.mat-card__spec .spec-list__row { padding-block: var(--space-2); }
@media (max-width: 780px) {
  .mat-card { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   ОБОРУДОВАНИЕ / ТЕХНОЛОГИИ — техпаспорт
   ══════════════════════════════════════════════════════════════════════ */
.spec-list--hero { max-width: 640px; }

.spec-list--2col {
  columns: 2;
  column-gap: var(--space-10);
}
.spec-list--2col .spec-list__row { break-inside: avoid; }
@media (max-width: 780px) { .spec-list--2col { columns: 1; } }

.tech-photo {
  margin: clamp(var(--space-12), 6vw, var(--space-20)) calc(50% - 50vw);
  width: 100vw;
}
.tech-photo img { display: block; width: 100%; height: auto; border-radius: 0; }

.tech-block { margin-bottom: clamp(var(--space-12), 6vw, var(--space-16)); }
.tech-block__title { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-3); }
.tech-block__note { color: var(--color-text-muted); max-width: 68ch; margin-bottom: var(--space-6); }
.tech-block__label { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-faint); }
.section-note--after { margin-top: var(--space-6); }

/* ══════════════════════════════════════════════════════════════════════
   ЭКОЛОГИЯ — широкая прозы
   ══════════════════════════════════════════════════════════════════════ */
.prose-grid--8 > .prose { grid-column: 2 / span 8; }
@media (max-width: 900px) { .prose-grid--8 > .prose { grid-column: 1 / -1; } }
.prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.15;
  margin: var(--space-8) 0 var(--space-3);
}

/* ══════════════════════════════════════════════════════════════════════
   3D-КОНСТРУКТОР — степпер + форма-превью (статичная версия)
   ══════════════════════════════════════════════════════════════════════ */
.kn-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: start;
}
@media (max-width: 940px) { .kn-layout { grid-template-columns: 1fr; } }

.kn-steps { display: grid; gap: clamp(var(--space-10), 4vw, var(--space-12)); }
.kn-step { position: relative; padding-left: clamp(3rem, 4vw, 4rem); }
.kn-step__num {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-faint);
  line-height: 1;
}
.kn-step__title { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-4); }

/* Чекбокс дополнительной отделки и подсказка под группой опций. */
.kn-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 46ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  cursor: pointer;
}
.kn-check input { margin-top: 0.2em; flex-shrink: 0; }
.kn-check + .kn-check { margin-top: var(--space-3); }
.kn-step > .kn-check { margin-top: var(--space-5); }

/* Блоки опций показываются по типу конструкции — когда их два подряд,
   между ними нужен воздух, иначе группы сливаются в один список. */
[data-kn-only] + [data-kn-only]:not([hidden]) { margin-top: var(--space-7); }

.kn-hint {
  margin-top: var(--space-3);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.kn-radio-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kn-radio {
  position: relative;
}
.kn-radio input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.kn-radio label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  padding: 0.5em 0.9em;
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--color-text-muted);
}
.kn-radio input:checked + label {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.kn-radio input:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.kn-swatch {
  display: inline-block;
  width: 0.9em; height: 0.9em;
  border: 1px solid var(--color-border);
}
.kn-swatch--melovka  { background: #E7DCC3; }
.kn-swatch--efalin   { background: #8B5E3C; }
.kn-swatch--black    { background: #241610; }
.kn-swatch--metallik { background: #C9C2B4; }
.kn-swatch--gold     { background: #B8925A; }
.kn-swatch--silver   { background: #C6C6C6; }
.kn-swatch--holo     { background: #BFD3D8; }

.kn-sliders { display: grid; gap: var(--space-5); max-width: 420px; }
.kn-slider label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.kn-slider output { font-variant-numeric: tabular-nums; color: var(--color-text); }
.kn-slider input[type="range"] {
  width: 100%;
  accent-color: var(--color-primary);
}

.kn-preview {
  position: sticky;
  top: 6rem;
}
.kn-preview__spec { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-divider); }
.kn-preview__spec .spec-list { margin: 0; }
.kn-preview__hint { margin-top: var(--space-4); color: var(--color-text-faint); font-size: var(--text-sm); max-width: 46ch; }

/* ── Замечания технолога ────────────────────────────────────────────────
   Это не ошибки формы: заказать можно и так. Поэтому не красный алерт,
   а заметка на полях — цветная линейка слева и спокойный текст. */
.kn-advice { margin-top: var(--space-5); }
.kn-advice__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.kn-advice__item {
  position: relative;
  margin-top: var(--space-3);
  padding-left: var(--space-4);
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.kn-advice__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em; bottom: 0.35em;
  width: 2px;
  background: var(--color-border);
}
.kn-advice__item--warn::before { background: var(--color-primary); }
.kn-advice__item--warn { color: var(--color-text); }
.kn-advice__ok,
.kn-die {
  margin-top: var(--space-4);
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-faint);
}
.kn-die { color: var(--color-text-muted); }
.kn-preview__actions { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

.kn-upload {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* Нативный input[type=file] визуально скрыт (не display:none — остаётся
   фокусируемым и доступным), выбор файла запускает подписанный <label>,
   стилизованный как .btn--ghost. Имя файла выводит js/konstruktor.js в
   соседний .caption. */
.kn-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.kn-upload__input:focus-visible + .kn-upload__btn {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.kn-sliders--logo { margin-top: var(--space-5); }
.kn-svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--color-surface-offset);
}

/* Мобильный: гасим колоночный gap 12-колоночных сеток — 11 отступов
   по 2.5rem дают 440px минимальной ширины и режут содержимое. */
@media (max-width: 900px) {
  .journal-featured { column-gap: 0; }
}