/* ============================================================
   BYPLAN — story-cta-bottom.css (v2)
   1) CTA-кнопки (анкета/кейсы) ПОД текстом
   2) CTA-блок прижат к низу правой карточки
   3) Балансируем вертикаль:
      - поднимаем кнопки от низа на одинаковый оффсет
      - опускаем блок "СЦЕНА/Задача" на тот же оффсет

   Подключать ПОСЛЕ assets/css/story.css
   ============================================================ */

/* Настройка: одним значением регулируем "симметрию" сверху/снизу */
.section--story{
  --story-cta-balance: clamp(12px, 1.4vw, 22px);
}

/* Desktop: делаем правую карточку колонкой и растягиваем её по высоте ряда */
@media (min-width: 981px){
  .section--story .story-grid{
    align-items: stretch; /* вместо start */
  }

  .section--story .story-card{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Визуальный порядок: степпер -> панель -> текст(нота) -> CTA */
  .section--story #storyStepper{ order: 1; }
  .section--story #storyPanel{ order: 2; }
  .section--story #storyNote{ order: 3; }

  /* Опускаем весь блок с задачей (panel + всё, что ниже) */
  .section--story #storyPanel{
    margin-top: var(--story-cta-balance);
  }

  /* CTA уводим вниз карточки */
  .section--story .story-actions{
    order: 4;
    margin-top: auto !important;   /* прижимаем вниз */
    padding-top: 16px;             /* отступ от текста */

    /* Поднимаем кнопки от низа карточки */
    padding-bottom: var(--story-cta-balance);
  }
}

/* Mobile: просто соблюдаем порядок (кнопки под текстом), без “прижимания” */
@media (max-width: 980px){
  .section--story .story-card{
    display: flex;
    flex-direction: column;
  }

  .section--story #storyStepper{ order: 1; }
  .section--story #storyPanel{ order: 2; }
  .section--story #storyNote{ order: 3; }
  .section--story .story-actions{
    order: 4;
    margin-top: 16px !important;
    padding-top: 0;
  }
}