/* Блок «Советы от монастырской кухни» (.cooking-tips).
   Требования: документация/типографика-рецепта.md
   Макет 1920: пункт списка ширина 880, высота по контенту, gap 50, отступ номера 50.
   Заголовок пункта: Roboto Condensed 700, 36px, lh 110%, −1%, #252523.
   Текст: Roboto Condensed 400, 20px, lh 140%, −1%, #554F44. */

.recipe-page .cooking-tips .cooking-tips__sublist {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.recipe-page .cooking-tips .cooking-tips__sublist li {
  width: auto;
  min-height: 0;
  padding-left: 0;
  counter-increment: none;
}

.recipe-page .cooking-tips .cooking-tips__sublist li::before {
  content: none;
}

.recipe-page .cooking-tips .cooking-tips__header p,
.recipe-page .cooking-tips .cooking-tips__list p,
.recipe-page .cooking-tips .cooking-tips__sublist {
  font-family: var(--font-main);
  font-weight: 400;
  font-style: normal;
  font-size: var(--tips-text-size);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #554f44;
}

.recipe-page {
  --type-scale: 1;
  --tips-item-width: calc(880px * var(--type-scale));
  --tips-item-gap: calc(50px * var(--type-scale));
  --tips-title-pad: calc(50px * var(--type-scale));
  --tips-title-size: max(18px, calc(36px * var(--type-scale)));
  --tips-text-size: max(16px, calc(20px * var(--type-scale)));
  --tips-quote-size: max(18px, calc(42.67px * var(--type-scale)));
  --tips-caption-size: max(16px, calc(32px * var(--type-scale)));
  --tips-angel-width: calc(671px * var(--type-scale));
  --tips-angel-height: calc(1256px * var(--type-scale));
  --tips-angel-in-block: calc(972px * var(--type-scale));
  --tips-angel-left: calc(1400px * var(--type-scale));
}

@media (min-width: 769px) {
  .recipe-page .cooking-tips {
    z-index: 2;
    overflow: visible;
  }

  .recipe-page .cooking-tips .cooking-tips__inner {
    display: grid;
    grid-template-columns: minmax(0, var(--tips-item-width)) minmax(0, 1fr);
    align-items: start;
  }

  .recipe-page .cooking-tips .cooking-tips__header {
    grid-column: 1 / -1;
  }

  .recipe-page .cooking-tips .cooking-tips__content {
    grid-column: 1;
    grid-row: 2;
    width: var(--tips-item-width);
    max-width: 100%;
    padding-top: 0;
  }

  .recipe-page .cooking-tips > .cooking-tips__angel {
    position: absolute;
    top: auto;
    right: auto;
    bottom: calc(var(--tips-angel-in-block) - var(--tips-angel-height));
    left: calc(var(--intro-side, 0px) + var(--tips-angel-left));
    z-index: 1;
    width: var(--tips-angel-width);
    height: var(--tips-angel-height);
    object-fit: fill;
    opacity: 1;
    transform: none;
    pointer-events: none;
  }

  .recipe-page .cooking-tips .cooking-tips__list {
    gap: var(--tips-item-gap);
  }

  .recipe-page .cooking-tips .cooking-tips__list li {
    width: var(--tips-item-width);
    max-width: 100%;
    min-height: 0;
    padding-left: var(--tips-title-pad);
  }

  .recipe-page .cooking-tips .cooking-tips__list h3 {
    font-family: var(--font-main);
    font-weight: 700;
    font-style: normal;
    font-size: var(--tips-title-size);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #252523;
  }

  .recipe-page .cooking-tips .cooking-tips__list p,
  .recipe-page .cooking-tips .cooking-tips__sublist {
    font-family: var(--font-main);
    font-weight: 400;
    font-style: normal;
    font-size: var(--tips-text-size);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #554f44;
  }

  .recipe-page .cooking-tips .cooking-tips__quote {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    font-family: var(--font-decor);
  }

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

  .recipe-page .cooking-tips .cooking-tips__quote figcaption {
    font-family: var(--font-decor);
    font-weight: 400;
    font-style: normal;
    font-size: var(--tips-caption-size);
    line-height: 1;
    letter-spacing: 0;
    text-align: right;
  }
}

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