/* Перенос стенда site/stands/v53-lead.css (craftsman-1a35be, 28.09, sha256 88710b12…) в дерево сайта сборкой волны 1 5.2
   (craftsman-c0dd5f, T-S49 шаг 6) без изменений правил; на внутренних грузится асинхронно после v51-sections.css. */
/* v53-lead.css · лид-магнит «Покажем ваш балкон» (T-S53, TASK-S53-3-SELL.md) — стенд к 5.2.
   craftsman-1a35be · 28.09.2026. Грузится после v51-tokens / v51-home / v51-sections / v52-inner.
   Язык 5.1 не меняется: токены --m, --t-*, --acc (одно действие на экран), --acc-cold, --chamfer, теней ноль.
   Слот — S-SHOW спеки 5.2 (§1.7, ИН-2 а), слова — C52-O-19. Мир — белый («факт»: живое фото и ответ бота на него),
   в /balkon-pod-klyuch/ — хвост блока 5 перед тёмной дверью (как «Покажем ваш балкон» в блоке 5 /osteklenie/).

   1440: шторка 3:4 — колонки 1–5 (504 × 672), под ней выбор варианта и оговорка; текст — колонки 7–12:
   H2 → строка-обещание → кнопка Telegram → другие каналы → паспорт из трёх строк (перевязка: вторая строка +1 модуль).
   Формат 3:4, а не 16:10 закона §3.2: материал — вертикальное фото с телефона; так придёт и фото клиента.
   390: H2 → обещание → шторка до правого края (вынос 26) → выбор → кнопка во всю ширину → каналы → паспорт. */

/* ── 1 · БЛОК ─────────────────────────────────────────────────────────── */
/* круг 2: колонка текста тянется на высоту шторки — H2 на верхней кромке кадра, паспорт нижней линейкой на нижней
   кромке кадра (опорная линия одна; в круге 1 паспорт кончался на 200 px выше кадра — дыра справа внизу) */
.v53-lead__in { row-gap: 16px; align-items: start; }
.v53-lead__fig { display: contents; }
.v53-lead .v51-cmp { grid-column: 1 / span 5; grid-row: 1; }
.v53-var { grid-column: 1 / span 5; grid-row: 2; }
.v53-lead__cap { grid-column: 1 / span 5; grid-row: 3; }
.v53-lead__t { grid-column: 7 / span 6; grid-row: 1; align-self: stretch; display: flex; flex-direction: column;
               justify-content: space-between; gap: var(--m); }
.v53-lead__top { display: grid; gap: 26px; align-content: start; }
.v53-lead__h { margin: 0; }
.v53-lead__one { margin: 0; max-width: 22em; font-size: var(--t-3); line-height: 1.3; color: var(--fg); text-wrap: pretty; }

/* шторка: механика .v51-cmp (v51-sections.css:118-136) — рука двигает --x, автоплея нет, старт 38 % */
.v53-lead .v51-cmp { max-width: none; }
.v53-lead .v51-cmp__st { aspect-ratio: 3 / 4; }
.v53-lead .v51-cmp__p img { object-position: 50% 50%; }
.v53-lead .v51-cmp__p--do img { filter: var(--grade-real); }
/* подписи половин — тёмная плашка на кадре в любом мире (в белом --fg тёмный: подпись пропала бы) */
.v53-lead .v51-cmp__lb { color: #F4F5F7; }
.v53-lead .v51-cmp__p--po .v51-cmp__lb { border-left: 3px solid var(--acc-cold); }
.v53-lead .v51-cmp__p--do .v51-cmp__lb { border-left: 3px solid #F4F5F7; }
/* класс ВИЗУАЛИЗАЦИЯ держит правая половина: скобки --acc-cold по верхним углам (как .v51-vis), угол срезан у всей шторки */
.v53-lead .v51-cmp__p--po::after { content: ""; position: absolute; z-index: 3; top: 10px; right: 10px; width: 18px; height: 18px;
                                   border: 2px solid var(--acc-cold); border-left: 0; border-bottom: 0; pointer-events: none; }
/* «после» — два варианта одного фото: видим тот, что выбран; без JS виден первый */
.v53-lead .v51-cmp__p--po[data-v]:not([data-v="warm"]) { display: none; }
.v53-lead:has(#v53-v-office:checked) .v51-cmp__p--po[data-v="warm"] { display: none; }
.v53-lead:has(#v53-v-office:checked) .v51-cmp__p--po[data-v="office"] { display: block; }

/* выбор варианта — сегменты, выбранный заливкой --fg (как вкладки дома Г6, не акцентом: акцент занят кнопкой, X4) */
.v53-var { position: relative; display: grid; grid-template-columns: auto 1fr 1fr; align-items: stretch; margin: 0; padding: 0; border: 0; min-width: 0; }
.v53-var legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.v53-var__k { display: flex; align-items: center; padding-right: 16px; color: var(--fg3); }
.v53-var input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.v53-var label { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 12px; cursor: pointer;
                 border: 1px solid var(--line2); color: var(--fg2); font-size: var(--t-2); line-height: 1.2; text-align: center; }
.v53-var label + input + label { border-left: 0; }
.v53-var input:checked + label { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.v53-var input:focus-visible + label { outline: 2px solid var(--acc); outline-offset: 2px; }
.v53-var label:hover { color: var(--fg); }

.v53-lead__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 26px; margin: 0; }
.v53-lead__note { margin: 0; font-size: var(--t-2); line-height: 1.5; color: var(--fg2); }

/* действия: одна кнопка-акцент (Telegram), остальные каналы — строкой; MAX и ВК — видимые {{…}} до F17 */
.v53-lead__act { display: grid; gap: 16px; justify-items: start; }
.v53-lead__act .v51-call { min-height: 56px; }
.v53-ch { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 32px; }
.v53-ch li { display: flex; align-items: center; min-height: 44px; }
.v53-ch__k { color: var(--fg3); }
.v53-ch .v51-go { font-size: var(--t-2); }

/* паспорт: подпись — значение; вторая строка сдвинута на модуль (перевязка кладки, излом №1 vkus) */
.v53-pass { margin: 0; display: grid; }
/* подпись — ровно одна колонка сетки (шаг колонки = 2 модуля): значение встаёт на линию колонки 8 (круг 3, датчик G2 —
   значение стояло на 894, в 62 px от линии колонки) */
.v53-pass__r { display: grid; grid-template-columns: calc(2 * var(--m) - var(--col-gap)) minmax(0, 1fr); column-gap: var(--col-gap); align-items: baseline;
               padding: 14px 0; border-top: 1px solid var(--line2); }
.v53-pass__r:last-child { border-bottom: 1px solid var(--line2); }
.v53-pass__r:nth-child(2) { margin-left: var(--m); }
.v53-pass dt { color: var(--fg3); }
.v53-pass dd { margin: 0; font-size: var(--t-2); line-height: 1.4; color: var(--fg); }

/* ── 2 · РАЗВИЛКА «НА САЙТЕ» (только стенд: data-stand) ───────────────────── */
.v53-fork__in { row-gap: var(--m); align-items: start; }
.v53-fork__hd { grid-column: 1 / -1; display: grid; gap: 12px; padding-top: 16px; border-top: 2px solid var(--fg); }
.v53-fork__k { color: var(--fg3); }
.v53-fork__h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-4); line-height: 1.15;
               letter-spacing: -.01em; text-transform: uppercase; color: var(--fg); text-wrap: balance; }
.v53-fork__p { margin: 0; max-width: 46em; font-size: var(--t-2); line-height: 1.5; color: var(--fg2); }
.v53-way { grid-column: span 6; display: grid; gap: 16px; align-content: start; }
.v53-way:nth-of-type(2) { margin-top: var(--m); }          /* перевязка: второй ход ниже на модуль */
.v53-way__hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.v53-way__n { font-family: var(--font-display); font-weight: 700; font-size: var(--t-3); line-height: 1; color: var(--fg); }
.v53-way__h { font-size: var(--t-3); line-height: 1.2; color: var(--fg); }
.v53-way__rec { padding: 4px 8px; background: var(--fg); color: var(--bg); }
.v53-way__box { display: grid; gap: 16px; padding: 26px; background: var(--bg3); border: 1px solid var(--line2); }
.v53-way__step, .v53-drop, .v53-res__lock, .v53-fork__k { margin: 0; }
.v53-way__step { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
.v53-way__step > b { font-family: var(--font-display); font-weight: 700; font-size: var(--t-2); color: var(--fg3); }
.v53-way__step > span { font-size: var(--t-2); line-height: 1.4; color: var(--fg); }
.v53-drop { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 16px;
            border: 1px dashed var(--line2); color: var(--fg2); font-size: var(--t-2); }
.v53-drop__b { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--fg); color: var(--fg); white-space: nowrap; }
.v53-res { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.v53-res__f { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: clip; background: var(--bg2);
              clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%); }
.v53-res__f img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade-vis); }
.v53-res__f figcaption { position: absolute; left: 0; bottom: 0; padding: 6px 10px; background: rgba(14,15,17,.92); color: #F4F5F7;
                         border-left: 3px solid var(--acc-cold); }
.v53-res__want { position: absolute; right: 10px; top: 10px; padding: 6px 10px; background: #F4F5F7; color: #101214; }
.v53-res--blur .v53-res__f img { filter: var(--grade-vis) blur(14px); transform: scale(1.08); }
.v53-res--blur .v53-res__want { display: none; }
.v53-res__lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 26px;
                 text-align: center; color: #F4F5F7; background: rgba(14,15,17,.38); }
.v53-res__lock b { font-size: var(--t-3); line-height: 1.25; font-weight: 400; }
.v53-way .v51-form { background: transparent; border: 0; padding: 0; }
.v53-way .v51-form__f input { background: var(--bg); color: var(--fg); }
.v53-way__why { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.v53-way__why li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); font-size: var(--t-2); line-height: 1.45; color: var(--fg2); }
.v53-way__why li::before { content: attr(data-s); color: var(--fg); font-family: var(--font-display); font-weight: 700; }

/* ── 3 · МИНИ-ВЕРСИЯ ДЛЯ ГЛАВНОЙ (под шторкой Г5, мир Г5 — тёмный) ───────────── */
.v53-mini { margin-top: var(--m); padding-top: 26px; border-top: 1px solid var(--line2); align-items: center; row-gap: 16px; }
.v53-mini__pair { grid-column: 1 / span 4; display: grid; grid-template-columns: 1fr var(--jamb) 1fr; align-items: stretch; margin: 0; }
.v53-mini__f { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: clip; background: var(--bg2); }
.v53-mini__f img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade-real); }
.v53-mini__f.v51-vis img { filter: var(--grade-vis); }
.v53-mini__f .v51-lab { position: absolute; left: 0; bottom: 0; padding: 5px 8px; background: rgba(14,15,17,.92); color: #F4F5F7;
                        border-left: 3px solid #F4F5F7; }
.v53-mini__f.v51-vis .v51-lab { border-left-color: var(--acc-cold); }
.v53-mini__jamb { background: var(--jamb-c, #F4F5F7); }
.v53-mini__t { grid-column: 6 / span 3; display: grid; gap: 12px; }
.v53-mini__h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--t-4); line-height: 1.15;
               letter-spacing: -.01em; text-transform: uppercase; color: var(--fg); }
.v53-mini__p { margin: 0; font-size: var(--t-2); line-height: 1.45; color: var(--fg2); }
.v53-mini__act { grid-column: 9 / span 4; display: grid; gap: 8px; justify-items: end; }
.v53-mini__act .v53-ch { gap: 0 24px; justify-content: flex-end; }

/* ── 4 · ДО 64rem ─────────────────────────────────────────────────────── */
@media (max-width: 63.99rem) {
  .v53-lead .v51-cmp, .v53-var, .v53-lead__cap { grid-column: 1 / span 6; }
  .v53-lead__t { grid-column: 7 / span 6; }
  .v53-mini__pair { grid-column: 1 / span 5; }
  .v53-mini__t { grid-column: 6 / span 7; }
  .v53-mini__act { grid-column: 6 / span 7; justify-items: start; }
  .v53-mini__act .v53-ch { justify-content: flex-start; }
}

/* ── 5 · 390 — мобила первая ─────────────────────────────────────────── */
@media (max-width: 47.99rem) {
  .v53-lead__in { row-gap: 16px; }
  .v53-lead__t, .v53-lead__top { display: contents; }
  .v53-lead__h { grid-column: 1; grid-row: 1; }
  .v53-lead__one { grid-column: 1; grid-row: 2; font-size: var(--t-3); }
  .v53-lead .v51-cmp { grid-column: 1; grid-row: 3; margin-right: calc(-1 * var(--gutter)); margin-top: 10px; }
  .v53-lead .v51-cmp__st { clip-path: none; }        /* до края экрана: срез угла ушёл бы за край — класс держат скобки и плашка */
  .v53-var { grid-column: 1; grid-row: 4; grid-template-columns: 1fr 1fr; }
  .v53-var__k { display: none; }
  .v53-lead__cap { grid-column: 1; grid-row: 5; }
  .v53-lead__act { grid-column: 1; grid-row: 6; justify-items: stretch; margin-top: 10px; }
  .v53-lead__act .v51-call { width: 100%; justify-content: center; }
  .v53-ch { gap: 0 24px; }
  .v53-pass { grid-column: 1; grid-row: 7; margin-top: 10px; }
  .v53-pass__r { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 10px 0; }
  .v53-pass__r:nth-child(2) { margin-left: var(--m); }

  .v53-fork__in { row-gap: var(--m); }
  .v53-way { grid-column: 1; }
  .v53-way:nth-of-type(2) { margin-top: 0; margin-left: 0; }
  .v53-way__box { padding: 16px; }

  .v53-mini__pair, .v53-mini__t, .v53-mini__act { grid-column: 1; }
  .v53-mini__act { justify-items: stretch; }
  .v53-mini__act .v51-call { width: 100%; justify-content: center; }
}