/* Блок «Посмотрите также» / «Рекомендуем почитать» (.related-recipes).
   Требования: документация/типографика-рецепта.md
   Макет 1920: тот же кадр, что у истории — фон #252523 и шум интро.
   Птицы 625×500, низ на линии стрелок, left 24, угол 0°, opacity 0.2.
   От стрелок до низа кадра 150px. */

.recipe-page {
  --type-scale: 1;
  --related-birds-width: calc(625px * var(--type-scale));
  --related-birds-height: calc(500px * var(--type-scale));
  --related-birds-left: calc(24px * var(--type-scale));
  --related-arrow-off: 0.5;
  --related-arrow-bottom: calc(150px * var(--type-scale));
}

.recipe-page .related-recipes {
  isolation: isolate;
  z-index: 1;
  overflow: hidden;
  color: #f4eee4;
  background-color: #252523;
}

.recipe-page .related-recipes > .related-recipes__birds {
  position: absolute;
  pointer-events: none;
}

.recipe-page .related-recipes [data-related-prev] img,
.recipe-page .related-recipes [data-related-next] img {
  opacity: var(--related-arrow-off);
  filter: brightness(0) invert(1);
}

.recipe-page .related-recipes [data-related-prev].is-highlighted img,
.recipe-page .related-recipes [data-related-next].is-highlighted img {
  opacity: 1;
}

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

.recipe-page .related-recipes h2:has(+ .related-recipes__lead) {
  margin-bottom: 24px;
}

.recipe-page .related-recipes .related-recipes__lead {
  width: min(720px, 100%);
  margin: 0 auto 48px;
  font-size: 18px;
  line-height: 1.42;
  text-align: center;
}

@media (min-width: 769px) {
  .recipe-page .related-recipes .related-recipes__inner {
    padding-bottom: var(--related-arrow-bottom);
  }

  .recipe-page .related-recipes .related-recipes__controls {
    margin-bottom: 0;
  }

  .recipe-page .related-recipes > .related-recipes__birds {
    position: absolute;
    top: auto;
    right: auto;
    bottom: var(--related-arrow-bottom);
    left: calc(var(--intro-side, 0px) + var(--related-birds-left));
    z-index: 1;
    width: var(--related-birds-width);
    height: var(--related-birds-height);
    max-width: none;
    margin: 0;
    object-fit: fill;
    opacity: 0.2;
    transform: none;
    pointer-events: none;
  }
}

@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);
  }

  .recipe-page .related-recipes > .related-recipes__birds {
    display: none;
  }
}

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