/* Единый ритм страницы. Подключается последним и только переопределяет.
   Откат: убрать одну строку <link> в index.html или git revert коммита. */

:root {
  --section-title: clamp(64px, 7.05vw, 118px);   /* 102px на 1440 */
  --section-note: clamp(18px, 1.68vw, 30px);     /* 24px */
  --section-link: clamp(15px, 1.32vw, 24px);     /* 19px */
  --section-gap: clamp(56px, 5.6vw, 96px);       /* 80px */
  --card-radius: clamp(18px, 1.5vw, 28px);       /* 22px */
}

/* ---------- Заголовки секций: один размер ---------- */
.catalog-intro__title,
.hits-heading h2,
.recipes-heading h2 {
  font-size: var(--section-title);
  line-height: 0.84;
  letter-spacing: -0.02em;
}

/* «Истоки» намеренно живут по своей сетке: заголовок выходит из середины. Не трогаем. */

/* ---------- Подписи и ссылки ---------- */
.hits-heading__note,
.recipes-heading__note { font-size: var(--section-note); }

.hits-all,
.recipes-all,
.origin-cta { font-size: var(--section-link); }

/* ---------- Карточки: один радиус ---------- */
.catalog-card,
.hit-card,
.recipe-card { border-radius: var(--card-radius); }

/* ---------- Воздух между блоками ---------- */
.catalog-content { padding-bottom: 0; }
/* После первого экрана — тот же воздух, что между остальными блоками */
.catalog-screen { padding-top: var(--section-gap); }
.hits-screen { padding-top: var(--section-gap); padding-bottom: calc(var(--section-gap) - 14px); }
.recipes-screen { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }

/* ---------- Телефон ---------- */
@media (max-width: 640px) {
  :root {
    --section-title: clamp(52px, 17vw, 70px);   /* 66px на 390 */
    --section-note: 19px;
    --section-link: 14px;
    --section-gap: 56px;
    --card-radius: 18px;
  }

  .catalog-content { padding-inline: 16px; }

  /* Зазоры считаем до первого текста, а не до края секции.
     «Истоки» на телефоне не под шапкой, поэтому отступ под неё не нужен. */
  .origin-screen { padding-top: 0; min-height: auto; }      /* высота по содержимому, горы всё равно заливают фон */
  .origin-copy { padding-top: 28px; padding-bottom: 24px; }
  .origin-details { padding-top: 72px; }                    /* текст садится на зелень, а не на небо */
  .hits-screen { padding-top: var(--section-gap); padding-bottom: 14px; }   /* 14 + 14 у ленты + 28 внутри «Истоков» = 56 до «Индонезии» */
  .recipes-screen { padding-top: var(--section-gap); padding-bottom: var(--section-gap); } /* последний элемент «Истоков» на телефоне — картинка, отступ считаем от неё */
}

/* ---------- Слово-подложка: тень от заголовка ----------
   То же слово крупнее и бледнее, смещено вправо и вниз от самой фразы. */
.catalog-screen, .hits-screen, .recipes-screen, .team-screen, .posts-screen, .catalog-page {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

.catalog-intro, .hits-heading__group, .recipes-heading__group, .team-heading__group, .posts-heading__group, .catalog-page__heading {
  position: relative;
}

.catalog-intro__title, .hits-heading h2, .recipes-heading h2, .team-heading h2, .posts-heading h2, .catalog-page__heading h1 {
  position: relative;
  z-index: 1;
}

.section-backdrop {
  position: absolute;
  z-index: 0;
  left: 0.1em;
  top: 0.16em;
  font: 400 calc(var(--section-title) * 1.5)/0.8 var(--font-hero);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgb(18 16 14 / 0.05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.catalog-content, .hits-track, .recipes-toolbar, .recipes-track, .recipes-footer, .team-track, .posts-grid,
.catalog-page__filters, .catalog-page__grid { position: relative; z-index: 1; }

@media (max-width: 640px) {
  .section-backdrop { font-size: calc(var(--section-title) * 1.45); }
}

/* Рецепты: фильтры сразу под заголовком, без лишнего воздуха */
.recipes-toolbar { padding-top: clamp(6px, 1vh, 12px); }
@media (max-width: 640px) { .recipes-toolbar { padding-top: 4px; } }