/* Первый экран главной — планшет и телефон.
   Десктопная вёрстка снята с рендера 1448px и жёстко завязана на контейнер
   1312px, поэтому ниже он распускается, а двухколоночные сетки схлопываются. */

@media (max-width: 1360px) {
  .sy-wrap { width: 100%; padding: 0 24px; }
  /* фото уходило за правый край экрана отрицательным margin — на узких это ломает поток */
  .sy-hero-photo { margin-right: 0; }
  .sy-search { margin-left: 0; margin-right: 0; }
}

@media (max-width: 1024px) {
  .sy-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .sy-hero-photo { margin-top: 0; }
  .sy-hero-photo > img { height: 380px; border-radius: 28px; }
  .sy-hero-lead { max-width: none; }

  /* карточка отзывов и кнопка play позиционировались от краёв фото */
  .sy-badge-users { right: 16px; top: 16px; }
  .sy-play { left: auto; right: 24px; bottom: 20px; }
  .sy-play-arc { display: none; }

  .sy-bottom { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 900px) {
  /* пять полей в строку не помещаются — раскладываем в две колонки */
  .sy-search {
    height: auto; flex-wrap: wrap; gap: 4px;
    padding: 14px; border-radius: 24px;
  }
  .sy-field { flex: 1 1 45%; padding: 10px 12px; }
  .sy-field + .sy-field::before { display: none; }
  .sy-search-go { width: 56px; height: 56px; margin-left: auto; }
}

@media (max-width: 640px) {
  .sy-wrap { padding: 0 16px; }

  h1, #syHome h1 { font-size: 38px; line-height: 1.1; }
  .sy-eyebrow { font-size: 12px; margin-bottom: 18px; }
  .sy-eyebrow svg { display: none; }
  .sy-hero-lead { font-size: 17px; margin: 20px 0 26px; }
  .sy-btn-primary { width: 100%; justify-content: space-between; height: 56px; font-size: 17px; }

  .sy-hero-photo > img { height: 300px; border-radius: 22px; }
  .sy-badge-users { position: static; width: auto; margin-top: 14px; box-shadow: var(--shadow-sm); }
  .sy-play { right: 16px; bottom: 84px; width: 62px; height: 62px; }

  /* поля поиска — по одному в строку, иначе подписи режутся */
  .sy-field { flex: 1 1 100%; }
  .sy-field-label { font-size: 15px; }
  .sy-field-value { font-size: 14px; }
  .sy-search-go { width: 100%; border-radius: 999px; height: 52px; }

  .sy-promo { height: 190px; }
  .sy-promo h2 { font-size: 24px; }
  .sy-promo-body { padding: 22px 20px; }

  .sy-stats { grid-template-columns: 1fr; height: auto; padding: 14px 16px; gap: 12px; }
  .sy-stat + .sy-stat::before { display: none; }

  .sy-cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sy-cat { height: 190px; }
  .sy-cats-head h2 { font-size: 20px; }
  .sy-cats-all { font-size: 14px; }
}