/* ═══ Полотно «Модели» в шапке ══════════════════════════════
   Механика Л-Пак: пункт меню раскрывает заливку на весь экран,
   в ней сетка плиток с 3D. Полотно одно, цвет один.
   ═══════════════════════════════════════════════════════════ */

.nav__drop {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
}
.nav__car { font-size: .8em; transition: transform var(--fast); }
.nav__drop[aria-expanded="true"] .nav__car { transform: rotate(180deg); }

/* Пока полотно открыто, шапка живёт на нём: светлая подложка с блюром
   размывала бы заливку и выглядела грязным пятном. */
body.menu-open .hdr {
  background: var(--brand);
  backdrop-filter: none;
  border-bottom-color: color-mix(in srgb, var(--on-brand) 24%, transparent);
}
body.menu-open .hdr .nav,
body.menu-open .hdr .logo { color: var(--on-brand); }
body.menu-open .hdr .nav a { color: var(--on-brand); }
body.menu-open .hdr .nav a:hover,
body.menu-open .hdr .nav__drop:hover { color: var(--on-brand); }
body.menu-open .hdr__btn { background: var(--brand-deep); color: var(--on-brand); }

/* Полотно занимает не весь экран: снизу остаётся открытая полоса
   страницы. Курсор уводят туда — панель закрывается, и при этом
   по плиткам можно водить сколько угодно. */
.mpanel {
  position: fixed; inset: 0 0 auto; z-index: 90;
  /* Шапка не ловит указатель, чтобы не перехватывать клики мимо
     планки, — но полотно её потомок, и клики по плиткам уходили
     насквозь в страницу. Возвращаем явно. */
  pointer-events: auto;
  /* Высота по содержимому, но не во весь экран: снизу должна
     остаться полоса страницы, куда уводят курсор. Контент при этом
     не режется — плитки считают свою высоту от того же svh. */
  height: auto;
  max-height: 88svh;
  background: var(--brand);
  /* Раскрываем шторкой сверху, а не гасим прозрачностью. */
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .46s var(--spring), visibility .46s;
  overflow-y: auto;
  box-shadow: 0 2rem 5rem -2rem rgba(18, 19, 15, .5);
}
.mpanel.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
/* закрытое полотно не должно перехватывать клики по странице */
.mpanel:not(.is-open) { pointer-events: none; }
body.menu-open { overflow: hidden; }


.mpanel__in {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  padding: 8svh var(--gut) 3svh;
}


.mpanel__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 1.6rem;
  /* отступы от высоты экрана: на невысоких мониторах фиксированные
     rem съедали место, которого не хватало нижнему ряду */
  padding-bottom: 1.6svh;
  border-bottom: 1px solid color-mix(in srgb, var(--on-brand) 24%, transparent);
  margin-bottom: 2svh;
}
.mpanel__tag {
  margin: 0; font-size: 1.2rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-brand);
}
.mpanel__note { margin: 0; font-size: 1.5rem; color: var(--on-brand); }

/* ── плитки ── */
/* Сетка по числу плиток: при одной-двух моделях полоса во всю ширину
   выглядит пустой, поэтому колонки держим в разумном диапазоне
   и центрируем ряд. */
/* Шесть плиток: три в ряд на широком экране, два ряда. */
.mpanel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--on-brand) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-brand) 20%, transparent);
}
@media (max-width: 1100px) { .mpanel__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .mpanel__grid { grid-template-columns: 1fr; } }

/* Высота плитки считается от экрана: два ряда, шапка полотна и
   отступы должны уложиться в его высоту, иначе нижний ряд обрезало
   вместе с подписями.

   26svh на ряд: два ряда — 52%, шапка с отступами — ещё около 22%,
   остаётся запас, и полоса страницы снизу видна. */
/* Жёсткая высота, а не минимальная: min-height не ограничивает
   сверху, и плитка раздувалась полем модели до 356 px при
   заложенных 234 — нижний ряд уезжал за край полотна. */
.mtile {
  position: relative;
  display: flex; flex-direction: column;
  height: 33svh;
  min-height: 0;
  overflow: hidden;
  padding: clamp(1.4rem, 2svh, 2.4rem);
  background: var(--brand);
  color: var(--on-brand);
  text-decoration: none;
  transition: background var(--fast);
}
.mtile:hover { background: var(--brand-deep); }

/* поле модели: свой канвас на плитку */
.mtile__view {
  position: relative; display: block; flex: 1;
  min-height: 0;
  opacity: 0;
  transition: opacity .8s var(--spring);
}
.mtile__view.is-ready { opacity: 1; }
.mtile__view canvas {
  display: block; width: 100%; height: 100%;
  /* канвас не должен перехватывать клик — плитка целиком ссылка */
  pointer-events: none;
}

.mtile__tag {
  position: absolute; top: 2rem; left: 2.4rem;
  padding: .4rem 1.1rem;
  border-radius: 10rem;
  background: color-mix(in srgb, var(--on-brand) 14%, transparent);
  color: var(--on-brand);
  font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase;
  font-style: normal;
}

/* Плитка «свой размер»: вместо модели — знак плюс, рамка пунктиром. */
.mtile--custom {
  border: 1px dashed color-mix(in srgb, var(--on-brand) 45%, transparent);
  background: color-mix(in srgb, var(--brand-deep) 60%, var(--brand));
}
.mtile--custom:hover { background: var(--brand-deep); }

.mtile__plus {
  display: block; flex: 1;
  min-height: 0;
  position: relative;
}
.mtile__plus::before,
.mtile__plus::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--on-brand);
  transform: translate(-50%, -50%);
  transition: transform .45s var(--spring);
}
.mtile__plus::before { width: 6rem; height: 3px; }
.mtile__plus::after { width: 3px; height: 6rem; }
.mtile--custom:hover .mtile__plus::before { transform: translate(-50%, -50%) scaleX(1.4); }
.mtile--custom:hover .mtile__plus::after { transform: translate(-50%, -50%) scaleY(1.4); }

.mtile__b { display: block; margin-top: auto; }
.mtile__n {
  display: block;
  font-family: "Unbounded", sans-serif; font-weight: 700;
  font-size: clamp(2.2rem, 2.4vw, 3.2rem);
  letter-spacing: -.03em; line-height: 1;
  color: var(--ink);
}
.mtile__d {
  display: block; margin-top: .8rem;
  font-size: 1.4rem; line-height: 1.45;
  color: var(--on-brand);
}
.mtile__go {
  margin-top: 1.6rem;
  font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-brand);
  opacity: 0; transform: translateX(-.6rem);
  transition: opacity var(--fast), transform var(--fast);
}
.mtile:hover .mtile__go { opacity: 1; transform: none; }

@media (max-width: 700px) {
  .mpanel__in { padding-top: 9rem; }
  .mtile { min-height: 26rem; }
}