/* ==========================================================================
   NOMADO — Секция «Миссия, видение и ценности» (белый фон)
   Полноширинная редакционная структура: миссия/видение сверху, ценности —
   крупные строки во всю ширину. Насыщенный оранж (яркие цифры + сплошные
   оранжевые чипы) как акцент — сочно, не блёкло.
   ========================================================================== */

.mvv {
  --ink: #14100e;
  --muted: #6f645e;
  position: relative;
  padding-block: var(--nm-section-gap);
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
/* огромная фирменная фигура на фоне — во всю ширину ЭКРАНА (не контейнера) */
/* обёртка: full-bleed 100vw, клипует шейп по краю экрана, а не контейнера */
.mvv__shape {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; overflow: hidden; z-index: 0; pointer-events: none;
}
.mvv__shape span {
  position: absolute; top: 50%; left: 42%; transform: translate(-50%, -50%) rotate(-6deg);
  width: 180vw; aspect-ratio: 2666 / 2958;
  background: url('../shapes/shape.svg') center / contain no-repeat;
  opacity: .06; filter: grayscale(1) brightness(.35);
}
.mvv__inner { position: relative; z-index: 1; width: 100%; max-width: var(--nm-content);
  margin-inline: auto; padding-inline: var(--nm-gutter); }

/* --------------------------------------------------- миссия / видение */
.mvv__pillars {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.2vw, 32px);
  align-items: stretch; margin-bottom: clamp(46px, 5.5vw, 88px);
}
.mvv__pillar {
  position: relative; overflow: hidden; padding: clamp(28px, 3vw, 46px);
  border-radius: var(--nm-radius); color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(120% 92% at 86% -8%, rgba(242, 53, 0, .30) 0%, rgba(120, 30, 0, .12) 42%, transparent 68%),
    linear-gradient(152deg, #3A0E02 0%, #210600 56%, #120400 100%);
  box-shadow: 0 34px 66px -40px rgba(0, 0, 0, .85);
}
.mvv__pillar::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../bg/world-map-dots.webp') center / cover no-repeat; opacity: .06;
}
.mvv__pillar > * { position: relative; z-index: 1; }
.mvv__label {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: clamp(16px, 1.9vw, 26px);
  font-size: clamp(.74rem, .95vw, .86rem); font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: #fff;
}
.mvv__label::before { content: ""; width: 13px; height: 13px; border-radius: 3px;
  background: var(--nm-orange); box-shadow: 0 0 16px rgba(242, 53, 0, .7); }
.mvv__statement { margin: 0; color: rgba(255, 255, 255, .92); font-weight: 400; letter-spacing: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.32rem); line-height: 1.5; }

/* светлый вариант карточки (миссия) */
.mvv__pillar--light {
  color: var(--ink); background: #fff; border-color: rgba(20, 16, 14, .1);
  box-shadow: 0 26px 54px -40px rgba(20, 16, 14, .45);
}
.mvv__pillar--light::after { content: none; }
.mvv__pillar--light .mvv__label { color: var(--nm-orange); }
.mvv__pillar--light .mvv__statement { color: var(--ink); }
.mvv__pillar--light .mvv__short li { color: #fff; background: var(--nm-orange);
  box-shadow: 0 12px 26px -14px rgba(242, 53, 0, .9); }
/* краткая версия миссии — сплошные оранжевые чипы */
.mvv__short { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(18px, 2vw, 26px) 0 0; padding: 0; list-style: none; }
.mvv__short li {
  font-weight: 700; font-size: clamp(.86rem, 1vw, .98rem); color: var(--nm-orange);
  padding: .55em 1.1em; border-radius: var(--nm-radius-pill);
  background: #fff; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------ ценности */
.mvv__values-head { margin: 0 0 clamp(22px, 2.6vw, 40px); display: flex; align-items: baseline;
  justify-content: center; gap: .7em; }
.mvv__values-head h3 {
  margin: 0; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(1.9rem, 3.8vw, 3.1rem); color: var(--ink);
}
.mvv__values-head span { font-weight: 800; color: var(--nm-orange);
  font-size: clamp(.9rem, 1.1vw, 1.05rem); font-variant-numeric: tabular-nums; }

.mvv__values { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 26px); }
/* карточка ценности — во всю ширину: текст слева, область под иконку справа */
.value {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr clamp(240px, 30%, 350px);
  gap: clamp(24px, 3vw, 48px); align-items: center;
  padding: clamp(26px, 2.6vw, 42px);
  background: #fff; border: 1px solid rgba(20, 16, 14, .1); border-radius: var(--nm-radius);
  box-shadow: 0 24px 50px -38px rgba(20, 16, 14, .4);
  transition: transform .35s cubic-bezier(.19, .9, .22, 1), border-color .3s ease, box-shadow .3s ease;
}
.value:hover { transform: translateY(-5px); border-color: rgba(242, 53, 0, .42);
  box-shadow: 0 30px 56px -34px rgba(20, 16, 14, .5); }
.value__body { display: flex; flex-direction: column; min-width: 0; }
/* скошенный оранжевый тег с номером (только десктоп) */
.value__num {
  align-self: flex-start; margin-bottom: clamp(14px, 1.6vw, 20px);
  position: relative; display: inline-grid; place-items: center;
  padding: .28em .55em; color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums; font-size: clamp(1.9rem, 3vw, 2.7rem);
}
.value__num::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--nm-radius-sm);
  background: linear-gradient(135deg, var(--nm-orange-light), var(--nm-orange) 55%, #C8340C);
  transform: skewX(-11deg); box-shadow: 0 14px 28px -16px rgba(242, 53, 0, .9);
}
/* область под иконку справа — без подложки, просто центрируем крупную иконку */
.value__media { align-self: center; display: grid; place-items: center; }
/* 3D-иконка ценности (вместо номера) — крупная */
.value__icon {
  width: clamp(160px, 18vw, 250px); height: auto; display: block;
  filter: none;   /* тень включаем ТОЛЬКО после загрузки (класс .is-ready): пока
                     картинка не декодирована, drop-shadow даёт квадрат по box */
  transition: transform .4s cubic-bezier(.19, .9, .22, 1), filter .3s ease;
}
.value__icon.is-ready { filter: drop-shadow(0 22px 42px rgba(242, 53, 0, .4)); }
.value:hover .value__icon { transform: translateY(-5px) scale(1.05); }
.value__title { margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
  text-transform: uppercase; font-size: clamp(1.15rem, 1.7vw, 1.5rem); color: var(--ink); }
.value__desc { margin: 0 0 clamp(14px, 1.5vw, 20px); color: var(--muted);
  font-size: clamp(.95rem, 1.02vw, 1.02rem); line-height: 1.62; }
.value__do { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(14px, 1.5vw, 18px); padding: 0; list-style: none; }
.value__do li {
  position: relative; padding: .5em 1em .5em 1.9em; border-radius: var(--nm-radius-pill);
  background: var(--nm-orange); color: #fff; font-weight: 600;
  font-size: clamp(.86rem, .96vw, .94rem); line-height: 1.25;
}
.value__do li::before { content: "→"; position: absolute; left: .82em; color: #fff; font-weight: 800; }
.value__note { margin: auto 0 0; padding-top: clamp(12px, 1.3vw, 16px);
  border-top: 1px solid rgba(20, 16, 14, .12); color: var(--muted);
  font-size: clamp(.9rem, 1vw, .98rem); line-height: 1.5; }

/* тёмные красно-чёрные карточки (цвета Figma) */
.value--dark {
  color: #fff; border-color: rgba(255, 255, 255, .08);
  background:
    radial-gradient(120% 92% at 86% -6%, rgba(242, 53, 0, .24) 0%, rgba(120, 30, 0, .1) 44%, transparent 60%),
    linear-gradient(155deg, #2E0C03 0%, #180400 55%, #0A0201 100%);
  box-shadow: 0 30px 60px -38px rgba(0, 0, 0, .85);
}
.value--dark:hover { border-color: var(--nm-border-glow); box-shadow: 0 36px 66px -34px rgba(0, 0, 0, .9); }
.value--dark .value__title { color: #fff; }
.value--dark .value__desc { color: rgba(255, 255, 255, .72); }
.value--dark .value__note { border-top-color: rgba(255, 255, 255, .14); color: var(--nm-text-muted); }

/* ------------------------------------------------------------- появление */
.js .mvv [data-io] { opacity: 0; transform: translateY(24px); }
.js .mvv [data-io].io-in { opacity: 1; transform: none;
  transition: opacity .7s ease, transform .8s cubic-bezier(.19, .9, .22, 1); }

/* ------------------------------------------------------------- адаптив */
@media (max-width: 860px) {
  .mvv__pillars { grid-template-columns: 1fr; gap: clamp(16px, 4vw, 24px); }
  /* мобилка — как было: иконка сверху, текст под ней (без номера и правой области) */
  .value__num { display: none; }
  .value { grid-template-columns: 1fr; gap: clamp(12px, 3vw, 18px); padding: clamp(22px, 5vw, 30px); }
  .value__media {
    order: -1; align-self: start; justify-items: start;
    padding: 0; background: none; border: 0;
  }
  .value__icon { width: clamp(78px, 21vw, 108px); }
  .value__icon.is-ready { filter: drop-shadow(0 12px 22px rgba(242, 53, 0, .3)); }
  /* убираем «05» и сжимаем межстрочный интервал заголовка */
  .mvv__values-head span { display: none; }
  .mvv__values-head h3 { line-height: 1.05; }
}
/* тач-устройства — без hover-эффектов карточек (залипали при тапе) */
@media (hover: none) {
  .value:hover { transform: none; border-color: rgba(20, 16, 14, .1);
    box-shadow: 0 24px 50px -38px rgba(20, 16, 14, .4); }
  .value--dark:hover { border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 30px 60px -38px rgba(0, 0, 0, .85); }
  .value:hover .value__icon { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mvv [data-io] { opacity: 1; transform: none; }
}