/* ============================================================
   MegaNut — PAGE: production (Производство). Значения из
   design-source/Proizvodstvo.dc.html. Общие компоненты — в
   components.css. База 1920, брейкпоинты только 1199/767.
   ============================================================ */

/* ── 6.1 HERO (полноэкранный, по центру) ────────────────────── */
.mn-prhero__stage {
  position: relative;
  margin-top: var(--mn-header-overlap);
  height: var(--mn-hero-h);
  overflow: hidden;
}
.mn-prhero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mn-prhero__overlay {
  position: absolute;
  inset: 0;
  background: var(--mn-grad-prod-hero);
}
.mn-prhero__content {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px var(--mn-pad-hero-side) 34px;
  color: var(--mn-white);
}
.mn-prhero__title {
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h1-page);
  line-height: var(--mn-h1-page-lh);
  letter-spacing: var(--mn-h1-page-ls);
}
.mn-prhero__subtitle {
  margin-top: 16px;
  font-size: var(--mn-t-body-18);
  color: var(--mn-on-img-78);
  max-width: 56ch;
}

/* ── 6.2 УСЛОВИЯ И ФОРМА РАБОТЫ ──────────────────────────────── */
.mn-prcond {
  background: var(--mn-white);
}
.mn-prcond__grid {
  max-width: var(--mn-container);
  margin: 0 auto;
  min-height: 100vh;
  box-sizing: border-box;
  padding: var(--mn-sec-pad-v-xl) var(--mn-pad-side);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--mn-gap-prod-cols);
  align-items: center;
}
.mn-prcond__heading {
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-conditions);
  line-height: var(--mn-h2-conditions-lh);
  letter-spacing: var(--mn-h2-conditions-ls);
}
.mn-prcond__blocks {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.mn-prcond__text {
  margin-top: 9px;
  font-size: var(--mn-t-body-14);
  line-height: var(--mn-lh-body);
  color: var(--mn-muted);
}
.mn-prcond__media {
  border-radius: var(--mn-r-24);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 420px;
  width: 100%;
  justify-self: end;
}
.mn-prcond__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 6.3 ВИДЕО-СЕКЦИЯ (полноэкранная) ────────────────────────── */
.mn-video--prod .mn-video__media {
  height: var(--mn-hero-h);
}
.mn-video__overlay--prod {
  background: var(--mn-grad-prodvideo);
}
.mn-video__pillwrap {
  position: absolute;
  top: clamp(34px, 5vh, 64px);
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: var(--mn-container);
  padding: 0 var(--mn-pad-side);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  z-index: 2;
}
.mn-video__pill {
  margin: 0;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-t-plant-badge);
  letter-spacing: var(--mn-t-plant-badge-ls);
  color: var(--mn-white);
  background: rgba(4, 4, 4, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: var(--mn-shadow-video-pill);
  border-radius: var(--mn-r-pill);
  padding: 11px 24px;
}
.mn-video__play--prod {
  width: var(--mn-ic-play-prod);
  height: var(--mn-ic-play-prod);
  background: rgba(255, 255, 255, 0.92);
  color: var(--mn-ink);
}
.mn-video__play--prod:hover {
  background: var(--mn-gold);
}

/* ── 6.4 НАШЕ ОБОРУДОВАНИЕ ───────────────────────────────────── */
.mn-preq {
  background: var(--mn-warm);
}
.mn-preq__grid {
  max-width: var(--mn-container);
  margin: 0 auto;
  min-height: 100vh;
  box-sizing: border-box;
  padding: var(--mn-sec-pad-v-xl) var(--mn-pad-side);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--mn-gap-equipment);
  align-items: center;
}
.mn-preq__heading {
  margin: 16px 0 0;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-equipment);
  line-height: var(--mn-h2-equipment-lh);
  letter-spacing: var(--mn-h2-equipment-ls);
  max-width: 12ch;
}
.mn-preq__text {
  margin: 22px 0 0;
  font-size: var(--mn-t-body-sm);
  line-height: var(--mn-lh-relaxed);
  color: var(--mn-muted);
  max-width: 42ch;
  text-wrap: pretty;
}
.mn-preq__chips {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mn-preq__chip {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--mn-shadow-chip);
  border-radius: var(--mn-r-pill);
  padding: 15px 26px;
  font-size: var(--mn-t-body-15);
  line-height: var(--mn-lh-text);
  color: var(--mn-ink);
}
.mn-preq__collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.mn-preq__col-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mn-preq__cell {
  border-radius: var(--mn-r-24);
  overflow: hidden;
}
.mn-preq__cell--sq {
  aspect-ratio: 1 / 1;
}
.mn-preq__cell--sq .mn-preq__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mn-preq__cell--tall {
  position: relative;
  min-height: 100%;
}
.mn-preq__cell--tall .mn-preq__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 6.5 ПЛОЩАДКИ — ПЕРЕКЛЮЧАТЕЛЬ (fade) ─────────────────────── */
.mn-plants {
  background: var(--mn-white);
}
.mn-plants__head {
  /* content-box: max-width 1580 + h-padding (.mn-container) = 1716 на 1920 (rect x=102 w=1716).
     width:auto перебивает .mn-container{width:100%} — блок-ребёнок не оверфлоуит ниже 1716. */
  box-sizing: content-box;
  width: auto;
  padding-block: var(--mn-sec-pad-v-xl) 0;
}
.mn-plants__heading {
  margin: 0 auto;
  text-align: center;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-conditions);
  line-height: var(--mn-h2-conditions-lh);
  letter-spacing: var(--mn-h2-conditions-ls);
  max-width: 18ch;
}
.mn-plants__panelwrap {
  max-width: var(--mn-container);
  margin: clamp(32px, 4vh, 52px) auto 0;
  padding: 0 var(--mn-pad-side);
  box-sizing: border-box;
}
.mn-plants__panel {
  /* Пропорция макета: aspect-ratio 21/10 (DESIGN_SPEC §6.5), но реализована через
     grid-стек + ratio-спейсер, чтобы высота НЕ зависела от высоты окна и панель
     НИКОГДА не обрезала контент. Все слои площадок выкладываются в одну grid-ячейку
     (grid 1/1) и растягиваются (align-items:stretch по умолчанию) до её высоты, а
     высота ячейки = max(ratio-спейсер ::before, самый высокий слой). Поэтому:
       • контент короче пропорции → панель = ratio-высота (вид из макета);
       • контент выше пропорции (длинные UZ/EN на 1280/1440) → панель растёт под него,
         обрезания нет ни при какой высоте окна;
       • при переключении площадок высота стабильна (= самому высокому из 3 слоёв). */
  position: relative;
  display: grid;
  border-radius: var(--mn-r-28);
  overflow: hidden;
  background: var(--mn-ink);
}
.mn-plants__panel > * {
  grid-column: 1;
  grid-row: 1;
}
.mn-plants__panel::before {
  /* ratio-спейсер: задаёт «пол» высоты = 21/10 от ширины панели. max-height кэпит
     пропорцию на >1920 (RESPONSIVE_DECISIONS §7) — кэп на спейсере, а не на панели,
     чтобы контент мог расти свободно и никогда не упирался в max-height. */
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 21 / 10;
  max-height: var(--mn-plant-panel-max-h);
}
.mn-plant {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  opacity: 0;
  transition: opacity var(--mn-dur-480) ease;
}
.mn-plant.is-active {
  opacity: 1;
}
.mn-plant.is-leaving {
  opacity: 0;
  transition: opacity var(--mn-dur-260) ease;
}
.mn-plant__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mn-plant__grad {
  position: absolute;
  inset: 0;
  background: var(--mn-grad-plant);
}
.mn-plant__body {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4.5vw, 64px);
  max-width: var(--mn-container-plant-text);
  color: var(--mn-white);
}
.mn-plant__eyebrow {
  font-family: var(--mn-font-body);
  font-size: var(--mn-eyebrow-12);
  letter-spacing: var(--mn-ls-eyebrow-18);
  text-transform: uppercase;
  color: var(--mn-gold);
}
.mn-plant__title {
  margin: 18px 0 0;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h3-plant);
  line-height: var(--mn-h3-plant-lh);
  letter-spacing: var(--mn-h3-plant-ls);
}
.mn-plant__desc {
  margin: 16px 0 0;
  font-size: var(--mn-t-body-15);
  line-height: var(--mn-lh-body);
  color: rgba(255, 255, 255, 0.92);
  max-width: 36ch;
}
.mn-plant__video {
  /* content-box: width:fit-content + padding/border снаружи (макет rect w=198 h=56). */
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin-top: 28px;
  background: rgba(4, 4, 4, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--mn-white);
  border-radius: var(--mn-r-pill);
  padding: 10px 10px 10px 22px;
  font-size: var(--mn-t-body-15);
  transition: background var(--mn-dur-240) ease;
}
.mn-plant__video:hover {
  background: rgba(4, 4, 4, 0.68);
  color: var(--mn-white);
}
.mn-plant__video-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--mn-r-circle);
  background: var(--mn-bg);
  color: var(--mn-ink);
  flex: 0 0 auto;
}
.mn-plant__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 46px);
  margin-top: clamp(28px, 4vh, 44px);
}
.mn-plant__stat {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: 12px;
  min-width: 110px;
}
.mn-plant__stat-value {
  font-family: var(--mn-font-display);
  font-size: var(--mn-num-stat-plant);
  line-height: 1;
  letter-spacing: var(--mn-num-stat-plant-ls);
}
.mn-plant__stat-label {
  margin-top: 8px;
  font-size: var(--mn-eyebrow-13);
  color: rgba(255, 255, 255, 0.7);
}
.mn-plants__nav {
  /* content-box: max-width 1580 + h-padding = 1716 (макет rect x=102 w=1716). */
  box-sizing: content-box;
  max-width: var(--mn-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: clamp(24px, 3.2vh, 36px) var(--mn-pad-side) 0;
}
.mn-plants__arrow {
  /* content-box: 52 + border 1px = 54 (макет — span 54×54).
     padding:0 гасит UA-паддинг <button>, иначе content-box его добавит (→ 66×56). */
  box-sizing: content-box;
  padding: 0;
  width: var(--mn-ic-52);
  height: var(--mn-ic-52);
  border-radius: var(--mn-r-circle);
  border: 1px solid rgba(4, 4, 4, 0.2);
  display: grid;
  place-items: center;
  color: var(--mn-ink);
  transition: background var(--mn-dur-220) ease;
}
.mn-plants__arrow:hover {
  background: var(--mn-warm);
}
.mn-plants__dots {
  display: flex;
  gap: 8px;
}
.mn-plants__dot {
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: rgba(4, 4, 4, 0.2);
  transition:
    background var(--mn-dur-220) ease,
    width var(--mn-dur-220) ease;
}
.mn-plants__dot.is-active {
  width: 32px;
  background: var(--mn-ink);
}

/* ── 6.6 ГАЛЕРЕЯ (bento) ─────────────────────────────────────── */
.mn-bento {
  background: var(--mn-white);
}
.mn-bento .mn-container {
  /* content-box: max-width 1580 + h-padding = 1716 на 1920 (макет «Галерея» rect x=102 w=1716).
     width:auto перебивает .mn-container{width:100%} — блок-ребёнок без оверфлоу ниже 1716. */
  box-sizing: content-box;
  width: auto;
  padding-block: var(--mn-sec-pad-v-xl);
}
.mn-bento__heading {
  margin: 0;
  text-align: center;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-gallery);
  /* макет: заголовок без line-height → normal (body:1.6 давал +17.2px высоты галереи) */
  line-height: normal;
  letter-spacing: var(--mn-h2-gallery-ls);
}
.mn-bento__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--mn-bento-row);
  gap: var(--mn-gap-cards-16);
  margin-top: clamp(32px, 4vh, 52px);
}
.mn-bento__cell {
  grid-column: span var(--col-span, 1);
  grid-row: span var(--row-span, 1);
  border-radius: var(--mn-r-24);
  overflow: hidden;
}
.mn-bento__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   ≤1199px — планшеты. Двухколоночники → стек; bento → 2 кол, span сброс.
   ========================================================================== */
@media (max-width: 1199px) {
  @supports (height: 100svh) {
    .mn-prhero__stage,
    .mn-video--prod .mn-video__media {
      height: 100svh;
    }
  }

  /* Условия: текст сверху, фото снизу (full-width) */
  .mn-prcond__grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 48px);
    min-height: 0;
  }
  .mn-prcond__media {
    max-width: 100%;
    justify-self: stretch;
    aspect-ratio: 16 / 10;
  }

  /* Оборудование: текст+чипы сверху, коллаж снизу */
  .mn-preq__grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 48px);
    min-height: 0;
  }

  /* Площадки: ratio-спейсер убираем (RESPONSIVE_DECISIONS), высоту держит min-height
     и сам контент (grid-стек всё равно растёт под самый высокий слой); текст в 1 колонку */
  .mn-plants__panel {
    min-height: 480px;
  }
  .mn-plants__panel::before {
    content: none;
  }
  .mn-plant__body {
    max-width: 100%;
  }

  /* Bento: 2 кол, все span сброшены */
  .mn-bento__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(200px, 28vh, 320px);
  }
  .mn-bento__cell {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ==========================================================================
   ≤767px — телефоны. Видео ниже, площадки/галерея компактнее.
   ========================================================================== */
@media (max-width: 767px) {
  .mn-prhero__content {
    padding: 96px 24px 34px;
  }
  .mn-video--prod .mn-video__media {
    height: 56vh;
  }
  @supports (height: 100svh) {
    .mn-video--prod .mn-video__media {
      height: 56svh;
    }
  }
  .mn-plants__panel {
    min-height: 400px;
  }
  .mn-plant__body {
    padding: 24px 20px;
  }
  .mn-plant__stats {
    gap: 20px;
  }
  .mn-bento__grid {
    grid-auto-rows: 180px;
  }
}