/*
 * Адаптация Nuxt-каруселей «Как получить» / «Почему мы?» без Swiper-библиотеки.
 *
 * Подход — CSS Grid с auto-fit вместо горизонтальной полосы. Это:
 *  • не зависит от @media (viewport может «врать» в Safari macOS, iPad Stage
 *    Manager, split-screen и т.п. — grid auto-fit это всё переживает);
 *  • работает БЕЗ JS (правила выставляются на сами теги, не на классы,
 *    которые навешивает скрипт);
 *  • даёт читаемую раскладку на любой ширине: 1 / 2 / 3 / 4 колонки в
 *    зависимости от того, сколько помещается с min-width 280px на ячейку.
 *
 * Селекторы намеренно таргетят сами теги (swiper-container, .swiper-wrapper)
 * — чтобы правила работали даже если landing.js не успел / вовсе не загрузился.
 */

swiper-container,
.swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  /* Сбрасываем всё, что нужно было для горизонтальной полосы */
  flex-direction: initial !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
}

/* swiper-slide приходят с inline-стилями `width:320px; margin-right:24px` —
   inline сильнее CSS, поэтому всё с `!important`. */
swiper-container > *,
.swiper-wrapper > * {
  width: auto !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  /* В исходном CSS у .card и swiper-slide задано height:100% — на Safari
     это растягивает ячейки на всю высоту grid-track. Лочим auto. */
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  flex: initial !important;
  scroll-snap-align: none !important;
}

swiper-container .card,
.swiper-wrapper .card {
  height: auto !important;
  min-height: 0 !important;
  /* `justify-content: space-between` + `gap:24` в исходнике оставляют
     пустоту между текстом и картинкой — на узких карточках это особенно
     заметно. Прижимаем содержимое к верху. */
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 16px !important;
}

/* Иллюстрации в исходнике height:100% — без ограничения они тянутся вверх
   и растягивают карточку. Лимит + object-fit:contain даёт компактный
   квадрат, который видно, но он не доминирует. */
swiper-container .card-image,
swiper-container .phone-image,
.swiper-wrapper .card-image,
.swiper-wrapper .phone-image {
  max-height: 160px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
}

/* На совсем узких экранах ужимаем иллюстрации сильнее, чтобы карточка
   умещалась без скролла даже на iPhone SE. */
@media (max-width: 480px) {
  swiper-container .card-image,
  swiper-container .phone-image,
  .swiper-wrapper .card-image,
  .swiper-wrapper .phone-image {
    max-height: 130px !important;
  }
  swiper-container .card,
  .swiper-wrapper .card {
    padding: 14px !important;
    gap: 8px !important;
  }
}

/* Декоративные стрелки между слайдами, nav-кнопки и GIF-намёк «листай вправо»
   — без Swiper-библиотеки и без горизонтального скролла они бесполезны. */
.slider-icon,
.nav-button,
img[src*="slider-gif"] {
  display: none !important;
}

/* Безопасный сброс для родителя свайпера — оригинал кладёт там
   padding-bottom для swiper-пагинации, который в grid-layout оставляет
   ненужный «хвост». */
.swiper-with-pagination {
  padding-bottom: 0 !important;
}