/* =========================================================
   МосКул — главная: 01 главный экран, 02 каталог, 03 редакционный блок.
   Все размеры для экрана 1440 сняты с макета, в единицах --u.
   ========================================================= */

/* ---------------- 01 главный экран ---------------- */
.mk-hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(1000*var(--u));display:flex;flex-direction:column}
/* фото справа, левая кромка растворяется в фоне: текст на чистом поле, а не на картинке */
.mk-hero__media{position:absolute;top:0;right:0;bottom:0;left:calc(380*var(--u));z-index:-2;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.mk-hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;scale:1.06;will-change:transform}
.mk-hero__wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(238,240,240,.55) 0,rgba(238,240,240,0) 18%,rgba(238,240,240,0) 70%,rgba(238,240,240,.9) 100%)}
.mk-hero__body{padding-top:calc(150*var(--u))}
.mk-hero__h{font-size:calc(133*var(--u));line-height:.94}
.mk-hero__sub{margin-top:calc(26*var(--u));font:500 calc(24.5*var(--u))/1.2 var(--mk-f-body);letter-spacing:.02em;text-transform:uppercase;color:var(--mk-ink-2)}
.mk-hero__cta{margin-top:calc(40*var(--u));height:max(50px,calc(65*var(--u)))}
.mk-hero__facts{display:grid;grid-template-columns:calc(317*var(--u)) calc(457*var(--u)) calc(472*var(--u));margin-top:auto;padding-bottom:calc(58*var(--u))}
.mk-hero__facts>div{min-height:calc(146*var(--u));padding-left:calc(82*var(--u));border-right:1px solid var(--mk-line-2)}
.mk-hero__facts>div:first-child{padding-left:0}
.mk-hero__facts dt{font:500 calc(52*var(--u))/1.02 var(--mk-f-head);color:var(--mk-ink)}
.mk-hero__facts>div:first-child dt{font-size:calc(60*var(--u));letter-spacing:-.02em}
.mk-hero__facts dd{margin-top:calc(14*var(--u));font-size:calc(19.5*var(--u));line-height:1.72;color:var(--mk-muted)}

/* ---------------- 02 каталог: рельс карточек ---------------- */
.mk-kat{padding:calc(130*var(--u)) 0 calc(96*var(--u))}
.mk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--mk-gap)}
.mk-head__sub{margin-top:calc(19*var(--u));max-width:calc(620*var(--u));font-size:calc(27*var(--u));line-height:1.26;color:var(--mk-ink-2)}
.mk-head .mk-link{flex:none;margin-bottom:calc(36*var(--u))}
.mk-kat__h{font-size:calc(92*var(--u));line-height:.9}
.mk-kat__track{display:flex;gap:calc(24*var(--u));margin-top:calc(37*var(--u));padding-inline:var(--mk-pad);scroll-padding-inline:var(--mk-pad);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.mk-kat__track::-webkit-scrollbar{display:none}
.mk-kat__track.is-drag{cursor:grabbing;scroll-snap-type:none}
.mk-kat__track.is-drag a{pointer-events:none}
.mk-kat__track::after{content:"";flex:0 0 1px}
.mk-kat__card{position:relative;flex:0 0 calc(462*var(--u));min-height:calc(569*var(--u));display:flex;flex-direction:column;border:1px solid var(--mk-line);border-top:0;scroll-snap-align:start;color:var(--mk-ink)}
.mk-kat__ph{height:calc(221*var(--u));margin-inline:-1px;overflow:hidden;background:var(--mk-line)}
.mk-kat__ph img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--mk-ease)}
.mk-kat__body{flex:1;display:flex;flex-direction:column;padding:calc(22*var(--u)) calc(24*var(--u)) calc(26*var(--u))}
.mk-kat__n{font:400 calc(21*var(--u))/1 var(--mk-f-body);color:var(--mk-ink-2)}
.mk-kat__t{margin-top:calc(30*var(--u));font-size:calc(56*var(--u));line-height:.98;transition:translate .45s var(--mk-ease)}
.mk-kat__d{margin-top:calc(24*var(--u));max-width:21em;font-size:calc(19*var(--u));line-height:1.75;color:var(--mk-muted);transition:color .35s,translate .45s var(--mk-ease)}
.mk-kat__go{margin-top:auto;align-self:flex-end;width:calc(34*var(--u));height:calc(34*var(--u));min-width:22px;min-height:22px;stroke-width:1.5;transition:translate .4s var(--mk-ease),rotate .4s var(--mk-ease),color .3s}
@media (hover:hover){
  .mk-kat__card:hover .mk-kat__ph img{scale:1.05}
  .mk-kat__card:hover .mk-kat__t{translate:calc(6*var(--u)) 0}
  .mk-kat__card:hover .mk-kat__d{color:var(--mk-ink-2);translate:calc(6*var(--u)) 0}
  .mk-kat__card:hover .mk-kat__go{translate:4px -4px;rotate:-45deg;color:var(--mk-blue)}
}
.mk-foot{display:flex;justify-content:space-between;align-items:center;margin-top:calc(40*var(--u))}

/* ---------------- 03 редакционный блок ---------------- */
.mk-ed{position:relative;isolation:isolate;overflow:hidden;min-height:calc(1000*var(--u))}
.mk-ed__media{position:absolute;top:0;right:0;bottom:0;width:calc(780*var(--u));z-index:-1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
.mk-ed__media img{width:100%;height:112%;object-fit:cover;object-position:50% 50%;will-change:transform}
.mk-ed__body{padding-top:calc(96*var(--u))}
.mk-ed__h{font-size:calc(132*var(--u));line-height:.955}
.mk-ed__p{margin-top:calc(64*var(--u));max-width:calc(660*var(--u));font-size:calc(25*var(--u));line-height:1.64;color:var(--mk-ink-2)}
.mk-ed .mk-btn{margin-top:calc(40*var(--u))}

/* ---------- сверка с макетом, проход 1 ---------- */
/* факты главного экрана прижаты к низу: auto-отступ нужен контейнеру, а не списку */
.mk-hero__body+.mk-wrap{margin-top:auto}
.mk-hero__facts{margin-top:0}
.mk-hero__sub{margin-top:calc(12*var(--u));font-size:calc(23.5*var(--u))}
.mk-hero__cta{margin-top:calc(36*var(--u));height:max(50px,calc(70*var(--u)))}
.mk-kat{padding-bottom:calc(58*var(--u))}
/* в макете у каталога и склада вместо номера раздела — свой счётчик листания */
.mk-kat__h{font-size:calc(102*var(--u))}
.mk-head__sub{margin-top:calc(4*var(--u));font-weight:500}
.mk-kat__t{font-size:calc(60*var(--u))}
.mk-kat__d{max-width:calc(320*var(--u))}
.mk-ed__body{padding-top:calc(80*var(--u))}
.mk-ed__h{font-size:calc(124*var(--u));line-height:1}
.mk-ed__p{max-width:calc(470*var(--u));font-weight:500}
.mk-ed .mk-btn{height:max(50px,calc(68*var(--u)))}

/* ---------- сверка с макетом, проход 2 ---------- */
.mk-hdr:not(.is-solid){border-color:rgba(14,26,32,.045)}
.mk-hero__h{font-size:calc(129*var(--u))}
.mk-hero__sub{margin-top:calc(2*var(--u));font-weight:600}
.mk-hero__facts dt{font-size:calc(56*var(--u))}
.mk-hero__facts>div:first-child dt{font-size:calc(64*var(--u));letter-spacing:0}
.mk-hero__facts dd{margin-top:calc(8*var(--u))}
.mk-head__sub{font-weight:600}
.mk-kat__track{margin-top:calc(22*var(--u))}
.mk-kat__t{margin-top:calc(16*var(--u));font-size:calc(57*var(--u))}
.mk-kat__d{margin-top:calc(14*var(--u))}
.mk-ed__p{max-width:none}
.mk-ed .mk-btn{margin-top:calc(22*var(--u))}

/* ---------- сверка с макетом, проход 3 ---------- */
.mk-hero__sub{margin-top:calc(8*var(--u))}
.mk-hero__cta{margin-top:calc(50*var(--u))}
.mk-kat{padding-bottom:calc(40*var(--u))}

/* ---------- фото главного экрана из макета ----------
   В самом кадре уже есть белая растушёвка слева, поэтому фото на всю
   ширину, как в макете: без своей маски и без сдвига вправо */
.mk-hero__media{left:0;-webkit-mask-image:none;mask-image:none}
.mk-hero__media img{object-position:50% 50%;scale:1.03}
.mk-hero__wash{background:linear-gradient(180deg,rgba(238,240,240,.35) 0,rgba(238,240,240,0) 14%,rgba(238,240,240,0) 78%,rgba(238,240,240,.55) 100%)}
/* на телефоне фото отдельным кадром под текстом: белую часть кадра не показываем */
@media (max-width:767px){.mk-hero__media img{object-position:80% 50%}}

/* главный кадр при загрузке чуть «садится» на место: один раз, без повторов */
@media (prefers-reduced-motion:no-preference){
  .js .mk-hero__media img{animation:mkSettle 1.1s var(--mk-ease)}
}
@keyframes mkSettle{from{scale:1.12}}

/* вторая кнопка первого экрана: спецификация из каталога */
.mk-hero__cta2{margin-left:12px}
@media (max-width:520px){.mk-hero__cta2{margin-left:0;margin-top:10px!important}.mk-hero__body .mk-hero__cta{display:flex;width:100%;justify-content:center}}
.mk-hero .mk-btn--line{background:rgba(250,251,251,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mk-hero .mk-btn--line:hover{background:var(--mk-ink)}
/* 11.11: факты первого экрана читаются и поверх фото (погрузчик под «Москва + область») */
@media (min-width:768px){.mk-hero__facts dt,.mk-hero__facts dd{text-shadow:0 0 14px rgba(238,240,240,.95),0 0 4px rgba(238,240,240,.9)}}
/* 11.11: тёмные места фото под текстом первого экрана. Светлая подложка под фактами
   и кнопками, шапка поверх фото матовая, вторая кнопка сплошная */
@media (min-width:768px){
  .mk-hero__wash{background:
    radial-gradient(70% 46% at 22% 100%,rgba(238,240,240,.96) 0,rgba(238,240,240,.88) 48%,rgba(238,240,240,0) 100%),
    linear-gradient(90deg,rgba(238,240,240,.9) 0,rgba(238,240,240,.72) 46%,rgba(238,240,240,0) 68%),
    linear-gradient(180deg,rgba(238,240,240,.35) 0,rgba(238,240,240,0) 14%,rgba(238,240,240,0) 78%,rgba(238,240,240,.55) 100%)}
  .mk-hdr:not(.is-solid){background:rgba(238,240,240,.72);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}
  .mk-hero .mk-btn--line{background:rgba(250,251,251,.94)}
}

/* 11.11: первый экран вписан в окно на любом разрешении. Макет рассчитан на 16:10,
   а на экранах 16:9 (1366×768, 1536×864, 1920×1080) низ с фактами уходил за край.
   Внутри экрана единица --u берётся меньшей из ширинной и высотной: макет высотой
   1000 единиц ровно занимает окно и сохраняет пропорции. --hv — высота, доступная
   экрану: до 1024 px снизу висит панель «Позвонить / Спецификация» в 70 px.
   Шапка живёт вне экрана со своим размером, отступ сверху — её высота плюс зазор.
   На очень низких окнах единица не меньше .6px: экран чуть выше окна, текст не мельчит.
   Тянуть экран на всю высоту окна — только в горизонтальном окне: на вертикальном
   планшете между кнопками и фактами иначе остаётся пустая полоса. */
@media (min-width:768px){
  .mk-hero{
    --hv:100svh;
    --u:clamp(.6px, min(clamp(.64px, calc(100vw / 1600), 1.2px), calc(var(--hv) / 1000)), 1.2px);
    min-height:calc(1000 * var(--u))}
  .mk-hero__body{padding-top:calc(var(--mk-hdr) + 68 * var(--u))}
}
@media (min-width:768px) and (max-width:1023px){.mk-hero{--hv:calc(100svh - 70px)}}
@media (min-width:768px) and (orientation:landscape){.mk-hero{min-height:max(calc(1000 * var(--u)), var(--hv))}}