/* STYDI-O V15 — стили посадочных: /design-project/, /technical-project/, /dom/, /about/.
   Подключается метаданными страницы "css": ["landing"]. Токены и компоненты — site.css.
   Макеты: DesignProject.dc.html, TechnicalProject.dc.html, Dom.dc.html (Claude Design, 11.10). */

/* 1. Hero посадочной: отступы макета 72/80 вместо 88/64 главной */
.lp-hero{padding:72px 0 80px}
.lp-hero .breadcrumbs{margin:0}
.lp-hero-media{aspect-ratio:4/5;max-height:600px}
.lp-scheme{background:var(--white);display:flex;align-items:center;justify-content:center}
.lp-scheme svg{width:100%;height:100%;padding:28px;display:block}

/* 2. Состав (01–07 в две колонки) */
.lp-compose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px;list-style:none;margin:0;padding:0}
.lp-compose li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.lp-compose li.lp-compose__note{border-bottom:0}
.lp-compose i{font-style:normal;font-size:12px;letter-spacing:.14em;color:var(--ink-4);min-width:28px;padding-top:4px}
.lp-compose b{display:block;font-weight:500;color:var(--ink)}
.lp-compose span{font-size:15px;color:var(--ink-3)}
.lp-reads{font-size:14px;color:var(--ink-3)}
.lp-reads a{color:var(--wine);text-underline-offset:3px}
.lp-reads a:hover{color:var(--wine-deep)}

/* 3. Шаги: 4 колонки для дома (7 и 5 — в site.css) */
.proc--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* 4. Калькулятор «площадь → ориентир» */
.lp-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.lp-calc__val{font-weight:300;font-size:28px;line-height:1.1;color:var(--ink);white-space:nowrap}
.lp-calc__sum{padding-top:16px;border-top:1px solid var(--line)}
.lp-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;
  --p:31%}
.lp-range:focus{outline:none}
.lp-range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--wine) 0 var(--p),var(--line) var(--p) 100%)}
.lp-range::-moz-range-track{height:3px;border-radius:2px;background:var(--line)}
.lp-range::-moz-range-progress{height:3px;border-radius:2px;background:var(--wine)}
.lp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-9.5px;border-radius:50%;background:var(--white);border:2px solid var(--wine);box-shadow:0 0 0 4px rgba(139,30,63,.12)}
.lp-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--white);border:2px solid var(--wine);box-shadow:0 0 0 4px rgba(139,30,63,.12)}
.lp-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--wine);outline-offset:4px}
.lp-range:focus-visible::-moz-range-thumb{outline:2px solid var(--wine);outline-offset:4px}

/* 5. Листы альбома (нумерация счётчиком) */
.lp-sheets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px;counter-reset:sh;list-style:none;margin:0;padding:0}
.lp-sheets li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline;font-size:15px;color:var(--ink)}
.lp-sheets li::before{counter-increment:sh;content:counter(sh,decimal-leading-zero);font-size:12px;letter-spacing:.14em;color:var(--ink-4);min-width:24px}

/* 6. Сравнение «черновик / технический проект» */
.lp-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

/* 7. Пример листа — линейная схема листа альбома с подписью «схема» (IMP-03): без пунктирной пустой рамки */
.lp-ph{display:flex;flex-direction:column;gap:12px;color:var(--ink-3);max-width:880px}
.lp-ph svg{width:100%;height:auto;display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-card)}
.lp-ph__cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* 8. Ориентиры цены (дом) */
.lp-rows > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;align-items:baseline}
.lp-rows b{font-weight:400;color:var(--ink);white-space:normal;overflow-wrap:anywhere;text-align:right;min-width:0}
.lp-rows .lp-rows__sep{padding-top:12px;border-top:1px solid var(--line)}

/* 9. Галерея кейса (дом): большое фото + два */
.lp-gal{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:16px;height:560px}
.lp-gal .media{width:100%;height:100%;padding:0;cursor:pointer;font:inherit}
.lp-gal .media:first-child{grid-row:1/3}
.lp-gal .media img{transition:transform var(--dur-slow) var(--ease)}
.lp-gal .media:hover img{transform:scale(1.02)}
.lp-gal .media:focus-visible{outline:var(--focus);outline-offset:3px}

/* 10. О студии: цитата на фото, полоса доверия с длинными подписями */
.lp-quote{position:absolute;left:24px;right:24px;bottom:24px;margin:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 20px;font-weight:300;font-size:17px;color:var(--ink);border-left:2px solid var(--wine)}
.lp-about p{font-size:16px}

/* 11. Финальный CTA: подзаголовок на тёмном */
.sec--ink .final p{color:rgba(255,255,255,.75);max-width:520px}

/* 12. Адаптив */
@media (max-width:1000px){
  .proc--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-calc{grid-template-columns:minmax(0,1fr);gap:32px}
  .lp-sheets{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .lp-hero{padding:24px 0 48px}
  .lp-hero-media{aspect-ratio:4/3}
  .lp-compose{grid-template-columns:minmax(0,1fr);gap:0 40px}
  .proc--4{grid-template-columns:minmax(0,1fr)}
  .lp-sheets,.lp-cmp{grid-template-columns:minmax(0,1fr)}
  .lp-gal{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;height:auto}
  .lp-gal .media{aspect-ratio:4/3;height:auto}
  .lp-gal .media:first-child{grid-row:auto}
  .lp-quote{left:16px;right:16px;bottom:16px;font-size:15px;padding:14px 16px}
  .lp-calc__val{font-size:24px}
  .lp-range{height:44px}
}

/* 13. Кнопка, оформленная ссылкой (открывает лайтбокс кейса) */
.lp-linkbtn{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.lp-hero h1{-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}