/* Мир Паркета v2 / главная: редакционное открытие */

/* ---------- открытие ---------- */
.mp-open{position:relative;padding-top:clamp(2rem,1rem + 3vw,4.5rem);background:var(--mp-paper);overflow:hidden}
.mp-open__grid{display:grid;gap:clamp(2rem,1rem + 3vw,3.5rem);align-items:center}
.mp-open__title{font-size:clamp(2.05rem,1.3rem + 3vw,4.1rem);line-height:1.08;max-width:14em}
.mp-open__title em{font-style:italic}
.mp-open__lead{margin:clamp(1.25rem,.8rem + 1.5vw,2rem) 0 0;max-width:30em;font:300 clamp(1.0625rem,1rem + .3vw,1.3125rem)/1.65 var(--mp-font-text);color:var(--mp-ink-2)}
.mp-open__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.5rem,1rem + 2vw,2.5rem)}
.mp-open__note{margin:1.1rem 0 0;font-size:.875rem;color:var(--mp-muted)}
.mp-open__note a{color:var(--mp-ink);white-space:nowrap;text-decoration:underline;text-decoration-color:var(--mp-line);text-underline-offset:.25em}
.mp-open__note a:hover{text-decoration-color:var(--mp-ink)}
/* узкие экраны: телефон отдельной строкой — фраза с номером занимает 349 из 350 px и переносилась при подмене шрифта (CLS) */
@media (max-width:479px){.mp-open__note a{display:block;width:fit-content;margin-top:.2rem}}
.mp-open__media{position:relative;min-width:0}
.mp-open__fig{position:relative;margin:0;aspect-ratio:4/3;max-height:60vh;overflow:hidden;background:#2a2622;will-change:transform}
.mp-open__fig picture,.mp-open__fig img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.mp-open__glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--mp-ease);background:radial-gradient(circle at var(--mx,70%) var(--my,30%),rgba(255,244,222,.55),rgba(255,244,222,0) 42%);mix-blend-mode:soft-light}
.mp-open__fig.is-lit .mp-open__glow{opacity:1}
.mp-open__tex{display:none;position:absolute;left:-8%;bottom:-9%;width:34%;aspect-ratio:4/3;margin:0;overflow:hidden;border:6px solid var(--mp-paper);background:#3a2a1a;will-change:transform}
.mp-open__tex picture,.mp-open__tex img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.mp-open__sheen{position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.2) 50%,transparent 58%);transform:translateX(-60%);animation:mp-sheen 11s var(--mp-ease) 2s infinite}
@keyframes mp-sheen{0%,70%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.mp-open__cap{margin:.75rem 0 0;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mp-muted);text-align:right}
@media (min-width:768px){.mp-open__tex{display:block;left:1rem;bottom:-1.25rem;width:30%}.mp-open__cap{padding-left:34%}}
@media (min-width:1024px){.mp-open__tex{left:-8%;bottom:-9%;width:34%}.mp-open__cap{padding-left:30%}}
@media (min-width:1024px){
  .mp-open{padding-top:clamp(2.5rem,1rem + 3vw,5rem)}
  .mp-open__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2.5rem,1rem + 4vw,6rem)}
  .mp-open__fig{aspect-ratio:5/4}
}

/* строка проверяемых фактов */
.mp-proof{list-style:none;margin:clamp(3rem,2rem + 4vw,6rem) 0 0;padding:0;display:grid;gap:0 2rem;grid-template-columns:1fr 1fr;border-top:1px solid var(--mp-ink)}
.mp-proof li{padding:1.4rem 0 1.6rem;border-bottom:1px solid var(--mp-line)}
.mp-proof b{display:block;margin-bottom:.45rem;font:400 clamp(1.45rem,1.2rem + .9vw,2rem)/1.1 var(--mp-font-display);color:var(--mp-ink)}
.mp-proof li>span{display:block;font-size:.875rem;line-height:1.55;font-weight:300;color:var(--mp-muted);max-width:19em}
@media (min-width:1024px){.mp-proof{grid-template-columns:repeat(4,1fr)}.mp-proof li{border-bottom:0;padding-right:1rem}}
@media (max-width:480px){.mp-proof{grid-template-columns:1fr}}

/* ---------- подбор: двухколоночная секция ---------- */
.mp-quizsec__grid{display:grid;gap:clamp(2rem,1rem + 3vw,4rem)}
.mp-quizsec .mp-h2,.mp-arch .mp-h2{color:#fff}
.mp-quizsec .mp-lead,.mp-arch .mp-lead{color:#cfccc4}
.mp-quizsec__panel{min-width:0;padding:clamp(1.25rem,.5rem + 2.4vw,2.5rem);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035)}
.mp-quizsec__step{margin:0 0 .75rem;font:400 .75rem/1 var(--mp-font-text);letter-spacing:.2em;text-transform:uppercase;color:#a9a69d}
.mp-quizsec__q{margin:0 0 1.5rem;font:300 clamp(1.7rem,1.3rem + 1.4vw,2.5rem)/1.12 var(--mp-font-display);color:#fff;text-wrap:balance}
.mp-quizsec__opts{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
@media (min-width:640px){.mp-quizsec__opts{grid-template-columns:1fr 1fr}}
.mp-quizsec__opt{display:flex;align-items:center;min-height:3.5rem;box-sizing:border-box;padding:1rem 1.15rem;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:1.0625rem;line-height:1.3;text-decoration:none;transition:background .25s var(--mp-ease),border-color .25s,color .25s}
.mp-quizsec__opt:hover{background:#fff;border-color:#fff;color:var(--mp-ink)}
.mp-quizsec__opt:focus-visible{outline:2px solid var(--mp-accent);outline-offset:2px}
.mp-quizsec__more{margin:1.5rem 0 0}
.mp-quizsec__more .mp-link{color:#fff;display:inline-flex;align-items:center;min-height:44px}
@media (prefers-reduced-motion:reduce){.mp-quizsec__opt{transition:none}}
@media (min-width:1024px){
  .mp-quizsec__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(3rem,2rem + 3vw,6rem);align-items:start}
  .mp-quizsec__text{position:sticky;top:calc(var(--mp-header-h) + 2rem)}
}

/* ---------- проекты ---------- */
.mp-proj{display:grid;gap:clamp(1.25rem,.5rem + 2vw,2rem);grid-template-columns:1fr}
.mp-proj__item{display:block;min-width:0}
.mp-proj__item .mp-fig{aspect-ratio:4/3}
.mp-proj__item .mp-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-proj__item--0 .mp-proj__name{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
@media (min-width:768px){
  .mp-proj{grid-template-columns:repeat(2,1fr)}
  .mp-proj__item--0,.mp-proj__item--1{grid-column:auto}
  .mp-proj__item--0 .mp-fig,.mp-proj__item--1 .mp-fig{aspect-ratio:3/2}
}
@media (min-width:1024px){
  .mp-proj{grid-template-columns:repeat(12,1fr)}
  .mp-proj__item--0{grid-column:span 7}
  .mp-proj__item--1{grid-column:span 5}
  .mp-proj__item--2,.mp-proj__item--3,.mp-proj__item--4{grid-column:span 4}
  .mp-proj__item--0 .mp-fig,.mp-proj__item--1 .mp-fig{aspect-ratio:auto;height:clamp(300px,34vw,560px)}
  .mp-proj__item--2 .mp-fig,.mp-proj__item--3 .mp-fig,.mp-proj__item--4 .mp-fig{aspect-ratio:4/3}
}

/* ---------- проектировщикам ---------- */
.mp-arch__head{max-width:44rem;margin-bottom:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.mp-arch__head .mp-lead{margin-top:1.5rem}
.mp-path{list-style:none;margin:0;padding:0;display:grid;gap:0}
.mp-path li{display:grid;grid-template-columns:3.25rem 1fr;gap:.35rem 1rem;padding:1.6rem 0;border-top:1px solid rgba(255,255,255,.18)}
.mp-path li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.mp-path__n{grid-row:1/span 2;font:300 1.75rem/1 var(--mp-font-display);color:var(--mp-accent)}
.mp-path .mp-h3{color:#fff;font-size:1.5rem}
.mp-path p{grid-column:2;margin:.25rem 0 0;font-weight:300;color:#bdbab1}
.mp-arch__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2.5rem;margin:clamp(2rem,1rem + 3vw,3.5rem) 0 0}
.mp-arch .mp-link{color:#fff}
@media (min-width:1024px){
  .mp-path{grid-template-columns:repeat(4,1fr);gap:var(--mp-s6)}
  .mp-path li{display:block;border-top:1px solid #fff;border-bottom:0!important;padding:1.5rem 0 0}
  .mp-path__n{display:block;margin-bottom:2.25rem;font-size:2.5rem}
}

.mp-num{font-family:var(--mp-font-text);font-weight:300;letter-spacing:-.02em}
.mp-quizsec__text .mp-lead{margin-top:1.5rem}
@media (max-width:639px){
  .mp-open__actions .mp-btn{width:100%}
  .mp-open__title{font-size:clamp(1.95rem,1.4rem + 2.6vw,2.3rem)}
}
@media (prefers-reduced-motion:reduce){
  .mp-open__sheen{animation:none;opacity:0}
  .mp-open__glow{transition:none}
}

/* ---------- витрина примерки рисунка пола (.mvt): готовые кадры, без движка ---------- */
.mvt__grid{display:grid;gap:2rem}
.mvt__lead{margin-top:1.5rem}
.mvt__opts{display:none}
.mvt__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;margin:2rem 0 0}
.mvt__view{min-width:0}
.mvt__stage{display:flex;gap:.75rem;margin:0 calc(var(--mp-gutter) * -1);padding:0 var(--mp-gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--mp-gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.mvt__stage::-webkit-scrollbar{display:none}
.mvt__fig{flex:0 0 84%;margin:0;scroll-snap-align:start;min-width:0}
.mvt__fig picture,.mvt__fig img{display:block;width:100%;height:auto;aspect-ratio:960/638;object-fit:cover;background:#2a2622}
.mvt__fig figcaption{display:flex;flex-direction:column;gap:.4rem;margin-top:.7rem;font-size:.8125rem;line-height:1.5;color:var(--mp-muted)}
.mvt__cap b{font-weight:400;color:var(--mp-ink)}
.mvt__go{align-self:flex-start;font:400 .6875rem/1.2 var(--mp-font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--mp-ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.2rem}
.mvt__fine{margin:1rem 0 0;font-size:.8125rem;line-height:1.55;color:var(--mp-muted);max-width:44em}
@media (max-width:639px){.mvt__acts .mp-btn{width:100%}}
@media (min-width:640px) and (max-width:1199px){.mvt__acts .mp-btn{padding:0 1.25rem;white-space:nowrap}}
@media (min-width:768px){
  .mvt__grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,1rem + 4vw,5.5rem);align-items:center}
  .mvt__opts{display:block;margin:2rem 0 0;border-top:1px solid var(--mp-line)}
  .mvt__opt{position:relative;display:flex;align-items:center;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--mp-line);cursor:pointer}
  .mvt__r{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
  .mvt__sw{flex:none;width:2.5rem;height:2.5rem;background-size:cover;background-position:left center;border:1px solid rgba(0,0,0,.15);transition:outline-color .25s}
  .mvt__ot{display:flex;flex-direction:column;gap:.15rem;min-width:0}
  .mvt__on{font:400 1.125rem/1.25 var(--mp-font-display);color:var(--mp-muted);transition:color .25s}
  .mvt__od{font-size:.8125rem;line-height:1.3;color:var(--mp-muted)}
  .mvt__opt::after{content:"";position:absolute;right:0;top:50%;width:1.5rem;height:1px;background:var(--mp-ink);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--mp-ease)}
  .mvt__opt:hover .mvt__on{color:var(--mp-ink)}
  .mvt__r:checked~.mvt__sw{outline:2px solid var(--mp-ink);outline-offset:2px}
  .mvt__r:checked~.mvt__ot .mvt__on{color:var(--mp-ink)}
  .mvt__opt:has(.mvt__r:checked)::after{transform:scaleX(1)}
  .mvt__r:focus-visible~.mvt__sw{outline:2px solid var(--mp-accent);outline-offset:2px}
  /* все кадры в одной ячейке, виден выбранный. Невыбранные — display:none: их lazy-картинки не грузятся,
     пока кадр не выбран (или пока на пункт не навели курсор — тогда viz-teaser подогревает загрузку). */
  .mvt__stage{display:grid;margin:0;padding:0;overflow:visible}
  .mvt__fig{grid-area:1/1;display:none;opacity:0;transition:opacity .6s var(--mp-ease),display .6s allow-discrete}
  .mvt__fig--herring{display:block;opacity:1}
  .mvt:has(.mvt__r:checked) .mvt__fig--herring{display:none;opacity:0}
  .mvt:has(.mvt__r[value=herring]:checked) .mvt__fig--herring,
  .mvt:has(.mvt__r[value=chevron]:checked) .mvt__fig--chevron,
  .mvt:has(.mvt__r[value=versailles]:checked) .mvt__fig--versailles,
  .mvt:has(.mvt__r[value=deck]:checked) .mvt__fig--deck,
  .mvt:has(.mvt__r[value=before]:checked) .mvt__fig--before{display:block;opacity:1}
  @starting-style{.mvt__fig{opacity:0}}
  .mvt__fig figcaption{flex-direction:row;align-items:baseline;justify-content:space-between;gap:1.5rem}
  .mvt__go{flex:none}
}
@media (prefers-reduced-motion:reduce){.mvt__fig,.mvt__on,.mvt__opt::after{transition:none}}
