/* Ритм между блоками главной.

   Отступы блоков сложились исторически: каждый делался отдельно, и
   расстояния между ними гуляли от 105 до 225 px на компьютере и
   от 100 до 140 px на телефоне. Владелец попросил, чтобы пробелы между
   блоками были небольшими и везде одинаковыми.

   Правило, по которому выровнено (замер от последнего элемента одного блока
   до первого элемента следующего):
   — между двумя светлыми блоками: ≈150 px на компьютере, ≈104 px на телефоне;
   — от текста до края цветной подложки (Job Tracker, карточка отзывов)
     и внутри подложки: ≈96 px на компьютере, ≈64 px на телефоне.

   Полноэкранные блоки (обложка, «Почему Дубай», вакансии) не трогаются:
   их верхний отступ — это место под закреплённое меню.

   Файл подключается последним и меняет только внешние отступы блоков,
   ничего внутри них. */

/* «Ваш путь в Дубай»: сверху было 110 / 100, снизу до серой подложки
   Job Tracker — 76 / 50. */
html body .wid-journey{padding-top:86px;padding-bottom:72px}

/* «Не угадывайте. Разберитесь.»: у раздела и у витрины внутри было по
   своему нижнему отступу — вместе 171 px пустоты перед отзывами. */
html body .kq-section{padding-bottom:0}

/* Job Tracker внутри серой подложки: было 110 сверху и 93 снизу. */
@media (min-width:761px){
  html body .wid-tracker{padding-top:78px;padding-bottom:87px}
  /* Карточка отзывов → тёмный блок заявки: было 108. */
  html body .wid-reviews-entry{padding-bottom:96px}
}

@media (max-width:760px){
  html body .wid-journey{padding-top:64px;padding-bottom:46px}
  html body .wid-tracker{padding-top:60px;padding-bottom:60px}
  /* Первый блок «Жизнь на месте» после серой подложки: было 105. */
  html body .wid-life:not(.wid-life + .wid-life){padding-top:40px}
  html body .kq-section{padding-bottom:13px}
  /* После блока с разборами шла белая пустота почти в четверть экрана,
     прежде чем начинался заголовок «Что мы берём на себя». */
  html body .wid-help{padding-top:44px}
  html body .kq-showcase{padding-bottom:8px}
}


/* Ссылка с якорем (например, из статьи на «Ваш путь в Дубай») не должна
   прятать заголовок блока под закреплённым меню. */
html body section[id],
html body footer[id]{scroll-margin-top:clamp(74px,9vh,100px)}

/* Стыки блоков на телефоне.

   На iPhone бросались в глаза резкие линии там, где белый блок сменялся
   серым: «разрыв теней» между развозкой и вакансиями, после тестов, после
   «что мы берём на себя», после отзывов и статей. Причина простая — у одного
   блока фон сплошной, у соседнего белый, и граница читается как шов.
   Поэтому каждый блок теперь въезжает и выезжает мягким переходом в цвет
   соседа. */
@media (max-width:760px){
  /* обложка → «Почему Дубай» */
  html body .wid-hero{background:linear-gradient(#fff 74%,#f4f5f6)}

  /* «что мы берём на себя»: короткий хвост вместо обрыва подложки */
  html body .wid-help{background:linear-gradient(#fff,#f5f7fa 140px,#f5f7fa calc(100% - 96px),#fff)}

  /* разборы → «что мы берём на себя» */
  html body .kq-showcase{background:linear-gradient(#fff 0,#f6f8fb 46%,#fff 100%)}
  /* Тень переключателя тестов должна мягко затухать, а не обрезаться
     границей секции. Сами карточки по-прежнему режутся своим viewport. */
  html body .kq-section{overflow:visible}
  html body .kq-showcase{padding-bottom:24px}

  /* Job Tracker → сервисы: подложка уходит в белый плавно */
  html body .wid-services{background:linear-gradient(#f2f2f7,#fff 88px)}

  /* статьи → заявка: тёплый синий приходит постепенно */
  html body .wid-reads{background:linear-gradient(#fff calc(100% - 88px),#f7fbff)}
}

/* Запас под плавающую панель Safari.

   На iPhone нижняя панель браузера лежит ПОВЕРХ страницы и в высоту экрана не
   входит: браузер отдаёт полные 912 px. Из-за этого низ полноэкранных блоков
   уходил под панель — картинка первого экрана выглядела обрезанной, кнопки
   прятались, а сама панель подкрашивалась цветом того, что под ней (отсюда
   «синяя полоса внизу»). Резервируем место: под панелью остаётся спокойный
   фон страницы. */
@media (max-width:760px){
  /* Нижняя панель браузера требует запаса только внутри полноэкранной
     истории. Обычные блоки продолжают поток страницы: прежний общий запас
     создавал между ними пустоты почти в четверть экрана. */
  html body .wid-stage{padding-bottom:max(96px,calc(env(safe-area-inset-bottom) + 62px))}
}

/* Один ритм для трёх соседних разделов о жизни в Дубае. Отступ после
   вакансий раньше доходил до 118 px на компьютере; сама область, выделенная
   зелёным в DevTools, была padding, а не отдельным зелёным блоком. */
@media (min-width:701px){
  html body .wid-life{padding-top:48px;padding-bottom:16px}
}
@media (max-width:700px){
  html body .wid-life{padding-top:32px;padding-bottom:16px}
  html body .wid-life:first-child{padding-top:24px}
}