/* ==========================================================================
   3B-LAB — манифест дублем (#manifesto-flat)
   --------------------------------------------------------------------------
   Вторая подача манифеста: те же шесть принципов и те же сцены, но
   обычными блоками в потоке — без «стопки», без рамок, фона и скруглений.
   Всё полотно секции — один тёмный фон, на нём:

     текст и анимация идут в шахматном порядке: у первой карточки текст
     слева, сцена справа, у второй — наоборот, дальше снова с чередованием.
     Текст крупный (цифра, заголовок, абзацы), сцена сверху и снизу
     растворяется в фоне.

   Подключается после css/manifesto.css и переопределяет только оформление,
   не трогая геометрию сцен.
   ========================================================================== */

.manifesto--flat{
  --mf-bg:#07090a;
  background:var(--mf-bg);
  padding-block:clamp(40px,5vw,72px) clamp(48px,6vw,96px);
  border-top:1px solid rgba(255,255,255,.07);
}
.manifesto--flat .manifesto-head{padding-top:0}

/* ---------- карточка: только сетка, без «коробки» ---------- */
.manifesto--flat .manifesto-stack .stack-card,
body.stack-on .manifesto--flat .stack-card{
  position:relative;top:auto;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  align-items:center;
}
.manifesto--flat .manifesto-stack .stack-card::before,
.manifesto--flat .manifesto-stack .stack-card::after{display:none}

.manifesto--flat .manifesto-stack--flat{
  display:flex;flex-direction:column;
  gap:clamp(56px,7vw,112px);
  margin-top:clamp(24px,3vw,44px);
}

/* ---------- левая колонка: текст крупнее ---------- */
.manifesto--flat .m-text{
  background:none;
  padding:clamp(8px,1vw,16px) clamp(0px,2vw,32px) clamp(8px,1vw,16px) 0;
  justify-content:center;
}
.manifesto--flat .m-num{
  font-size:clamp(84px,10vw,152px);
  -webkit-text-stroke-width:1.4px;
  -webkit-text-stroke-color:rgba(255,255,255,.34);
  text-stroke-width:1.4px;
  text-stroke-color:rgba(255,255,255,.34);
}
.manifesto--flat .m-title{
  margin-top:14px;max-width:14ch;
  font-size:clamp(34px,4.6vw,62px);
  line-height:1.02;letter-spacing:-.045em;
}
.manifesto--flat .m-rule{width:64px;margin-top:26px}
.manifesto--flat .m-copy{margin-top:22px;columns:1}
.manifesto--flat .m-desc{
  font-size:clamp(16px,1.28vw,19.5px);
  line-height:1.66;
  color:rgba(255,255,255,.72);
  max-width:46ch;
}
.manifesto--flat .m-desc + .m-desc{margin-top:16px}
.manifesto--flat .m-eyebrow{font-size:12px;letter-spacing:.18em;margin-bottom:22px}
.manifesto--flat .m-tags{margin-top:28px;gap:8px}
.manifesto--flat .m-tag{font-size:13px;padding:8px 13px}
.manifesto--flat .m-scale{margin-top:26px}

/* ---------- правая колонка: сцена без своей подложки ---------- */
.manifesto--flat .m-stage,
.manifesto--flat .m-stage.m-stage-speed,
.manifesto--flat .m-stage-dev,
.manifesto--flat .m-stage.m-stage-dom,
.manifesto--flat .m-stage.m-stage-mt{
  background:transparent;
  border:0;
  min-height:clamp(340px,44vw,540px);
}
.manifesto--flat .m-stage::after{background:none;box-shadow:none}
.manifesto--flat .m-stage::before{opacity:.55}


/* ---------- планшет / десктоп: текст и сцена в одной строке ---------- */
@media (min-width:768px){
  .manifesto--flat .manifesto-stack .stack-card{
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    min-height:0;
  }
  .manifesto--flat .m-text{padding:0 clamp(8px,2.4vw,44px) 0 0}

  /* шахматный порядок: у чётных карточек сцена слева, текст справа */
  .manifesto--flat .manifesto-stack--flat .stack-card--flat:nth-child(even){
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  }
  .manifesto--flat .manifesto-stack--flat .stack-card--flat:nth-child(even) .m-stage{order:1}
  .manifesto--flat .manifesto-stack--flat .stack-card--flat:nth-child(even) .m-text{
    order:2;
    padding:0 0 0 clamp(8px,2.4vw,44px);
  }
}
@media (min-width:1280px){
  .manifesto--flat .m-text{padding:0 clamp(20px,3vw,64px) 0 0}
  .manifesto--flat .manifesto-stack .stack-card{
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  }
  .manifesto--flat .manifesto-stack--flat .stack-card--flat:nth-child(even){
    grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  }
  .manifesto--flat .manifesto-stack--flat .stack-card--flat:nth-child(even) .m-text{
    padding:0 0 0 clamp(20px,3vw,64px);
  }
  .manifesto--flat .m-stage,
  .manifesto--flat .m-stage.m-stage-speed,
  .manifesto--flat .m-stage-dev,
  .manifesto--flat .m-stage.m-stage-mt{min-height:clamp(440px,52vh,600px)}
}

/* на телефоне сцена идёт под текстом и растворяется с двух сторон сильнее */
@media (max-width:767px){
  .manifesto--flat .m-text{padding:0 0 4px}
  .manifesto--flat .manifesto-stack--flat{gap:clamp(44px,10vw,72px)}
  .manifesto--flat .m-num{font-size:clamp(72px,22vw,104px)}
  .manifesto--flat .m-title{font-size:clamp(30px,8vw,40px)}
  .manifesto--flat .m-desc{font-size:16px;line-height:1.62}
}