/*
 * Klever v9 — компактная сетка номеров на телефонах.
 * Bootstrap в старом шаблоне задаёт .col-xs-12 { width: 100% } при 460px,
 * поэтому карточки превращались в очень длинную колонку. Переопределяем
 * это только для сетки номеров на внутренних страницах гостиниц.
 */

@media (max-width: 460px) {
  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    width: calc(100% + 12px) !important;
    margin-right: -6px !important;
    margin-left: -6px !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid > .col-xs-12,
  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid > [class*="col-"] {
    float: none !important;
    width: 50% !important;
    max-width: 50% !important;
    margin: 0 0 14px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
    box-sizing: border-box !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card {
    min-width: 0 !important;
    border-radius: 10px !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card-image {
    aspect-ratio: 4 / 3 !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card .index_slider_title {
    min-height: 42px !important;
    padding: 15px 9px 8px !important;
    font-size: 12px !important;
    line-height: 1.18 !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card-content {
    padding: 9px 9px 10px !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card .index_slider_cena {
    grid-template-columns: 1fr auto auto auto !important;
    gap: 2px !important;
    margin-bottom: 9px !important;
    padding: 7px 7px !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card .index_slider_cena > div,
  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card .index_slider_cena b,
  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card .index_slider_cena span {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card .index_slider_cena strong {
    font-size: 16px !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card-actions {
    gap: 7px !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card .btn-group.more,
  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-booking-button {
    min-height: 33px !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card .btn-group.more .btn.text,
  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-booking-button {
    font-size: 10px !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid .room-card .btn-group.more .btn.arrow {
    width: 31px !important;
  }
}

/* Между 461 и 767px Bootstrap уже рисует две колонки, но оставляем
   равномерные воздушные отступы, чтобы карточки не слипались. */
@media (min-width: 461px) and (max-width: 767.98px) {
  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid {
    margin-right: -8px !important;
    margin-left: -8px !important;
  }

  body.klever-site-page:not(.klever-home-page) .rooms-modern-grid > [class*="col-"] {
    margin-bottom: 16px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
  }
}