/* ============================================================
   sections/adaptive.css — общий адаптив ≤980 / ≤620
   Подключается после final.css, до story-mobile.css (см. шапку story.css).

   Здесь намеренно вперемешку Story, Ways и шапка: это исходный порядок
   строк бывшего sections.css, а часть правил разрешается именно порядком.
   Растаскивать содержимое по секционным файлам можно только пошагово,
   проверяя каждый кусок отдельно, — см. README, раздел про каскад.
   Брейкпоинты 980/768/620 объявлены в tokens.css (--bp), JS читает их
   оттуда и своих чисел не держит.
   ============================================================ */

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:980px){
  .phone-wrap{min-height:620px;justify-content:center}
  .phone-wrap::before{left:50%;width:min(520px,96%);transform:translate(-50%,-48%)}
  .hero-phone{width:min(430px,70vw)}
  .hero-demo{width:min(100%,450px);transform:none}
  .nav{display:none}
  .header__cta .btn--ghost{display:none}
  .burger{display:flex}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .container{padding:0 18px}
  .phone-wrap{min-height:clamp(470px,132vw,540px)}
  .hero-phone{width:min(100vw,360px);max-width:none}
  .hero-demo{width:min(100%,340px)}
  .hero-demo__controls{width:100%;gap:7px}
  .hero-demo__caption{font-size:10px}
  .hero-role-switch{width:100%;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .hero-role-switch::-webkit-scrollbar{display:none}
  .hero-role-switch button{min-height:32px;padding:0 11px;font-size:10.5px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer__brand{grid-column:1/-1}
  .final__panel{padding:48px 24px}
  .mobile-cta{display:block}
  .header__cta .btn--fire{display:none}
}

/* ---- Story: mobile / reduced-motion — без pin, один и тот же телефон, карточки обычным потоком ----
   Условие продублировано в main.js (matchMedia 981px + prefers-reduced-motion) —
   держать оба места в синхронизации при правках. ---- */
@media (max-width:980px), (prefers-reduced-motion:reduce){
  .story__flowlines{display:none}
  .story__track{height:auto!important}
  .story__stage{
    position:static;height:auto;display:flex;flex-direction:column;
    padding:64px 24px 40px;gap:0;align-items:stretch;
  }
  /* story__copy теряет свою коробку — её панели становятся обычными flex-элементами
     stage'а, поэтому им можно назначить order независимо от phone-col (требование:
     хедлайн бренда — первым, телефон — сразу за ним, остальные акты — картами ниже). */
  .story__copy{display:contents}
  .story__act-panel[data-act="hero"]{order:-2}
  .story__phone-col{order:-1;height:auto;margin-bottom:8px}
  .story__act-panel{
    position:relative;pointer-events:auto;padding:26px 22px;
  }
  /* Водяной знак акта — премиальный акцент только там, где вокруг текста есть
     воздух (десктоп); на компактной мобильной карточке он спорил бы с иконкой роли. */
  .story__act-panel::before{display:none}
  .story__act-panel>*{opacity:1;transform:none;filter:none;transition:none}
  .story__act-panel[data-act="hero"]{padding:0 0 4px}
  .story__act-panel:not([data-act="hero"]){
    --card-glow:rgba(255,122,61,.22);--card-accent-1:#ff9a3d;--card-accent-2:#e8410a;
    margin-top:22px;padding:30px 24px 26px;border-radius:26px;
    background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(255,247,236,.78));
    border:1px solid rgba(255,255,255,.8);
    box-shadow:0 26px 54px -30px rgba(70,45,24,.32),0 1px 0 rgba(255,255,255,.6) inset;
    backdrop-filter:blur(14px);
    opacity:0;transform:translateY(26px) scale(.95);
    transition:opacity .65s var(--ease),transform .65s var(--ease);
  }
  .story__act-panel:not([data-act="hero"]).in-view{opacity:1;transform:none}
  /* Цветное сияние-подложка под роль карточки — эхо .story__aura, держит связь
     между этапом сценария и активной ролью в телефоне выше. */
  .story__act-panel:not([data-act="hero"])::before{
    content:"";position:absolute;inset:-16% -14% auto -14%;height:75%;z-index:-1;
    background:radial-gradient(62% 100% at 28% 0%,var(--card-glow),transparent 72%);
    pointer-events:none;
  }
  /* Значок-бейдж роли — приподнят над верхним краем карточки, как ярлычок.
     Настоящий SVG (не emoji), чтобы штрихи можно было "прорисовывать" по
     скроллу тем же приёмом, что и у иконок блока Ways (см. .way-icon ниже):
     pathLength="1" + stroke-dasharray/dashoffset. */
  .story__act-badge{
    position:absolute;top:-15px;left:22px;width:42px;height:42px;
    display:grid;place-items:center;border-radius:13px;
    background:linear-gradient(135deg,var(--card-accent-1),var(--card-accent-2));
    box-shadow:0 12px 22px -9px rgba(232,65,10,.55);transform:rotate(-6deg);
  }
  .story__act-badge svg{width:23px;height:23px}
  .story__act-badge svg path,.story__act-badge svg circle{
    stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease);
  }
  .story__act-panel.in-view .story__act-badge svg path,
  .story__act-panel.in-view .story__act-badge svg circle{stroke-dashoffset:0;transition-delay:.3s}
  .story__act-panel[data-act="cash"]{--card-glow:rgba(240,158,34,.24);--card-accent-1:#ffcf6b;--card-accent-2:#e8940a}
  .story__act-panel[data-act="kitchen"]{--card-glow:rgba(216,98,30,.24);--card-accent-1:#ff8a4d;--card-accent-2:#c8460c}
  .story__act-panel[data-act="director"]{--card-glow:rgba(41,140,105,.22);--card-accent-1:#57c39a;--card-accent-2:#1f6b4f}
  .story__aura{opacity:.7}
  .story__dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .story__act-panel:not([data-act="hero"]){opacity:1;transform:none;transition:none}
}

/* ---- Ways: mobile / reduced-motion — без пина, карточки обычным потоком ----
   Тот же приём, что у .story выше: сцена не блокирует скролл, три карточки
   идут одна за другой с fade-up, финальная фраза — отдельным блоком снизу
   (на десктопе тот же текст подставляется в h2/eyebrow сцены). ---- */
@media (max-width:980px), (prefers-reduced-motion:reduce){
  .ways__track{height:auto!important}
  .ways__stage{position:static;height:auto;overflow:visible;display:block;padding:64px 24px 0}
  .ways__progress,.ways__mood{display:none}
  .ways__head{margin-bottom:34px;gap:14px}
  .ways__grid{grid-template-columns:1fr;gap:16px;max-width:none}
  .way-card{
    padding:30px 26px 26px;
    opacity:0;transform:translateY(28px) scale(.97);
    transition:opacity .6s var(--ease),transform .6s var(--ease);
  }
  .way-card.in-view{opacity:1;transform:none}
  .way-card.is-active,.way-card.is-receded{transform:none;opacity:1}
  /* На мобильном демо остаётся на экране насовсем, как только карточка
     появилась в кадре (main.js:setupWaysMobile) — без него блок выглядел
     как урезанная версия десктопа, а не отдельная «живая» карточка. */
  .way-card.is-active{box-shadow:0 26px 54px -26px var(--way-glow),var(--sh-md);border-color:var(--way-c)}
  .way-card__num{font-size:64px;top:-4px;right:12px}
  .way-card__body{min-height:118px}
  .way-icon path,.way-icon circle,.way-icon rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
  .way-card.in-view .way-icon path,.way-card.in-view .way-icon circle,.way-card.in-view .way-icon rect{stroke-dashoffset:0;transition-delay:.22s}
  .ways__outro-mobile{
    display:block;margin-top:8px;padding-bottom:64px;text-align:center;font-family:var(--font-display);
    font-size:clamp(19px,4vw,24px);font-weight:800;line-height:1.35;color:var(--ink);
    opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);
  }
  .ways__outro-mobile.in{opacity:1;transform:none}
}

/* ---- Компактная шапка на телефоне (к Story не относится) ---- */
@media (max-width:620px){
  .header{padding:calc(10px + env(safe-area-inset-top)) 0 10px}
  .header.scrolled{padding:calc(8px + env(safe-area-inset-top)) 0 8px}
  .header__inner{gap:10px}
  .brand{gap:8px;font-size:17px}
  .brand .flame{width:29px;height:29px}
  .burger{
    width:44px;height:44px;padding:0;align-items:center;justify-content:center;
    border:1px solid rgba(221,211,198,.86);border-radius:14px;
    background:rgba(255,255,255,.7);box-shadow:0 10px 24px -18px rgba(70,45,24,.35);
  }
  .burger span{width:20px}
}