/* Экран «Пошаговый рецепт» (.recipe-steps).
   Требования: документация/типографика-рецепта.md
   Макет 1920: карточка шага 880, текст 619×240, top 100, left 131, gap 20.
   Заголовок шага: Roboto Condensed 700, 36px, lh 140%, трекинг −2%. */

.recipe-page {
  --type-scale: 1;
  --steps-card-width: calc(880px * var(--type-scale));
  --steps-text-width: calc(619px * var(--type-scale));
  --steps-text-min-height: calc(240px * var(--type-scale));
  --steps-text-top: calc(100px * var(--type-scale));
  --steps-text-left: calc(131px * var(--type-scale));
  --steps-text-gap: calc(20px * var(--type-scale));
  --steps-card-bottom: calc(70px * var(--type-scale));
  --steps-title-size: max(18px, calc(36px * var(--type-scale)));
  --steps-slide-shift: calc(920px * var(--type-scale));
}

.recipe-page .recipe-steps {
  isolation: isolate;
  color: #f4eee4;
  background-color: #252523;
}

.recipe-page .recipe-steps::before {
  z-index: 0;
  background-image: var(--noise-image-dark);
  background-repeat: repeat;
  background-size: var(--noise-size-dark);
  opacity: var(--intro-noise-opacity);
}

@media (min-width: 801px) {
  .recipe-page .recipe-steps__viewport {
    height: auto;
    min-height: calc(var(--steps-text-top) + var(--steps-text-min-height) + var(--steps-card-bottom));
  }

  .recipe-page .recipe-step,
  .recipe-page .recipe-step--long {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--steps-text-gap);
    top: 0;
    left: 50%;
    width: var(--steps-card-width);
    min-height: calc(var(--steps-text-top) + var(--steps-text-min-height) + var(--steps-card-bottom));
    padding: var(--steps-text-top) 0 var(--steps-card-bottom) var(--steps-text-left);
  }

  .recipe-page .recipe-step.is-active {
    position: relative;
  }

  .recipe-page .recipe-step.is-prev {
    transform: translateX(calc(-50% - var(--steps-slide-shift))) scale(0.92);
  }

  .recipe-page .recipe-step.is-next {
    transform: translateX(calc(-50% + var(--steps-slide-shift))) scale(0.92);
  }

  .recipe-page .recipe-step h3 {
    width: var(--steps-text-width);
    margin: 0;
    font-family: var(--font-main);
    font-weight: 700;
    font-style: normal;
    font-size: var(--steps-title-size);
    line-height: 1.4;
    letter-spacing: -0.02em;
  }

  .recipe-page .recipe-step p {
    width: var(--steps-text-width);
    margin: 0;
  }
}

@media (max-width: 1600px) {
  .recipe-page {
    --type-scale: calc(1600 / 1920);
  }
}

@media (max-width: 1200px) {
  .recipe-page {
    --type-scale: calc(1200 / 1920);
  }
}

@media (max-width: 992px) {
  .recipe-page {
    --type-scale: calc(992 / 1920);
  }
}

@media (max-width: 768px) {
  .recipe-page {
    --type-scale: calc(768 / 1920);
  }
}

@media (max-width: 420px) {
  .recipe-page {
    --type-scale: calc(420 / 1920);
  }
}