/* Типографика героя рецепта. Источник — макет 1920px.
   На более узких экранах размер = значение_1920 * (ширина / 1920), с полом на телефоне.
   Блок цитаты: .recipe-hero__quote («Пост обращает в бегство…»). */

.recipe-page {
  --type-scale: 1;
  --hero-h1-size: max(36px, calc(110px * var(--type-scale)));
  --hero-time-size: max(24px, calc(60px * var(--type-scale)));
  --hero-time-label-size: max(13px, calc(24px * var(--type-scale)));
  --hero-quote-size: max(18px, calc(42px * var(--type-scale)));
  --hero-caption-size: max(16px, calc(32px * var(--type-scale)));
  --hero-crumbs-width: calc(965px * var(--type-scale));
  --hero-crumbs-height: calc(29px * var(--type-scale));
  --header-pad-top: max(12px, calc(18px * var(--type-scale)));
  --header-logo-width: max(88px, calc(190px * var(--type-scale)));
  --header-logo-height: max(42px, calc(90px * var(--type-scale)));
  --hero-logo-to-crumbs: calc(110px * var(--type-scale));
  --hero-crumbs-top: calc(var(--header-pad-top) + var(--header-logo-height) + var(--hero-logo-to-crumbs));
  --hero-crumbs-gap: calc(16px * var(--type-scale));
  --hero-quote-bottom: calc(150px * var(--type-scale));
  --hero-quote-gap-scroll: calc(170px * var(--type-scale));
  --hero-quote-width: calc(630px * var(--type-scale));
  --hero-quote-right: calc(329px * var(--type-scale));
  --hero-crumbs-to-title: calc(30px * var(--type-scale));
  --hero-title-to-subtitle: calc(18px * var(--type-scale));
  --hero-subtitle-size: max(16px, calc(28px * var(--type-scale)));
  --hero-title-to-scroll: calc(80px * var(--type-scale));
  --hero-scroll-width: calc(970px * var(--type-scale));
  --hero-time-gap: calc(72px * var(--type-scale));
}

.recipe-page .site-header__inner {
  padding-top: var(--header-pad-top);
  padding-bottom: var(--header-pad-top);
}

.recipe-page .site-header__logo-link {
  width: var(--header-logo-width);
  height: var(--header-logo-height);
}

.recipe-page .recipe-hero {
  height: auto;
}

.recipe-page .recipe-hero__content {
  width: 100%;
  max-width: none;
  padding-top: var(--hero-crumbs-top);
  padding-right: 0;
  padding-bottom: var(--hero-quote-bottom);
  padding-left: 0;
}

.recipe-page .recipe-hero .breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(var(--hero-crumbs-width), 100%);
  height: var(--hero-crumbs-height);
  margin: 0 auto var(--hero-crumbs-to-title);
  opacity: 1;
  gap: var(--hero-crumbs-gap);
}

.recipe-page .recipe-hero h1,
.recipe-page .recipe-hero__heading h1 {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: var(--hero-h1-size);
  line-height: 0.75;
  letter-spacing: -0.03em;
  text-align: center;
}

.recipe-page .recipe-hero > .recipe-hero__content > h1 {
  margin-bottom: var(--hero-title-to-scroll);
}

.recipe-page .recipe-hero__heading {
  width: 100%;
  margin: 0 auto var(--hero-title-to-scroll);
  text-align: center;
}

.recipe-page .recipe-hero__heading h1 {
  max-width: 100%;
  margin: 0 auto var(--hero-title-to-subtitle);
}

.recipe-page .recipe-hero__subtitle {
  max-width: min(920px, 92%);
  margin: 0 auto;
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: var(--hero-subtitle-size);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  color: #6f6a62;
}

.recipe-page .recipe-hero__scroll dt {
  margin-bottom: 8px;
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: var(--hero-time-size);
  line-height: 0.8;
  letter-spacing: -0.03em;
  text-transform: none;
}

.recipe-page .recipe-hero__scroll {
  width: var(--hero-scroll-width);
  max-width: calc(100% - 32px);
  height: auto;
  margin-bottom: 0;
}

.recipe-page .recipe-hero__scroll img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.recipe-page .recipe-hero__scroll dl {
  width: max-content;
  max-width: 90%;
  grid-template-columns: max-content max-content;
  gap: var(--hero-time-gap);
}

.recipe-page .recipe-hero__scroll dd {
  font-family: var(--font-main);
  font-weight: 400;
  font-style: normal;
  font-size: var(--hero-time-label-size);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.recipe-page .recipe-hero__scroll dd br {
  display: none;
}

.recipe-page .recipe-hero__quote {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: min(var(--hero-quote-width), calc(100% - var(--hero-quote-right) - 20px));
  margin-top: var(--hero-quote-gap-scroll);
  margin-right: calc(var(--hero-side, 0px) + var(--hero-quote-right));
  margin-bottom: 0;
  margin-left: auto;
}

.recipe-page .recipe-hero__quote blockquote {
  font-family: var(--font-decor);
  font-weight: 400;
  font-style: normal;
  font-size: var(--hero-quote-size);
  line-height: 1;
  letter-spacing: -0.02em;
}

.recipe-page .recipe-hero__quote figcaption {
  font-family: var(--font-decor);
  font-weight: 400;
  font-style: normal;
  font-size: var(--hero-caption-size);
  line-height: 1;
  letter-spacing: 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);
    --hero-crumbs-width: 100%;
    --hero-crumbs-height: auto;
    --hero-quote-width: 100%;
    --hero-quote-right: 16px;
  }

  .recipe-page .recipe-hero__heading {
    margin-top: 390px;
    margin-bottom: 42px;
  }
}

@media (max-width: 420px) {
  .recipe-page {
    --type-scale: calc(420 / 1920);
    --hero-scroll-width: min(420px, calc(100vw - 16px));
    --hero-scroll-height: auto;
  }

  .recipe-page .recipe-hero__content {
    padding-right: 0;
    padding-left: 0;
  }

  .recipe-page .recipe-hero__heading {
    margin-top: 292px;
    margin-bottom: 20px;
  }

  .recipe-page .recipe-hero__scroll {
    box-sizing: border-box;
    width: var(--hero-scroll-width);
    max-width: calc(100vw - 16px);
    height: auto;
    aspect-ratio: 440 / 220;
    margin-right: auto;
    margin-left: auto;
    opacity: 1;
    transform: none;
  }

  .recipe-page .recipe-hero__scroll img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    object-fit: fill;
    object-position: center;
  }

  .recipe-page .recipe-hero__scroll dl {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78%;
    max-width: 78%;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-content: center;
    justify-items: center;
    text-align: center;
    transform: translate(-50%, -50%);
  }

  .recipe-page .recipe-hero__scroll div,
  .recipe-page .recipe-hero__scroll dt,
  .recipe-page .recipe-hero__scroll dd {
    text-align: center;
    white-space: normal;
  }

  .recipe-page .recipe-hero__scroll dd {
    line-height: 1.15;
  }

  .recipe-page .recipe-hero__scroll dd br {
    display: block;
  }
}