/* Страницы инструкций и протоколов, перенесённых с действующего сайта (09.10.2026).
   Текст и фото — дословно, по старым адресам; меняются только вёрстка и шрифты.
   Собираются prototypes/articles/build-hero.mjs из prototypes/articles/articles.json.
   Подключается после /shop/base.css и /support-kit/support.css. */

.ar-head { display: grid; justify-items: start; gap: 24px; }
.ar-back { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px 0 8px; border-radius: 999px; background: var(--surface); font-size: 16px; font-weight: 600; transition: background 150ms var(--ease); }
.ar-back i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); font-style: normal; transition: transform 250ms var(--ease); }
.ar-back:hover { background: var(--line); }
.ar-back:hover i { transform: translateX(-2px); }
.sp.ar h1 { max-width: 18em; font-size: clamp(32px, 5vw, 64px); line-height: 1.04; }
.sp.ar h1 a { box-shadow: inset 0 -.06em currentColor; }
.sp.ar h1 a:hover { color: var(--red); }
.ar-lead { max-width: 40ch; font-size: 20px; line-height: 1.5; color: var(--muted); }
.ar-lead p + p { margin-top: 8px; }

/* колонка чтения — 760 px; фото рядом с текстом и галереи — шире */
.ar-body { display: grid; justify-items: start; padding-top: 64px; }
.ar-body > * { width: 100%; max-width: 760px; }
.ar-body > .ar-split, .ar-body > .ar-gal { max-width: 1120px; }
.ar-body > * + * { margin-top: 24px; }
.ar-body > .ar-split, .ar-body > .ar-gal, .ar-body > .ar-note, .ar-body > .ar-calc { margin-top: 48px; }
.ar-body > h2 { margin-top: 64px; }
.ar-body > :first-child { margin-top: 0; }
.ar-anchor { display: block; height: 0; margin: 0 !important; scroll-margin-top: 112px; }
.ar-body [id] { scroll-margin-top: 112px; }

.sp.ar .ar-body h2 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; }
.ar-body h2 a { box-shadow: inset 0 -.06em currentColor; }

/* текст статьи */
.ar-text { font-size: 18px; line-height: 1.65; }
.ar-text > * + * { margin-top: 16px; }
.ar-text ul, .ar-text ol { display: grid; gap: 8px; padding-left: 24px; }
.ar-text ul { list-style: none; padding-left: 20px; }
.ar-text ul > li { position: relative; }
.ar-text ul > li::before { content: ""; position: absolute; left: -20px; top: .7em; width: 8px; height: 2px; background: var(--red); }
.ar-text ol { list-style: decimal; }
.ar-text ol > li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.ar-text a, .ar-note a, .ar-fig figcaption a, .ar-lead a { box-shadow: inset 0 -1px currentColor; transition: color 150ms var(--ease); }
.ar-text a:hover, .ar-note a:hover, .ar-fig figcaption a:hover, .ar-lead a:hover { color: var(--red); }
.ar-text strong { font-weight: 600; }

/* видео в статье: файл — плеером браузера, VK Видео и RuTube — плеером сервиса */
.ar-vid video { display: block; width: 100%; height: auto; border-radius: 16px; background: #000; }
.ar-embed { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.ar-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* размер и положение фото и видео из админки: --w — доля ширины колонки текста, data-align — где стоит */
.ar-body > .ar-gal[data-w] { --col: min(100%, 760px); width: calc(var(--col) * var(--w) / 100); }
.ar-body > .ar-gal.n2[data-w], .ar-body > .ar-gal.n3[data-w] { --col: min(100%, 1120px); }
.ar-body > .ar-gal[data-align="center"] { margin-left: calc(var(--col, min(100%, 760px)) * (100 - var(--w, 100)) / 200); }
.ar-body > .ar-gal[data-align="right"] { margin-left: calc(var(--col, min(100%, 760px)) * (100 - var(--w, 100)) / 100); }
/* повёрнутое видео: рамка — под повёрнутый кадр; панель плеера своя (support-kit/article.js) */
.ar-rot { position: relative; aspect-ratio: var(--vh) / var(--vw); overflow: hidden; border-radius: 16px; background: #000; }
.ar-rot[data-rot="180"] { aspect-ratio: var(--vw) / var(--vh); }
.ar-vid .ar-rot video { position: absolute; left: 50%; top: 50%; width: calc(100% * var(--vw) / var(--vh)); max-width: none; height: auto; aspect-ratio: var(--vw) / var(--vh); border-radius: 0; transform: translate(-50%, -50%) rotate(var(--rot)); }
.ar-vid .ar-rot[data-rot="180"] video { width: 100%; }
.ar-rot-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.ar-rot-play span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(255 255 255 / .92); color: #121418; transition: transform 150ms var(--ease), opacity 150ms var(--ease); }
.ar-rot-play span svg { width: 24px; height: 24px; margin-left: 3px; }
.ar-rot.is-playing .ar-rot-play span { opacity: 0; transform: scale(.9); }
.ar-rot.is-playing:hover .ar-rot-play span, .ar-rot-play:focus-visible span { opacity: 1; transform: none; }
.ar-rot-bar { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .35); cursor: pointer; }
.ar-rot-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--red); }

/* выноска — как на старом сайте: короткая красная черта над текстом */
.ar-note { font-size: 20px; font-weight: 500; line-height: 1.5; }
.ar-note::before { content: ""; display: block; width: 48px; height: 3px; margin-bottom: 16px; background: var(--red); }
.ar-note > * + * { margin-top: 12px; }
.ar-note ul { display: grid; gap: 8px; padding-left: 20px; list-style: none; }
.ar-note ul > li { position: relative; }
.ar-note ul > li::before { content: ""; position: absolute; left: -20px; top: .75em; width: 8px; height: 2px; background: var(--red); }

/* фото: как загружено, целиком, скругление; нажатие — крупнее */
.ar-fig { display: grid; gap: 12px; margin: 0; align-content: start; }
.ar-zoom { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: zoom-in; }
.ar-zoom img { width: 100%; height: auto; transition: transform 250ms var(--ease); }
.ar-zoom:hover img { transform: scale(1.02); }
.ar-fig figcaption { font-size: 14px; line-height: 20px; color: var(--muted); }
.ar-fig figcaption > * + * { margin-top: 4px; }

/* текст и фото рядом */
.ar-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.ar-split.img-left { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ar-split.only-img { grid-template-columns: minmax(0, 520px); }

/* галереи */
.ar-gal { display: grid; gap: 16px; }
.ar-gal.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ar-gal.stack { max-width: 760px; }
.ar-gal.stack.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1120px; }
.ar-gal.stack.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1120px; }
.ar-gal.mosaic { grid-template-columns: 2fr 1fr; }
.ar-gal.mosaic .ar-fig:first-child { grid-row: span 2; }
.ar-gal.slider { max-width: 760px; }

/* калькулятор компенсации усадки (с действующего сайта, тот же расчёт: 30 / замер × 100) */
.ar-calc { display: grid; gap: 16px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 16px; }
.calc-row label { display: grid; gap: 4px; }
.calc-row .f-l { color: var(--muted); }
.calc-row input { width: 100%; height: 56px; padding: 0; border: 0; border-bottom: 1px solid var(--muted); border-radius: 0; background: transparent; font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: 100%; font-size: 28px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.calc-row input::-webkit-outer-spin-button, .calc-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-row input:focus { outline: none; border-bottom-color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.calc-row .eq { padding-bottom: 12px; font-size: 28px; color: var(--muted); }
.calc-out { display: flex; align-items: center; gap: 12px; height: 56px; border-bottom: 1px solid var(--line); }
.calc-out output { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: 100%; font-size: 28px; color: var(--red); font-variant-numeric: tabular-nums; }
.calc-out .copy[hidden] { display: none; }

/* помощь специалиста — чёрная полоса перед футером, как на страницах принтеров */
.ar-help { margin-top: 96px; padding: 96px 0; background: var(--night); color: var(--night-ink); }
.ar-help .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.ar-help h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: clamp(24px, 3.4vw, 40px); line-height: 1.1; }
.ar-help p { margin-top: 12px; max-width: 44ch; font-size: 18px; color: var(--night-muted); }
.ar-help .ar-hrs { margin-top: 8px; font-weight: 600; color: var(--night-ink); white-space: nowrap; }
.sp.ar { padding-bottom: 0; }

/* фото крупно */
.ar-lb { width: min(100% - 32px, 1400px); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: visible; border: 0; border-radius: 16px; background: #fff; }
.ar-lb::backdrop { background: rgb(10 10 10 / .8); }
.ar-lb[open] { animation: lb-in 200ms var(--ease); }
@keyframes lb-in { from { opacity: 0; transform: scale(.98); } }
.ar-lb img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 32px); object-fit: contain; border-radius: 16px; }
.ar-lb .icon-btn { position: absolute; top: 12px; right: 12px; background: rgb(255 255 255 / .9); }
.ar-lb .icon-btn:hover { background: #fff; }
html:has(.ar-lb[open]) { overflow: hidden; }

@media (max-width: 999px) {
  .ar-gal.cards, .ar-gal.stack.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ar-body { padding-top: 48px; }
  .ar-split, .ar-split.img-left, .ar-split.only-img { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ar-gal.mosaic { grid-template-columns: minmax(0, 1fr); }
  .ar-gal.mosaic .ar-fig:first-child { grid-row: auto; }
  .ar-text { font-size: 17px; }
  .ar-note { font-size: 18px; }
  .ar-calc { padding: 24px 16px; }
  .calc-row { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
  .calc-row label { grid-column: 1 / -1; }
  .calc-row .eq { padding-bottom: 0; align-self: center; }
  .calc-row input, .calc-out output, .calc-row .eq { font-size: 24px; }
  .ar-help { padding: 64px 0; }
}
@media (max-width: 599px) {
  .ar-gal.cards, .ar-gal.stack.n2, .ar-gal.stack.n3 { grid-template-columns: minmax(0, 1fr); }
  /* на телефоне узкое фото не мельче 60 % ширины */
  .ar-body > .ar-gal[data-w] { width: max(60%, calc(var(--w) * 1%)); }
  .ar-body > .ar-gal[data-align="center"] { margin-left: auto; margin-right: auto; }
  .ar-body > .ar-gal[data-align="right"] { margin-left: auto; }
}